diff options
Diffstat (limited to 'files/fr/conflicting/tools')
7 files changed, 196 insertions, 0 deletions
diff --git a/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html b/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..ff534ba3ae --- /dev/null +++ b/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,49 @@ +--- +title: 'Examiner, modifier, et espionner des variables' +slug: 'Outils/Débogueur/Comment/Examiner,_modifier,_et_espionner_des_variables' +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)</p> + +<p>La documentation de l'ancienne version du Débogueur est disponible sur la page <a href="/fr/docs/Tools/Debugger_%28before_Firefox_52%29">Débogueur (avant Firefox 52)</a>.</p> +</div> + +<h2 id="Examiner_des_variables">Examiner des variables</h2> + +<p>Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a> du débogueur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées <code>arguments</code> et <code>this</code> ainsi que les variables locales comme <code>user</code> et <code>greeting</code> seront visibles. Dans la portée globale, les variables globales qui ont été définies (<code>greetme</code>) et les variables globales intégrées (<code>localStorage</code>, <code>console</code>…) seront visibles.</p> + +<p>Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.</p> + +<p>Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à <a href="/fr/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> pour des détails sur la signification de ces termes.</p> + +<p>Pour voir les propriétés des objets, il est possible d'utiliser le <a href="#" title="#script filter">filtre de script</a> avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les <a href="/fr/docs/Tools/Debugger/Settings" title="#debugger-settings">options du débogueur</a>.</p> + +<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p> + +<p>Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à <code>(optimized away)</code>, et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable <code>upvar</code> a été optimisée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p> + +<h2 id="Modifier_des_variables">Modifier des variables</h2> + +<p>Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables </a> du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :</p> + +<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p> + +<h2 id="Espionner_une_expression">Espionner une expression</h2> + +<p>Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.</p> + +<p>Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.</p> + +<p>Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :</p> + +<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p> + +<p>À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.</p> diff --git a/files/fr/conflicting/tools/memory/basic_operations/index.html b/files/fr/conflicting/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..2524339f8d --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations/index.html @@ -0,0 +1,15 @@ +--- +title: Comparer deux captures de la heap +slug: Outils/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Comparing_heap_snapshots +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Cette fonctionnalité est une des nouveautés de Firefox 45.</p> +</div> + +<p>À partir de Firefox 45, il est possible d'afficher les différences entre deux captures. Le diff montre où la mémoire a été allouée et où elle a été libérée entre les deux captures.</p> + +<p>Pour créer un diff, il faut cliquer sur le bouton "Comparer les captures" à droite de l'icône en forme d'appareil photo puis sélectionner deux captures à comparer (la première capture fait office de base). Cet outil affiche les différences entre les captures. Il est alors possible d'analyser ces différences avec les mêmes vues que celles d'une capture simple.</p> + +<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p> diff --git a/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html b/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html new file mode 100644 index 0000000000..2c851f8ce6 --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html @@ -0,0 +1,9 @@ +--- +title: Ouvrir l'outil Mémoire +slug: Outils/Memory/Open_the_Memory_tool +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Open_the_Memory_tool +--- +<div>{{ToolsSidebar}}</div><p>Actuellement, l'outil Mémoire n'est pas activé par défaut, pour l'activer, il faut ouvrir les options des outils des développements (F12 puis cliquer sur l'icône en forme d'engrenage en haut à droite) et cocher l'option "Mémoire" dans la catégorie "Outils de développement par défaut" :</p> + +<p>{{EmbedYouTube("SbpiMD4QjjY")}}</p> diff --git a/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html b/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html new file mode 100644 index 0000000000..ac0d2d630f --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html @@ -0,0 +1,9 @@ +--- +title: Capturer un instantané +slug: Outils/Memory/Take_a_heap_snapshot +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Take_a_heap_snapshot +--- +<div>{{ToolsSidebar}}</div><p>Pour prendre une capture de la heap, il faut cliquer sur le bouton "Capturer un instantané" ou cliquer sur l'icône en forme d'appareil photo en haut à gauche :</p> + +<p>{{EmbedYouTube("XbHyxrjRDis")}}</p> diff --git a/files/fr/conflicting/tools/page_inspector/ui_tour/index.html b/files/fr/conflicting/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..26a4192b00 --- /dev/null +++ b/files/fr/conflicting/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,12 @@ +--- +title: Panneau HTML +slug: Outils/Inspecteur/Panneau_HTML +tags: + - HTML + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Page_Inspector/UI_Tour +translation_of_original: Tools/Page_Inspector/HTML_panel +--- +<div>{{ToolsSidebar}}</div><p>Le contenu de cette page à été transféré dans la section "Panneau HTML" de la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane" title="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane"> visite guidée de l'Inspecteur</a>.</p> diff --git a/files/fr/conflicting/tools/performance/waterfall/index.html b/files/fr/conflicting/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..215ce97ad5 --- /dev/null +++ b/files/fr/conflicting/tools/performance/waterfall/index.html @@ -0,0 +1,25 @@ +--- +title: Frise chronologique +slug: Outils/Frise_chronologique +tags: + - Gecko + - Guide + - Tools +translation_of: Tools/Performance/Waterfall +translation_of_original: Tools/Timeline +--- +<div>{{ToolsSidebar}}</div><p>La frise chronologique suit à la trace les opérations réalisées par Gecko, le moteur du navigateur.Il faut aller dans les <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">the devtools options des outils de developemment</a> pour activer la frise chronologique.</p> + +<p>Pour le moment, la frise chronologique couvre les éléments suivants :</p> + +<ul> + <li><em>reflows</em> (aussi appelés <em>Layout</em>) : Le moteur a calculé la géométrie d'un ou plusieurs nœuds.</li> + <li><em>restyle </em>: le style a été recalculé.</li> + <li><em>paint </em>: une partie de la page a été redessinée.</li> + <li><em>console </em>: appels à la fonction <code>console.time(label)</code> et/ou <code>console.timeEnd(label)</code>;</li> + <li><a href="/fr/docs/Web/Events"><em>Éènements DOM</em></a> : les évènements tel que "click", "input", "keydown" etc...</li> +</ul> + +<p>Les opérations reflows, restyle et paint ont lieu dans le "thread" principal et peut retarder ou être retardé à cause des opérations lentes (reflows, exécution de script, beaucoup de restyle, etc...).</p> + +<p><img alt="Timeline Screenshot" src="https://mdn.mozillademos.org/files/8883/timeline.png" style="height: 728px; width: 879px;"></p> diff --git a/files/fr/conflicting/tools/responsive_design_mode/index.html b/files/fr/conflicting/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..086a531ea3 --- /dev/null +++ b/files/fr/conflicting/tools/responsive_design_mode/index.html @@ -0,0 +1,77 @@ +--- +title: Vue Adaptative (avant Firefox 52) +slug: Outils/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page décrit la Vue Adaptative telle qu'elle apparait avant Firefox 52. Il est également possible d'avoir cette version de l'outil si le <a href="https://support.mozilla.org/t5/Manage-preferences-and-add-ons/Enable-multiprocess-support/ta-p/1371917">support multiprocessus (e10s)</a> est désactivé. Pour l'article décrivant la version ultérieure à Firefox 52, voir <a href="/fr/docs/Tools/Responsive_Design_Mode">Vue Adaptative</a>.</p> +</div> + +<p>Un<a href="/fr/docs/Développement_Web/Design_web_Responsive"> <em>responsive design</em></a> est un design qui s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des écrans de tailles différentes.</p> + +<p>La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p> + +<p>La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.</p> + +<p>Bien sûr, vous pourriez simplement redimensionner la fenêtre du navigateur. Mais cela peut être gênant, car tous les onglets sont alors redimensionnés. Et cela peut rendre l'interface du navigateur bien plus dure à utiliser.</p> + +<p>Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.</p> + +<h2 id="Activation_et_désactivation">Activation et désactivation</h2> + +<p>Il existe trois façons d’activer la vue adaptative :</p> + +<ul> + <li>Dans le <strong>menu de Firefox</strong>, sélectionner le sous-menu <strong>Développement</strong> puis <strong>Vue adaptative</strong> (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).</li> + <li>Appuyer sur le bouton <strong>Vue adaptative</strong> de la <a href="/fr/docs/Tools/Tools_Toolbox#Toolbar">barre d’outils de développement</a>.</li> + <li>Sur le clavier, appuyer sur <strong>Ctrl+Maj+M</strong> pour Windows ou Linux, ou Cmd+Option+M pour OS X.</li> +</ul> + +<p>Pour désactiver la vue adaptative :</p> + +<ul> + <li>Sélectionner à nouveau <strong>Vue adaptative</strong> dans le <strong>menu de Firefox</strong>.</li> + <li>Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.</li> + <li>Sur le clavier, appuyer à nouveau sur <strong>Ctrl+Maj+M</strong>, ou sur <strong>Échap.</strong></li> +</ul> + +<h2 id="Redimensionnement">Redimensionnement</h2> + +<p>Vous pouvez redimensionner la zone de contenu de deux façons différentes :</p> + +<ul> + <li>en utilisant le contrôle "<a href="/fr/docs/Outils/Vue_adaptative#select-size">Sélectionner la taille</a></li> + <li>en cliquant-glissant les contrôles situés à droite et en bas, ou celui dans le coin en bas à droite.</li> +</ul> + +<p>Si vous redimensionnez en utilisant le cliquer-glisser, vous pouvez maintenir la touche CTRL (cmd sous Mac) enfoncée pour ralentir la vitesse de redimensionnement afin d'être plus précis.</p> + +<p> </p> + +<div style="overflow: hidden;"> +<h2 id="Contrôles_de_la_vue_adaptative">Contrôles de la vue adaptative</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>En haut de la page sur laquelle la vue adaptative est active se trouvent les six contrôles suivants :</p> + +<dl> + <dt>Fermer</dt> + <dd>Fermer la vue adaptative et retourner à la navigation normale.</dd> + <dt>Sélectionner la taille</dt> + <dd>Sélectionner une résolution parmi des combinaisons de largeur x hauteur; ou définir sa propre résolution</dd> + <dt>Orientation</dt> + <dd>Alterner entre la vue portrait et paysage.</dd> + <dt><strong>Simuler les événements tactiles</strong></dt> + <dd>Activer/Désactiver la simulation des événements tactiles : quand cette option est active, les mouvements de la souris sont convertis en <a href="fr/docs/Web/Guide/API/DOM/Events/Touch_events">événements tactiles.</a></dd> + <dt><strong>Capture d'écran</strong></dt> + <dd>Prendre une capture d'écran de la zone de contenu. Les captures d'écrans seront sauvées dans le dossier de téléchargements de Firefox.</dd> + <dt>Définir un User Agent personnalisé</dt> + <dd><em>Nouveau dans Firefox 47</em>. Entrer une chaine de caractère User Agent et sortir de la boite. Alors la boite deviendra bleue pour signifier que la chaine est utilisée. Firefox inclura la chaine donnée dans les requêtes effectuées uniquement depuis cet onglet. C'est utile pour les sites qui affichent différents contenus en se basant sur le <a href="/fr/docs/Browser_detection_using_the_user_agent">UA sniffing</a>. Supprimer la chaine remet le comportement par défaut.</dd> +</dl> +</div> + +<p> </p> |