diff options
Diffstat (limited to 'files/fr/outils')
157 files changed, 13815 insertions, 0 deletions
diff --git a/files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html b/files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html new file mode 100644 index 0000000000..0aef8b6d19 --- /dev/null +++ b/files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging (before Firefox 68)' +slug: 'Outils/about:debugging/about:debugging_before_Firefox_68' +translation_of: 'Tools/about:debugging/about:debugging_before_Firefox_68' +--- +<div>{{ToolsSidebar}}</div> + +<p>La page about:debugging vous fournit une place ou vous pouvez attacher les outils de développeurs de Firefox a un nombre de debugging targets. En ce moment, il soutien trois sortes principales de target: restartless add-ons, tabs, et workers.</p> + +<h2 id="Ouvrir_la_page_aboutdebugging">Ouvrir la page about:debugging</h2> + +<p>Ils y a plusieurs façons d’ouvrir la page about:debugging:</p> + +<ul> + <li>Cliquez "about:debugging" dans la barre URL de Firefox.</li> + <li><em>Dans</em> Tools > Web Developer menu, cliquez sur "Service Workers".</li> + <li>Sélectionnez Web Developer menu sous menu Hamburger (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), puis sélectionnez "Service Workers".</li> +</ul> + +<p>Quand about:debugging ouvre, a votre gauche, vous allez voir une barre latérale permettant de basculer entre les deux vues principales: une pour add-ons et une pour workers.</p> + +<p>Que system add-ons apparaisse ou non dans la liste sur cette page dépends sur les configurations de préférences de <code>devtools.aboutdebugging.showSystemAddons</code>. Si vous devez voir system add-ons, naviguez ver <code>about:config</code> et assurez-vous que la valeur est réglée sur <code>true</code>.</p> + +<h2 id="Add-ons">Add-ons</h2> + +<div class="note"> +<p>La section Add-ons dans about:debugging soutien seulement les restartless add-ons, en incluent <a href="/en-US/Add-ons/Bootstrapped_extensions">basic bootstrapped extensions</a>, <a href="/en-US/Add-ons/SDK">Add-on SDK add-ons</a>, et <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</p> +</div> + +<p>Cette page vous permet de faire deux choses :</p> + +<ul> + <li>Charger un add-on temporairement d’un disque</li> + <li>Connectez l’<a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a> a tout restartless add-ons</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15009/debugger-revised.png" style="display: block; height: 612px; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<h3 id="Connecter_l’Add-on_Debugger"><strong>Connecter l’Add-on Debugger</strong></h3> + +<div class="note"> +<p>NNotez qu’en ce moment, il est recommandé d’utiliser le Browser Toolbox, pas l’Add-on Debugger, pour le débogage de WebExtensions. Regardez <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> pour plus de détails.</p> +</div> + +<p>La page Add-ons dans about:debugging vous donnes une liste de tous les restartless add-ons qui sont actuellement installés (notez que cette liste pourrait avoir des add-ons inclus qui sont venus préinstaller avec votre Firefox). À côté de chaque entrée est un bouton appeler "Debug".</p> + +<p>Si le bouton "Debug" est désactivé, cocher la boite "Enable add-on debugging".</p> + +<p>Si vous cliquez "Debug", vous allez voir un dialogue vous demandant d’accepter une connexion entrante. Cliquez "OK", et <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> va commencer dans une fenêtre séparée. Notez que parfois la fenêtre débogueur est cacher par la fenêtre principale de Firefox.</p> + +<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p> + +<p>Allez voir la page sure <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> pour toutes les chose vous pouvez faires avec cet outil.</p> + +<div class="note"> +<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">Le </a>bouton "Enable add-on debugging" fonctionne en allumant les preferences <code>devtools.chrome.enabled</code> et <code>devtools.debugger.remote-enabled</code>. Les deux préférences doivent être true pour activer add-on debugging. Cocher la boite définit les deux préférences sur <code>true</code>, et décocher les définit sur <code>false</code>.</p> + +<p>Vous pouvez aussi modifier les préférences directement dans about:config, ou par cocher "Enable browser chrome and add-on debugging toolboxes" et "Enable remote debugging" dans <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +</div> + +<h3 id="Charger_un_add-on_temporaire">Charger un add-on temporaire</h3> + +<p>Avec le bouton "Load Temporary Add-on" n’importe quelle sorte de restartless add-on temporairement, à partir d’un répertoire sur disque. Il suffit de cliquer le bouton, naviguer ver le répertoire contenant le fichier add-on's, et sélectionner n’importe quel fichier dans ce répertoire. L’add-on temporaire sera afficher sous l’en-tête "Temporary Extensions".</p> + +<p>Vous n’avez pas à emballer ou à signer l’add-on. L’add-on restera installer jusqu’au redémarrage de Firefox.</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>Les gros avantages de cette méthode, comparer à installer un add-on d’un XPI, sons:</p> + +<ul> + <li>Vous n’avez pas à reconstruire un XPI et le réinstaller quand vous changez le code d’add-on's</li> + <li>Vous pouvez charger un add-on sans le signer et sans le besoin de désactiver signing.</li> +</ul> + +<h3 id="Modifier_un_add-on_temporaire">Modifier un add-on temporaire</h3> + +<p>Si vous installez l’add-on de cette façon, que-ce passe t’il quand vous modifiez les fichiers add-on’s ?</p> + +<h4 id="Avant_Firefox_48">Avant Firefox 48</h4> + +<ul> + <li>Si vous modifiez des fichiers charger à la demande, comme <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> ou <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, les modifications que vous faites sont détectés et ramassés automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.</li> + <li>Si vous modifiez des fichiers qui restent chargés tout le temps, comme <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background </a>vous pouvez trouver les changements vous avez faites par désactiver et réactiver l’add-on dans la page about:addons.</li> + <li>Si vous modifiez des fichiers qui sont analyses qu’à l’installation, comme le fichier <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>, vous allez devoir recommencer Firefox, et puis charger l’add-on encore.</li> +</ul> + +<div class="note"> +<p>Notez qu’avant Firefox 48, charger l’add-on encore par appuyant "Load Temporary Add-on" sans recommencer Firefox <em>ne fonctionne pas</em>.</p> +</div> + +<h4 id="A_partir_de_Firefox_48">A partir de Firefox 48</h4> + +<ul> +</ul> + +<p>De Firefox 48 et plus tard:</p> + +<ul> + <li>Comme avant: Si vous modifiez des fichiers charger à la demande, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> ou <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, les modifications sont détectées et ramassées automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.</li> + <li>Il y a une meilleure façon de gérer les autres cas: cliquez le bouton "Reload" à côté du bouton "Debug". Cela fait ce qu’il dit: + <ul> + <li>Le rechargement des scripts persistants, comme <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>Analyser le fichier manifest.json encore, donc change à <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> ou n’importe autre clé prendras effet.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p>Notez que dans Firefox 49 et plus tard, le bouton Reload est seulement activer pour les add-ons temporaire. Il va être désactiver pour tout autre add-ons.</p> +</div> + +<h2 id="Tabs">Tabs</h2> + +<p>Dans Firefox 49 et plus tard, une page Tabs est disponible dans <code>about:debugging</code> — cela vous donne une liste complète de tous les onglets débogables ouverts dans l’instance courent Firefox.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<p>Chaque entrée tab à un bouton <em>Debug</em> à-côté — quand cliquer, ceci va ouvrir un toolbox spécifique à l’onglet, vous permettant de déboguer les contenus de cet onglet.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<div class="note"> +<p>Notez que cette fonctionnalité n’est pas immédiatement utile pour le débogage des onglets desktop— vous pouvez ouvrir le toolbox pour déboguer un onglet déjà assez facilement— mais cela va devenir beaucoup plus utile quand <code>about:debugging</code> commence le support pour remote debugging, et cette page peut commencer à lister les onglets disponibles pour le débogage sur navigateurs mobiles, des simulateurs, etc. allez voir {{bug(1212802)}} pour les nouvelles sur ce domaine.</p> +</div> + +<h2 id="Workers">Workers</h2> + +<p>La page Workers vous montre vos workers, categoriser come suit:</p> + +<ul> + <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> + <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> + <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> +</ul> + +<p>Vous pouvez connectez les outils de développeurs à chaque worker, et envoyer des notifications push au service workers.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13058/about-debugging-workers.png" style="display: block; height: 642px; margin-left: auto; margin-right: auto; width: 784px;"></p> + +<h3 id="État_de_service_worker">État de service worker</h3> + +<p>A partir de Firefox 52, la liste de service workers vous montre l’état du service worker dans son <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Trois états sont distingués:</p> + +<ul> + <li><em>"Registering"</em>: ceci couvre tous les états entre l’enregistrement initiale du service worker, et son contrôle des pages. C’est-à-dire, qu’il englobe les états "installing", "activating", et "waiting".</li> + <li><em>"Running"</em>: le service worker est actuellement en-marche. Il est installé et activer, et gère des évènements en ce moment.</li> + <li><em>"Stopped"</em>: le service worker est installer et activer, mais a été terminer apprêt avoir été inactif.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14488/service-worker-status.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<div class="note"> +<p>Cette section utilise une démo simple de ServiceWorker, hébergé a <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> +</div> + +<h3 id="Débogage_de_workers">Débogage de workers</h3> + +<p>Pour un service worker, s’il est déjà en-marche, vous allez voir deux boutons à-côté, étiquetés "Debug" et "Push". S’il n’est pas déjà en-marche, vous verrez un bouton, étiqueté "Start": cliquez dessus pour commencer le service worker.</p> + +<p>Cliquer "Debug" connecte le Débogueur JavaScript et Console a ce worker. Vous pouvez définir des points d’arrêt, step through code, watch variables, evaluate code, etc:</p> + +<p>{{EmbedYouTube("Z8ax79sHWDU")}}</p> + +<h3 id="Enregistrement_des_workers">Enregistrement des workers</h3> + +<p>Premièrement, vous n’allez voir aucun worker lister sous <em>Service Workers</em> ou <em>Shared Workers</em>. Aussitôt qu’un worker est enregistrer, la liste est mis-a-jour:</p> + +<p>{{EmbedYouTube("wy4kyWFhFF4")}}</p> + +<div class="note"> +<p>Avant Firefox 47, les service workers se montrais seulement quand ils étaient actuellement en marche.</p> +</div> + +<h3 id="Désinscrire_les_service_workers">Désinscrire les service workers</h3> + +<div class="geckoVersionNote"> +<p>Nouveaux dans Firefox 48.</p> +</div> + +<p>A partir de Firefox 48, vous allez voir un lien appeler "unregister" à-côté de chaque service worker enregistrees:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13056/unregister-sw.png" style="display: block; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<p>Cliquez le lien pour désinscrire le service worker.</p> + +<h3 id="Envoyer_des_évènements-push_a_des_service_workers">Envoyer des évènements-push a des service workers</h3> + +<div class="note"> +<p>Envoyer des evenements-push dans about:debugging est nouveau dans Firefox 47.</p> +</div> + +<p>Pour déboguer les notifications push, vous pouvez définir un point d'arrêt dans le listener <a href="/en-US/docs/Web/API/PushEvent">push event</a>. Pourtant, vous pouvez aussi déboguez les notifications push localement, sans le besoin d’un server. Juste cliquez sur le bouton "Push" pour envoyer un évènement push au service worker:</p> + +<p>{{EmbedYouTube("62SkLyA-Zno")}}</p> + +<h3 id="Service_workers_pas_compatibles">Service workers pas compatibles</h3> + +<div> +<p>Dans Firefox 49+, un message d’avertissement va être afficher dans la section Service Workers dans la page Workers si les service workers ne sont pas compatibles avec les configurations actuelles du navigateur, et donc ne peuvent pas être utiliser ou déboguer.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13613/sw-not-compatible.png" style="display: block; height: 705px; margin: 0px auto; width: 1011px;"></p> +</div> + +<p>Des Service workers peuvent être indisponible pour plusieurs raisons:</p> + +<ul> + <li>Si vous utilisez une fenêtre Private Browsing.</li> + <li>Si vos preferences d’Historique sont mis a "Never Remember History" ou "Always use private browsing mode".</li> + <li>Si la préférence de <code>dom.serviceWorkers.enable</code> est réglé sur false dans <code>about:config</code>.</li> +</ul> diff --git a/files/fr/outils/about_colon_debugging/index.html b/files/fr/outils/about_colon_debugging/index.html new file mode 100644 index 0000000000..eb669e756c --- /dev/null +++ b/files/fr/outils/about_colon_debugging/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging' +slug: 'Outils/about:debugging' +translation_of: 'Tools/about:debugging' +--- +<div>{{ToolsSidebar}}</div> + +<p>The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p> + +<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2> + +<p>There are several different ways to open about:debugging:</p> + +<ul> + <li>Type "about:debugging" in the Firefox URL bar.</li> + <li><em>New in Firefox 47</em>: in the Tools > Web Developer menu, click "Service Workers".</li> + <li><em>New in Firefox 47</em>: click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Service Workers".</li> +</ul> + +<p>When about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for add-ons and one for workers.</p> + +<p>Le fait que les modules complémentaires système apparaisent dans cette liste ou non, dépend de la préférence <code>devtools.aboutdebugging.showSystemAddons</code>. Pour afficher ces modules complémentaires, il est nécéssaire de la passer à <code>true</code> dans <code>about:config</code>.</p> + +<h2 id="Add-ons">Add-ons</h2> + +<div class="note"> +<p>The Add-ons section in about:debugging only supports restartless add-ons, including <a href="/en-US/Add-ons/Bootstrapped_extensions">basic bootstrapped extensions</a>, <a href="/en-US/Add-ons/SDK">Add-on SDK add-ons</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</p> +</div> + +<p>This page enables you to do two things:</p> + +<ul> + <li>Load an add-on temporarily from disk</li> + <li>Connect the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a> to any restartless add-ons</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15009/debugger-revised.png" style="display: block; height: 612px; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<h3 id="Connecting_the_Add-on_Debugger">Connecting the Add-on Debugger</h3> + +<div class="note"> +<p>Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> +</div> + +<p>The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".</p> + +<p>If the "Debug" button is disabled, check the "Enable add-on debugging" box.</p> + +<p>If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.</p> + +<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p> + +<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> + +<div class="note"> +<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">The "Enable add-on debugging" button</a> works by turning on the <code>devtools.chrome.enabled</code> and <code>devtools.debugger.remote-enabled</code> preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to <code>true</code>, and unchecking it sets them both to <code>false</code>.</p> + +<p>You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +</div> + +<h3 id="Loading_a_temporary_add-on">Loading a temporary add-on</h3> + +<p>With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory. The temporary add-on will be displayed under the "Temporary Extensions" header.</p> + +<p>You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>The big advantages of this method, compared with installing an add-on from an XPI, are:</p> + +<ul> + <li>you don't have to rebuild an XPI and reinstall when you change the add-on's code</li> + <li>you can load an add-on without signing it and without needing to disable signing.</li> +</ul> + +<h3 id="Updating_a_temporary_add-on">Updating a temporary add-on</h3> + +<p>If you install the add-on in this way, what happens when you update the add-on's files?</p> + +<h4 id="Before_Firefox_48">Before Firefox 48</h4> + +<ul> + <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> + <li>If you change files that stay loaded the whole time, like <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a>, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.</li> + <li>If you change files that are only parsed at install time, like the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file, you'll need to restart Firefox, then load the add-on again.</li> +</ul> + +<div class="note"> +<p>Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox <em>does not work</em>.</p> +</div> + +<h4 id="Firefox_48_onwards">Firefox 48 onwards</h4> + +<ul> +</ul> + +<p>From Firefox 48 onwards:</p> + +<ul> + <li>as before: if you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> + <li>there's a better way to handle the other cases: click the "Reload" button next to the "Debug" button. This does what it says: + <ul> + <li>reloading any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>parsing the manifest.json file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys will take effect.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p>Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.</p> +</div> + +<h2 id="Tabs">Tabs</h2> + +<p>In Firefox 49 onwards, a Tabs page is available in <code>about:debugging</code> — this provides a complete list of all the debuggable tabs open in the current Firefox instance.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<p>Each tab entry has a <em>Debug</em> button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<div class="note"> +<p>Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when <code>about:debugging</code> starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.</p> +</div> + +<h2 id="Workers">Workers</h2> + +<p>The Workers page shows your workers, categorised as follows:</p> + +<ul> + <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> + <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> + <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> +</ul> + +<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13058/about-debugging-workers.png" style="display: block; height: 642px; margin-left: auto; margin-right: auto; width: 784px;"></p> + +<h3 id="Service_worker_state">Service worker state</h3> + +<p>From Firefox 52, the list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are distinguished:</p> + +<ul> + <li><em>"Registering"</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the "installing", "activating", and "waiting" states.</li> + <li><em>"Running"</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> + <li><em>"Stopped"</em>: the service worker is installed and activated, but has been terminated after being idle.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14488/service-worker-status.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<div class="note"> +<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> +</div> + +<h3 id="Debugging_workers">Debugging workers</h3> + +<p>For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.</p> + +<p>Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:</p> + +<p>{{EmbedYouTube("Z8ax79sHWDU")}}</p> + +<h3 id="Registering_workers">Registering workers</h3> + +<p>At first, you won't see any workers listed under <em>Service Workers</em> or <em>Shared Workers</em>. As soon as a worker is registered, the listing is updated:</p> + +<p>{{EmbedYouTube("wy4kyWFhFF4")}}</p> + +<div class="note"> +<p>Before Firefox 47, service workers were only shown when they were actually running.</p> +</div> + +<h3 id="Unregistering_service_workers">Unregistering service workers</h3> + +<div class="geckoVersionNote"> +<p>New in Firefox 48.</p> +</div> + +<p>Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13056/unregister-sw.png" style="display: block; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<p>Click the link to unregister the service worker.</p> + +<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> + +<div class="note"> +<p>Sending push events in about:debugging is new in Firefox 47.</p> +</div> + +<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:</p> + +<p>{{EmbedYouTube("62SkLyA-Zno")}}</p> + +<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> + +<div> +<p>In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13613/sw-not-compatible.png" style="display: block; height: 705px; margin: 0px auto; width: 1011px;"></p> +</div> + +<p>Service workers can be unavailable for several reasons:</p> + +<ul> + <li>If you are using a Private Browsing window.</li> + <li>If your History preference is set to "Never Remember History" or "Always use private browsing mode".</li> + <li>If the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</li> +</ul> diff --git a/files/fr/outils/accessing_the_developer_tools/index.html b/files/fr/outils/accessing_the_developer_tools/index.html new file mode 100644 index 0000000000..648bfbea9a --- /dev/null +++ b/files/fr/outils/accessing_the_developer_tools/index.html @@ -0,0 +1,21 @@ +--- +title: Le Menu Développement +slug: Outils/Accessing_the_Developer_Tools +translation_of: Tools/Accessing_the_Developer_Tools +--- +<div>{{ToolsSidebar}}</div><p>Le menu "Développement" est le moyen principal d'accéder aux outils de développement qui sont intégrés à Firefox. Sous OS X et Linux, ce menu est un sous menu du menu "Outils" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5269/web-developer-tools-menu-osx.png"></p> + +<p>Sous Windows, il est directement dans le menu de Firefox :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5271/web-developer-tools-menu-windows-7.png" style="height: 595px; width: 506px;"></p> + +<p>Le menu "Développement" est découpé en quatre parties :</p> + +<ul> + <li>La première partie liste les outils qui sont présent dans la <a href="/fr/docs/Outils/Outils_boite_%C3%A0_outils" title="/fr/docs/Outils/Outils_boite_%C3%A0_outils">Boite à outils</a>, qui est une fenêtre dédiée aux outils de développement.</li> + <li>La deuxième partie liste les outils intégrés à Firefox, mais qui ne sont pas dans la <a href="/fr/docs/Outils/Outils_boite_%C3%A0_outils" title="/fr/docs/Outils/Outils_boite_%C3%A0_outils">Boite à outils</a>, ainsi que les outils qui sont des modules complémentaires.</li> + <li>La troisième partie est un lien pour obtenir plus d'outils.</li> + <li>La quatrième partie est un lien pour travailler hors ligne.</li> +</ul> diff --git a/files/fr/outils/add-ons/index.html b/files/fr/outils/add-ons/index.html new file mode 100644 index 0000000000..77d2801897 --- /dev/null +++ b/files/fr/outils/add-ons/index.html @@ -0,0 +1,13 @@ +--- +title: Modules complémentaires +slug: Outils/Add-ons +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div> + +<p>Il s'agit des outils de développement qui ne sont pas directement intégrés à Firefox, mais disponibles en tant que module complémentaire.</p> + +<dl> + <dt><a href="https://addons.mozilla.org/fr/firefox/addon/websocket-monitor/">WebSocket Monitor </a> {{obsolete_inline}}</dt> + <dd>Permet d'examiner les données échangées via une connexion WebSocket. Ce module complémentaire n'est plus disponible car il nécessite des versions de Firefox trop anciennes. <a href="https://addons.mozilla.org/en-US/firefox/addon/websocketsniff">WebSocket Sniffer</a> est une alternative, il n'est pas aussi détaillé mais peut aider.</dd> +</dl> diff --git a/files/fr/outils/ardoise/index.html b/files/fr/outils/ardoise/index.html new file mode 100644 index 0000000000..2f635d3b5a --- /dev/null +++ b/files/fr/outils/ardoise/index.html @@ -0,0 +1,127 @@ +--- +title: Ardoise JavaScript +slug: Outils/Ardoise +tags: + - Firefox + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Archive/Tools/Scratchpad +--- +<div>{{ToolsSidebar}}</div> + +<div class="blockIndicator warning"> +<p>L'ardoise est dépréciée depuis Firefox 70 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1565380" rel="noopener" title="FIXED: Add deprecation warning to Scratchpad">bug 1565380</a>), et a été supprimée dans Firefox 72 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1519103" rel="noopener" title="FIXED: Remove Scratchpad panel">bug 1519103</a>). Comme alternative, depuis Firefox 71, vous pouvez utiliser <a href="https://wiki.developer.mozilla.org/fr/docs/Outils/Console_Web/The_command_line_interpreter#Le_mode_%C3%A9diteur_multiligne">le mode éditeur multiligne de la console JavaScript</a>, ce mode posséde des fonctionnalités d'ouverture et de sauvegarde dans un fichier.</p> +</div> + +<p>L'ardoise JavaScript propose un environnement pour expérimenter avec du code JavaScript. Vous pouvez écrire du code qui interagit directement avec le contenu d'une page web.</p> + +<p>Contrairement à la <a href="/fr/docs/Outils/Web_Console" title="fr/Utiliser_la_Console_Web">Console Web</a> qui ne peut interpréter qu'une ligne de code à la fois, l'ardoise JavaScript permet d'éditer des extraits de code plus importants et de les exécuter de manières diverses, en fonction de l'utilisation désirée.</p> + +<p>{{EmbedYouTube("Pt7DZACyClM")}}</p> + +<div class="blockIndicator note"> +<p>Le tutoriel vidéo ci-dessus montre un cas d'utilisation de l'Ardoise JavaScript avec une page tournant sur un serveur web local. Il est également possible d'utiliser l'Ardoise JavaScript sur des pages ouvertes depuis le système de fichier local, si les permissions courantes le permettent. Mais même avec des restrictions en place, le code HTML peut être soit édité manuellement soit copiés de la source et collés dans la page "about:blank" (nouvel onglet) avec l'usage du menu contextuel "Éditer en tant qu'HTML" de <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur.</a></p> +</div> + +<h2 id="Utilisation">Utilisation</h2> + +<h3 id="Ouvrir_lardoise_JavaScript">Ouvrir l'ardoise JavaScript</h3> + +<p>Il y a différentes façons d'ouvrir l'ardoise JavaScript dans une fenêtre dédiée :</p> + +<ul> + <li>Utiliser le raccourci clavier <kbd>Maj</kbd> + <kbd>F4</kbd>, ou aller dans le menu "Développement" (qui est un sous-menu du menu outils sur macOS et Linux), et sélectionner ensuite "Ardoise JavaScript"</li> + <li>cliquer sur l'icône (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), dans la barre d'outils principale ou dans le menu principal (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), puis sélectionner "Ardoise JavaScript".</li> +</ul> + +<p>Cela ouvrira l'ardoise JavaScript dans une nouvelle fenêtre.</p> + +<h3 id="Ouvrir_lardoise_JavaScript_dans_la_boite_à_outils">Ouvrir l'ardoise JavaScript dans la boite à outils</h3> + +<div class="geckoVersionNote">Nouveau dans Firefox 47.</div> + +<p>Depuis Firefox 47, il est possible d'ouvrir l'ardoise dans les <a href="/fr/docs/Tools/Tools_Toolbox">outils de développement</a>. Il faut pour avant tout cocher la case "Ardoise" dans la section "Outils de développement par défaut" des <a href="/fr/docs/Tools/Tools_Toolbox#Settings_2">options des outils</a> page.</p> + +<p>L'ardoise est maintenant disponible dans la boite à outils aux cotés des autres outils tels que l'Inspecteur et la Console. Ce mode est particulièrement utile combiné avec la <a href="/fr/docs/Tools/Web_Console/Split_console">console scindée </a>: Il est alors possible d'utiliser l'ardoise pour avoir un éditeur multiligne persistant, et la Console pour interagir avec la page.</p> + +<h3 id="Édition">Édition</h3> + +<p>La fenêtre de l'ardoise ressemble à ceci (sur macOS la barre de menu est en haut de l'écran) :</p> + +<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p> + +<p>Le menu « <em>Fichier</em> » propose des options pour charger et sauvegarder les extraits de code JavaScript, permettant leur réutilisation ultérieure.</p> + +<h4 id="Complétion_de_code">Complétion de code</h4> + +<p>L'ardoise JavaScript intègre le <a href="http://ternjs.net/">moteur d'analyse de code tern</a>. Il est utilisé pour fournir des suggestions d'autocomplétion et des popups d'information sur le symbole courant. Pour lister les suggestions d'autocomplétion, appuyez sur <kbd>Ctrl</kbd> + <kbd>Espace</kbd>.</p> + +<p>Par exemple, essayez de taper "d", puis d'appuyer sur <kbd>Ctrl</kbd> + <kbd>Espace</kbd>. Vous devriez voir :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>L'icône à côté de chaque suggestion indique le type, et la suggestion mise en évidence affiche la popup avec plus d'information. Les touches <kbd>↑</kbd> et <kbd>↓</kbd> permettent de défiler parmi les suggestions et la touche <kbd>Entrée</kbd> ou <kbd>Tab</kbd> sélectionne la suggestion en surbrillance.</p> + +<h4 id="documentation_popup">documentation popup</h4> + +<p>Pour afficher la popup de documentation; il faut appuyer sur <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd> lorsque le curseur est sur un identifieur. Par exemple si vous tapez <code>document</code>.<code>addEventListener</code>, puis appuyer sur <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd>, affichera une popup contenant le résumé de la syntaxe de la fonction ainsi qu'un court résumé :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Le lien "[docs]" pointe sur la documentation MDN pour le symbole.</p> + +<h3 id="Exécution">Exécution</h3> + +<p class="note">Une fois que vous avez écrit votre code, sélectionnez le code à exécuter. Si vous ne sélectionnez rien, tout le code de la fenêtre sera exécuté. Puis choisissez comment vous voulez que le code soit exécuté : en utilisant les boutons en haut de la fenêtre ou par le menu contextuel (accessible avec le clic droit de la souris). Le code est exécuté dans le contexte de l'onglet actuellement sélectionné. Toutes les variables que vous déclarez en dehors d'une fonction seront ajoutées à l'objet global de cet onglet.</p> + +<h4 id="Exécuter">Exécuter</h4> + +<p>Lorsque vous choisissez l'option "Exécuter", le code sélectionné s'exécute. C'est ce que vous utilisez si vous voulez exécuter une fonction ou du code qui manipule le contenu de la page sans avoir besoin de voir le résultat.</p> + +<h4 id="Examiner">Examiner</h4> + +<p>L'option "Examiner" exécute le code comme l'option précédente ; cependant, après l'exécution, un inspecteur d'objet s'ouvre pour vous permettre d'examiner la valeur retournée.</p> + +<p>Par exemple, si vous entrez le code :</p> + +<pre>window +</pre> + +<p>Et que vous choisissez « <em>Examiner</em> », vous obtenez une fenêtre d'inspecteur qui ressemblera à ceci :</p> + +<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p> + +<h4 id="Afficher">Afficher</h4> + +<p>L'option « <em>Afficher</em> » exécute le code sélectionné, puis insère le résultat directement dans la fenêtre de l'ardoise, dans un commentaire. Ainsi, il est possible de l'utilisé en tant que <a href="http://fr.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL.</a></p> + +<h4 id="Recharger_et_exécuter">Recharger et exécuter</h4> + +<p>L'option "Recharger et exécuter" est seulement disponible dans le menu contextuel (clic droit). Il recharge tout d'abord la page, puis exécute le code lorsque la page déclenche l'évènement "load". C'est utile lorsque vous vous voulez exécuter dans un environnement sans modification.</p> + +<h2 class="editable" id="Exécuter_lArdoise_JavaScript_dans_le_contexte_du_navigateur">Exécuter l'Ardoise JavaScript dans le contexte du navigateur</h2> + +<p>Il est possible d'exécuter l'ardoise dans le contexte du navigateur lui-même. Pour cela, il est nécessaire de cocher l'option «Activer le débogage du chrome et des modules » dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings_2">options des outils de développement</a> . Une fois cela fait, le menu « <em>Environnement</em> » a une option « <em>Navigateur</em> » . Lorsqu'elle est sélectionnée, le contexte est le navigateur entier et non plus uniquement le contenu de la page courante. Il est facile de le constater en examinant ces globales :</p> + +<pre class="brush: js">window +/* +[object ChromeWindow] +*/ + +gBrowser +/* +[object XULElement] +*/</pre> + +<p>Le contexte d'exécution de l'Ardoise JavaScript est sur le navigateur lorsqu'un fichier a le commentaire<br> + <code>// -sp-context: browser</code><br> + sur sa première ligne.</p> + +<h2 id="Raccourcis_clavier">Raccourcis clavier</h2> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p> + +<h3 id="Éditeur_de_source">Éditeur de source</h3> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> diff --git a/files/fr/outils/boîte_à_outils_du_navigateur/index.html b/files/fr/outils/boîte_à_outils_du_navigateur/index.html new file mode 100644 index 0000000000..1d8cb4f77c --- /dev/null +++ b/files/fr/outils/boîte_à_outils_du_navigateur/index.html @@ -0,0 +1,77 @@ +--- +title: Boîte à outils du navigateur +slug: Outils/Boîte_à_outils_du_navigateur +tags: + - Debug + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +<div>{{ToolsSidebar}}</div> + +<p>La boite à outils du navigateur, permet de déboguer des modules complémentaires ainsi que le code JavaScript du navigateur lui-même, contrairement à la <a href="/fr/docs/Outils/Outils_boite_à_outils">boite à outils normale</a> qui ne fonctionne que pour les pages ordinaires. Ainsi, le contexte de la boite à outils du navigateur est le navigateur entier au lieu d'une simple page d'un seul onglet.</p> + +<div class="note"> +<p><em>Note: Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le <a href="/fr/Add-ons/Add-on_Debugger">Débogeur de modules</a>. Pour les modules qui n'ont pas ces deux caractéristiques, la boite à outils du navigateur est suffisante.</em></p> +</div> + +<h2 id="Activer_la_boite_à_outils_du_navigateur">Activer la boite à outils du navigateur</h2> + +<div> +<p>La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant".</p> + +<p>Ces options se trouvent dans les <a href="/fr/docs/Tools/Settings">options</a> des outils de développement, dans la section "<a href="/fr/docs/Tools/Settings#Advanced_settings">Paramètres avancés</a>" :</p> + +<p><img alt="Developer Tools Settings" src="https://mdn.mozillademos.org/files/16236/settings_for_browser_debugger.png" style="border: 1px solid black; display: block; height: 744px; margin: 0 auto; width: 900px;"></p> +</div> + +<h2 id="Ouvrir_la_boite_à_outils_du_navigateur">Ouvrir la boite à outils du navigateur</h2> + +<p>Il est possible d'ouvrir la boite, en ouvrant le menu (bouton <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ) puis en ouvrant le menu "Développement", puis en choisissant "Boite à outils du contenu du navigateur".</p> + +<p>Depuis Firefox 39, il est également possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd> ( <kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd> sur un Mac).</p> + +<p>Une pop-up s'ouvrira alors (ce comportement peut être désactivé en passant la propriété <code>devtools.debugger.prompt-connection</code> à false dans about:config) :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11119/browser-toolbox-warning.png" style="display: block; height: 326px; margin-left: auto; margin-right: auto; width: 600px;">Cliquer sur OK, ouvrira la boite à outils du navigateur dans sa propre fenêtre :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11121/browser-toolbox.png">Il est alors possible d'inspecter le chrome du navigateur ainsi que de voir et déboguer tous les fichiers chargés par le navigateur lui-même et par tous les modules qui sont fonctionnels. Les outils disponibles sont les suivants :</p> + +<ul> + <li><a href="/fr/docs/Tools/Debugger">Débogueur</a> (<em>Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le <a href="/fr/Add-ons/Add-on_Debugger">Débogueur de modules</a>.)</em></li> + <li><a href="/fr/docs/Tools/Browser_Console">Console</a></li> + <li><a href="/fr/docs/Tools/Style_Editor">Éditeur de style</a></li> + <li><a href="/fr/docs/Tools/Profiler">Performance</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a></li> + <li><a href="/fr/docs/Tools/Scratchpad">Ardoise JavaScript</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a></li> + <li><a href="/fr/docs/Outils/Inspecteur_accessibilite">Inspecteur de l'accessibilité</a></li> +</ul> + +<p>Il est possible de déboguer les pages chrome: et about: en utilisant le <a href="/fr/docs/Tools/Debugger">Débogueur</a> normal, comme si il s'agissait de pages de contenu ordinaires.</p> + +<h2 id="Cibler_un_document">Cibler un document</h2> + +<p>dans la boite à outils normaux, il y a un <a href="/fr/docs/Tools/Working_with_iframes">bouton dans la barre d'outils qui permet de cibler des iframes spécifiques dans le document</a>. Le même bouton apparaît dans la boîte à outils du navigateur où il liste toutes les fenêtres de chrome et de contenu de niveau supérieur ainsi que les iframes qu'elles contiennent. Cela vous permet d'inspecter les documents dans des fenêtres chromées et des fenêtres contextuelles individuelles, ainsi que dans des onglets de contenu.</p> + +<p>Voici par exemple ce que le bouton liste lorsqu'il y a deux fenêtres ouvertes, l'une avec un seul onglet, l'autre avec deux :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11117/browser-toolbox-iframes.png"></p> + +<h2 id="Déboguer_des_popups">Déboguer des popups</h2> + +<p>Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez <strong>Désactiver le masquage automatique des popups</strong>.</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16234/popup_auto-hide.png" style="display: block; height: 249px; margin: 0px auto; width: 350px;"></p> + +<p>Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche <kbd>Echap</kbd> . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :</p> + +<p>{{EmbedYouTube("6edXcunw4jM")}}</p> + +<p>Il est possible d'utiliser la même technique pour déboguer les <a href="/fr/Add-ons/WebExtensions/Debugging#Debugging_popups">pop-up crées par les modules</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: Ce changement n'est pas persistant au redémarrage du navigateur. Lorsque vous fermez la boîte à outils du navigateur, le réglage est effacé.</p> +</div> diff --git a/files/fr/outils/console_javascript/index.html b/files/fr/outils/console_javascript/index.html new file mode 100644 index 0000000000..7125ea0544 --- /dev/null +++ b/files/fr/outils/console_javascript/index.html @@ -0,0 +1,195 @@ +--- +title: Console JavaScript +slug: Outils/Console_JavaScript +tags: + - Browser + - Debugging + - Tools + - Web Development + - 'WebDevelopment:Tools' +translation_of: Tools/Browser_Console +--- +<div>{{ToolsSidebar}}</div> + +<div class="boxed translate-rendered"> +<p>La Console du navigateur est au navigateur entier ce qu'est la <a href="/fr/docs/Tools/Web_Console"> Console Web</a> à une page web.</p> + +<p>Elle logue le même type d'information de la Console Web : Requêtes réseaux, JavaScript, CSS, erreurs et avertissement de sécurité, messages logués par du code JavaScript. Cependant, au lieu de loguer cette information pour un seul onglet, la console logue l"information de tout les onglets courants, de tout les modules complémentaires et du propre code du navigateur.</p> + +<p>Si vous voulez également utiliser les autres outils de développement de la <a href="/fr/docs/Tools/Tools_Toolbox">Boite à outils Web</a> sur les modules complémentaires ou le code du navigateur, vous pouvez utiliser la <a href="/fr/docs/Tools/Browser_Toolbox">Boite à outils du navigateur</a>.</p> + +<p>Comme la Console Web, la Console du navigateur peut exécuter des expressions JavaScript. Cependant, contrairement à la Console Web qui exécute le code dans le contexte de la page, la Console du navigateur, elle, l'exécute dans le contexte de la fenêtre du navigateur. Cela veut dire que vous pouvez interagir avec chaque onglet du navigateur, en utilisant la variable globale <a href="/fr/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a>. Il est même possible d’interagir avec le XUL utilisé pour spécifier l'interface utilisateur du navigateur.</p> + +<div class="geckoVersionNote"> +<p>NB : La ligne de commande de la Console du navigateur (pour exécuter des expressions JavaScript) est désactivée par défaut. Pour l'activer, il faut passer la préférence <code>devtools.chrome.enabled</code> à <code>true</code> dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les <a href="/fr/docs/Tools_Toolbox#Advanced_settings">options des outils de développement</a>.</p> +</div> + +<h2 id="Ouvrir_la_Console_du_navigateur">Ouvrir la Console du navigateur</h2> + +<p>Il est possible d'ouvrir la Console du navigateur de deux façons différentes :</p> + +<ol> + <li>Depuis le menu Firefox : Il faut sélectionner "Console du navigateur" dans le menu "'Développement" (sous macOS, le menu "Développement" est un sous menu du menu "Outils")</li> + <li>Utiliser le raccourci clavier : <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>J</kbd> sur Windows et <kbd>Cmd</kbd>+<kbd>Maj</kbd>+<kbd>J</kbd> sur Mac.</li> +</ol> + +<p>Alternativement, il est possible d'ouvrir la Console du navigateur en laçant Firefox en ligne de commande avec l'argument</p> + +<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> + +<p>La Console du navigateur ressemble a ceci :</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p> + + + +<p>Comme vous pouvez le constater, la Console du navigateur ressemble et se comporte comme la <a href="/fr/docs/Tools/Web_Console"> Console Web </a>:</p> + +<ul> + <li>La plupart de la fenêtre est occupé par un <a href="/fr/docs/Tools/Web_Console#Message_Display_Pane">panneau d'affichage</a></li> + <li>Une <a href="/fr/docs/Tools/Web_Console#Filtering_and_searching">barre d'outils </a>se trouve en haut et permet de filtrer les messages qui apparaissent.</li> + <li>Un <a href="/fr/docs/Tools/Web_Console#The_command_line_interpreter">interpréteur de ligne de commande </a>en bas, permet d'évaluer des expressions JavaScript.</li> +</ul> + +<p>À partir de Firefox 68, la console du navigateur permet d'afficher ou de cacher les messages de contenu (les messages des scripts de toutes les pages ouvertes). Il suffit pour cela de cocher la case "<strong>Afficher les messages de contenu</strong>". L'image suivante montre la même page, mais avec la case cochée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p> + + + +<h2 id="Messages_de_la_Console_du_navigateur">Messages de la Console du navigateur</h2> + +<p>La Console du navigateur affiche le même type de messages que la Console Web. Elle affiche donc :</p> + +<ul> + <li><a href="/fr/docs/Tools/Web_Console#HTTP_requests">Les requêtes HTTP</a></li> + <li><a href="/fr/docs/Tools/Web_Console#Warnings_and_errors">Les avertissements et erreurs </a>(incluant le JavaScript, le CSS, les avertissements et erreurs de sécurité, et les messages affichés par du code JavaScript utilisant <a href="/fr/docs/Web/API/console">l'API console</a>)</li> + <li><a href="/fr/docs/Tools/Web_Console#Input.2Foutput_messages">Les messages d'entrée/sortie </a>: les commandes envoyées au navigateur via ligne de de commande, et les résultats de l’exécution ces commandes.</li> +</ul> + +<p>Cependant, la Console du Navigateur affiche les messages venant du :</p> + +<ul> + <li>Contenu web contenu dans tous les onglets du navigateur</li> + <li>Code du navigateur</li> + <li>Contenu des modules complémentaires.</li> +</ul> + +<h3 id="Messages_des_modules_complémentaires">Messages des modules complémentaires</h3> + +<p>La Console du navigateur affiche les messages envoyés par chaque module complémentaire de Firefox.</p> + +<h4 id="Console.jsm">Console.jsm</h4> + +<p>Pour utiliser l'API console depuis un modèle complémentaire traditionnel, il faut l'obtenir grâce au module "Console".</p> + +<p>Un mot réservé importé par Console.jsm est "console". L'exemple ci-dessous accède au module puis ajoute un message dans la Console du navigateur :</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm"); +console.log("Hello from Firefox code"); //output messages to the console</pre> + +<p>Pour en savoir plus :</p> + +<ul> + <li><a href="/fr/docs/Web/API/console">Documentation de l'API console</a></li> + <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Le code source de Console.jsm dans the Mozilla Cross-Reference</a></li> +</ul> + +<h4 id="HUDService">HUDService</h4> + +<p>HUDService permet également d'accéder à la Console du navigateur. Ce module est disponible dans <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. Ce module permet non seulement d’accéder à la Console du navigateur, mais également à la Console Web.</p> + +<p>Voici un exemple qui explique comment effacer le contenu de la Console du navigateur :</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); +hud.jsterm.clearOutput(true);</pre> + +<p>Il est possible d'accéder au contexte du document de la Console du navigateur avec HUDService. L'exemple ci-dessous efface la contenu de la Console du navigateur quand l'utilisateur survole le bouton "Clear" :</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); + +var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); +clearBtn.addEventListener('mouseover', function() { + hud.jsterm.clearOutput(true); +}, false);</pre> + +<h4 id="Fonctionnalités_bonus_disponibles">Fonctionnalités bonus disponibles</h4> + +<p>Pour les modules complémentaires utilisant le <a href="https://addons.mozilla.org/fr/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a>, l'API console est disponible automatiquement. Voici un exemple de module complémentaire qui affiche une erreur quand l'utilisateur clique sur un widget :</p> + +<pre class="brush: js">widget = require("sdk/widget").Widget({ + id: "an-error-happened", + label: "Error!", + width: 40, + content: "Error!", + onClick: logError +}); + +function logError() { + console.error("something went wrong!"); +}</pre> + +<p><a href="https://addons.mozilla.org/fr/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">Compiler ceci en tant que fichier XPI</a>, puis ouvrir la Console du navigateur, puis ouvrir le fichier XPI dans Firefox et l'installer fera apparaître un widget nommé "Error!" dans la barre des modules complémentaires :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png">Cliquer sur l’icône affichera ce message dans la console :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png"></p> + +<p>Les messages des modules complémentaires basés sur le Add-on SDK sont préfixés par le nom du module complémentaire (ici "log-error"), rendant ainsi la recherche de ces messages facile grâce à la <a href="/fr/docs/Tools/Web_Console#Filtering_and_searching">boite de filtrage</a>. Par défaut, seuls les messages d’erreur sont affichés dans la console. Il est cependant possible de changer cela dans <a href="/fr/Add-ons/SDK/Tools/console#Logging%20Levels">préférences du navigateur</a>.</p> + +<h2 id="Ligne_de_commande_de_la_Console_du_navigateur">Ligne de commande de la Console du navigateur</h2> + +<div class="geckoVersionNote"> +<p>La ligne de commande de la Console du navigateur est désactivée par défaut. Pour l'activer, il faut passer la préférence <code>devtools.chrome.enabled</code> à <code>true</code> dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les <a href="/fr/docs/Tools/Settings">options des outils de développement</a>.</p> +</div> + +<p>Comme la Console Web, l'interpréteur de ligne de commande permet d'évaluer des expressions JavaScript en temps réel :<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png">Comme la Console Web, elle supporte également <a href="/fr/docs/Tools/Web_Console#Autocomplete">l'autocomplétion</a>, <a href="/fr/docs/Tools/Web_Console#Command_history">l'historique</a>, de nombreux <a href="/fr/docs/Tools/Web_Console#Keyboard_shortcuts">raccourcis clavier </a>et des <a href="/fr/docs/Tools/Web_Console#Helper_commands">fonctions d'aide</a>. Si le résultat d'une commande est un objet, Il est possible de cliquer dessus <a href="/fr/docs/Tools/Web_Console#Inspecting_objects">pour voir ses détails</a>.</p> + +<p>Alors que la Console Web exécute le code dans le contexte de la page à laquelle elle est rattachée, la Console du navigateur elle exécute le code dans la contexte du navigateur. Il est possible de vérifier cela en évaluant l'objet <code>window</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png"></p> + +<p>Cela signifie qu'il est possible de contrôler le navigateur, il est ainsi possible de : ouvrir et fermer onglets et fenêtres, changer leur contenu et modifier l'interface utilisateur en créant, modifiant ou supprimant des éléments XUL.</p> + +<h3 id="Contrôler_le_navigateur">Contrôler le navigateur</h3> + +<p>L'interpréteur de ligne de commande a accès à l'objet <a href="/fr/docs/XUL/tabbrowser"><code>tabbrowser</code></a> à travers la variable globale <code>gBrowser</code>. Cela permet de contrôler le navigateur via ligne de commande. Entrer ce code dans la ligne de commande de la Console du navigateur modifiera l’onglet ouvert puis redirigera automatiquement vers le site de Mozilla (bon à savoir, pour sauter une ligne dans l'interpréteur, utilisez le <kbd>Maj</kbd>+<kbd>Entrée</kbd>) :</p> + +<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab); +newTabBrowser.addEventListener("load", function() { + newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>"; +}, true); +newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre> + +<p>Cela ajoute un écouteur sur l'évènement <code>load</code> qui absorbera la nouvelle page puis chargera la nouvelle page.</p> + +<div class="note"> +<p>Il est possible de relancer le navigateur avec avec la commande <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) ou <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac). Cette commande redémare le navigateur avec les même onglets qu'avant le rédémarage.</p> +</div> + +<h3 id="Modifier_l'interface_utilisateur_du_navigateur">Modifier l'interface utilisateur du navigateur</h3> + +<p>Étant donné que l’objet <code>window</code> correspond au chrome du navigateur, il est possible de modifier l'interface utilisateur du navigateur. Sur Windows, le code suivant ajoutera un nouvel objet au menu principal du navigateur. (Attention, ce code ne marche pas dans les versions récentes de Firefox) :</p> + +<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png">Sur macOS, ce code ajoutera un objet au menu "Tools" :</p> + +<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png"></p> +</div> diff --git a/files/fr/outils/console_web/console_messages/index.html b/files/fr/outils/console_web/console_messages/index.html new file mode 100644 index 0000000000..6115351784 --- /dev/null +++ b/files/fr/outils/console_web/console_messages/index.html @@ -0,0 +1,469 @@ +--- +title: Console messages +slug: Outils/Console_Web/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +<div>{{ToolsSidebar}}</div> + +<p>La majorité de la Console Web est occupée par le panneau d'affichage des messages :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p> + +<p>Chaque message est affiché sur une nouvelle ligne.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; height: 152px; margin-left: auto; margin-right: auto; width: 795px;"></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Temps</th> + <td>La date et heure à laquelle le message a été enregistré. Cette information n'est pas affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils</td> + </tr> + <tr> + <th scope="row">Catégorie</th> + <td> + <p>Indique le type de message :</p> + + <ul> + <li><strong>Noir </strong>: Requête HTTP</li> + <li><span style="color: #0099ff;"><strong>Bleu </strong></span> : Avertissement/erreur CSS</li> + <li><strong><span style="color: #ff8c00;">Orange </span></strong> : Avertissement/erreur JavaScript</li> + <li><span style="color: #ff0000;"><strong>Rouge</strong></span> : Avertissement/erreur de sécurité</li> + <li>Vert : Logs serveur</li> + <li><span style="color: #a9a9a9;"><strong>Gris léger </strong></span> : Message de l'API <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console</a></li> + <li><span style="color: #696969;"><strong>Gris foncé</strong></span> : Messages d'entrées/sorties de la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande JavaScript</a></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Type</th> + <td>Pour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif</td> + </tr> + <tr> + <th scope="row">Message</th> + <td>Le message lui-même</td> + </tr> + <tr> + <th scope="row">Nombre d’occurrences</th> + <td>Si une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée</td> + </tr> + <tr> + <th scope="row"><strong>Nom du fichier et numéro de ligne</strong></th> + <td> + <p>Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message.</p> + + <p>Depuis Firefox 36, cela inclut le nombre de colones également.</p> + </td> + </tr> + </tbody> +</table> + +<p>Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.</p> + +<h2 id="Categories_de_messages">Categories de messages</h2> + +<h3 id="Requêtes_réseau">Requêtes réseau</h3> + + + +<div class="note"> +<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000;">Les messages réseau ne sont pas affichés par défaut. Il faut utiliser la fonctionnalité de <a href="/fr/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtrage</a> pour les afficher.</span></p> +</div> + + + +<p>Les requêtes résseau sont affichées sous cette forme :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; height: 139px; margin-left: auto; margin-right: auto; width: 664px;"></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Temps</th> + <td>La date et heure à laquelle le message a été enregistré</td> + </tr> + <tr> + <th scope="row"><strong>Catégorie</strong></th> + <td>Indique que ce message concerne une requête HTTP</td> + </tr> + <tr> + <th scope="row"><strong>Méthode</strong></th> + <td> + <p>La méthode HTTP utilisée</p> + + <p>Si la requête à été faite avec <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, il y a une notre aditionelle :</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> + </td> + </tr> + <tr> + <th scope="row"><strong>URI</strong></th> + <td>L'URI cible</td> + </tr> + <tr> + <th scope="row"><strong>Résumé</strong></th> + <td>La version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer</td> + </tr> + </tbody> +</table> + +<p>Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :</p> + +<p>Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.</p> + +<p>Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.</p> + +<p>Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.</p> + +<h4 id="XHR">XHR</h4> + +<p>From Firefox 38 onwards, the Web Console indicates when a network request was made as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> + +<p>Also from Firefox 38 onwards, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filter</a> the network requests so as to only see XMLHttpRequests.</p> + +<p>Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> feature to show them.</p> + +<h3 id="Erreurs_et_avertissements_JavaScript">Erreurs et avertissements JavaScript</h3> + +<p>Les messages JavaScript ressemblent à :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="sect1"></h3> + +<h3 id="Erreurs_CSS_avertissements_et_évènements_de_reflow">Erreurs CSS, avertissements et évènements de <em>reflow</em></h3> + +<p>Les messages CSS ressemblent à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Par défaut, les avertissements CSS ne sont pas affichés.</p> + +<h4 id="Évènements_de_reflow">Évènements de reflow</h4> + +<p>La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.<br> + Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.<br> + <br> + Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.<br> + <br> + Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".<br> + <br> + Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/7087/web-console-reflow-asynch.png" style="height: 53px; width: 554px;"><br> + Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7089/web-console-reflow-synch.png"><br> + Cliquez sur le lien pour ouvrir le fichier dans le <a href="/fr/docs/Tools/Debugger">Débogueur</a>.</p> + +<h4 id="Reflows_synchrones_et_asynchrones">Reflows synchrones et asynchrones</h4> + +<p>Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("<em>computed style</em>") à retourner.</p> + +<p>Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :</p> + +<pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">var</span> thing <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">"the-thing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +thing<span class="punctuation token">.</span>style<span class="punctuation token">.</span>display <span class="operator token">=</span> <span class="string token">"inline-block"</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> thingHeight <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle<span class="punctuation token">(</span></span>thing<span class="punctuation token">)</span><span class="punctuation token">.</span>height<span class="punctuation token">;</span></code> +</pre> + +<p>A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.</p> + +<h3 id="Avertissements_et_erreurs_de_sécurité">Avertissements et erreurs de sécurité</h3> + +<p>Les avertissements et les erreurs de sécurité ressemblent à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.</p> + +<p>La liste complète des messages de sécurité est la suivante :</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Message</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Blocage du chargement du contenu mixte actif</td> + <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + </tr> + <tr> + <td>Blocage du chargement du contenu mixte non actif</td> + <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + </tr> + <tr> + <td>Chargement de contenu mixte actif (non sécurisé) sur une page sécurisée</td> + <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + </tr> + <tr> + <td>Chargement de contenu mixte non actif (non sécurisé) sur une page sécurisée</td> + <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + </tr> + <tr> + <td>Le site spécifie un en-tête X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.</td> + <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td> + </tr> + <tr> + <td>Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place.</td> + <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td> + </tr> + <tr> + <td>Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td> + <td>Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.</td> + </tr> + <tr> + <td>Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td> + <td>Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.</td> + </tr> + <tr> + <td>Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td> + <td>Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.</td> + </tr> + <tr> + <td>Le site a spécifié un en-tête Strict-Transport-Security invalide.</td> + <td>Voir <a href="/fr/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> pour plus d'informations</td> + </tr> + <tr> + <td> + <div class="geckoVersionNote"> + <p>New in Firefox 36</p> + </div> + + <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p> + </td> + <td> + <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p> + + <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="https://developer.mozilla.org/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p> + + <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Le Bug 863874</a> est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.</p> + +<h3 id="Message_console_API">Message console API</h3> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa <a href="/fr/docs/Web/API/console">page de documentation</a>.</p> + +<h4 id="Messages_derreurs">Messages d'erreurs</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Contenu du message</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.error"><code>error()</code></a></td> + <td> + <p>L'argument à <code>error()</code>.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"> + <p>A partir de Firefox 31, la console affiche la pile complète des erreurs :</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">call_error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">call_error<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7745/console-error-stack.png" style="display: block; height: 109px; margin-left: auto; margin-right: auto; width: 497px;"></p> + </td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.exception"><code>exception()</code></a></td> + <td>Un alias de <code>error()</code>.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></td> + <td> + <p>Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"My assertion always fails"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"> + <p>A partir de Firefox 31, la console affiche la pile complète des insertions :</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"assertion failed"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">call_assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">call_assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7743/console-assert-stack.png" style="display: block; height: 111px; margin-left: auto; margin-right: auto; width: 497px;"></p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Messages_davertissement">Messages d'avertissement</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Contenu du message</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></td> + <td> + <p>L'argument à <code>warn()</code>.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">warn<span class="punctuation token">(</span></span><span class="string token">"a warning"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Messages_dinformation">Messages d'information</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Contenu du message</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.info"><code>info()</code></a></td> + <td> + <p>L'argument à <code>info()</code>.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">info<span class="punctuation token">(</span></span><span class="string token">"some info"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Message_de_log">Message de log</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Contenu du message</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.count"><code>count()</code></a></td> + <td> + <p>Le label fourni, si présent, et le nombre d'occurrences que <code>count()</code> a appelé avec le label donné.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span>user<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + </td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.log"><code>log()</code></a></td> + <td> + <p><code>L'argument à log()</code>.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"logged"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></td> + <td>Trace de la pile. + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">trace<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></td> + <td> + <p>Liste les propriétés d'un objet.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js"><span class="keyword token">var</span> user <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">'user'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">dir<span class="punctuation token">(</span></span>user<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.time"><code>time()</code></a></td> + <td> + <p>Notifie que le timer a démarré.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">time<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></td> + <td> + <p>Durée du timer.</p> + + <pre class="brush: js language-js notranslate"> +<code class="language-js">console<span class="punctuation token">.</span><span class="function token">timeEnd<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.table"><code>table()</code></a></td> + <td> + <div class="geckoVersionNote"> + <p>Ce message est une des nouveautés de Firefox 34.</p> + </div> + + <p>Affiche des données de tableau comme un tableau.</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Messages_groupés">Messages groupés</h4> + +<p>il est possible d'utiliser<code> console.group()</code> pour créer des groupes indentés dans la console. Voir <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> pour plus d'informations.</p> + +<h4 id="Personnalisation_des_messages">Personnalisation des messages</h4> + +<p>Depuis Firefox 31, il est possible d'utiliser le spécificateur de format <code>"%c"</code> pour personnaliser les messages console :</p> + +<pre class="brush: js language-js notranslate"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"%cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: red; font-style: italic"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div> + +<h3 id="Messages_dentréesortie">Messages d'entrée/sortie</h3> + +<p>Les commandes envoyées au navigateur en utilisant <a href="#command-line" title="#command-line">la ligne de commande de la Console Web</a>, et les réponses correspondantes, sont affichés de cette façon :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.</p> + +<h3 id="Filtrer_et_rechercher"><a name="filtering-and-searching">Filtrer et rechercher</a></h3> + +<p>Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 924px;">To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).</p> + +<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p> + +<p>Enfin, vous pouvez aussi vider la Console Web de tous ses messages.</p> diff --git a/files/fr/outils/console_web/fonctions_d_aide/index.html b/files/fr/outils/console_web/fonctions_d_aide/index.html new file mode 100644 index 0000000000..f367005482 --- /dev/null +++ b/files/fr/outils/console_web/fonctions_d_aide/index.html @@ -0,0 +1,82 @@ +--- +title: Fonctions d'aide de la Console Web +slug: Outils/Console_Web/Fonctions_d_aide +tags: + - Debugging + - Web Development + - web console +translation_of: Tools/Web_Console/Helpers +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Les_commandes">Les commandes</h2> + +<p>La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.</p> + +<ul> + <li>Un sélecteur passé à <code>document.querySelector</code> pour localiser l'iframe.</li> + <li>L'élément iframe lui même</li> + <li>La fenêtre de contenu de l'iframe</li> +</ul> + +<dl> + <dt><code>$()</code></dt> + <dd>Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à {{ domxref("document.querySelector()") }}, ou appelle la fonction $ de la page, si elle existe.</dd> + <dt><code>$$()</code></dt> + <dd>Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de {{ domxref("document.querySelectorAll()") }}</dd> + <dd>Depuis Firefox 41, cette méthode n'est plus un raccourci pour {{ domxref("document.querySelectorAll()")}} et à la place retourne un tableau d'éléments.</dd> + <dt><code>$0</code></dt> + <dd>L'élément actuellement inspecté sur la page.</dd> + <dt><code>$_</code></dt> + <dd><em>Nouveau dans Firefox 39. </em>Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis <kbd>entrée</kbd> et ensuite $_ puis <kbd>entrée</kbd>, la console affichera 4.</dd> + <dt><code>$x()</code></dt> + <dd>Evalue une expression <a href="/fr/docs/XPath" title="/fr/docs/XPath">XPath </a>et renvoie un tableau des nœuds correspondant.</dd> + <dt><code>keys()</code></dt> + <dd>À partir d'un objet, retourne une liste de ses clefs (<em>keys</em>, ou nom de propriété) . C'est un raccourci de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a>.</dd> + <dt><code>values()</code></dt> + <dd>À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec <code>keys()</code>.</dd> + <dt><code>clear()</code></dt> + <dd>Vide l'affichage des messages de la console.</dd> + <dt><code>inspect()</code></dt> + <dd>À partir d'un objet, ouvre un inspecteur d'objet.</dd> + <dt><code>pprint()</code></dt> + <dd>Formate la valeur fournie sous une forme lisible (<em>pretty-print)</em> ; utile pour afficher le contenu d'objets ou de tableaux.</dd> + <dt><code>help()</code></dt> + <dd>Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.</dd> + <dt><code>cd()</code></dt> + <dd>Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Cet helper accepte différent inputs. Il est possible de fournir :</dd> + <dd>Voir <a href="/fr/docs/Tools/Web_Console#Working_with_iframes" title="/fr/docs/Tools/Web_Console#Working_with_iframes">travailler avec des iframes</a>.</dd> + <dt><code>copy()</code></dt> + <dd><em>Nouveau dans Firefox 38.</em> Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quelle. Sinon la méthode <code><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code> sera appelée sur l'argument et le résultat sera copié dans le presse-papier.</dd> + <dt><code>clearHistory()</code></dt> + <dd><em>Nouveau dans Firefox 39.</em> Exactement comme une ligne de commande normale, la ligne de commande de la console <a href="/fr/docs/Tools/Web_Console#Command_history">se souvient des commandes tapées</a>.</dd> + <dt>Référez-vous à l'<a href="/fr/docs/Web/API/console" title="/fr/docs/Web/API/console">API Console</a> pour plus d'informations sur comment journaliser depuis le contenu.</dt> +</dl> + +<h2 id="Variables">Variables</h2> + +<dl> + <dt id="tempN">temp<em>N</em></dt> + <dd>L'option <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">"Utiliser dans la Console"</a> de l'Inspecteur génère une variable pour un noeud nommé <code>temp0</code>, <code>temp1</code>, <code>temp2</code>, etc. Afin de référencer le noeud.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_Voir_le_contenu_dun_nœud_DOM">Exemple : Voir le contenu d'un nœud DOM</h3> + +<p>Supposons que nous avons un nœud DOM avec l'ID "content". En fait, la page que vous êtes en train de lire actuellement en possède un, vous pouvez ainsi directement ouvrir la Console Web et essayer.</p> + +<p>Regardez le contenu du nœud en utilisant les fonctions <code>$()</code> et <code>inspect()</code> :</p> + +<pre class="brush: js notranslate">inspect($("#content"))</pre> + +<p>Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".</p> + +<h3 id="Exemple_Afficher_le_contenu_dun_nœud_DOM">Exemple : Afficher le contenu d'un nœud DOM</h3> + +<p>Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction <code>pprint()</code> :</p> + +<pre class="brush: js notranslate">pprint($("#content")) +</pre> + +<p>Ceci écrit tout le contenu du nœud afin que vous puissiez le lire. Bien entendu, cette commande est plus utile sur des objets autres qu'un nœud DOM.</p> diff --git a/files/fr/outils/console_web/index.html b/files/fr/outils/console_web/index.html new file mode 100644 index 0000000000..7660506e93 --- /dev/null +++ b/files/fr/outils/console_web/index.html @@ -0,0 +1,47 @@ +--- +title: Console Web +slug: Outils/Console_Web +tags: + - Debugging + - Guide + - Security + - Tools + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +<div>{{ToolsSidebar}}</div> + +<p><strong>La Console Web :</strong></p> + +<ol> + <li>Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.</li> + <li>Permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Web_Console/Opening_the_Web_Console">Ouvrir la Console Web</a></dt> + <dd>Commencer à utiliser la Console Web.</dd> + <dt><a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">L'interpréteur de ligne de commande</a></dt> + <dd>Interagir avec un document en utilisant la Console.</dd> + <dt><a href="/fr/docs/Tools/Web_Console/Split_console">Console scindée</a></dt> + <dd>Utiliser la Console à côté d'autres outils.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Web_Console/Console_messages">Les messages de la console</a></dt> + <dd>Les détails des messages que la Console enregistre.</dd> + <dt><a href="/fr/docs/Tools/Web_Console/Rich_output">Informations détaillées</a></dt> + <dd>Voir et interagir avec les objets affichés par la Console.</dd> + <dt><a href="/fr/docs/Tools/Web_Console/Keyboard_shortcuts">Raccourcis clavier</a></dt> + <dd>Référence des raccourcis.</dd> +</dl> +</div> +</div> diff --git a/files/fr/outils/console_web/keyboard_shortcuts/index.html b/files/fr/outils/console_web/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..ddff3cf238 --- /dev/null +++ b/files/fr/outils/console_web/keyboard_shortcuts/index.html @@ -0,0 +1,12 @@ +--- +title: Raccourcis clavier +slug: Outils/Console_Web/Keyboard_shortcuts +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "web-console") }}</p> + +<h2 id="Global_shortcuts">Global shortcuts</h2> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/fr/outils/console_web/opening_the_web_console/index.html b/files/fr/outils/console_web/opening_the_web_console/index.html new file mode 100644 index 0000000000..aa1a5fd0d7 --- /dev/null +++ b/files/fr/outils/console_web/opening_the_web_console/index.html @@ -0,0 +1,29 @@ +--- +title: Ouvrir la Console web +slug: Outils/Console_Web/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>Pour ouvrir la Console web, il faut :</p> + +<ul> + <li>Soit sélectionner "Console Web" dans le sous-menu "Développement" du menu de Firefox ( sous Mac OS X, il s'agit du menu "Outils")</li> + <li>Soit utiliser le raccourci clavier <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>K</kbd> (<kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>K</kbd> sous OS X).</li> +</ul> + +<p>La <a href="/fr/docs/Tools/DevTools_Window" title="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra en bas de la fenêtre du navigateur, avec la Console Web activée (elle s'appelle simplement "Console" dans la barre d'outils des outils de développement) :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p> + +<p>L'interface de la Console web est séparée en trois sections horizontales :</p> + +<ul> + <li><a href="/fr/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">La Barre d'outils </a>se trouve en haut et contient trois boutons. Cliquer sur la corbeille efface le contenu de la Console. Cliquer sur l'entonnoir filtre les messages affichés dans la Console. La case à cocher à droite active les journaux persistant (pas d'effaçage au rechargement ou changement de page)</li> + <li><a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">La Ligne de commande</a> se trouve tout en bas, commence par ">>", et permet d'entrer des expressions JavaScript.</li> + <li><a href="/fr/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Le panneau d'affichage des messages</a> se trouve entre la barre d'outils et la ligne de commande et occupe la plupart de la fenêtre. Il affiche les divers messages de la console.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Il est possible de vider le contenu de la console avec le raccourci clavier <kbd>Ctrl</kbd> + <kbd>L</kbd> (Windows, Linux) ou <kbd>Cmd</kbd> + <kbd>K</kbd> sous macOS.</p> +</div> diff --git a/files/fr/outils/console_web/rich_output/index.html b/files/fr/outils/console_web/rich_output/index.html new file mode 100644 index 0000000000..cf1a2a8146 --- /dev/null +++ b/files/fr/outils/console_web/rich_output/index.html @@ -0,0 +1,77 @@ +--- +title: Informations Détaillées +slug: Outils/Console_Web/Rich_output +translation_of: Tools/Web_Console/Rich_output +--- +<div>{{ToolsSidebar}}</div> + +<p>Lorsque la console Web, affiche des objets, elle inclut un ensemble d'informations plus riche que juste le nom de l'objet. En particulier elle :</p> + +<ul> + <li><a href="/fr/docs/Tools/Web_Console/Rich_output#Type-specific_rich_output">Fournit des informations supplémentaires sur certains types</a></li> + <li><a href="/fr/docs/Tools/Web_Console/Rich_output#Examining_object_properties">Permet un examen détaillé des propriétés de l'objet</a></li> + <li><a href="/fr/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">Fournit des informations plus riches sur les éléments DOM, et permet de les sélectionner dans l'Inspecteur</a></li> +</ul> + +<h2 id="Information_spécifique_aux_types">Information spécifique aux types</h2> + +<p>La Console Web fournit des informations supplémentaires pour une bonne partie des types d'objets, cela inclut les types suivants :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>Object</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Array</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Date</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Promise</code></td> + <td> + <div class="geckoVersionNote"> + <p>New in Firefox 36</p> + </div> + + <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p> + </td> + </tr> + <tr> + <td><code>RegExp</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Window</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Document</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Element</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Event</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td> + </tr> + </tbody> +</table> + +<h2 id="Examiner_les_propriétés_d'un_objet">Examiner les propriétés d'un objet</h2> + +<p>Lorsqu'un objet est affiché dans la console, il apparait avec une petite icône en forme de triangle en début de ligne. Cliquer dessus affichera une liste de son contenu.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16430/console_logObject.png" style="border: 1px solid black; display: block; height: 239px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h2 id="Mettre_en_surbrillance_les_noeuds_DOM">Mettre en surbrillance les noeuds DOM</h2> + +<p>Lors d'un survol, sur un noeud DOM affiché dans la console, il sera mis en surbrillance dans la page :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">Dans la capture d'écran ci-dessous, il est possible de remarquer une "cible" bleue à côté de du noeud : cliquer dessus ouvrira l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a> avec ce noeud sélectionné.</p> diff --git a/files/fr/outils/console_web/split_console/index.html b/files/fr/outils/console_web/split_console/index.html new file mode 100644 index 0000000000..8ead94713a --- /dev/null +++ b/files/fr/outils/console_web/split_console/index.html @@ -0,0 +1,20 @@ +--- +title: Console scindée +slug: Outils/Console_Web/Split_console +translation_of: Tools/Web_Console/Split_console +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible (et très pratique) d'utiliser la Console web en parallèle d'autres outils. Il suffit pour cela d'être dans un autre outil de développement et d'appuyer sur <kbd>Échap</kbd> ou bien d'appuyer sur le bouton "Afficher la console scindée" dans le menu de la <a href="/fr/docs/Tools_Toolbox#Toolbar">Barre d'outils</a>. La boite à outils sera alors scindée, avec l'outil de base en haut et la console en dessous.</p> + +<p>Il est possible de fermer la console scindée en appuyant à nouveau sur <kbd>Échap</kbd>, ou en utilisant le bouton "Fermer la console scindée".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>Comme d'ordinaire <code>$0</code> sert de raccourci pour l'élément sélectionné actuellement dans l'inspecteur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;">Lors de l'utilisation de la Console scindée avec le Débogueur, la portée (scope) de la console correspond à celle du Débogueur. Ainsi si le code s'arrête à un point d'arrêt dans une fonction, la portée sera celle de la fonction. En comme si ça n'était pas assez, il y a également de l'auto complétion en fonction de la portée, cela permet par exemple de modifier les objets de la fonction facilement et rapidement :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p> diff --git a/files/fr/outils/console_web/the_command_line_interpreter/index.html b/files/fr/outils/console_web/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..631bcd0ef8 --- /dev/null +++ b/files/fr/outils/console_web/the_command_line_interpreter/index.html @@ -0,0 +1,161 @@ +--- +title: Interpreteur de ligne de commande +slug: Outils/Console_Web/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.</p> + +<h2 id="Le_mode_ligne_unique">Le mode ligne unique</h2> + +<p>Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de <strong>>></strong>.</p> + +<p><img alt="Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web" src="https://mdn.mozillademos.org/files/16672/web_console.png"></p> + +<p>Pour ajouter des expressions il suffit de les saisir dans la ligne de commande et d'appuyer sur <kbd>Entrée</kbd>. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser <kbd>Maj</kbd><kbd>Entrée</kbd> au lieu de <kbd>Entrée</kbd>.</p> + +<p>L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :</p> + +<p><img alt="Retour de la Console Web avec coloration syntactique" src="https://mdn.mozillademos.org/files/16670/console_01.png"></p> + +<p>Si votre expression n'a pas l'air d'être complète lorsque <kbd>Entrée</kbd> est pressée, alors la console considère qu'il s'agit en fait d'un <kbd>Maj</kbd>+<kbd>Entrée</kbd> , permettant ainsi de finir l'expression.</p> + +<p>Par exemple, si vous tapez :</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> toto<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span></code></pre> + +<p>et que vous appuyiez sur <kbd>Entrée</kbd>, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé <kbd>Maj</kbd>+<kbd>Entrée</kbd> , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.</p> + +<h2 id="Le_mode_éditeur_multiligne">Le mode éditeur multiligne</h2> + +<p>Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" <img alt="Icone passer en mode éditeur multiligne" src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17176/2ca78324ebc4b5c4666959a5ed606dfd/icone-multiligne.png"> à droite de la zone de saisie du mode ligne unique ou pressez <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). L'éditeur multiligne s'ouvre à gauche de la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. </p> + +<p><img alt="Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png"></p> + +<p>À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche <kbd>Entrée</kbd>. Pour exécuter le morceau de code que vous avez saisi, cliquez sur <img alt='le bouton "Exécuter"' src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17177/4778932832bd7aaae5ad75968643f4c7/executer.png"> au dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>Entrée</kbd> (ou <kbd>Cmd</kbd>+<kbd>Return</kbd> sur MacOS).</p> + +<p>Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :</p> + +<ul> + <li>Pour ouvrir un fichier, appuyez sur <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. </li> + <li>Pour sauvegarder le contenu de la zone d'édition, appuyez sur <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.</li> +</ul> + +<p>Pour revenir au mode ligne unique, cliquez sur l'icône <strong>X </strong>au-dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> + +<h2 id="Accéder_à_des_variables">Accéder à des variables</h2> + +<p>Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme <code>window</code> et des variables ajoutées par du code JavaScript comme <code>jQuery </code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png"></p> + +<h2 id="Autocomplétion">Autocomplétion</h2> + +<p>La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png"></p> + +<p>Appuyer sur <kbd>Entrée</kbd>, <kbd>Tab</kbd>, ou Flèche Droite, acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.</p> + +<p>Les suggestions d'autocomplétion sont sensibles à la case.</p> + +<p>La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.</p> + +<p>Les suggestions fonctionnent pour les tableaux également :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png"></p> + +<h2 id="Définir_des_variables">Définir des variables</h2> + +<p>Il est possible de définir ses propres variables et d'y accéder par la suite :</p> + +<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png"></p> + +<p>Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.</p> + +<div class="blockIndicator note"> +<p>Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.</p> +</div> + +<h2 id="Historique_de_commandes">Historique de commandes</h2> + +<p>La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.</p> + +<p>Cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">fonction d'aide</a> <code>clearHistory()</code>.</p> + +<p>À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.<br> + <br> + Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png"></p> + +<p>Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png"></p> + +<p>Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.</p> + +<h2 id="Travailler_avec_des_iframes">Travailler avec des iframes</h2> + +<p>Si une page contient des <a href="/fr/docs/Web/HTML/Element/iframe">iframes</a>, il est possible d'utiliser la commande <code>cd()</code> pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant <code>cd()</code>:</p> + +<p>Il est possible de passer l'élément DOM de l'iframe :</p> + +<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>Il est possible de passer un sélecteur CSS qui correspond à l'iframe :</p> + +<pre class="brush: js notranslate">cd("#frame1");</pre> + +<p>Il est possible de passer l'objet global window de l'iframe :</p> + +<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +cd(frame.contentWindow);</pre> + +<p>Pour revenir au contexte de la fenêtre principale, il suffit d'appeler <code>cd()</code> sans paramètres :</p> + +<pre class="brush: js notranslate">cd();</pre> + +<p>Par exemple, supposons que nous avons un document qui inclut une iframe :</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>Cette iframe définit une nouvelle fonction :</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>Il est possible de changer de contexte comme ceci :</p> + +<pre class="brush: js notranslate">cd("#frame1");</pre> + +<p>Le document de l'objet global window est maintenant celui de l'iframe :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png">Et il est alors possible d'appeler la fonction définie dans l'iframe :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png"></p> + +<h2 id="Commandes_daide">Commandes d'aide</h2> + +<p>{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}</p> diff --git a/files/fr/outils/couleurs_des_devtools/index.html b/files/fr/outils/couleurs_des_devtools/index.html new file mode 100644 index 0000000000..afe2c7f12a --- /dev/null +++ b/files/fr/outils/couleurs_des_devtools/index.html @@ -0,0 +1,331 @@ +--- +title: Couleurs des DevTools +slug: Outils/Couleurs_des_DevTools +tags: + - CSS +translation_of: Tools/DevToolsColors +--- +<div>{{ToolsSidebar}}</div> + +<div class="warning"> +<p>Ne changez aucune des ces valeurs sans l’approbation de l'UX. Si une des valeurs doit être changée, il sera alors nécessaire de modifier du code CSS dans<code> /browser/themes/*/devtools/</code>. Remplissez un bug Devtools si besoin.</p> +</div> + +<p class="summary"><span class="seoSummary">Ce tableau liste les couleurs et les variables CSS tels qu'implémentées dans le thème sombre et clair de des outils de développement.</span></p> + +<table> + <thead> + <tr> + <th> </th> + <th>Thème sombre</th> + <th>Thème lumineux</th> + <th>Variable CSS</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="3"> + <h3 id="Couleurs_Chrome">Couleurs Chrome</h3> + </th> + <th> </th> + </tr> + <tr> + <th>Onglets de barre d'outils</th> + <td> + <div class="swatch" style="background: #252c33;"> </div> + + <p>#252c33<br> + rgba(37, 44, 51, 1)</p> + </td> + <td> + <div class="swatch" style="background: #ebeced;"> </div> + #ebeced<br> + rgba(235, 236, 237, 1)</td> + <td>--theme-tab-toolbar-background</td> + </tr> + <tr> + <th>Barre d'outils</th> + <td> + <div class="swatch" style="background: #343c45;"> </div> + #343c45<br> + rgba(52, 60, 69, 1)</td> + <td> + <div class="swatch" style="background: #f0f1f2;"> </div> + #f0f1f2<br> + rgba(240, 241, 242, 1)</td> + <td>--theme-toolbar-background</td> + </tr> + <tr> + <th>Fond de sélection</th> + <td> + <div class="swatch" style="background: #1d4f73;"> </div> + #1d4f73<br> + rgba(29, 79, 115, 1)</td> + <td> + <div class="swatch" style="background: #4c9ed9;"> </div> + #4c9ed9<br> + rgba(76, 158, 217, 1)</td> + <td>--theme-selection-background</td> + </tr> + <tr> + <th>Couleur du texte de sélection</th> + <td> + <div class="swatch" style="background: #f5f7fa;"> </div> + #f5f7fa<br> + rgba(245, 247, 250, 1)</td> + <td> + <div class="swatch" style="background: #f5f7fa;"> </div> + #f5f7fa<br> + rgba(245, 247, 250, 1)</td> + <td>--theme-selection-color</td> + </tr> + <tr> + <th>Séparateurs</th> + <td> + <div class="swatch" style="background: #000000;"> </div> + #000000<br> + rgba(0, 0, 0, 1)</td> + <td> + <div class="swatch" style="background: #aaaaaa;"> </div> + #aaaaaa<br> + rgba(170, 170, 170, 1)</td> + <td>--theme-splitter-color</td> + </tr> + <tr> + <th>Commentaires</th> + <td> + <div class="swatch" style="background: #5c6773;"> </div> + + <p>#5c6773<br> + rgba(92, 103, 115, 1)</p> + </td> + <td> + <div class="swatch" style="background: #747573;"> </div> + + <p>#747573<br> + rgba(116, 117, 115, 1)</p> + </td> + <td>--theme-comment</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="3"> + <h3 id="Couleurs_de_contenu">Couleurs de contenu</h3> + </th> + <th> </th> + </tr> + <tr> + <th>Fond du "Body"</th> + <td> + <div class="swatch" style="background: #14171a;"> </div> + #14171a<br> + rgba(17, 19, 21, 1)</td> + <td> + <div class="swatch" style="background: #fcfcfc;"> </div> + #fcfcfc<br> + rgba(252, 252, 252, 1)</td> + <td>--theme-body-background</td> + </tr> + <tr> + <th>Fond de la "Sidebar"</th> + <td> + <div class="swatch" style="background: #181d20;"> </div> + #181d20<br> + rgba(24, 29, 32, 1)</td> + <td> + <div class="swatch" style="background: #f7f7f7;"> </div> + #f7f7f7<br> + rgba(247, 247, 247, 1)</td> + <td>--theme-sidebar-background</td> + </tr> + <tr> + <th>Fond de l'Attention</th> + <td> + <div class="swatch" style="background: #b28025;"> </div> + #b28025<br> + rgba(178, 128, 37, 1)</td> + <td> + <div class="swatch" style="background: #e6b064;"> </div> + #e6b064<br> + rgba(230, 176, 100, 1)</td> + <td>--theme-contrast-background</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="3"> + <h3 id="Couleurs_de_texte">Couleurs de texte</h3> + </th> + <th> </th> + </tr> + <tr> + <th>Texte du "Body"</th> + <td> + <div class="swatch" style="background: #8fa1b2;"> </div> + #8fa1b2<br> + rgba(143, 161, 178, 1)</td> + <td> + <div class="swatch" style="background: #18191a;"> </div> + #18191a<br> + rgba(24, 25, 26, 1)</td> + <td>--theme-body-color</td> + </tr> + <tr> + <th>Texte de premier plan gris</th> + <td> + <div class="swatch" style="background: #b6babf;"> </div> + #b6babf<br> + rgba(182, 186, 191, 1)</td> + <td> + <div class="swatch" style="background: #585959;"> </div> + #585959<br> + rgba(88, 89, 89, 1)</td> + <td>--theme-body-color-alt</td> + </tr> + <tr> + <th>Texte de contenu de haut contraste</th> + <td> + <div class="swatch" style="background: #a9bacb;"> </div> + #a9bacb<br> + rgba(169, 186, 203, 1)</td> + <td> + <div class="swatch" style="background: #292e33;"> </div> + #292e33<br> + rgba(41, 46, 51, 1)</td> + <td>--theme-content-color1</td> + </tr> + <tr> + <th>Texte de contenu gris</th> + <td> + <div class="swatch" style="background: #8fa1b2;"> </div> + #8fa1b2<br> + rgba(143, 161, 178, 1)</td> + <td> + <div class="swatch" style="background: #8fa1b2;"> </div> + #8fa1b2<br> + rgba(143, 161, 178, 1)</td> + <td>--theme-content-color2</td> + </tr> + <tr> + <th>Texte de contenu gris sombre</th> + <td> + <div class="swatch" style="background: #667380;"> </div> + #667380<br> + rgba(102, 115, 128, 1)</td> + <td> + <div class="swatch" style="background: #667380;"> </div> + #667380<br> + rgba(102, 115, 128, 1)</td> + <td>--theme-content-color3</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="3"> + <h3 id="Couleurs_de_surbrillance">Couleurs de surbrillance</h3> + </th> + <th> </th> + </tr> + <tr> + <th>Bleu</th> + <td> + <div class="swatch" style="background: #46afe3;"> </div> + #46afe3<br> + rgba(70, 175, 227, 1)</td> + <td> + <div class="swatch" style="background: #0088cc;"> </div> + #0088cc<br> + rgba(0, 136, 204, 1)</td> + <td>--theme-highlight-blue</td> + </tr> + <tr> + <th>Violet</th> + <td> + <div class="swatch" style="background: #6b7abb;"> </div> + #6b7abb<br> + rgba(107, 122, 187, 1)</td> + <td> + <div class="swatch" style="background: #5b5fff;"> </div> + #5b5fff<br> + rgba(91, 95, 255, 1)</td> + <td>--theme-highlight-purple</td> + </tr> + <tr> + <th>Rose</th> + <td> + <div class="swatch" style="background: #df80ff;"> </div> + #df80ff<br> + rgba(223, 128, 255, 1)</td> + <td> + <div class="swatch" style="background: #b82ee5;"> </div> + #b82ee5<br> + rgba(184, 46, 229, 1)</td> + <td>--theme-highlight-pink</td> + </tr> + <tr> + <th>Rouge</th> + <td> + <div class="swatch" style="background: #eb5368;"> </div> + #eb5368<br> + rgba(235, 83, 104, 1)</td> + <td> + <div class="swatch" style="background: #ed2655;"> </div> + #ed2655<br> + rgba(237, 38, 85, 1)</td> + <td>--theme-highlight-red</td> + </tr> + <tr> + <th>Orange</th> + <td> + <div class="swatch" style="background: #d96629;"> </div> + #d96629<br> + rgba(217, 102, 41, 1)</td> + <td> + <div class="swatch" style="background: #f13c00;"> </div> + #f13c00<br> + rgba(241, 60, 0, 1)</td> + <td>--theme-highlight-orange</td> + </tr> + <tr> + <th>Orange clair</th> + <td> + <div class="swatch" style="background: #d99b28;"> </div> + #d99b28<br> + rgba(217, 155, 40, 1)</td> + <td> + <div class="swatch" style="background: #d97e00;"> </div> + #d97e00<br> + rgba(217, 126, 0, 1)</td> + <td>--theme-highlight-lightorange</td> + </tr> + <tr> + <th>Vert</th> + <td> + <div class="swatch" style="background: #70bf53;"> </div> + #70bf53<br> + rgba(112, 191, 83, 1)</td> + <td> + <div class="swatch" style="background: #2cbb0f;"> </div> + #2cbb0f<br> + rgba(44, 187, 15, 1)</td> + <td>--theme-highlight-green</td> + </tr> + <tr> + <th>Gris-bleu</th> + <td> + <div class="swatch" style="background: #5e88b0;"> </div> + #5e88b0<br> + rgba(94, 136, 176, 1)</td> + <td> + <div class="swatch" style="background: #0072ab;"> </div> + #0072ab<br> + rgba(0, 114, 171, 1)</td> + <td>--theme-highlight-bluegrey</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>Non finalisé. voir le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916766">bug 916766</a>.</p> +</div> diff --git a/files/fr/outils/css_coverage/index.html b/files/fr/outils/css_coverage/index.html new file mode 100644 index 0000000000..c02460ede0 --- /dev/null +++ b/files/fr/outils/css_coverage/index.html @@ -0,0 +1,147 @@ +--- +title: CSS Coverage +slug: Outils/CSS_Coverage +translation_of: Tools/CSS_Coverage +--- +<div>{{ToolsSidebar}}</div> + +<div class="note"> +<p>Cette fonctionnalité est expérimentale et n'est pas encore disponible dans Firefox.</p> +</div> + +<p>Le CSS Coverage est un ensemble de commandes pour les outils de développement de Firefox qui aide à améliorer du CSS désordonné en mettant en évidence le CSS qui n'est pas "utilisé" et en indiquant les parties du fichier CSS nécessaires au rendu initial.</p> + +<p>Cet outil est quelque peu expérimental, car la définition "d'utilisation" du CSS est compliquée. Ce guide a pour ambition d'expliquer comment cet outil fonctionne.</p> + +<p>Cet outil est généralement utilisé de la façon suivante :</p> + +<ul> + <li>Lancer le tracker de coverage ("<code>csscoverage start</code>")</li> + <li>Visiter un ensemble de pages représentatives du site web à analyser.</li> + <li>Arrêter le tracker ("<code>csscoverage stop</code>") et voir les règles non utilisées dans <a href="/fr/docs/Outils/Éditeur_de_style">l'Éditeur de style</a>.</li> + <li>Voir le rapport ("<code>csscoverage report</code>") contenant les règles qui pourraient être mis en ligne (in-lined) dans chaque page.</li> +</ul> + +<p>Une autre commande ("<code>csscoverage oneshot</code>") permet de lancer ("<code>csscoverage start; csscoverage stop</code>").</p> + +<h2 id="Que_veut_dire_utiliser">Que veut dire "utiliser" ?</h2> + +<h3 id="TLDR">TL;DR :</h3> + +<p>Le CSS coverage vérifie que le sélecteur <span style="color: #008000;"><code>tag#id.class</code></span> dans l'exemple ci-dessous, existe dans un ensemble de pages web :</p> + +<pre class="brush: css">@media thing { + tag#id.class:hover { + foo: bar; + } +}</pre> + +<h3 id="Pourquoi">Pourquoi ?</h3> + +<p>Supposons que le CSS possède ce genre de propriété :</p> + +<pre class="brush: html"><style> + span:hover { + color: purple; + } +</style> + +<span>Test</span> +</pre> + +<p>Si durant ce test, la souris n'est pas entrée dans le <span>, est-ce que la règle a été utilisée ?</p> + +<p>Techniquement parlant, la règle <code>span:hover</code> n'a pas été utilisée dans le sens ou le mot "Test" n'a jamais été coloré en violet. Cependant, Le CSS coverage se concentre principalement à voir quelles règles sont pertinentes ou non pour la page. Dans ce cas, <code>span:hover</code> est visiblement pertinent pour la page.</p> + +<p>Supposons également que le CSS possède ce genre de propriété :</p> + +<pre class="brush: html"><style> + @media tv { + span { + color: purple; + } + } +</style> + +<span>Test</span> +</pre> + +<p>Devrait-il être obligatoire de se connecter depuis une télévision pour mesurer la pertinence de cette règle ?</p> + +<p>Mais "l'utilisation" n'est pas seulement une affaire de pertinence...<br> + Est-ce que la règle suivante est pertinente ?</p> + +<pre class="brush: html"><style> + span { } +</style> + +<span>Test</span> +</pre> + +<p>Il est possible d'affirmer que cette règle n'est pas pertinente, car elle n'a pas d'effet sur la page et peut donc être retirée sans danger.</p> + +<p>Cependant qu'en est-il du code suivant :</p> + +<pre class="brush: html"><style> + span { + -o-text-curl: minor; + } +</style> + +<span>Test</span> +</pre> + +<p>Savoir si cette règle est utilisée ou non requiert l'utilisation d'un moteur de recherche et des compétences analytiques, et peut être même des connaissances sur les versions des navigateurs supportés par le site. Ceci est donc considéré hors de portée de cet outil, du moins jusqu'à la <a href="https://fr.wikipedia.org/wiki/Singularit%C3%A9_technologique">singularité</a>.</p> + +<p>Cela explique également pourquoi la règle appliquée aux div dans l'exemple suivant est considéré comme "utilisée"</p> + +<pre class="brush: html"><style> + div { color: red; } + span { color: blue; } +</style> + +<div><span>Test</span></div> +</pre> + +<p>Il est possible d'affirmer que la règle div n'est pas utilisée puisqu'elle n'affecte pas le rendu final de la page. Cependant si l'on considère la définition alternative suivante :</p> + +<pre class="brush: html"><style> + div { color: red; border: none; } + span { color: blue; } +</style> +</pre> + +<p>Il est alors difficile de savoir si la règle de bordure est utilisée, et il existe beaucoup d'autres variations. L'opacité, la visibilité et les conversions de couleurs par exemple compliquent encore la définition "d'utilisation". Pour garder une définition simple, "utilisée" signifie que le sélecteur correspond ç au moins un élément.</p> + +<p>Si une feuille de style incluse dans un test contient une règle qui ne s'applique que pour une page particulière qui n'a pas été visitée lors du Test, alors bien évidemment cette règle sera marquée comme "non-utilisée" malgré le fait qu'il existe des moments ou cette règle est utilisée. Il est donc recommandé de doubler les vérifications avant d'enlever des règles des fichiers CSS.</p> + +<h2 id="Avertissements">Avertissements</h2> + +<p>Il est à noter que :</p> + +<ul> + <li>L'outil présume qu'une URL retourne le même ensemble d'octets chaque fois qu'elle référencée lors de la période de test.</li> + <li>Les <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">feuilles de style alternatives</a> ne sont pas traquées.</li> +</ul> + +<h2 id="Bugs">Bugs</h2> + +<p>La résolution de certains bugs importants est actuellement en travail :</p> + +<ul> + <li>Les changements du CSSOM via JavaScript ne sont actuellement pas traqués. Cela inclu l'ajout de feuilles de styles. Voir le <a href="https://bugzil.la/1007533">bug 1007533</a>.</li> + <li>Le markup dans l'Éditeur de style est fait ligne par ligne et, les sources-maps ne sont pas encore supportées. En conséquence, l'analyse devient confuse si le test est réalisé sur du CSS compressé. Voir le <a href="https://bugzil.la/1007073">bug 1007073</a>.</li> + <li>Les informations @keyframe ne sont pas incluses dans le résumé de préchargement. Voir le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug 1034062</a>.</li> +</ul> + +<p> </p> + +<h2 id="Alternatives">Alternatives</h2> + +<p>Il y plusieurs autres outils qui peuvent vous aider à trouver du CSS inutilisé, sans avoir besoin d'utiliser Firefox.</p> + +<ul> + <li><a href="https://www.jitbit.com/unusedcss/">Unused CSS</a> parcourt <em>récursivement</em> votre site pour détecter les sélecteurs inutilisés. Il s'agit d'un outil en ligne, gratuite et sans publicité.</li> + <li><a href="https://github.com/purifycss/purifycss">PurifyCSS </a>est un paquet NPM qui est utilisable comme un outil de console après son installation.</li> + <li><a href="https://unused-css.com/">unused-css.com</a>, un autre outil en ligne. Celui-ci n'est pas gratuit.</li> +</ul> diff --git a/files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html new file mode 100644 index 0000000000..89a692e2ad --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,24 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Debugger_(before_Firefox_52)/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à <code>false</code> dans about:config (page du navigateur).</p> + +<p>Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".</p> + +<p>Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.</p> + +<p>Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..4708b18950 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,32 @@ +--- +title: Access debugging in add-ons +slug: Outils/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<div class="warning"> +<p>Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.</p> +</div> + +<p>Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :</p> + +<ul> + <li>window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé</li> + <li>window.addEventListener("Debugger:EditorUnloaded")</li> +</ul> + +<p>Fichiers en relation :</p> + +<ul> + <li>chrome://browser/content/devtools/debugger-controller.js</li> + <li>chrome://browser/content/devtools/debugger-toolbar.js</li> + <li>chrome://browser/content/devtools/debugger-view.js</li> + <li>chrome://browser/content/devtools/debugger-panes.js</li> +</ul> + +<p>Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="bug #653545">653545</a>.</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html new file mode 100644 index 0000000000..7fa3206c04 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html @@ -0,0 +1,28 @@ +--- +title: Mettre une source dans une boîte noire +slug: Outils/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a>, ou <a href="http://angularjs.org/">Angular</a>, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des <a href="http://fr.wikipedia.org/wiki/Bo%C3%AEte_noire_%28syst%C3%A8me%29">boites noires</a>. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.</p> + +<p>Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">panneau de la liste des sources </a>puis en cliquant sur l'icône en forme d'œil en bas à gauche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la <a href="/fr/docs/Tools/GCLI">Barre de développement</a> et utilisant la commande <code>dbg blackbox</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p> + +<p>Quand une source est mise dans une boîte noire :</p> + +<ul> + <li>Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.</li> + <li>Lorsque l'option « <strong>Pause sur les exceptions</strong> » dans les <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/Settings">options du Débogueur</a> est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.</li> + <li>Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.</li> +</ul> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html new file mode 100644 index 0000000000..515a2df202 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html @@ -0,0 +1,22 @@ +--- +title: S’arrêter sur un évènement DOM +slug: Outils/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.</p> + +<p>Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">barre d'outils</a> (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">panneau des événements</a>. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13210/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.</p> + +<p>Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.</p> + +<p>{{EmbedYouTube("f-tbR8kj0K0")}}</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..421de55174 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html @@ -0,0 +1,36 @@ +--- +title: Debug eval sources +slug: Outils/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractères à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a>, soit en étant passé sous forme de chaine caractère au constructeur d'une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>fonction</code></a>.</p> + +<p>Pour faire cela, il est nécessaire d'utiliser l'instruction <code>//# sourceURL</code> pour nommer la source :</p> + +<pre class="brush: js">var button = document.getElementById("clickme"); +button.addEventListener("click", evalFoo, false); + +var script = "function foo() {" + + " console.log('foo a été appelée');" + + "}" + + "foo();//# sourceURL=mon-foo.js"; + +function evalFoo() { + eval(script); +}</pre> + +<p>Cela nome le script "mon-foo.js".</p> + +<p>Une fois que la chaine a été évaluée, le script apparaitra dans le Débogueur comme une source séparée et sera entièrement débogable comme toutes les autres sources. Il sera également possible de <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">l'afficher joliment</a> :</p> + +<p>{{EmbedYouTube("nFm8F8Anmic")}}</p> + +<p>Le nom du script apparaitra également dans la pile d'exécution dans la <a href="/fr/docs/Tools/Web_Console#Error_messages">Console Web</a>.</p> + +<p>Le Débogueur s’arrêtera également aux expressions <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> dans les sources évaluées anonymes</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..25f362b7a9 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html @@ -0,0 +1,24 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à <code>false</code> dans about:config (page du navigateur).</p> + +<p>Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".</p> + +<p>Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.</p> + +<p>Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html new file mode 100644 index 0000000000..d3ded1c55f --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,49 @@ +--- +title: 'Examiner, modifier, et espionner des variables' +slug: >- + Outils/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables +translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis 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_(Before_Firefox_52)/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="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" 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_(Before_Firefox_52)/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_(Before_Firefox_52)/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/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..edcdc56c82 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: Afficher en surbrillance et inspecter les nœuds DOM +slug: Outils/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Si vous survolez un nœud DOM dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">panneau des variables</a>, il sera affiché en surbrillance dans la page :</p> + +<p>De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira <a href="/fr/docs/Tools/Page_Inspector">l'Inspecteur</a> avec l'élément DOM sélectionné.</p> + +<p>{{EmbedYouTube("0JWxXp2Qql8")}}</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/index.html new file mode 100644 index 0000000000..7fa79d80a3 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/index.html @@ -0,0 +1,8 @@ +--- +title: Comment ? +slug: Outils/Debugger_(before_Firefox_52)/How_to +translation_of: Tools/Debugger_(before_Firefox_52)/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Ces articles décrivent comment se servir du Débogueur.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..dc052eb319 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html @@ -0,0 +1,21 @@ +--- +title: Ouvrir le Débogueur +slug: Outils/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Pour ouvrir le Débogueur, il faut utiliser le bouton du menu Firefox (<img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title="">). Puis sélectionner "Développement web", et enfin sélectionner "Débogueur". Il est également possible d'utiliser le raccourci clavier :</p> + +<ul> + <li><kbd>Controle</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> sur Windows et Linux</li> + <li><kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>S</kbd> sur Mac</li> +</ul> + +<p>La <a href="/fr/docs/Tools/Tools_Toolbox">Boite à outils </a>apparaitra alors en bas du navigateur, avec le Débogueur activé. Voici une capture d'écran qui montre à quoi ressemble le débogueur lors de son ouverture :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13200/debugger-open.png" style="display: block; height: 774px; margin-left: auto; margin-right: auto; width: 1006px;"></p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..a5ba32edb2 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,16 @@ +--- +title: Formater et indenter un fichier minifié +slug: Outils/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Pour formater et indenter un fichier qui a été minifié, il faut ouvrir le fichier minifié et cliquer sur l'icône en forme de paire d'accolades :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13212/debugger-pretty-print.png" style="display: block; height: 407px; margin-left: auto; margin-right: auto; width: 904px;">Le fichier apparaitra alors dans un format plus lisible :</p> + +<p>Il est possible de demander au débogueur de détecter et de formater et indenter automatiquement les sources minifiés. Pour cela, il faut activer l'option "Formater et Indenter automatiquement les sources compactées" dans les <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/Settings">options du débogueur</a>.</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html new file mode 100644 index 0000000000..5e35c61cd9 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html @@ -0,0 +1,74 @@ +--- +title: Rechercher et filtrer +slug: Outils/Debugger_(before_Firefox_52)/How_to/Search_and_filter +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Pour effectuer une recherche à l'intérieur du débogueur, il est possible d'utiliser le filtre de script de la <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">barre d'outils </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13214/debugger-filter.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>Ne pas utiliser de préfixe dans le filtre aura pour conséquence de ne rechercher que dans la liste des sources du <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">Panneau de la liste des sources</a>. Pour voir la source correspondante au nom de fichier recherché, il faut utiliser la touche entrée ou les flèches directionnelles.</p> + +<p>Utiliser un préfixe correspondant à l'un des divers caractères spéciaux aura différents effets sur la recherche :</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Préfixe</th> + <th scope="col">Fonction</th> + </tr> + </thead> + <tbody> + <tr> + <td>Aucun</td> + <td>Filtre les scripts affichés dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="#source-list-pane">panneau de la liste des sources</a>.</td> + </tr> + <tr> + <td>!</td> + <td>Recherche la chaine de caractère dans tous les fichiers.</td> + </tr> + <tr> + <td>@</td> + <td>Recherche une définition de fonction dans tous les fichiers</td> + </tr> + <tr> + <td>#</td> + <td> + <p>Recherche l'expression dans le fichier actuellement ouvert dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau de la liste des sources</a>.</p> + + <p>Appuyer sur entrée itérera parmi les occurrences.</p> + </td> + </tr> + <tr> + <td>:</td> + <td>Va à la ligne donnée dans le fichier actuellement ouvert dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau de la liste des sources</a>.</td> + </tr> + <tr> + <td>*</td> + <td>Filtrer les variables affichées dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a>.</td> + </tr> + </tbody> +</table> + +<p>Ces options sont affichées dans une pop-up lors d'un clic sur le filtre. Elles sont également accessibles depuis le menu contextuel dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau des sources</a>.</p> + +<p>Les préfixes peuvent être combinés pour obtenir des expressions puissants. Par exemple :</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td>toto.js:12</td> + <td>Ouvre le fichier "toto.js" et se rend à la ligne 12</td> + </tr> + <tr> + <td>mod#onLoad</td> + <td>Recherche la chaine de caractères "onLoad" dans tous les fichiers contenant "mod" dans leur noms.</td> + </tr> + </tbody> +</table> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..62a8ce9317 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html @@ -0,0 +1,29 @@ +--- +title: Ajouter un point d'arrêt +slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p class="seoSummary">Il existe différentes façons de placer un point d'arrêt dans du code JavaScript dans le Débogueur :</p> + +<ul> + <li>Dans <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">le panneau des sources</a>, cliquez sur le numéro de ligne où vous voulez arrêter le code</li> + <li>Dans <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">le panneau des sources</a>, faites un clic droit sur la ligne où vous voulez arrêter le code pour ouvrir le menu contextuel puis cliquez sur "Ajouter un point d'arrêt"</li> + <li>Dans <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">le panneau des sources</a>, mettez la ligne ciblée en surbrillance et appuyez sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)</li> +</ul> + +<p>Chaque point d'arrêt est affiché à deux endroits dans le débogueur :</p> + +<ul> + <li>Listé dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">panneau de la liste des sources</a> en dessous du nom du fichier dans lequel il se trouve</li> + <li>Sous forme de flèche bleue (organe si conditionnel) sur la ligne affectée dans le <a href="#">panneau des sources</a></li> +</ul> + +<p>La capture d'écran ci-dessous montre les points d'arrêt aux lignes 20 et 28 du fichier.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13202/debugger-details.png" style="display: block; height: 325px; margin-left: auto; margin-right: auto; width: 900px;"></p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..5025b633bb --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: Ajouter un point d’arrêt conditionnel +slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">panneau des sources</a> et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12900/debugger-conditional-breakpoint.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 823px;"></p> + +<p>Les points d'arrêt conditionnels sont représentés par une flèche orange :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12904/debugger-conditional-orange.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 823px;"></p> + +<p>Pour éditer la condition ou pour ajouter une condition à un point d'arrêt normal, il faut activer le menu contextuel (clic droit) et sélectionner « Configurer le point d'arrêt » :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12902/debugger-make-conditional.png" style="display: block; height: 427px; margin-left: auto; margin-right: auto; width: 823px;"></p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html new file mode 100644 index 0000000000..64743f97f8 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html @@ -0,0 +1,23 @@ +--- +title: Parcourir le code +slug: Outils/Debugger_(before_Firefox_52)/How_to/Step_through_code +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons à gauche dans la <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">barre d'outils </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13208/debugger-step.png" style="display: block; height: 414px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>De gauche à droite :</p> + +<ul> + <li>Reprendre : exécute le code jusqu'au prochain point d'arrêt</li> + <li>Passer la fonction : avance jusqu'à ligne suivante dans la même fonction</li> + <li>Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée</li> + <li>Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle</li> +</ul> diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..0593d49d3a --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html @@ -0,0 +1,20 @@ +--- +title: Utiliser une source map +slug: Outils/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Les sources JavaScript sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir. Il est également de plus en plus courant que les sources soient générées automatiquement en utilisant un langage comme CoffeeScript. En utilisant des <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, rendant ainsi le débogage incroyablement plus facile.</p> + +<p>Par défaut, le Débogueur utilisera les sources map si elles sont disponibles. Pour vérifier si l'utilisation des sources maps est activé (ou pour la désactiver), il faut cliquer sur les <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">options du débogueur</a> et dans la liste qui s'affiche sélectionner "Afficher les sources originales" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12922/debugger-sourcemaps.png" style="display: block; height: 506px; margin-left: auto; margin-right: auto; width: 915px;"></p> + +<p>Bien sûr, pour que cela fonctionne il faut avoir fourni une source map pour le JavaScript tournant dans la page. Pour cela il faut ajouter une instruction en commentaire dans votre fichier source :</p> + +<p><code>//# sourceMappingURL=http://example.com/chemin/vers/votre/sourcemap.map</code></p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/index.html b/files/fr/outils/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..13f53b09e4 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/index.html @@ -0,0 +1,55 @@ +--- +title: Débogueur (avant Firefox 52) +slug: Outils/Debugger_(before_Firefox_52) +translation_of: Tools/Debugger_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retrouver et de corriger les bugs.</p> + +<p>Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Firefox OS ou Firefox sur Android. Voir le <a href="/fr/docs/Tools/Remote_Debugging">guide du débogage à distance</a> pour apprendre à connecter le débogueur à une cible distante</p> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<hr> +<h2 id="Visite_guidée_de_l'interface_utilisateur">Visite guidée de l'interface utilisateur</h2> + +<p>Pour vous repérer dans le débogueur, voici une courte <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour">visite guidée de l'interface utilisateur.</a></p> + +<hr> +<h2 id="Comment">Comment ?</h2> + +<p>Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :</p> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Open_the_debugger">Ouvrir le débogueur</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">Ajouter un point d’arrêt</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">Désactiver des points d’arrêt</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">Parcourir le code pas à pas</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">S’arrêter sur un évènement DOM</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">Afficher en surbrillance et inspecter des nœuds DOM</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">Afficher joliment un fichier minifié</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">Rechercher et filtrer</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">Ajouter un point d’arrêt conditionnel</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">Examiner, modifier, et espionner des variables</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">Utiliser une source map (correspondance de source)</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">Mettre une source dans une boite noire</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">Déboguer des sources évaluées</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">Accéder au débogage depuis un module complémentaire</a></li> +</ul> +</div> + +<hr> +<h2 id="Référence">Référence</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Debugger/Keyboard_shortcuts">Raccourcis clavier</a></li> + <li><a href="/fr/docs/Tools/Debugger/Settings">Paramètres</a></li> +</ul> +</div> diff --git a/files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..9de13b55a9 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: Raccourcis clavier +slug: Outils/Debugger_(before_Firefox_52)/Keyboard_shortcuts +translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "old-debugger") }}</p> + +<h2 id="Raccourcis_généraux">Raccourcis généraux</h2> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/fr/outils/debugger_(before_firefox_52)/settings/index.html b/files/fr/outils/debugger_(before_firefox_52)/settings/index.html new file mode 100644 index 0000000000..9037a57151 --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/settings/index.html @@ -0,0 +1,63 @@ +--- +title: Paramètres +slug: Outils/Debugger_(before_Firefox_52)/Settings +translation_of: Tools/Debugger_(before_Firefox_52)/Settings +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Le Débogueur a son propre menu de paramètres. Il est accessible depuis l’icône en forme d'engrenage dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>Chaque paramètre est une simple case à cocher :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 40%;"><strong>Formater et indenter automatiquement les sources compactées</strong></td> + <td>Lorsque cette option est activée, le Débogueur <a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">affichera joliment</a> les fichiers JavaScript minifiés.</td> + </tr> + <tr> + <td><strong>Pause sur les exceptions</strong></td> + <td>Lorsque cette option est activée, l’exécution du script s’arrêtera automatiquement lorsqu'une exception JavaScript est levée.</td> + </tr> + <tr> + <td><strong>Ignorer les exceptions interceptées</strong></td> + <td> + <p>Lorsque cette option est activée, l’exécution ne s’arrêtera pas lorsqu'une exception levée est interceptée</p> + + <p>Si cette option est activée (elle l'est par défaut), et que "Pause sur les exceptions" est activé, alors l'exécution s’arrêtera uniquement si l'exception levée n'est pas attrapée. Ce qui est généralement le comportement désiré : les expressions interceptées indiquent généralement que votre programme les gère correctement.</p> + </td> + </tr> + <tr> + <td><strong>Panneaux développés au démarrage</strong></td> + <td>Lorsque cette option est activée, le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a> du Débogueur est visible dès l'ouverture de celui-ci.</td> + </tr> + <tr> + <td><strong>Afficher uniquement les propriétés énumérables</strong></td> + <td>Les propriétés JavaScript non-énumérables ne sont pas affichées</td> + </tr> + <tr> + <td><strong>Afficher la boîte de filtrage des variables</strong></td> + <td>Lorsque cette option est activée, une boîte de recherche est ajoutée au <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a>, elle permet de filtrer la liste des variables affichée</td> + </tr> + <tr> + <td><strong>Afficher les sources originales</strong></td> + <td>Lorsque cette option est activée, le Débogueur utilisera des <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, s'il y en a, afin d'afficher le code source original qui a été minifié, combiné ou même compilé depuis un langage comme CoffeeScript. Cette option est activée par défaut</td> + </tr> + <tr> + <td><strong>Mettre automatiquement dans une boîte noire les sources compactées</strong></td> + <td> + <div class="geckoVersionNote"> + <p>Nouveauté de Firefox 33</p> + </div> + + <p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Met automatiquement les sources dont l'URL finit par ".min.js" dans une <a href="/fr/docs/Tools/Debugger/How_to/Black_box_a_source">boîte noire</a></span></span></p> + </td> + </tr> + </tbody> +</table> diff --git a/files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html b/files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html new file mode 100644 index 0000000000..0a8213687b --- /dev/null +++ b/files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html @@ -0,0 +1,134 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Debugger_(before_Firefox_52)/UI_Tour +translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.</p> + +<p><a href="/fr/docs/Tools/Debugger">Voir la documentation pour les versions depuis Firefox 52.</a></p> +</div> + +<p>Cet article est une visité guidée des principales sections de l'interface utilisateur du Débogueur JavaScript de Firefox. Cette interface est séparée en six sections principales :</p> + +<ul> + <li><a href="#toolbar">Barre d'outils</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">Panneau de la liste des sources</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">Panneau de la pile d’exécution</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">Panneau des sources</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">Panneau des variables</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">Panneau des événements</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13182/debugger-overview-annotated.png" style="display: block; height: 1640px; margin-left: auto; margin-right: auto; width: 1019px;"></p> + +<h2 id="Barre_d'outils"><a name="toolbar">Barre d'outils</a></h2> + +<p>La barre d'outils est composé de quatre sections :</p> + +<ul> + <li>Une ligne de boutons servant a <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">contrôler le parcours à travers un script</a></li> + <li>Une visualisation de la pile d’exécution</li> + <li>Le <a href="https://developer.mozilla.org/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">filtre de script</a></li> + <li>Deux boutons pour : + <ul> + <li>développer/réduire les panneaux des <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane">variables</a> et des <a href="/fr/docs/Tools/Debugger/UI_Tour#Events_pane">événements</a></li> + <li>contrôler les <a href="/fr/docs/Tools/Debugger/Settings">paramètres</a> du Débogueur</li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13194/debugger-toolbar-annotated.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 942px;"></p> + +<p>Les quatre boutons de gauche ont (dans l'ordre) les fonctions suivantes :</p> + +<ul> + <li><strong>Pause/Reprendre</strong>(F8) : met pause ou reprend l’exécution du script en débogage. Lorsque ce bouton devient bleu, cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.</li> + <li><strong>Passer la fonction</strong> (F10) : Passe à la ligne de JavaScript suivante.</li> + <li><strong>Entrer dans la fonction</strong> (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. Sinon, passe à la ligne suivante.</li> + <li><strong>Sortir de la fonction</strong> (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.</li> +</ul> + +<p>La visualisation de la pile d’exécution montre la pile d’exécution au moment ou l’exécution est arrêté.</p> + +<h2 id="Panneau_de_la_liste_des_sources">Panneau de la liste des sources</h2> + +<p>Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Ce panneau partage sa portion d'écran avec le <a href="/fr/docs/Tools/Debugger/UI_Tour#Call_stack_pane">panneau de la pile d’exécution</a>. Les onglets en haut des panneaux permetent de passer d'un panneau à l'autre.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13186/debugger-source-list-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Les fichiers sources sont regroupés sous différentes catégories basées sur l'origine de ces fichiers. Il est possible de sélectionner n'importe lequel de ces fichiers et il sera alors chargé dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">panneau des sources</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13188/debugger-source-list-pane-annotated.png" style="display: block; height: 535px; margin-left: auto; margin-right: auto; width: 922px;">Chaque point d'arrêt mis dans un fichier source est listé dans le panneau de la liste des sources juste en dessous du nom de ce fichier. La case à cocher à côté de chaque point d'arrêt permet de l'activer ou de le désactiver. Effectuer un clic droit sur un point d'arrêt dans la liste affiche un menu contextuel permettant de :</p> + +<ul> + <li>Désactiver, activer ou supprimer ce point d'arrêt, tous les points d'arrêt ou tous les points d'arrêt sauf celui-ci.</li> + <li>Rendre ce point d'arrêt conditionnel (ou éditer sa condition si il l'est déjà).</li> +</ul> + +<p>Les trois icônes en bas du panneau permettent de :</p> + +<ul> + <li><a href="/fr/docs/Tools/Debugger/How_to/Black_box_a_source">Mettre une source dans une boîte noire</a>.</li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Afficher joliment des fichiers JavaScript minifiés</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">Activer/désactiver tous les points d'arrêts</a>.</li> +</ul> + +<p>Il existe un menu contextuel (clic droit) pour les éléments de la liste des sources celui-ci permet de copier l'URL d'où viennent les fichiers, ou bien de les ouvrir dans un nouvel onglet :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13184/debugger-source-list-menu-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<h2 id="Panneau_de_la_pile_d’exécution">Panneau de la pile d’exécution</h2> + +<p>Le deuxième onglet de la partie gauche du Débogueur affiche une pile d’exécution verticale :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13178/debugger-call-stack-pane-annotated.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Chaque ligne représente un niveau de la pile, avec la couche actuelle au-dessus. Chaque ligne contient le nom de la fonction ou elle est exécutée ainsi qu'un lien vers le fichier source au bon numéro de ligne.</p> + +<h2 id="Panneau_des_sources">Panneau des sources</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13190/debugger-source-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Ce panneau affiche le fichier source JavaScript actuellement chargé. Les lignes ayant un point d'arrêt ont un cercle bleu à côté du numéro de ligne. Lorsqu'un point d'arrêt est atteint, une flèche verte apparaît sur le cercle :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13192/debugger-source-pane-breakpoints-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Dans le panneau des sources, le menu contextuel (clic droit) permet :</p> + +<ul> + <li>D'ajouter un point d'arrêt.</li> + <li>D'ajouter un point d'arrêt conditionnel</li> + <li>D'ajouter une expression-espionne de la sélection</li> + <li>De rechercher ou filtrer en utilisant le <a href="https://developer.mozilla.org/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script filter">filtre de scripts</a></li> +</ul> + +<h3 id="Popup_de_variable">Popup de variable</h3> + +<p>Survoler une variable dans le panneau des sources fait apparaître une popup affichant la valeur actuelle de la variable :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13198/debugger-variables-popup-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Cela permet de savoir rapidement la valeur d'une variable sans avoir à ouvrir le<a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane"> panneau des variables</a>.</p> + +<h2 id="Panneau_des_variables">Panneau des variables</h2> + +<p>Le panneau des variables permet d’examiner et de modifier les variables du script lors de son exécution :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13196/debugger-variables-pane.png" style="display: block; height: 670px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Ce panneau partage sa portion d'écran avec le <a href="https://developer.mozilla.org/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">panneau des événements</a>. Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.</p> + +<h2 id="Panneau_des_événements">Panneau des événements</h2> + +<p>Ce panneau liste tous les événements DOM qui sont écoutés dans le code.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13180/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Ce panneau partage sa portion d'écran avec le <a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">panneau des variables</a> Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.</p> + +<p>Ce panneau regroupe les événements par type, la capture d'écran ci-dessus montre quatre types : Interaction, clavier, souris, et navigation. Les événements qui ont un écouteur sont listés sous leur type avec la syntaxe suivante :</p> + +<pre>[nom de l’événement] sur [cible de l’événement] dans [fichier source]</pre> + +<p>Cliquer sur la case à cocher à côté de l’événement aura pour conséquence de faire s’arrêter l’exécution à la première ligne de l'écouteur de l’événement. Cliquer sur la case à cocher à côté d'un type d’événement aura pour conséquence de faire s’arrêter l’exécution dans tous les écouteurs des événements listés sous ce type.</p> diff --git a/files/fr/outils/devtoolsapi/index.html b/files/fr/outils/devtoolsapi/index.html new file mode 100644 index 0000000000..0fba8241f1 --- /dev/null +++ b/files/fr/outils/devtoolsapi/index.html @@ -0,0 +1,835 @@ +--- +title: DevTools API +slug: Outils/DevToolsAPI +translation_of: Tools/DevToolsAPI +--- +<p>{{ToolsSidebar}}{{Obsolete_Header}}</p> + +<div class="blockIndicator warning"> +<p><strong>Warning:</strong>("L'API des outils de développement est en cours de développement. Si vous rencontrez des incohérences, merci de les signaler à l'équipe des outils de développement de Firefox.")</p> +</div> + +<p>Bien que cette api soit toujours en développement, il existe des parties de <a href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector#Developer_API" title="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API">l'Inspecteur</a> et du <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger#Extending_Debugger_from_Addons" title="https://developer.mozilla.org/en-US/docs/Tools/Debugger#Extending_Debugger_from_Addons">Debogueur</a> qui sont d’ores et déjà utilisable.</p> + + + +<h2 id="Introduction">Introduction</h2> + +<p><span class="seoSummary">L'API des outils de développements fournit une manière d'enregistrer et d'accéder aux outils de développement dans Firefox.</span></p> + +<p>En terme d'interface utilisateur, chaque outil enregistré existe dans son propre onglet (Appelé également panneau). Ces onglets sont situés dans une boîte appelée <strong>Boite à outils.</strong> Une boîte à outils peut être <em>hébergée</em> dans un navigateur (en bas ou sur le coté) ou peut être dans propre fenêtre (la boîte à outils est alors dite <em>détachée</em>). Une boîte à outils (et tous les outils qu'elle contient) est reliée à une <strong>Cible</strong> qui est l'objet que les outils sont en train de déboguer. Une cible le plus souvent une page web (un onglet), mais peut être autre chose, comme une fenêtre chrome un onglet distant.</p> + +<p>En terme de code, chaque outil doit fournir un objet <strong>ToolDefinition</strong>. Une définition est un objet JS léger qui fournit différentes informations sur l'outil (par exemple son nom et son icône), ainsi qu'une méthode <em>build</em> qui sera utilisée plus tard pour lancer une instance de cet outil. L'objet global <strong> gDevTools</strong> fournit des méthodes pour enregistrer une définition d'outil et pour accéder aux instances d'outils. Une instance d'outil est appelée un <strong>ToolPanel</strong>. Le ToolPanel est construit seulement lorsque l'outil est sélectionné (non pas quand la boîte à outils est ouverte). Il n'y a aucun mayen de "fermer/détruire" un ToolPannel. La façon de fermer un ToolPanel est de fermer la boîte à outils qui le contient. Tous les objets sus-mentionnés implémentent l'interface<strong> EventEmitter</strong>.</p> + +<h2 id="API">API</h2> + +<h3 id="gDevTools">gDevTools</h3> + +<p>The <code>gDevTools</code> API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the <code>gDevTools</code> API from an add-on, it can be imported with following snippet</p> + +<pre class="brush: js"><code>const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");</code></pre> + +<h4 id="Methods">Methods</h4> + +<dl> + <dt> + <h5 id="registerTool(toolDefinition)"><code>registerTool(toolDefinition)</code></h5> + </dt> + <dd>Registers a new tool and adds a tab to each existing toolbox.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>toolDefinition {ToolDefinition}</code></em> - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.</dd> + <dt> + <h5 id="unregisterTool(tool)"><code>unregisterTool(tool)</code></h5> + </dt> + <dd>Unregisters the given tool and removes it from all toolboxes.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>tool {ToolDefinition|String}</code></em> - The tool definition object or the id of the tool to unregister.</dd> + <dt> + <h5 id="registerTheme(themeDefinition)"><code>registerTheme(themeDefinition)</code></h5> + </dt> + <dd>Registers a new theme.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>themeDefinition {ThemeDefinition}</code></em> - An object that contains information about the theme.</dd> + <dt> + <h5 id="unregisterTheme(theme)"><code>unregisterTheme(theme)</code></h5> + </dt> + <dd>Unregisters the given theme.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>theme {ThemeDefinition|String}</code></em> - The theme definition object or the theme identifier.</dd> + <dt> + <h5 id="showToolbox(target_toolId_hostType_hostOptions)"><code>showToolbox(target [, toolId [, hostType [, hostOptions]]])</code></h5> + </dt> + <dd>Opens a toolbox for given target either by creating a new one or activating an existing one.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>target {Target}</code></em> - The target the toolbox will debug.<br> + <em><code>toolId {String}</code></em> - The tool that should be activated. If unspecified the previously active tool is shown.<br> + <em><code>hostType {String}</code></em> - The position the toolbox will be placed. One of <code>bottom</code>, <code>side</code>, <code>window</code>, <code>custom</code>. See {{anch("HostType")}} for details.<br> + <em><code>hostOptions {Object}</code></em> - An options object passed to the selected host. See {{anch("HostType")}} for details.</dd> + <dd><strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.</dd> + <dt> + <h5 id="getToolbox(target)"><code>getToolbox(target)</code></h5> + </dt> + <dd>Fetch the {{anch("Toolbox")}} object for the given target.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>target {Target}</code></em> - The target the toolbox is debugging.<br> + <br> + <strong>Return value:</strong><br> + {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..</dd> + <dt> + <h5 id="closeToolbox(target)"><code>closeToolbox(target)</code></h5> + </dt> + <dd>Closes the toolbox for given target.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>target {Target}</code></em> - The target of the toolbox that should be closed.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.</dd> + <dt> + <h5 id="getDefaultTools()"><code>getDefaultTools()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.</dd> + <dt> + <h5 id="getAdditionalTools()"><code>getAdditionalTools()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.</dd> + <dt> + <h5 id="getToolDefinition(toolId)"><code>getToolDefinition(toolId)</code></h5> + </dt> + <dd>Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String}</em></code> - The ID of the tool.</dd> + <dd><strong>Return value:</strong><br> + A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.</dd> + <dt> + <h5 id="getToolDefinitionMap()"><code>getToolDefinitionMap()</code></h5> + </dt> + <dd>Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.</dd> + <dt> + <h5 id="getToolDefinitionArray()"><code>getToolDefinitionArray()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.</dd> + <dt> + <h5 id="getThemeDefinition(themeId)"><code>getThemeDefinition(themeId)</code></h5> + </dt> + <dd>Fetch the <code>ThemeDefinition</code> object for the theme with the given id.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>themeId {String}</em></code> - The ID of the theme.</dd> + <dd><strong>Return value:</strong><br> + A <code>ThemeDefinition</code> object if the theme exists, null otherwise.</dd> + <dt> + <h5 id="getThemeDefinitionMap()"><code>getThemeDefinitionMap()</code></h5> + </dt> + <dd>Returns a toolId → <code>ThemeDefinition</code> map for available themes.</dd> + <dt> + <h5 id="getThemeDefinitionArray()"><code>getThemeDefinitionArray()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of <code>ThemeDefinition</code> objects for avialble themes.</dd> +</dl> + +<h4 id="Events">Events</h4> + +<p>Following events are emitted by the <code>gDevTools</code> object via the {{anch("EventEmitter")}} interface.</p> + +<dl> + <dt> + <h5 id="tool-registered(toolId)"><code>tool-registered</code><code>(toolId)</code></h5> + </dt> + <dd>A new tool has been registered.</dd> + <dt> + <h5 id="tool-unregistered(tool)"><code>tool-unregistered(tool)</code></h5> + </dt> + <dd>A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.</dd> + <dt> + <h5 id="theme-registered(themeId)"><code>theme-registered(themeId)</code></h5> + </dt> + <dd>A new theme has been registered.</dd> + <dt> + <h5 id="theme-unregistered(theme)"><code>theme-unregistered(theme)</code></h5> + </dt> + <dd>A theme has been unregistered. The parameter is a <code>ThemeDefinition</code> object.</dd> + <dt> + <h5 id="toolbox-ready(toolbox)"><code>toolbox-ready(toolbox)</code></h5> + </dt> + <dd>A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.</dd> + <dt> + <h5 id="toolbox-destroy(target)"><code>toolbox-destroy(target)</code></h5> + </dt> + <dd>The toolbox for the specified target is about to be destroyed.</dd> + <dt> + <h5 id="toolbox-destoyed(target)"><code>toolbox-destoyed(target)</code></h5> + </dt> + <dd>The toolbox for the specified target has been destroyed.</dd> + <dt> + <h5 id="toolId-init(toolbox_iframe)"><code>{toolId}-init(toolbox, iframe)</code></h5> + </dt> + <dd>A tool with the given ID has began to load in the given toolbox to the given frame.</dd> + <dt> + <h5 id="toolId-build(toolbox_panel)"><code>{toolId}-build(toolbox, panel)</code></h5> + </dt> + <dd>A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd> + <dt> + <h5 id="toolId-ready(toolbox_panel)"><code>{toolId}-ready(toolbox, panel)</code></h5> + </dt> + <dd>A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd> + <dt> + <h5 id="toolId-destroy(toolbox_panel)"><code>{toolId}-destroy(toolbox, panel)</code></h5> + </dt> + <dd>A tool with the given ID is about to be destroyed. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd> +</dl> + +<h3 id="Toolbox">Toolbox</h3> + +<p>A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.</p> + +<h4 id="Properties">Properties</h4> + +<dl> + <dt> + <h5 id="target"><code>target</code></h5> + </dt> + <dd><strong>Target</strong>. The Target this toolbox is debugging.</dd> + <dt> + <h5 id="hostType"><code>hostType</code></h5> + </dt> + <dd><strong>Toolbox.HostType</strong>. The type of the host this Toolbox is docked to. The value is one of the <code>Toolbox.HostType</code> constants.</dd> + <dt> + <h5 id="zoomValue"><code>zoomValue</code></h5> + </dt> + <dd>The current zoom level of the Toolbox.</dd> +</dl> + +<h4 id="Constants">Constants</h4> + +<p>The Toolbox constructor contains following constant properties.</p> + +<dl> + <dt> + <h5 id="Toolbox.HostType.BOTTOM"><code>Toolbox.HostType.BOTTOM</code></h5> + </dt> + <dd>Host type for the default toolbox host at the bottom of the browser window.</dd> + <dt> + <h5 id="Toolbox.HostType.SIDE"><code>Toolbox.HostType.SIDE</code></h5> + </dt> + <dd>Host type for the host at the side of the browser window.</dd> + <dt> + <h5 id="Toolbox.HostType.WINDOW"><code>Toolbox.HostType.WINDOW</code></h5> + </dt> + <dd>Host type for the separate Toolbox window.</dd> + <dt> + <h5 id="Toolbox.HostType.CUSTOM"><code>Toolbox.HostType.CUSTOM</code></h5> + </dt> + <dd>Host type for a custom frame host.</dd> +</dl> + +<h4 id="Methods_2">Methods</h4> + +<dl> + <dt> + <h5 id="getCurrentPanel()"><code>getCurrentPanel()</code></h5> + </dt> + <dd>Get the currently active {{anch("ToolPanel")}}.<br> + <br> + <strong>Return value:</strong><br> + The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.</dd> + <dt> + <h5 id="getPanel(toolId)"><code>getPanel(toolId)</code></h5> + </dt> + <dd>Get the {{anch("ToolPanel")}} for given tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + The {{anch("ToolPanel")}} object if the tool with the given <code>toolId</code> is active, otherwise <code>undefined</code>.</dd> + <dt> + <h5 id="getPanelWhenReady(toolId)"><code>getPanelWhenReady(toolId)</code></h5> + </dt> + <dd>Similar to <code>getPanel()</code> but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.</dd> + <dt> + <h5 id="getToolPanels()"><code>getToolPanels()</code></h5> + </dt> + <dd>Returns a <code>toolId → {{anch("ToolPanel")}}</code> {{jsxref("Map")}} for currently loaded tools.</dd> + <dt> + <h5 id="getNotificationBox()"><code>getNotificationBox()</code></h5> + </dt> + <dd>Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.</dd> + <dt> + <h5 id="loadTool(toolId)"><code>loadTool(toolId)</code></h5> + </dt> + <dd>Loads the tool with the given <code>toolId</code> in the background but does not activate it.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.<br> + </dd> + <dt> + <h5 id="selectTool(toolId)"><code>selectTool(toolId)</code></h5> + </dt> + <dd>Selects the tool with the given <code>toolId</code>.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.</dd> + <dt> + <h5 id="selectNextTool()"><code>selectNextTool()</code></h5> + </dt> + <dd>Selects the next tool in the <code>Toolbox</code>.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd> + <dt> + <h5 id="selectPreviousTool()"><code>selectPreviousTool()</code></h5> + </dt> + <dd>Selects the previous tool in the <code>Toolbox</code>.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd> + <dt> + <h5 id="highlightTool(toolId)"><code>highlightTool(toolId)</code></h5> + </dt> + <dd>Highlights the tab for the given tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool to highlight.</dd> + <dt> + <h5 id="unhighlightTool(toolId)"><code>unhighlightTool(toolId)</code></h5> + </dt> + <dd>Unhighlights the tab for the given tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool to unhighlight.</dd> + <dt> + <h5 id="openSplitConsole()"><code>openSplitConsole()</code></h5> + </dt> + <dd>Opens the split Console to the bottom of the toolbox.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the Console has loaded.</dd> + <dt> + <h5 id="closeSplitConsole()"><code>closeSplitConsole()</code></h5> + </dt> + <dd>Closes the split console.</dd> + <dt> + <h5 id="toggleSplitConsole()"><code>toggleSplitConsole()</code></h5> + </dt> + <dd>Toggles the state of the split console.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the operation has finished.</dd> + <dt> + <h5 id="switchHost(hostType)"><code>switchHost(hostType)</code></h5> + </dt> + <dd>Switches the location of the toolbox<br> + <br> + <strong>Parameters:</strong><br> + <code><em>hostType {Toolbox.HostType} - </em></code>The type of the new host.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the new host is ready.<br> + </dd> + <dt> + <h5 id="reloadTarget(force)"><code>reloadTarget(force)</code></h5> + </dt> + <dd>Reloads the current target of the toolbox.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>force {Boolean} -</code></em> If true the target is shift-reloaded i.e. the cache is bypassed during the reload.</dd> + <dt> + <h5 id="zoomIn()"><code>zoomIn()</code></h5> + </dt> + <dd>Increases the zoom level of the <code>Toolbox</code> document.</dd> + <dt> + <h5 id="zoomOut()"><code>zoomOut()</code></h5> + </dt> + <dd>Decreases the zoom level of the <code>Toolbox</code> document.</dd> + <dt> + <h5 id="zoomReset()"><code>zoomReset()</code></h5> + </dt> + <dd>Resets the zoom level of the <code>Toolbox</code> document.</dd> + <dt> + <h5 id="setZoom(value)"><code>setZoom(value)</code></h5> + </dt> + <dd>Set the zoom level to an arbitrary value.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>value {Number} - </em></code>The zoom level such as <code>1.2</code>.</dd> + <dt> + <h5 id="destroy()"><code>destroy()</code></h5> + </dt> + <dd>Closes the toolbox.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is resolved once the <code>Toolbox</code> is destroyed.</dd> +</dl> + +<h4 id="Events_2">Events</h4> + +<p>The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.</p> + +<dl> + <dt> + <h5 id="host-changed"><code>host-changed</code></h5> + </dt> + <dd>The Host for this Toolbox has changed.</dd> + <dt> + <h5 id="ready"><code>ready</code></h5> + </dt> + <dd>The <code>Toolbox</code> is ready to use.</dd> + <dt> + <h5 id="select(toolId)"><code>select(toolId)</code></h5> + </dt> + <dd>A tool has been selected. This event is emitted before the corresponding <code>{toolId}-selected</code> event.</dd> + <dt> + <h5 id="toolId-init(frame)"><code>{toolId}-init(frame)</code></h5> + </dt> + <dd>A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.</dd> + <dt> + <h5 id="toolId-build(panel)"><code>{toolId}-build(panel)</code></h5> + </dt> + <dd>The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="toolId-ready(panel)"><code>{toolId}-ready(panel)</code></h5> + </dt> + <dd>The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="toolId-selected(panel)"><code>{toolId}-selected(panel)</code></h5> + </dt> + <dd>A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="toolId-destroy(panel)"><code>{toolId}-destroy(panel)</code></h5> + </dt> + <dd>A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="destroy"><code>destroy</code></h5> + </dt> + <dd>The <code>Toolbox</code> is about to be destroyed.</dd> + <dt> + <h5 id="destroyed"><code>destroyed</code></h5> + </dt> + <dd>The <code>Toolbox</code> has been destroyed.</dd> +</dl> + +<h3 id="ToolDefinition">ToolDefinition</h3> + +<p>A <code>ToolDefinition</code> object contains all the required information for a tool to be shown in the toolbox.</p> + +<h4 id="Methods_3">Methods</h4> + +<dl> + <dt> + <h5 id="isTargetSupported(target)"><code>isTargetSupported(target)</code></h5> + </dt> + <dd>A method that is called during toolbox construction to check if the tool supports debugging the given target.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>target {Target} - </em></code>The target to check.<br> + <br> + <strong>Return value:</strong><br> + A boolean indicating if the tool supports the given target.</dd> + <dt> + <h5 id="build(window_toolbox)"><code>build(window, toolbox)</code></h5> + </dt> + <dd>A method that builds the {{anch("ToolPanel")}} for this tool.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>window {Window} - </code></em>The {{domxref("Window")}} object for frame the tool is being built into.<br> + <em><code>toolbox {Toolbox} - </code></em>The {{anch("Toolbox")}} the tool is being built for.<br> + <br> + <strong>Return value:</strong><br> + A {{anch("ToolPanel")}} for the tool.</dd> + <dt> + <h5 id="onKey(panel_toolbox)"><code>onKey(panel, toolbox)</code></h5> + </dt> + <dd><strong>Optional.</strong> A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>panel {ToolPanel} - </em></code>The {{anch("ToolPanel")}} for the tool.<br> + <em><code>toolbox {Toolbox} - </code></em>The toolbox for the shortcut was triggered for.<br> + <br> + <strong>Return value:</strong><br> + Undefined.</dd> +</dl> + +<h4 id="Properties_2">Properties</h4> + +<p>The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.</p> + +<dl> + <dt> + <h5 id="id"><code>id</code></h5> + </dt> + <dd><strong>String, required.</strong> An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.</dd> + <dt> + <h5 id="url"><code>url</code></h5> + </dt> + <dd><strong>String, required.</strong> An URL of the panel document.</dd> + <dt> + <h5 id="label"><code>label</code></h5> + </dt> + <dd><strong>String, optional.</strong> The tool's name. If undefined the <code>icon</code> should be specified.</dd> + <dt> + <h5 id="tooltip"><code>tooltip</code></h5> + </dt> + <dd><strong>String, optional.</strong> The tooltip for the tool's tab.</dd> + <dt> + <h5 id="panelLabel"><code>panelLabel</code></h5> + </dt> + <dd><strong>String, optional.</strong> An accessibility label for the panel.</dd> + <dt> + <h5 id="ordinal"><code>ordinal</code></h5> + </dt> + <dd><strong>Integer, optional.</strong> The position of the tool's tab within the toolbox. <strong>Default: </strong>99</dd> + <dt> + <h5 id="visibilityswitch"><code>visibilityswitch</code></h5> + </dt> + <dd><strong>String, optional.</strong> A preference name that controls the visiblity of the tool. <strong>Default: </strong><code>devtools.{id}.enabled</code></dd> + <dt> + <h5 id="icon"><code>icon</code></h5> + </dt> + <dd><strong>String, optional.</strong> An URL for the icon to show in the toolbox tab. If undefined the label should be defined.</dd> + <dt> + <h5 id="highlightedicon"><code>highlightedicon</code></h5> + </dt> + <dd><strong>String, optional.</strong> An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). <strong>Default:</strong> <code>{icon}</code></dd> + <dt> + <h5 id="iconOnly"><code>iconOnly</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true, the label won't be shown in the tool's tab. <strong>Default:</strong> false</dd> + <dt> + <h5 id="invertIconForLightTheme"><code>invertIconForLightTheme</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true the colors of the icon will be inverted for the light theme. <strong>Default:</strong> false</dd> + <dt> + <h5 id="key"><code>key</code></h5> + </dt> + <dd><strong>String, optional.</strong> The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.</dd> + <dt> + <h5 id="modifiers"><code>modifiers</code></h5> + </dt> + <dd><strong>String, optional.</strong> {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.</dd> + <dt> + <h5 id="preventClosingOnKey"><code>preventClosingOnKey</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true the tool won't close if its keybinding is pressed while it is active. <strong>Default:</strong> false</dd> + <dt> + <h5 id="inMenu"><code>inMenu</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true the tool will be shown in the Developer Menu. <strong>Default:</strong> false</dd> + <dt> + <h5 id="menuLabel"><code>menuLabel</code></h5> + </dt> + <dd><strong>String, optional.</strong> A label for the Developer Menu item. <strong>Default:</strong> <code>{label}</code></dd> + <dt> + <h5 id="accesskey"><code>accesskey</code></h5> + </dt> + <dd><strong>String, optional.</strong> {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.</dd> +</dl> + +<h4 id="Example">Example</h4> + +<p>Here's a minimal definition for a tool.</p> + +<pre class="brush: js"><code>let def = { + id: "my-tool", + label: "My Tool", + icon: "chrome://browser/skin/devtools/tool-webconsole.svg", + url: "about:blank", + isTargetSupported: target => true, + build: (window, toolbox) => new MyToolPanel(window, toolbox) +};</code> + +// Register it. +gDevTools.registerTool(def); +</pre> + +<h3 id="TargetType">TargetType</h3> + +<p>FIXME:</p> + +<h3 id="HostType">HostType</h3> + +<p>FIXME</p> + +<h3 id="ToolPanel">ToolPanel</h3> + +<p>The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that <code>ToolDefinition.build()</code> returns should implement the methods described below.</p> + +<h4 id="Methods_4">Methods</h4> + +<dl> + <dt> + <h5 id="open()"><code>open()</code></h5> + </dt> + <dd><strong>Optional</strong>. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or <code>toolbox.selectTool()</code>) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.<br> + <br> + <strong>Return value:</strong><br> + The method should return a {{domxref("Promise")}} that is resolved with the <code>ToolPanel</code> object once it's ready to be used.</dd> + <dt> + <h5 id="destroy()_2"><code>destroy()</code></h5> + </dt> + <dd> + <p>A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.</p> + + <p><strong>Return value:</strong><br> + A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise <code>undefined</code>.</p> + </dd> +</dl> + +<h4 id="Example_2">Example</h4> + +<p>Here's a basic template for a ToolPanel implementation.</p> + +<pre class="brush: js"><code>// In the ToolDefintion object, do +// build: (window, target) => new MyPanel(window, target), + +function MyPanel(window, target) { + // The window object that has loaded the URL defined in the ToolDefinition + this.window = window; + // The Target this toolbox is debugging. + this.target = target; + + // Do synchronous initialization here. + window.document.body.addEventListener("click", this.handleClick); +} + +MyPanel.prototype = { + open: function() { + // Any asynchronous operations should be done here. + return this.doSomethingAsynchronous() + .then(() => this); + }, + + destroy: function() { + // Synchronous destruction. + this.window.document.body.removeEventListener("click", this.handleClick); + + // Async destruction. + return this.destroySomethingAsynchronosly() + .then(() => console.log("destroyed")); + }, + + handleClick: function(event) { + console.log("Clicked", event.originalTarget); + }, +};</code> +</pre> + +<h3 id="EventEmitter">EventEmitter</h3> + +<p><code>EventEmitter</code> is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.</p> + +<p>When an event is emitted on the <code>EventEmitter</code>, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.</p> + +<div class="note"> +<p>Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the <code>once</code> method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.</p> +</div> + +<h4 id="Methods_5">Methods</h4> + +<p>The following methods are available on objects that have been decorated with the <code>EventEmitter</code> interface.</p> + +<dl> + <dt> + <h5 id="emit(eventName_...extraArguments)"><code>emit(eventName, ...extraArguments)</code></h5> + </dt> + <dd>Emits an event with the given name to this object.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>eventName {String} - </code></em>The name of the event.<br> + <code><em>extraArguments {</em>...<em>Any} - </em></code>Extra arguments that are passed to the listeners.</dd> + <dt> + <h5 id="on(eventName_listener)"><code>on(eventName, listener)</code></h5> + </dt> + <dd>Adds a listener for the given event.</dd> + <dt> + <h5 id="off(eventName_listener)"><code>off(eventName, listener)</code></h5> + </dt> + <dd>Removes the previously added listener from the event.</dd> + <dt> + <h5 id="once(eventName_listener)"><code>once(eventName, listener)</code></h5> + </dt> + <dd>Adds a listener for the event that is removed after it has been emitted once.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.</dd> +</dl> + +<h4 id="Examples">Examples</h4> + +<p>Here's a few examples using the {{anch("gDevTools")}} object.</p> + +<pre class="brush: js"><code>let onInit = (eventName, toolbox, netmonitor) => console.log("Netmonitor initialized!"); + +// Attach a listener. +gDevTools.on("netmonitor-init", onInit); + +// Remove a listener. +gDevTools.off("netmonitor-init", onInit); + +// Attach a one time listener. +gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) => { + console.log("Network Monitor initialized once!", toolbox, netmonitor); +}); + +// Use the Promise returned by the once method. +gDevTools.once("netmonitor-init").then(toolbox => { + // Note that the second argument is not available here. + console.log("Network Monitor initialized to toolbox", toolbox); +});</code> +</pre> + +<h3 id="ToolSidebar">ToolSidebar</h3> + +<p>To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:</p> + +<pre class="line"><code class="brush: html"> <span class="nt"><splitter</span> <span class="na">class=</span><span class="s">"devtools-side-splitter"</span><span class="nt">/></span></code> +<code> <span class="nt"><tabbox</span> <span class="na">id=</span><span class="s">"mytool-sidebar"</span> <span class="na">class=</span><span class="s">"devtools-sidebar-tabs"</span> <span class="na">hidden=</span><span class="s">"true"</span><span class="nt">></span></code> +<code> <span class="nt"><tabs/></span></code> +<code> <span class="nt"><tabpanels</span> <span class="na">flex=</span><span class="s">"1"</span><span class="nt">/></span></code> +<code> <span class="nt"></tabbox></span></code></pre> + +<div class="line"></div> + +<div class="line">A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.</div> + +<div class="line"></div> + +<div class="line">If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.</div> + +<div class="line"></div> + +<div class="line">If the loaded document exposes a <code>window.setPanel(ToolPanel)</code> function, the sidebar will call it once the document is loaded.</div> + +<div class="line"></div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Method</th> + <th>Description</th> + </tr> + <tr> + <td><code>new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)</code></td> + <td>ToolSidebar constructor</td> + </tr> + <tr> + <td><code>void addTab(tabId, url, selected=false)</code></td> + <td>Add a tab in the sidebar</td> + </tr> + <tr> + <td><code>void select(tabId)</code></td> + <td>Select a tab</td> + </tr> + <tr> + <td><code>void hide()</code></td> + <td>Hide the sidebar</td> + </tr> + <tr> + <td><code>void show()</code></td> + <td>Show the sidebar</td> + </tr> + <tr> + <td><code>void toggle()</code></td> + <td>Toggle the sidebar</td> + </tr> + <tr> + <td><code>void getWindowForTab(tabId)</code></td> + <td>Get the iframe containing the tab content</td> + </tr> + <tr> + <td><code>tabId getCurrentTabID()</code></td> + <td>Return the id of tabId of the current tab</td> + </tr> + <tr> + <td><code>tabbox getTab(tabId)</code></td> + <td>Return a tab given its id</td> + </tr> + <tr> + <td><code>destroy()</code></td> + <td>Destroy the ToolSidebar object</td> + </tr> + <tr> + <th>Events</th> + <th>Description</th> + </tr> + <tr> + <td><code>new-tab-registered</code></td> + <td>A new tab has been added</td> + </tr> + <tr> + <td><code>{tabId}-ready</code></td> + <td>Tab is loaded and can be used</td> + </tr> + <tr> + <td><code>{tabId}-selected</code></td> + <td>Tab has been selected and is visible</td> + </tr> + <tr> + <td><code>{tabId}-unselected</code></td> + <td>Tab has been unselected and is not visible</td> + </tr> + <tr> + <td><code>show</code></td> + <td>The sidebar has been opened.</td> + </tr> + <tr> + <td><code>hide</code></td> + <td>The sidebar has been closed.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples_2">Examples</h2> + +<p>Register a tool</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">gDevTools<span class="punctuation token">.</span><span class="function token">registerTool</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + <span class="comment token">// FIXME: missing key related properties.</span> + id<span class="punctuation token">:</span> <span class="string token">"inspector"</span><span class="punctuation token">,</span> + icon<span class="punctuation token">:</span> <span class="string token">"chrome://browser/skin/devtools/inspector-icon.png"</span><span class="punctuation token">,</span> + url<span class="punctuation token">:</span> <span class="string token">"chrome://browser/content/devtools/inspector/inspector.xul"</span><span class="punctuation token">,</span> + <span class="keyword token">get</span> <span class="function token">label</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> strings <span class="operator token">=</span> Services<span class="punctuation token">.</span>strings<span class="punctuation token">.</span><span class="function token">createBundle</span><span class="punctuation token">(</span><span class="string token">"chrome://browser/locale/devtools/inspector.properties"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> strings<span class="punctuation token">.</span><span class="function token">GetStringFromName</span><span class="punctuation token">(</span><span class="string token">"inspector.label"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + + isTargetSupported<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>target<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="operator token">!</span>target<span class="punctuation token">.</span>isRemote<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + + build<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>iframeWindow<span class="punctuation token">,</span> toolbox<span class="punctuation token">,</span> node<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">InspectorPanel</span><span class="punctuation token">(</span>iframeWindow<span class="punctuation token">,</span> toolbox<span class="punctuation token">,</span> node<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Open a tool, or select it if the toolbox is already open:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> target <span class="operator token">=</span> TargetFactory<span class="punctuation token">.</span><span class="function token">forTab</span><span class="punctuation token">(</span>gBrowser<span class="punctuation token">.</span>selectedTab<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> toolbox <span class="operator token">=</span> gDevTools<span class="punctuation token">.</span><span class="function token">openToolbox</span><span class="punctuation token">(</span>target<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"inspector"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +toolbox<span class="punctuation token">.</span><span class="function token">once</span><span class="punctuation token">(</span><span class="string token">"inspector-ready"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">,</span> panel<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> inspector <span class="operator token">=</span> toolbox<span class="punctuation token">.</span><span class="function token">getToolPanels</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"inspector"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + inspector<span class="punctuation token">.</span>selection<span class="punctuation token">.</span><span class="function token">setNode</span><span class="punctuation token">(</span>target<span class="punctuation token">,</span> <span class="string token">"browser-context-menu"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Add a sidebar to an existing tool:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> sidebar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ToolSidebar</span><span class="punctuation token">(</span>xulTabbox<span class="punctuation token">,</span> toolPanel<span class="punctuation token">,</span> <span class="string token">"toolId"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +sidebar<span class="punctuation token">.</span><span class="function token">addTab</span><span class="punctuation token">(</span><span class="string token">"tab1"</span><span class="punctuation token">,</span> <span class="string token">"chrome://browser/content/.../tab1.xhtml"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +sidebar<span class="punctuation token">.</span><span class="function token">addTab</span><span class="punctuation token">(</span><span class="string token">"tab2"</span><span class="punctuation token">,</span> <span class="string token">"chrome://browser/content/.../tab2.xhtml"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +sidebar<span class="punctuation token">.</span><span class="function token">show</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> diff --git a/files/fr/outils/dom_property_viewer/index.html b/files/fr/outils/dom_property_viewer/index.html new file mode 100644 index 0000000000..8eda3a90aa --- /dev/null +++ b/files/fr/outils/dom_property_viewer/index.html @@ -0,0 +1,46 @@ +--- +title: Visionneur de propriétés DOM +slug: Outils/DOM_Property_Viewer +tags: + - DOM + - Tools + - Web Development +translation_of: Tools/DOM_Property_Viewer +--- +<div>{{ToolsSidebar}}</div> + +<div class="geckoVersionNote">Le visionneur de propriétés DOM est une des nouveautés de Firefox 48. Cet outil est désactivé par défaut. Pour l'utiliser, il faut l'activer dans les <a href="/fr/docs/Tools_Toolbox#Settings">options des outils de développement</a>.</div> + +<p>Le visionneur de propriétés DOM permet d'inspecter les propriétés {{Glossary("DOM")}} en tant qu'arbre extensible. Cet arbre commence à partir de l'objet {{domxref("window")}} de la page actuelle ou de <a href="/fr/docs/tools/Working_with_iframes">l'iframe sélectionné</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13098/DOM%20Inspector.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 843px;"></p> + +<h2 id="Activer_le_visionneur_de_propriétés_DOM">Activer le visionneur de propriétés DOM</h2> + +<p>Cet outil n'est pas activé par défaut. Pour l'activer, il faut ouvrir les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">options des outils de développement</a> et cocher la case "DOM" dans la catégorie "Outils de développement par défaut".</p> + +<h2 id="Ouvrir_le_visionneur_de_propriétés_DOM">Ouvrir le visionneur de propriétés DOM</h2> + +<p>Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS). Il est également possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>W</kbd>.</p> + +<p>La <a href="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".</p> + +<h2 id="L'interface_du_visionneur_de_propriétés_DOM">L'interface du visionneur de propriétés DOM</h2> + +<h3 id="Arbre_DOM">Arbre DOM</h3> + +<p>Les différentes propriétés du DOM sont affichées sous la forme d'un arbre extensible. La partie gauche affiche le nom des propriétés, tandis que la partie droite leur valeur. La valeur n'affiche au maximum que trois propriétés d'un objet ou trois propriétés d'un tableau. Si une propriété a plus de trois éléments, une annotation "...more" est ajoutée à la fin. Si une propriété n'est pas éditable, une icône de cadenas est ajoutée.</p> + +<h3 id="Actualiser_l'affichage">Actualiser l'affichage</h3> + +<p>Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :</p> + +<p><img alt="Button to update the DOM Inspector display" src="https://mdn.mozillademos.org/files/13102/DOM%20Inspector%20Refresh%20button.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 852px;"></p> + +<h3 id="Filtrage">Filtrage</h3> + +<p>Il y a un barre de recherche dans la barre d'outils :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13100/DOM%20Inspector%20search%20box.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 851px;"></p> + +<p>Cela filtre l'arbre pour n'afficher que les éléments qui correspondent à la recherche. Les éléments qui correspondent sont les éléments dont le nom est contenu dans la recherche. La correspondance est sensible à la case.</p> diff --git a/files/fr/outils/débogage_distant/chrome_desktop/index.html b/files/fr/outils/débogage_distant/chrome_desktop/index.html new file mode 100644 index 0000000000..1e1580b614 --- /dev/null +++ b/files/fr/outils/débogage_distant/chrome_desktop/index.html @@ -0,0 +1,49 @@ +--- +title: Déboguer Chrome Desktop à distance +slug: Outils/Débogage_distant/Chrome_Desktop +translation_of: Tools/Remote_Debugging/Chrome_Desktop +--- +<div>{{ToolsSidebar}}</div><p>Cet article explique comment connecter <a href="/fr/docs/Outils">les outils de développement Firefox</a> à <a href="https://www.google.fr/chrome/browser/desktop/">Google Chrome</a> si celui-ci est lancé sur l'ordinateur.</p> + +<div class="note"> +<p><strong>Note :</strong> Ce support dépend du module complémentaire Valence qui effectue le lien entre le protocole de débogage utilisé par Firefox et celui utilisé par Chrome. Le support de Valence est toujours expérimental.</p> +</div> + +<p>Ce guide est organisé en deux parties : la première concerne les prérequis nécessaires, la seconde partie concerne la partie de connexion.</p> + +<h2 id="Prérequis">Prérequis</h2> + +<p>Pour connecter les outils de développement avec Google Chrome, vous aurez besoin de :</p> + +<ul> + <li>Firefox 35 ou une version supérieure</li> + <li>Du module complémentaire <a href="/fr/docs/Outils/Firefox_Tools_Adapter">Valence</a> (anciennement appelé Adaptateur des outils) installé sur Firefox. Si vous utilisez <a href="/fr/Firefox/Developer_Edition">Firefox Developer Edition</a>, Valence est déjà installé. Sinon, vous pouvez <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxdt-adapters/">télécharger la dernière version de Valence</a> pour l'installer dans Firefox en ouvrant le fichier XPI.</li> + <li>Chrome 37 ou une version supérieure.</li> +</ul> + +<h2 id="Connexion">Connexion</h2> + +<p>{{EmbedYouTube("g5p9__OiaMY")}}</p> + +<h3 id="Lancer_Chrome">Lancer Chrome</h3> + +<p>Pour activer le débogage distant sur Chrome (pour ordinateur), vous aurez besoin de le lancer avec le flag suivant : <code>--remote-debugging-port=9222</code>. Pour plus d'informations, voir ce guide pour <a href="http://www.chromium.org/developers/how-tos/run-chromium-with-flags">démarrer Chrome avec des options en ligne de commande</a>.</p> + +<p>D'autres options peuvent s'avérer utiles. En lançant Chrome avec <code>--no-first-run</code>, <code>--no-default-browser-check</code>, et <code>--user-data-dir</code>, on peut lancer une instance de Chrome en parallèle d'une autre déjà lancée.</p> + +<p>Par exemple, sur OS X, on peut lancer la commande suivante pour démarrer une instance de Chrome qui soit débogable et qui puisse être séparée des autres instances éventuellement déjà lancées :</p> + +<pre class="language-html"><code class="language-html">/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')</code></pre> + +<h3 id="Effectuer_la_connexion_avec_WebIDE">Effectuer la connexion avec WebIDE</h3> + +<p>Sous Firefox, ouvrez <a href="/fr/docs/Tools/WebIDE/Opening_WebIDE">WebIDE</a>. Dans WebIDE, cliquez sur « Sélectionner l'environnement » puis sélectionnez « Chrome Desktop » dans le menu déroulant.</p> + +<p>Ensuite, cliquez sur le menu « Ouvrir une application » de WebIDE. Cela affichera une liste des onglets ouverts sur l'instance. Cliquez sur un onglet pour y connecter les outils de développement. Vous pourrez ensuite utiliser la plupart des outils de développement Firefox. À l'heure actuelle, les outils suivants ne sont pas encore supportés :</p> + +<ul> + <li><a href="/fr/docs/Outils/Performance">Performance</a></li> + <li>Timeline</li> + <li><a href="/fr/docs/Outils/Moniteur_réseau">Réseau</a></li> + <li><a href="/fr/docs/Outils/Inspecteur_de_stockage">Stockage</a></li> +</ul> diff --git a/files/fr/outils/débogage_distant/debugging_firefox_desktop/index.html b/files/fr/outils/débogage_distant/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..c6f18c479b --- /dev/null +++ b/files/fr/outils/débogage_distant/debugging_firefox_desktop/index.html @@ -0,0 +1,44 @@ +--- +title: Déboguer Firefox Desktop +slug: Outils/Débogage_distant/Debugging_Firefox_Desktop +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +<p>{{draft}}</p> + +<div>{{ToolsSidebar}}</div> + +<div></div> + +<p>Ce guide explique comment utiliser des outils de développement de Firefox pour déboguer une instance différente de Firefox pour ordinateur tournant sur la même machine. Dans ce guide, l'instance de Firefox qui sera déboguée sera référencée sous l'appellation <em>le débogué. </em> tournant l’instance qui fait le débogage sera appelé <em>le déboguant.</em></p> + +<h2 id="Activer_le_débogage_distant">Activer le débogage distant</h2> + +<p>Tout d'abord, il est nécessaire de s'assurer que le déboguant et le débogué aient tous les deux les options "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant" d'activés dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">options des outils de développement</a>. Si vous utilisez <a href="/fr/Firefox/Developer_Edition">Firefox Developer Edition</a>, les options devraient être activées par défaut.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Cette étape n'est nécessaire qu'une seule fois : les valeurs de ces options sont persistantes et resteront les mêmes jusqu'à ce que vous les changiez de nouveau.</p> + +<h2 id="Lancer_le_serveur_de_débogage">Lancer le serveur de débogage</h2> + +<p>Ensuite, il faut lancer le serveur de débogage dans le débogué.</p> + +<p>Depuis Firefox 37 la méthode ci-dessus fonction toujours, mais il existe une alternative : lancez le débogué en ligne de commande avec l'option <code>--start-debugger-server</code> :</p> + +<pre>/path/to/firefox --start-debugger-server</pre> + +<p>Passée sans argument, --start-debugger-server lance l'écoute sur le port 6000. Pour utiliser un port différent, il faut passer le port désiré :</p> + +<pre>/path/to/firefox --start-debugger-server 1234</pre> + +<p>Note: Sous Windows, l'appel <code>start-debugger-server</code> n'a qu'un seul tiret :</p> + +<pre>firefox.exe -start-debugger-server 1234</pre> + +<div class="note"> +<p><strong>Note</strong>: Par défaut, et pour des raisons de sécurité, l'option <code>devtools.debugger.force-local</code> est activé. Si vous voulez déboguer une instance de Firefox sur une machine externe, il est possible de changer cette option, mais il est extrêmement recommandé de faire cela que sur un réseau de confiance ou d'avoir au préalable instauré une règle de pare-feu forte pour déterminer quelle machine peut y accéder.</p> +</div> diff --git a/files/fr/outils/débogage_distant/debugging_firefox_for_android_with_webide_clone/index.html b/files/fr/outils/débogage_distant/debugging_firefox_for_android_with_webide_clone/index.html new file mode 100644 index 0000000000..1c09d2f521 --- /dev/null +++ b/files/fr/outils/débogage_distant/debugging_firefox_for_android_with_webide_clone/index.html @@ -0,0 +1,70 @@ +--- +title: Déboguer Firefox pour Android avec WebIDE +slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +<div>{{ToolsSidebar}}</div><p>Cet article décrit comment connecter les <a href="https://developer.mozilla.org/fr/docs/Tools">Outils de développement de Firefox </a>de Firefox pour Android à partir de Firefox 36.</p> + +<p>Cela fait un moment qu'il est possible de connecter les outils de développement de Firefox à Firefox pour Android afin de pouvoir déboguer des sites pour mobiles. Cependant, jusqu'à maintenant il s'agissait d'un procédé complexe et prompt à l'erreur. Depuis Firefox 36 le procédé est beaucoup plus simple : en particulier, il n'est plus du tout nécessaire de passer directement par l'outil <a href="http://developer.android.com/tools/help/adb.html">adb</a>. La connexion se fait maintenant par <a href="/fr/docs/Tools/WebIDE">WebIDE</a>, qui lui s'occupe d'adb.</p> + +<div class="note"> +<p>Pour que cela fonctionne, il est nécessaire d'avoir les versions Firefox Desktop 36+ et Firefox pour Android 35+. Si vous avez besoin d'utiliser des versions précédentes, regardez les instructions pour <a href="/fr/docs/Tools/Remote_Debugging/Firefox_for_Android">connecter les outils de développement à Firefox pour Android</a>.</p> +</div> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Ce guide est divisé en deux parties : la première partie "Prérequis", décris toutes les opérations qui ne sont requises qu'une seule fois, alors que la seconde partie "Connexion", décrit les étapes qui sont nécessaires à chaque connexion.</p> + +<h2 id="Prérequis">Prérequis</h2> + +<p>Tout d'abord, vous aurez besoin d'avoir :</p> + +<ul> + <li>Un ordinateur avec Firefox 36 ou plus récent installé</li> + <li>Un appareil Android <a class="external external-icon" href="https://support.mozilla.org/fr/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable d'exécuter Firefox pour Android</a> avec Firefox pour Android 35 ou plus récent installé.</li> + <li>Un câble USB pour connecter les deux appareils</li> +</ul> + +<h3 id="ADB_Helper">ADB Helper</h3> + +<p>Votre Firefox Desktop doit également posséder le module complémentaire ADB Helper version 0.7.1 ou plus récent. Ce module devrait s'être installé automatiquement à la première ouverture de WebIDE. Pour vérifier la version, tapez <code>about:addons</code> dans la barre d'adresse du navigateur et ADM devrait être listé.</p> + +<p>Si vous n'avez pas ADB Helper version 0.7.1+, sélectionnez " Gérer les composants additionnels " depuis le menu "Projets", et ADB Helper sera listé sous "Composants supplémentaires" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquez sur "désinstaller", puis sur "installer", et vous devriez maintenant avoir la dernière version.</p> + +<h3 id="Configurer_l'appareil_Android">Configurer l'appareil Android</h3> + +<p>Tout d'abord, activez le débogage USB en suivant les étapes<a class="external external-icon" href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">2 et 3 de ce lien et uniquement ce lien</a>.</p> + +<p>Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Le navigateur peut alors afficher une notification vous rappelant de configurer le "port forwarding", ignorez cette notification.</p> + +<h2 id="Connexion">Connexion</h2> + +<p>Connectez l'appareil Android à l'ordinateur grâce au câble USB, ouvrez <a href="/fr/docs/Tools/WebIDE">WebIDE</a>, et dans le panneau "Environnement", vous verrez un Firefox pour Android dans la catégorie "Périphériques USB" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9013/remote-debugging-android-runtime.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Sélectionnez-le. Sur l'appareil Android, le message d'avertissement suivant apparait :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9031/incoming-warning.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Cliquez sur OK. Maintenant, cliquez sur "Ouvrir une application" dans le menu de WebIDE? Vous verrez alors une liste des onglets ouverts sur l'appareil :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9015/remote-debugging-android-open-tabs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Sélectionnez un onglet pour y attacher les outils de développement :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9029/remote-debugging-android-attached.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Maintenant, vous devriez pouvoir utiliser tous les outils de développement de Firefox qui supporte le débogage distant. Voir la page <a href="/fr/docs/Tools/Remote_Debugging">débogage distant</a> pour plus de détails.</p> diff --git a/files/fr/outils/débogage_distant/index.html b/files/fr/outils/débogage_distant/index.html new file mode 100644 index 0000000000..bc7965065b --- /dev/null +++ b/files/fr/outils/débogage_distant/index.html @@ -0,0 +1,20 @@ +--- +title: Débogage distant +slug: Outils/Débogage_distant +tags: + - Outils +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d'utiliser les <a href="/fr/docs/Tools">outils de développement</a> de Firefox de votre ordinateur pour déboguer des sites et des applications web tournant dans d'autres navigateurs ou environnements d'exécution. Les autres navigateurs peuvent être sur le même appareil que les outils ou sur un appareil différent, tel qu'un téléphone connecté en USB.</p> + +<p>Les instructions détaillées pour connecter les outils de développement dépendent de l’environnement d'exécution.</p> + +<p>Il est possible de connecter les outils de développement aux environnements d'exécution Gecko tels que : Firefox sur ordinateur, Firefox pour Android, et Thunderbird.</p> + +<ul> + <li><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox sur ordinateur</a></li> + <li>Firefox pour Android <a href="/fr/docs/Tools/about:debugging">via USB</a></li> + <li><a href="/fr/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> +</ul> diff --git a/files/fr/outils/débogage_distant/thunderbird/index.html b/files/fr/outils/débogage_distant/thunderbird/index.html new file mode 100644 index 0000000000..cf55624731 --- /dev/null +++ b/files/fr/outils/débogage_distant/thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Débogage distant de Thunderbird +slug: Outils/Débogage_distant/Thunderbird +tags: + - Debug + - Tutorial + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +<div>{{ToolsSidebar}}</div><p>Ce guide décrit comment utiliser le <a href="/fr/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">débogage distant </a>pour inspecter et déboguer du code dans <a href="/fr/docs/Mozilla/Thunderbird">Thunderbird</a>.</p> + +<p>De nombreux outils de développeent sont compatibles avec Thunderbird en utilisant de mécanisme de connexion à distante de Firefox. Les outils actuellement compatibles sont : La Console Web, l'Inspecteur, le Débogeur, l'Éditeur de Style, Performance, et Réseau. D'autres outils seront disponibles dans le futur.</p> + +<h2 id="Configurer_Thunderbird">Configurer Thunderbird</h2> + +<p>Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu <code>Outils</code> dans la barre d'outils (alt + Outils) et en sélectionnant <code>Activer le débogage distant</code>. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence <code>devtools.debugger.remote-port</code>.</p> + +<h2 id="Configurer_Firefox">Configurer Firefox</h2> + +<p>Firefox agit comme le client et fournit l'interface utilisateur pour contrôler les outils de développement pour Thunderbird. Il est recommandé d'utiliser une version de Firefox et Thunderbird majeure, mais dans certains cas, cela fonctionnera avec d'autres versions.</p> + +<p>Pour configurer Firefox, il faut activer l'option "Activer le débogage distant" dans les options des outils de développement. Pour cela, il faut <a href="/fr/docs/Tools/Tools_Toolbox" title="/fr/docs/Tools/Tools_Toolbox">ouvrir la boite à outils</a>, cliquer sur l'icône "Options" button dans la <a href="/fr/docs/Tools/Tools_Toolbox#Barre_d'outils" title="/fr/docs/Tools/Tools_Toolbox#Toolbar">barre d'outils</a>, et cocher "Activer le débogage distant" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png"></p> + +<p>Vous pouvez maintenant ouvrir la page de connections de Firefox en passant par le menu outils :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="height: 503px; width: 583px;"></p> + +<p>Un page s'ouvrira alors dans le navigateur, il est possible de l'ajouter aux favoris. Dans le cas ou le port est celui par défaut, les champs seront déjà remplis correctement. Cliquez sur le bouton de connexion pour initialiser la connexion distante. Si vous avez changé le port par défaut, rentrez le port que vous avez choisi dans le champ approprié.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="height: 686px; width: 732px;"></p> + +<p>Vous serez ensuite présenté avec une liste d'onglets et de processus distants. Comme la notion d'onglets de Thunderbird n'est pas la même que celle de Firefox, les onglets distants qui sont affichés sont les éléments xul:browser dans Thunderbird. Cela peut être un onglet à contenu, ou le lecteur de message. Dans la plupart des cas cependant, vous voudrez sélectionner "Processus principal" pour déboguer le code de Thunderbird lui-même. Une nouvelle fenêtre s'ouvre alors avec les outils de développement connectés à l'instance de Thunderbird.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png"></p> + +<h2 id="Utiliser_les_outils_de_développement">Utiliser les outils de développement</h2> + +<p>L'utilisation des outils de développement est explicite. Si vous avez des problèmes avec un outil en particulier, jetez un oeil à la <a href="/fr/docs/Tools/Remote_Debugging"> documentation des outils de développement</a>. Du faite de la nature distante de la connexion, il peut y avoir quelques menues différences. Certains outils peuvent ne pas être disponibles, et il est également possible que la performance ne soit pas la même. Par exemple utiliser l'outil Débogeur prend pas mal de temps à charger, car les fichiers doivent être transférés par une connexion réseau interne.</p> + +<h2 id="Résolution_des_problèmes">Résolution des problèmes</h2> + +<p>Si vous rencontrez une erreur, la première chose à faire est de vérifier que les numéros de version de Firefox et Thunderbird sont les mêmes : si vous utilisez Firefox 24, vous devriez utiliser également Thunderbird 24. Ensuite, il est important de savoir si le problème vient des outils de développement ou du code distant dans Thunderbird. Pour vérifier cela, essayez de reproduire le problème en utilisant uniquement Firefox. Par exemple si vous vous rendez compte que vous ne pouvez pas modifier un attribut dans l'Inspecteur, essayez de changer un attribut dans Firefox. SI vous ne pouvez pas le reproduire, déclarez un bug dans le produit Thunderbird, sinon, déclarez un bug dans les outils de développement de Firefox.</p> diff --git a/files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html b/files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html new file mode 100644 index 0000000000..5c14593f5f --- /dev/null +++ b/files/fr/outils/débogueur/comment/accéder_au_débogage_depuis_un_module_complàmentaire/index.html @@ -0,0 +1,26 @@ +--- +title: Accéder au débogage depuis un module complémentaire +slug: Outils/Débogueur/Comment/Accéder_au_débogage_depuis_un_module_complàmentaire +translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons +--- +<div>{{ToolsSidebar}}</div><div class="warning"> +<p>Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.</p> +</div> + +<p>Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :</p> + +<ul> + <li>window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé</li> + <li>window.addEventListener("Debugger:EditorUnloaded")</li> +</ul> + +<p>Fichiers en relation :</p> + +<ul> + <li>chrome://browser/content/devtools/debugger-controller.js</li> + <li>chrome://browser/content/devtools/debugger-toolbar.js</li> + <li>chrome://browser/content/devtools/debugger-view.js</li> + <li>chrome://browser/content/devtools/debugger-panes.js</li> +</ul> + +<p>Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="bug #653545">653545</a>.</p> diff --git a/files/fr/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html b/files/fr/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html new file mode 100644 index 0000000000..4c0299205c --- /dev/null +++ b/files/fr/outils/débogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html @@ -0,0 +1,16 @@ +--- +title: Afficher en surbrillance et inspecter les nœuds DOM +slug: Outils/Débogueur/Comment/Afficher_en_surbrillance_et_inspecter_le_DOM +translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes +--- +<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> + +<p>Si vous survolez un nœud DOM dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane">panneau des variables</a>, il sera affiché en surbrillance dans la page :</p> + +<p>De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira <a href="/fr/docs/Tools/Page_Inspector">l'Inspecteur</a> avec l'élément DOM sélectionné.</p> + +<p>{{EmbedYouTube("0JWxXp2Qql8")}}</p> diff --git a/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html b/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html new file mode 100644 index 0000000000..5f0ac95129 --- /dev/null +++ b/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt/index.html @@ -0,0 +1,45 @@ +--- +title: Ajouter un point d'arrêt +slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt +tags: + - JavaScript + - Tools +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible de placer un point d'arrêt de trois façons différentes :</p> + +<ul> + <li>Dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a>, cliquer sur le numéro de la ligne où l'arrêt est désiré.</li> + <li>Dans <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">le panneau des sources</a>, faire un clic droit sur la ligne où l'arrêt est désiré pour ouvrir le menu contextuel puis cliquer sur "Ajouter un point d'arrêt"</li> + <li>Dans <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">le panneau des sources</a>, mettre la ligne ciblée en surbrillance et appuyer sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)</li> +</ul> + +<p>Lors de l'ouverture du menu contextuel, il est possible de placer soit un point d'arrêt normal qui arrêtera l’exécution, ou bien un point d'arrêt conditionnel qui lui n’arrêtera le code que si les conditions définies sont satisfaites.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p> + +<p>Si le point d'arrêt choisi est conditionnel, il sera possible de spécifier sa condition :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p> + +<p>Chaque point d'arrêt est affiché à deux endroits dans le débogueur :</p> + +<ul> + <li>Dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">liste des points d'arrêts</a>, qui indique également le nom de fichier et le numéro de ligne du point d'arrêt. + + <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p> + </li> + <li>Sous forme de flèche bleue (ou orange si <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditionnel</a>) sur la ligne affectée dans le <a href="#source-list-pane">panneau des sources</a>.<img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li> +</ul> + +<p>À partir de Firefox 67, il est possible d'ajouter un point d'arrêt à plusieurs endroits d'une ligne complexe (ex: une ligne avec plusieurs appels de fonction). Par exemple, dans la ligne ci-dessous, il y aura trois endroits possibles pour le point d'arrêt: au point ou la variable est assignée, au point our l'appel à <code>parse</code> est fait, ou à l'appel de <code>getItem</code>.</p> + +<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre> + +<p>Les points d'arrêt possible sont affichés par des indicateurs. L'image suivante montre une l'image suivante affiche la ligne précédente dans le Débogueur. Lors d'un clic sur la ligne, trois indicateurs apparaissent. Par défaut le point d'arrêt est mis sur la première colonne, dans l'image, la seconde colonne à été choisie, ce qui est confirmé par le panneau de droite, la section "Breakpoints" affichant que le point est sur <code>parse</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<p>Ces points d'arrêt permettent de s’arrêter à plusieurs endroits sur la même ligne, dans l'exemple précédent, il aurait été possible de s’arrêter sur un, deux, ou même chaque point.</p> diff --git a/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html b/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html new file mode 100644 index 0000000000..b78dfa5a8e --- /dev/null +++ b/files/fr/outils/débogueur/comment/ajouter_un_point_d_arrêt_conditionnel/index.html @@ -0,0 +1,16 @@ +--- +title: Ajouter un point d’arrêt conditionnel +slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt_conditionnel +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +<div>{{ToolsSidebar}}</div> + +<p>Un point d'arrêt normal est juste associé à une ligne : lorsque le programme arrive à cette ligne, le Débogueur s'arrête. Un point d'arrêt conditionnel possède en plus une condition associée représentée par une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>. Dans ce cas, lorsque le programme arrive à la ligne du point d'arrêt, le Débogueur ne s'arrêtera que si l'expression est évaluée à <code>true</code>.</p> + +<p>{{EmbedYouTube("pVPlMhfrMwM")}}</p> + +<p>Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a> et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait puis appuyer sur <kbd>Entrée</kbd> pour terminer.</p> + +<p>les points d'arrêt conditionnels sont représentés par une flèche orange superposée au numéro de ligne.</p> + +<p>Le menu contextuel (clic droit) de n'importe quel point d'arrêt (conditionnel ou non) possède une option "Modifier le point d'arrêt". Il est possible d'utiliser cette option pour modifier ou ajouter une condition.</p> diff --git a/files/fr/outils/débogueur/comment/breaking_on_exceptions/index.html b/files/fr/outils/débogueur/comment/breaking_on_exceptions/index.html new file mode 100644 index 0000000000..b009f06df0 --- /dev/null +++ b/files/fr/outils/débogueur/comment/breaking_on_exceptions/index.html @@ -0,0 +1,28 @@ +--- +title: S'arrêter sur les exceptions +slug: Outils/Débogueur/Comment/Breaking_on_exceptions +translation_of: Tools/Debugger/How_to/Breaking_on_exceptions +--- +<div>{{ToolsSidebar}}</div> + +<h4 id="Firefox_version_64">Firefox version 64</h4> + +<div>Pour que le Débogueur s'arrête sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error">exceptions</a>, il suffit de cliquer sur une de ces cases à cocher dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Liste des points d'arrêt</a> :</div> + +<div> </div> + +<div><img alt="Screen shot from 64.0+build3-0ubuntu0.16.04.1" src="https://mdn.mozillademos.org/files/16397/version64UI.png" style="height: 167px; width: 506px;"></div> + +<h4 id="Versions_antérieures">Versions antérieures</h4> + +<p>Pour que le Débogueur s'arrête sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error">exceptions</a>, Il faut cliquer sur ce bouton : <img alt="" src="https://mdn.mozillademos.org/files/14410/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">barre d'outils.</a></p> + +<p>{{EmbedYouTube("UWIO_UM827k")}}</p> + +<p>Le bouton à trois états possibles, cliquer sur celui-ci passe d'un état au suivant.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14416/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : ne s'arrête sur aucune exception. C'est l'état par défaut.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14412/uncaught-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : ne s'arrête que les exceptions <a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">qui ne sont pas attrapées</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14414/all-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : s'arrête sur toutes les exceptions.</p> diff --git a/files/fr/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html b/files/fr/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html new file mode 100644 index 0000000000..e0c305f21a --- /dev/null +++ b/files/fr/outils/débogueur/comment/déboguer_des_sources_évaluées/index.html @@ -0,0 +1,29 @@ +--- +title: Déboguer des sources évaluées +slug: Outils/Débogueur/Comment/Déboguer_des_sources_évaluées +translation_of: Tools/Debugger/How_to/Debug_eval_sources +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractère à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a>, soit en étant passé sous forme de chaine caractère au constructeur d'une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>.</p> + +<p>Dans la vidéo ci-dessous, un page contenant le code source suivant est chargée :</p> + +<pre class="brush: js">var script = `function foo() { + console.log('called foo'); + } + //# sourceURL=my-foo.js`; + +eval(script); + +var button = document.getElementById("foo"); +button.addEventListener("click", foo, false); +</pre> + +<p>Cela nome le script "mon-foo.js"en utilisant l'instruction <code>//# sourceURL</code>. Cette source est alors listée dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau de la liste des sources</a>, et peut être ouverte comme n'importe quelle source.</p> + +<p>{{EmbedYouTube("nFm8F8Anmic")}}</p> + +<p>Le nom du script apparaitra également dans la pile d'exécution dans la <a href="/fr/docs/Tools/Web_Console#Error_messages">Console Web</a>.</p> + +<p>Le Débogueur s’arrêtera également aux expressions <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> dans les sources évaluées anonymes</p> diff --git a/files/fr/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html b/files/fr/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html new file mode 100644 index 0000000000..5ca12ea619 --- /dev/null +++ b/files/fr/outils/débogueur/comment/désactiver_des_points_d_arrêts/index.html @@ -0,0 +1,16 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Débogueur/Comment/Désactiver_des_points_d_arrêts +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div> + +<p>Pour désactiver un point d'arrêt spécifique, il suffit de décocher la case à cocher à côté du point d'arrêt dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">liste des points d'arrêt</a>.</p> + +<p>Pour désactiver tous les points d'arrêts, il suffit cliquer sur cette icône : <img alt="" src="https://mdn.mozillademos.org/files/14402/toggle-all.png" style="height: 24px; margin-bottom: -5px; width: 30px;"> dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">barre d'outils</a>.</p> + +<p>{{EmbedYouTube("ULoZ70XPd90")}}</p> + +<p>Après avoir désactivé un point d'arrêt, sa couleur sera plus claire avec une bordure foncée. Par exemple :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16919/disable_breakpoints.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> diff --git a/files/fr/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html b/files/fr/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html new file mode 100644 index 0000000000..e2042c339b --- /dev/null +++ b/files/fr/outils/débogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html @@ -0,0 +1,48 @@ +--- +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 +--- +<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/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html b/files/fr/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html new file mode 100644 index 0000000000..4ba2ddaf91 --- /dev/null +++ b/files/fr/outils/débogueur/comment/formater_et_indenter_un_fichier_minifié/index.html @@ -0,0 +1,20 @@ +--- +title: Formater et indenter un fichier minifié +slug: Outils/Débogueur/Comment/Formater_et_indenter_un_fichier_minifié +translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file +--- +<div>{{ToolsSidebar}}</div> + +<p>Pour formater et indenter un fichier qui a été minifié, il faut cliquer sur cette icône : <img alt="" src="https://mdn.mozillademos.org/files/16638/pretty_print_icon.png" style="border: 1px solid black; height: 19px; margin-bottom: -5px; width: 20px;"> dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des source</a>. Le Débogueur formatera la source et l'affichera dans un nouveau fichier avec un nom au format : "{ }[nom-original]".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16639/pretty_print_source.png" style="border: 1px solid black; display: block; height: 357px; margin: 0px auto; width: 914px;"></p> + +<p>Après un clic sur l'icone, le code source ressemble à ceci:</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16640/pretty_print_after.png" style="border: 1px solid black; display: block; height: 315px; margin: 0px auto; width: 914px;"></p> + +<div class="note"> +<p><strong>Note</strong>: <span style="color: #000000;">Pour mettre en forme du code JavaScript inline, il suffit de double cliquer sur le code dans panneau de l'inspecteur.</span></p> +</div> diff --git a/files/fr/outils/débogueur/comment/index.html b/files/fr/outils/débogueur/comment/index.html new file mode 100644 index 0000000000..4b9f36e8fe --- /dev/null +++ b/files/fr/outils/débogueur/comment/index.html @@ -0,0 +1,12 @@ +--- +title: Comment faire… +slug: Outils/Débogueur/Comment +tags: + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="seoSummary">Ces articles décrivent comment utiliser le débogueur.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/fr/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html b/files/fr/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html new file mode 100644 index 0000000000..2af7f19958 --- /dev/null +++ b/files/fr/outils/débogueur/comment/mettre_une_source_dans_une_boîte_noire/index.html @@ -0,0 +1,24 @@ +--- +title: Mettre une source dans une boîte noire +slug: Outils/Débogueur/Comment/Mettre_une_source_dans_une_boîte_noire +translation_of: Tools/Debugger/How_to/Ignore_a_source +--- +<div>{{ToolsSidebar}}</div> + +<p>Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a>, ou <a href="http://angularjs.org/">Angular</a>, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des <a href="http://fr.wikipedia.org/wiki/Bo%C3%AEte_noire_%28syst%C3%A8me%29">boites noires</a>. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.</p> + +<p>Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau de la liste des sources </a>puis en cliquant sur l'icône en forme d'œil en bas à gauche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la <a href="/fr/docs/Tools/GCLI">Barre de développement</a> et utilisant la commande <code>dbg blackbox</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p> + +<p>Quand une source est mise dans une boîte noire :</p> + +<ul> + <li>Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.</li> + <li>Lorsque l'option « <strong>Pause sur les exceptions</strong> » dans les <a href="/fr/docs/Tools/Debugger/Settings">options du Débogueur</a> est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.</li> + <li>Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.</li> +</ul> diff --git a/files/fr/outils/débogueur/comment/ouvrir_le_débogueur/index.html b/files/fr/outils/débogueur/comment/ouvrir_le_débogueur/index.html new file mode 100644 index 0000000000..e56cd0a53c --- /dev/null +++ b/files/fr/outils/débogueur/comment/ouvrir_le_débogueur/index.html @@ -0,0 +1,20 @@ +--- +title: Ouvrir le Débogueur +slug: Outils/Débogueur/Comment/Ouvrir_le_débogueur +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +<div>{{ToolsSidebar}}</div> + +<p>Il y a deux façons d'ouvrir le Débogueur :</p> + +<ul> + <li>Sélectionner "Débogueur" dans le menu Développement qui est un sous-menu du menu Firefox.</li> + <li> + <p>Utiliser le raccourci <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> sur Windows et Linux, et <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>S</kbd> sur Mac</p> + + <div class="blockIndicator note"><strong>Note:</strong> Ce raccourci clavier ne fonctionne plus dans Firefox 66 ou plus. Il est cependant possible d'utiliser <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd> (Windows/Linux), et <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> (MacOS), ou <kbd>F12</kbd> pour ouvrir la boite à outils et sélectionner le Débogueur.</div> + </li> + <li>Utiliser le bouton menu ( <img alt="new fx menu" class="frameless wiki-image" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;" title=""> ), sélectionner "Développeur", puis "Débogueur".</li> +</ul> + +<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p> diff --git a/files/fr/outils/débogueur/comment/parcourir_le_code/index.html b/files/fr/outils/débogueur/comment/parcourir_le_code/index.html new file mode 100644 index 0000000000..9e3d8a3ae7 --- /dev/null +++ b/files/fr/outils/débogueur/comment/parcourir_le_code/index.html @@ -0,0 +1,25 @@ +--- +title: Parcourir le code +slug: Outils/Débogueur/Comment/Parcourir_le_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +<div>{{ToolsSidebar}}</div> + +<p>Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons de la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16431/breakpoint_toolbar.png" style="display: block; height: 220px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>De gauche à droite :</p> + +<ul> + <li>Reprendre : exécute le code jusqu'au prochain point d'arrêt</li> + <li>Passer la fonction : avance jusqu'à ligne suivante dans la même fonction</li> + <li>Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée</li> + <li>Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle. Dans ce cas, le Débogueur reviens à l’exécution de la fonction appelante.</li> +</ul> + +<p>{{EmbedYouTube("RQBwEk0-xe0")}}</p> + +<p>Lors d'une pause, il est possible d'appuyer sur la touche <kbd>Échap</kbd> afind d'ouvrir la Console pour avoir plus d'informations sur les erreurs et les variables :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16432/split_console.png" style="border: 1px solid black; display: block; height: 283px; margin-left: auto; margin-right: auto; width: 800px;"></p> diff --git a/files/fr/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html b/files/fr/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html new file mode 100644 index 0000000000..aef548628e --- /dev/null +++ b/files/fr/outils/débogueur/comment/s_arrêter_sur_un_évènement_dom/index.html @@ -0,0 +1,24 @@ +--- +title: S’arrêter sur un évènement DOM +slug: Outils/Débogueur/Comment/S_arrêter_sur_un_évènement_DOM +translation_of: Tools/Debugger/Break_on_DOM_mutation +--- +<div>{{ToolsSidebar}}</div> + +<div class="note"> +<p>Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur.</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> + +<p>Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.</p> + +<p>Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils</a> (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le <a href="/fr/docs/Tools/Debugger/UI_Tour#Events_pane">panneau des événements</a>. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13210/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.</p> + +<p>Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.</p> + +<p>{{EmbedYouTube("f-tbR8kj0K0")}}</p> diff --git a/files/fr/outils/débogueur/comment/search/index.html b/files/fr/outils/débogueur/comment/search/index.html new file mode 100644 index 0000000000..3db07016dc --- /dev/null +++ b/files/fr/outils/débogueur/comment/search/index.html @@ -0,0 +1,30 @@ +--- +title: Rechercher +slug: Outils/Débogueur/Comment/Search +translation_of: Tools/Debugger/How_to/Search +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Rechercher_des_fichiers">Rechercher des fichiers</h2> + +<p>Pour rechercher un fichier en particulier, il faut utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>P</kbd> (ou <kbd>Cmd</kbd> + <kbd>P</kbd> sur Mac) puis écrire les termes de recherche. Le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources </a> affichera une liste des fichiers. Il est possible d'utiliser les flèches haut et bas pour se déplacer dans la liste. La touche <kbd>Entrée</kbd> ouvre le fichier sélectionné :</p> + +<p>{{EmbedYouTube("xXsfYx0THWg")}}</p> + +<h2 id="Rechercher_dans_un_fichier">Rechercher dans un fichier</h2> + +<p>Pour chercher dans le fichier actuellement chargé dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a> il faut appuyer sur <kbd>Ctrl</kbd> + <kbd>F</kbd> (ou <kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac) pendant que le panneau est sélectionné. Le Débogueur affichera alors le nombre de résultats et les surlignera dans le code :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14997/new-search.png" style="display: block; height: 524px; margin-left: auto; margin-right: auto; width: 595px;"></p> + +<h2 id="Rechercher_dans_tous_fichiers">Rechercher dans tous fichiers</h2> + +<p>Il est également possible de rechercher dans une chaine dans tous les fichiers du projet actuel. Il suffit pour cela de presser <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd> (Windows et Linux) or <kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd> (macOS) puis d'entrer la chaine de caractères recherchée.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16790/searchInAllFiles.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p> + +<p>Si la chaine existe dans un des fichiers du projet, la recherche retournera une liste triée par fichier de par ligne.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16789/ctrlShiftF.png" style="border: 1px solid black; display: block; height: 342px; margin: 0px auto; width: 800px;"></p> + +<p>Cliquer sur un élément dans la liste emmène directement dans le fichier à la ligne correspondante.</p> diff --git a/files/fr/outils/débogueur/comment/set_watch_expressions/index.html b/files/fr/outils/débogueur/comment/set_watch_expressions/index.html new file mode 100644 index 0000000000..0ee376dc77 --- /dev/null +++ b/files/fr/outils/débogueur/comment/set_watch_expressions/index.html @@ -0,0 +1,18 @@ +--- +title: Ajouter une expression espionne +slug: Outils/Débogueur/Comment/Set_Watch_Expressions +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +--- +<div>{{ToolsSidebar}}</div> + +<p>Lors d'une rude séance de débogage, il est parfois utile d'espionner des expressions lorsque le code est en pause. Le Débogueur possède un panneau pour créer des expressions espionnes. Lors du parcours du code, ces expressions seront alors surveillées de près. Et chaque changement sera affiché.</p> + +<p>Pour créer une expression espionne, il faut d'abord ouvrir le panneau correspondant dans la partie droite du Débogueur. Puis cliquer sur "Ajouter une expression espionne". Et enfin, entrer l'expression voulue dans le champ text sélectionné :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14999/add-watch-expression.png" style="display: block; height: 354px; margin-left: auto; margin-right: auto; width: 417px;"></p> + +<p>Le Débogueur sauvegardera l'expression et l'espionnera tout au long du parcours du code. Lorsque le Débogueur rencontre un point d'arrêt, il affichera automatiquement les valeurs des expressions espionnes :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15007/watched-expression.png" style="display: block; height: 490px; margin-left: auto; margin-right: auto; width: 966px;"></p> + +<p>Il est possible de parcourir le code et de voir les changements des expressions. À chaque changement, le panneau sera brièvement coloré en jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de "x" à côté de celle-ci. Et bien sûr, il est possible d'avoir plusieurs expressions à la fois.</p> diff --git a/files/fr/outils/débogueur/comment/utiliser_une_source_map/index.html b/files/fr/outils/débogueur/comment/utiliser_une_source_map/index.html new file mode 100644 index 0000000000..fb9c4d3c8b --- /dev/null +++ b/files/fr/outils/débogueur/comment/utiliser_une_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Utiliser une cartographie de code source +slug: Outils/Débogueur/Comment/Utiliser_une_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +<div>{{ToolsSidebar}}</div> + +<p>Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Par exemple :</p> + +<ul> + <li>Les sources sont souvent combinées et <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">minifiées</a> afin d'optimiser le temps que met le serveur à les fournir.</li> + <li>Le JavaScript d'une page est souvent généré automatiquement. Par exemple lorsqu'il est compilé depuis un langage comme <a href="http://coffeescript.org/">CoffeeScript</a> ou <a href="http://www.typescriptlang.org/">TypeScript</a>.</li> +</ul> + +<p>Dans ces situations, il est bien plus facile de déboguer le code dans son état original plutôt que dans celui utilisé par le navigateur. Une <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">cartographie de code source</a> (source map) est un fichier grâce auquel le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur.</p> + +<p>Pour activer le débogueur, il est nécessaire de :</p> + +<ul> + <li>générer la source map</li> + <li>inclure une instruction en commentaire dans le fichier transformé, qui pointe vers la source map. La syntaxe du commentaire est la suivante :</li> +</ul> + +<pre class="brush: js notranslate">//# sourceMappingURL=http://exemple.com/chemin/vers/votre/sourcemap.map</pre> + +<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> + +<p>Dans la vidéo ci-dessus, la page <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a> est utilisée. Cette page charge une source nommée "main.js" qui a été écrite en CoffeeScript puis compilée vers JavaScript. La source compilée contient le commentaire suivant qui pointe vers la source map :</p> + +<pre class="brush: js notranslate">//# sourceMappingURL=main.js.map</pre> + +<p>Dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau des sources</a>, du Débogueur, la source CoffeeScript originale apparait en tant que "main.coffee". Il est alors possible de la déboguer comme n'importe quelle source.</p> diff --git a/files/fr/outils/débogueur/index.html b/files/fr/outils/débogueur/index.html new file mode 100644 index 0000000000..9ad5a4fead --- /dev/null +++ b/files/fr/outils/débogueur/index.html @@ -0,0 +1,57 @@ +--- +title: Débogueur +slug: Outils/Débogueur +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - Tools +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div> + +<div>Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retouver et de corriger les bugs.</div> + +<div></div> + +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Android utilisant Firefox pour Android. Voir le <a href="/fr/docs/Tools/Remote_Debugging">guide du débogage à distance</a> pour apprendre à connecter le débogueur à une cible distante.</p> + +<p>Pour vous repérer dans le débogueur, voici une courte <a href="/fr/docs/Tools/Debugger/UI_Tour">visite guidée de l'interface utilisateur.</a></p> + +<hr> +<h2 id="Comment">Comment ?</h2> + +<p>Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :</p> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Debugger/How_to/Open_the_debugger">Ouvrir le débogueur</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Set_a_breakpoint">Ajouter un point d’arrêt</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Ajouter un point d'arrêt conditionnel</a></li> + <li><a href="/fr/docs/Tools/Debugger/Set_an_XHR_breakpoint">Ajouter un point d'arrêt XHR</a></li> + <li><a href="/fr/docs/Tools/Debugger/Set_a_logpoint">Ajouter un point de log</a></li> + <li><a href="/fr/docs/Tools/Debugger/Set_event_listener_breakpoints">Ajouter un point d'arrêt d'écouteur d'évènement</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">Désactiver des points d’arrêt</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Step_through_code">Parcourir le code pas à pas</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Breaking_on_exceptions">S’arrêter sur les exceptions</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Ajouter des expressions espionnes</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Afficher joliment un fichier minifié</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Search_and_filter">Rechercher</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Debug_eval_sources">Déboguer des sources évaluées</a></li> + <li><a href="/fr/docs/Tools/Debugger/How_to/Use_a_source_map">Utiliser une source map</a></li> + <li><a href="/fr/docs/Tools/Debugger/Break_on_DOM_mutation">S'arrêter sur une mutation DOM</a></li> +</ul> +</div> + +<hr> +<h2 id="Référence">Référence</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Debugger/Keyboard_shortcuts">Raccourcis clavier</a></li> + <li><a href="/fr/docs/Tools/Debugger/Source_map_errors">Erreurs des sources maps</a></li> +</ul> +</div> diff --git a/files/fr/outils/débogueur/limitations_of_the_new_debugger/index.html b/files/fr/outils/débogueur/limitations_of_the_new_debugger/index.html new file mode 100644 index 0000000000..939e3c2343 --- /dev/null +++ b/files/fr/outils/débogueur/limitations_of_the_new_debugger/index.html @@ -0,0 +1,19 @@ +--- +title: Limitations of the new debugger +slug: Outils/Débogueur/Limitations_of_the_new_debugger +translation_of: Tools/Debugger/Limitations_of_the_new_debugger +--- +<div>{{ToolsSidebar}}</div><p>À partir de la version 52, Firefox inclut un nouveau Débogueur. Celui-ci n'est actuellement activé par défaut que dans Firefox Nightly et Firefox Developer Edition. Le nouveau Débogueur est plus rapide et plus fiable que l'ancien. Il fournit également une base plus saine pour les futurs développements de l'outil.</p> + +<p>Cependant, il ne possède pas encore toutes les fonctionnalités de l'ancien Débogueur. Cette page liste les fonctionnalités de l'ancienne version qui ne sont pas encore supportées.</p> + +<p>Il est à noter que le support de la plupart de ces fonctionnalités sont prévues pour les prochaines versions. Cette page sera mise à jour en fonction de cela.</p> + +<p>Si vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à <code>false</code> dans about:config (page du navigateur).</p> + +<p>Les fonctionalitées suivantes ne sont pas supportées par le nouveau Débogueur :</p> + +<ul> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">S'arreter sur les évènements DOM</a></li> + <li><a href="/fr/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">Afficher en surbrillance et inspecter les nœuds DOM</a></li> +</ul> diff --git a/files/fr/outils/débogueur/paramètres/index.html b/files/fr/outils/débogueur/paramètres/index.html new file mode 100644 index 0000000000..7cad89e8d5 --- /dev/null +++ b/files/fr/outils/débogueur/paramètres/index.html @@ -0,0 +1,57 @@ +--- +title: Paramètres +slug: Outils/Débogueur/Paramètres +translation_of: Archive/Tools/Debugger_settings +--- +<div>{{ToolsSidebar}}</div><p>Le Débogueur a son propre menu de paramètres. Il est accessible depuis l’icône en forme d'engrenage dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#toolbar">barre d'outils </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>Chaque paramètre est une simple case à cocher :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 40%;"><strong>Formater et indenter automatiquement les sources compactées</strong></td> + <td>Lorsque cette option est activée, le Débogueur <a href="/fr/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">affichera joliment</a> les fichiers JavaScript minifiés.</td> + </tr> + <tr> + <td><strong>Pause sur les exceptions</strong></td> + <td>Lorsque cette option est activée, l’exécution du script s’arrêtera automatiquement lorsqu'une exception JavaScript est levée.</td> + </tr> + <tr> + <td><strong>Ignorer les exceptions interceptées</strong></td> + <td> + <p>Lorsque cette option est activée, l’exécution ne s’arrêtera pas lorsqu'une exception levée est interceptée</p> + + <p>Si cette option est activée (elle l'est par défaut), et que "Pause sur les exceptions" est activé, alors l'exécution s’arrêtera uniquement si l'exception levée n'est pas attrapée. Ce qui est généralement le comportement désiré : les expressions interceptées indiquent généralement que votre programme les gère correctement.</p> + </td> + </tr> + <tr> + <td><strong>Panneaux développés au démarrage</strong></td> + <td>Lorsque cette option est activée, le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a> du Débogueur est visible dès l'ouverture de celui-ci.</td> + </tr> + <tr> + <td><strong>Afficher uniquement les propriétés énumérables</strong></td> + <td>Les propriétés JavaScript non-énumérables ne sont pas affichées</td> + </tr> + <tr> + <td><strong>Afficher la boîte de filtrage des variables</strong></td> + <td>Lorsque cette option est activée, une boîte de recherche est ajoutée au <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a>, elle permet de filtrer la liste des variables affichée</td> + </tr> + <tr> + <td><strong>Afficher les sources originales</strong></td> + <td>Lorsque cette option est activée, le Débogueur utilisera des <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, s'il y en a, afin d'afficher le code source original qui a été minifié, combiné ou même compilé depuis un langage comme CoffeeScript. Cette option est activée par défaut</td> + </tr> + <tr> + <td><strong>Mettre automatiquement dans une boîte noire les sources compactées</strong></td> + <td> + <div class="geckoVersionNote"> + <p>Nouveauté de Firefox 33</p> + </div> + + <p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Met automatiquement les sources dont l'URL finit par ".min.js" dans une <a href="/fr/docs/Tools/Debugger/How_to/Black_box_a_source">boîte noire</a></span></span></p> + </td> + </tr> + </tbody> +</table> diff --git a/files/fr/outils/débogueur/raccourcis_clavier/index.html b/files/fr/outils/débogueur/raccourcis_clavier/index.html new file mode 100644 index 0000000000..b3d4e9b803 --- /dev/null +++ b/files/fr/outils/débogueur/raccourcis_clavier/index.html @@ -0,0 +1,12 @@ +--- +title: Raccourcis clavier +slug: Outils/Débogueur/Raccourcis_clavier +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>Ra{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "debugger") }}</p> + +<h2 id="Raccourcis_Généraux">Raccourcis Généraux</h2> + +<p>{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/fr/outils/débogueur/set_an_xhr_breakpoint/index.html b/files/fr/outils/débogueur/set_an_xhr_breakpoint/index.html new file mode 100644 index 0000000000..30e6bfd813 --- /dev/null +++ b/files/fr/outils/débogueur/set_an_xhr_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set an XHR breakpoint +slug: Outils/Débogueur/Set_an_XHR_breakpoint +translation_of: Tools/Debugger/Set_an_XHR_breakpoint +--- +<p>{{ToolsSidebar}}</p> + +<p>Un point d'arrêt XHR (XMLHttpRequest) interrompt l'exécution du code lorsqu'une requête XHR est envoyée afin de pouvoir examiner l'état du programme.<br> + Pour activer ce point d'arrêt, il faut une fois le Débogueur ouvert :</p> + +<ol> + <li>Soit cliquer sur "Arrêt à chaque URL" ce qui interrompt l'exécution à chaque requête.</li> + <li>Soit cliquer sur l’icône en forme de "+" a droite du titre "Points d'arrêt XHR" et rentrer l'URL de la requête sur laquelle interruption est voulue, puis valider avec <kbd>Entrée</kbd>.</li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Si un mot clé est entré au lieu d'une URL, alors l'exécution s’arrêtera sur tout appel à une URL contenant ce mot clé.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16421/XHR_breakpoint.png" style="border: 1px solid black; display: block; height: 299px; margin: 0px auto; width: 302px;"></p> + +<p>Lorsque le code s’interrompt sur une requête XHR, le panneau droit aura deux sections additionnelles :</p> + +<dl> + <dt><strong>Pille d'appel</strong></dt> + <dd>Cette section liste les fonctions qui ont été exécutés avant d'arriver au code actuel. Cliquer sur un élément de cette liste sautera à la ligne associée dans la fenêtre du code.</dd> + <dt><strong>Portées</strong></dt> + <dd>Cette section liste les valeurs présentes dans la portée de la fonction, méthode, ou gestionnaire d'évènement, dans lequel le point d'arrêt s'est activé.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16422/XHR_break.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> diff --git a/files/fr/outils/débogueur/source_map_errors/index.html b/files/fr/outils/débogueur/source_map_errors/index.html new file mode 100644 index 0000000000..dba0164fa6 --- /dev/null +++ b/files/fr/outils/débogueur/source_map_errors/index.html @@ -0,0 +1,61 @@ +--- +title: Erreurs des source map +slug: Outils/Débogueur/Source_map_errors +translation_of: Tools/Debugger/Source_map_errors +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Les Source maps sont des fichiers JSON permettant d'associer les sources transformées (minifiés, combinés, générées) lues par le navigateur, à leurs fichiers source originels. Il est parfois possible d'avoir des problèmes avec les sources map. Cette page présente les plus communs d'entre eux ainsi que des solutions pour les corriger.</p> + +<div class="note"> +<p><strong>Note</strong>: En cas d'infamiliarité avec les source map, il est possible d'en apprendre plus ici : <a href="/fr/docs/Tools/Debugger/How_to/Use_a_source_map">Utiliser une source map</a>.</p> +</div> + +<h2 id="Gestion_d'erreurs_des_source_map">Gestion d'erreurs des source map</h2> + +<p>Dès lors qu'une erreur arrive, un message apparaitra dans la <a href="/fr/docs/Outils/Console_Web">Console</a>. Le message affichera le message d'erreur, l'URL de la ressource, et l'URL de la source map :</p> + +<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p> + +<p>Ici, l'URL de la ressource URL indique que <code>bundle.js</code> mentionne une source map, et l'URL de la source map montre ou trouver la source map en elle-même (avec un chemin relatif à la ressource). L'erreur indique que la source map n'est pas un JSON valide.</p> + +<p>Il y a quelques erreurs fréquentes qui reviennent avec les sources map. Elles sont décrites dans les sections suivantes.</p> + +<h2 id="La_source_map_est_inexistante_ou_inaccessible">La source map est inexistante ou inaccessible</h2> + +<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p> + +<p>La solution ici est de vérifier que le fichier est bien accessible par le navigateur (le fichier existe, et l'URL est bonne).</p> + +<h2 id="Source_map_invalide">Source map invalide</h2> + +<p>Le code de la source map data peut être invalide. Soit parce que ce n'est tout simplement pas un fichier JSON, soit parce qu'il est mal formaté. Les messages d'erreurs typiques sont:</p> + +<ul> + <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li> + <li><code>Error: "version" is a required argument</code></li> +</ul> + +<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p> + +<h2 id="Source_originale_manquante">Source originale manquante</h2> + +<p>Une source originale peut manquer. Il est possible d'avoir cette erreur en tentant d'ouvrir une source originale dans le Débogueur. Le message est un peu différent dans ce cas :</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p> + +<p>Ici, l'erreur sera également affichée dans l'onglet source du Débogueur :</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p> + +<h2 id="NetworkError_lors_de_la_récupération_d'une_ressource">NetworkError lors de la récupération d'une ressource</h2> + +<p>Un bug dans Firefox l’empêche de charger les sources maps des extensions web.</p> + +<p>Voir le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a> pour plus de détails.</p> + +<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource. + Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js + Source-Map-Adresse: background.js.map</span></span></span></pre> + +<p>Le seule workaround est de changer manuellement l'URL de la map pour la rendre publique (http://localhost:1234/file.map.js) et de lancer un serveur web local sur ce port.</p> diff --git a/files/fr/outils/débogueur/visite_guidée_de_l_interface_utilisateur/index.html b/files/fr/outils/débogueur/visite_guidée_de_l_interface_utilisateur/index.html new file mode 100644 index 0000000000..44c25e1835 --- /dev/null +++ b/files/fr/outils/débogueur/visite_guidée_de_l_interface_utilisateur/index.html @@ -0,0 +1,125 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur +translation_of: Tools/Debugger/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>Cet article est une visite guidée des principales sections de l'interface utilisateur du Débogueur JavaScript. Cette interface est séparée en trois panneaux :</p> + +<ul> + <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">Panneau de la liste des sources</a></li> + <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">Panneau des sources</a></li> + <li>Un troisième panneau, qui dépend de l'état du Débogueur, et peut contenir : + <ul> + <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">Barre d'outils</a></li> + <li>Expressions espionnes</li> + <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Liste des points d'arrêt</a></li> + <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Call_stack">Pile d'exécution</a></li> + <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Scopes">Portées</a></li> + <li>Points d'arrêt XHR</li> + <li>Points d'arrêt des ecouteurs d'évènement</li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16840/debugger_uiTour_01.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<h2 id="Panneau_de_la_liste_des_sources">Panneau de la liste des sources</h2> + +<p>Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Les sources sont triées par origine, puis organisées selon la structure de dossier depuis lesquels elles sont chargées.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16841/debugger_uiTour_02.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>Il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_for_files">rechercher un fichier</a> en utilisant le raccourci clavier <kbd>Ctrl</kbd> + <kbd>P</kbd> (<kbd>Cmd</kbd> + <kbd>P</kbd> sur Mac).</p> + +<p>Depuis Firefox 69 les extensions Web sont listés en utilisant le nom de l'extension plutôt que son identifiant.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16868/source_list_pane.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 373px;"></p> + +<p>Il est possible de simplifier la liste des fichiers dans la liste des sources avec un clic droit sur un dossier, et une sélection de "définir comme répertoire racine".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16122/directory-root.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Maintenant, la racine de la liste des sources est la racine du projet, rendant ainsi la navigation bien plus pratique.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16123/directory-root-02.png" style="border: 1px sollid black; display: block; height: 408px; margin: 0 auto; width: 480px;"></p> + +<h3 id="Onglet_Structure">Onglet Structure</h3> + +<p>L'onglet structure affiche un arbre pour naviguer dans le fichier ouvert. Il permet de se placer directement dans une fonction, une classe, ou une méthode.</p> + +<h2 id="Panneau_des_sources">Panneau des sources</h2> + +<p>Ce panneau affiche le fichier JavaScript actuellement chargé.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>Lorsque le panneau des sources est sélectionné, il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">rechercher une string dans le fichier</a> en utilisant <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac).</p> + +<p><a href="/fr/docs/Tools/Debugger/How_to/Set_a_breakpoint">Les points d'arrêt</a> ont une flèche bleue superposée au numéro de ligne. Les <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">points d'arrêt conditionnels</a> ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :</p> + +<ul> + <li>La ligne 82 a un point d'arrêt normal et le Débogueur est arrêté dessus.</li> + <li>La ligne 85 a un point de sortie console qui affiche le contenu de <em>tableRow </em>dans la console.</li> + <li>La ligne 100 a un point d'arrêt conditionnel.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16842/debugger_uiTour_03.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>La troisième colonne affiche d'avantage d'informations sur les point d'arrêt. Par exemple le point de sortie console ligne 85 affiche la valeur de <em>tableRow </em>dans la console, et le point d'arrêt conditionnel à la ligne 100 a pour condition que <em>todolist </em>soit <em>undefined.</em></p> + +<h2 id="Barre_doutils"><a name="toolbar">Barre d'outils</a></h2> + +<p>La barre d'outils est située en haut du panneau de droite :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16844/debugger_toolbar.png" style="display: block; height: 126px; margin-left: auto; margin-right: auto; width: 236px;"></p> + +<p>Cette barre est composée de :</p> + +<ul> + <li>Quatre boutons pour <a href="/fr/docs/Tools/Debugger/How_to/Step_through_code">contrôler le mouvement du Débogueur à travers le script : </a> + + <ul> + <li><strong>Pause/Reprendre</strong>(F8) : met en pause ou reprend l’exécution du script en débogage. Lorsque ce bouton est en forme de "reprendre" cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.</li> + <li><strong>Passer la fonction</strong> (F10) : Passe à la ligne de JavaScript suivante.</li> + <li><strong>Entrer dans la fonction</strong> (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. sinon, passe à la ligne suivante.</li> + <li><strong>Sortir de la fonction</strong> (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.</li> + </ul> + </li> + <li>Un bouton pour désactiver tous les points d'arrêt.</li> +</ul> + +<h2 id="Liste_des_points_darrêt">Liste des points d'arrêt</h2> + +<p>Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet <a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">d'activer/désactiver le point d'arrêt</a> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<h2 id="Expressions_espionnes">Expressions espionnes</h2> + +<p>Il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14845/watch-expressions.png" style="display: block; height: 769px; margin-left: auto; margin-right: auto; width: 504px;"></p> + +<h2 id="Infobulle_de_variable">Infobulle de variable</h2> + +<p>Survoler une variable dans le code source affichera une infobulle contentant sa valeur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14851/tooltip-1.gif" style="display: block; height: 522px; margin-left: auto; margin-right: auto; width: 988px;"></p> + +<h2 id="Pile_dexécution_call_stack">Pile d'exécution (call stack)</h2> + +<p>Lorsque le Débogueur est en pause, une pile d'exécution est affichée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16846/debugger_uiTour_call_stack.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>Chaque niveau de la pile à sa propre ligne, avec le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur cette ligne ouvre la source dans le panneau des sources.</p> + +<h2 id="Portées">Portées</h2> + +<p>Dans le panneau de droite, se trouve un élément nommé "Portées". Lorsque le Débogueur est arrêté, il est possible d'étendre cette section pour afficher tous les objets qui sont dans la portée du programme en ce point :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16847/debugger_uiTour_scopes.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p>Les objets sont triés par portée : du plus local au plus global (Window dans la plupart des scripts de page web).</p> diff --git a/files/fr/outils/editeur_de_shaders/index.html b/files/fr/outils/editeur_de_shaders/index.html new file mode 100644 index 0000000000..013fd7da49 --- /dev/null +++ b/files/fr/outils/editeur_de_shaders/index.html @@ -0,0 +1,63 @@ +--- +title: Éditeur de Shaders +slug: Outils/Editeur_de_shaders +tags: + - Tools + - Web Development +translation_of: Tools/Shader_Editor +--- +<div>{{ToolsSidebar}}</div> + +<div class="blockIndicator note"> +<p>Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : <a href="/fr/docs/Tools/Deprecated_tools">Outils Dépréciés</a>.</p> +</div> + +<p>L'Éditeur de Shaders permet de voir et d'éditer les vertex shaders et les fragments shaders utilisés par <a href="/fr/docs/Web/WebGL">WebGL</a></p> + +<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p> + +<p>WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">processus d’affichage d'OpenGL </a>Le premier shader est un <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a> qui fournit la couleur de chaque pixel qui doit être affiché.<br> + <br> + Ces shaders sont codés dans le langage OpenGL Shading, ou <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. En WebGL, ces shaders peuvent être intégrés dans une page de différentes manières : sous forme de texte directement codés dans le code source JavaScript, sous forme de fichier séparé intégré avec les balises {{HTMLElement("script")}}, ou récupérés depuis le serveur sous forme de texte. Le code JavaScript en cours d’exécution dans la page envoie alors les shaders à la compilation en utilisant les APIs WebGL, et ils sont ensuite exécutés sur le GPU (unité de processeur graphique) de l'appareil.</p> + +<p>Avec l'Éditeur de Shaders il est possible d’examiner et d'éditer la sources de vertex shaders et de fragment shaders.</p> + +<p>Voici une autre vidéo montrant comment utiliser l'Éditeur de Shader pour des applications complexes (dans ce cas, la démo l'<a href="http://www.unrealengine.com/html5/">Unreal Engine</a>) :</p> + +<p>{{EmbedYouTube("YBErisxQkPQ")}}</p> + +<h2 id="Ouvrir_l'Éditeur_de_Shaders">Ouvrir l'Éditeur de Shaders</h2> + +<p>L'Éditeur de Shaders est désactivé par défaut. Pour l'activer, il faut ouvrir les <a href="/en-US/docs/Tools_Toolbox#Settings">paramètres de la Boite à Outils</a> et cocher "Éditeur de shaders" dans la section "Outils de développement par défaut". L'Éditeur de Shaders apparaitra alors dans la barre d'outils de la Boite à Outils. Cliquez dessus pour ouvrir l'Éditeur de Shaders.</p> + +<p><br> + Au début il y a qu'une fenêtre vide avec un bouton demandant de recharger la page :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Pour commencer, il faut charger une page qui crée un contexte WebGL et charge un programme dedans. Les captures d'écran ci-dessous sont tirées de la démo de l'<a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p> + +<p>Une fenêtre apparait alors divisée en trois panneaux : une liste de tous les programmes GLSL sur la gauche, le vertex shader en cours du programme sélectionné au milieu et le fragment shader en cours du programme sélectionné sur la droite :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Gérer_les_programmes">Gérer les programmes</h2> + +<p>Le panneau de gauche liste tous les programmes utilisés par le contexte WebGL. En survolant un élément dans la liste, la figure géométrique affichée par le programme est coloré en rouge vif :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquer sur l’icône en forme d'œil sur la gauche d'un programme désactivera ce programme. Ceci est pratique pour se concentrer sur certains shaders ou pour cacher des éléments qui se superposent :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Si vous cliquez sur un programme, ses vertex et fragment shaders sont affichés dans les deux autres panneaux et vous pouvez les modifier.</p> + +<h2 id="Modifier_des_shaders">Modifier des shaders</h2> + +<p>Cliquer sur un programme affichera son vertex shader (panneau du milieu) et son fragment shader (panneau de droite), il sera alors possible de les modifier.<br> + Les changements réalisés seront visibles lors du ré-affichage du contexte WebGL (par exemple lors de la prochaine frame). Il est par exemple possible de modifier des couleurs :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">L'éditeur met en surbrillance les erreurs dans le code :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Survoler la croix affiché à coté d'une ligne contenant une erreur montrera plus de détails sur le problème :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/fr/outils/editeur_web_audio/index.html b/files/fr/outils/editeur_web_audio/index.html new file mode 100644 index 0000000000..116b495b29 --- /dev/null +++ b/files/fr/outils/editeur_web_audio/index.html @@ -0,0 +1,71 @@ +--- +title: Éditeur Web Audio +slug: Outils/Editeur_Web_Audio +tags: + - Tools +translation_of: Tools/Web_Audio_Editor +--- +<div>{{ToolsSidebar}}</div> + +<div class="blockIndicator note"> +<p>Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : <a href="/fr/docs/Tools/Deprecated_tools">Outils Dépréciés</a>.</p> +</div> + +<p>Avec l'<a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">API Web Audio</a>, les développeurs peuvent créer un {{domxref ("AudioContext", "contexte audio")}}. Dans ce contexte, ils peuvent créer différents {{domxref ("AudioNode", "nœuds audio")}} comme :</p> + +<ul> + <li>Des nœuds fournissant la <a href="/fr/docs/Web/API/Web_Audio_API#Defining_audio_sources">source audio</a>, comme un oscillateur ou une source de "data buffer"</li> + <li>Des nœuds réalisant des transformations tels que Délai ou Gain.</li> + <li>Des nœuds représentant la <a href="/fr/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destination du flux audio</a>, par exemple les hauts parleurs.</li> +</ul> + +<p>Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété <code>gain</code> alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés <code>frequency</code> et <code>detune</code>.</p> + +<p>Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.</p> + +<p>L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété <code>AudioParam</code> pour chaque nœud du graphique. Quelques propriétés non-<code>AudioParam</code> comme une propriété <code>OscillatorNode</code>'s <code>type</code>, sont également affichées et il est aussi possible de les éditer.</p> + +<p>Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">reportiez dans <span class="external external-icon">Bugzilla</span></a>. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> ou <a href="http://twitter.com/firefoxdevtools">Twitter</a> sont de bon endroit pour les partager.</p> + +<h2 id="Ouvrir_l'Éditeur_Web_Audio">Ouvrir l'Éditeur Web Audio</h2> + +<p>L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les<a href="/fr/docs/Tools/Tools_Toolbox#Settings_2"> options des outils de développement</a> et cocher l'option "Web Audio". Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :</p> + +<ul> + <li>Le <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, qui peut appliquer divers effets à l’entrée du microphone et fournit aussi une visualisation du résultat.</li> + <li>La démo <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, qui change le ton et le volume d'un signal sinusoïdal lorsque l'on bouge la souris.</li> +</ul> + +<h2 id="Visualiser_le_graphique">Visualiser le graphique</h2> + +<p>L'Éditeur Web Audio affiche alors le graphique correspondant au contexte audio chargé. Voici le graphique du contexte audio de la démo Violent Theremin :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7941/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.</p> + +<h3 id="Connections_aux_AudioParams">Connections aux AudioParams</h3> + +<div class="geckoVersionNote"> +<p>Afficher les connections aux AudioParams est une des nouveautés de Firefox 34.</p> +</div> + +<p>Les connections entre les nœuds sont affichés sous la forme de lignes solides. En revanche, si <a href="/fr/docs/Web/API/AudioNode.connect%28AudioParam%29">un nœud est connecté à un AudioParam d'un autre nœud</a>, alors la connection est affiché sous la forme d'une ligne pointillée et prend le nom de <code>l'AudioParam </code>:<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Inspecter_et_modifier_les_nœuds_audio">Inspecter et modifier les nœuds audio</h2> + +<p>Cliquer sur un nœud le mettra en surbrillance et affichera un inspecteur de nœuds sur la partie droite. Cet inspecteur, liste les valeurs des propriétés <code>AudioParam</code> du nœud. Par exemple voila à quoi ressemble l'OscillatorNode :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7943/web-audio-editor-inspect-node.png" style="display: block; margin-left: auto; margin-right: auto;">Avec la démo Violent Theremin, le paramètre de fréquence est modifié lorsque l'utilisateur bouge la souris, cela se répercute sur l'inspecteur. Malheureusement la valeur n'est pas modifiée en temps réel : il faut cliquer à nouveau sur le nœud pour voir la nouvelle valeur.</p> + +<p>En cliquant sur une valeur de l'inspecteur, il est possible de la modifier en pressant sur <kbd>Entrée</kbd> ou <kbd>Tabulation</kbd>, la nouvelle valeur est automatiquement prise en compte.</p> + +<h2 id="Contourner_des_nœuds">Contourner des nœuds</h2> + +<div class="geckoVersionNote"> +<p>Nouveau dans Firefox 38.</p> +</div> + +<p>Dans le panneau qui affiche les détails des nœuds, il y a un bouton marche/arrêt :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;">Cliquer sur ce bouton modifiera le graphique pour contourner le nœud. Le nœud contourné n'aura alors plus aucun effet et sera affiché avec un fond haché :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p> diff --git a/files/fr/outils/firefox_os_simulator_clone/index.html b/files/fr/outils/firefox_os_simulator_clone/index.html new file mode 100644 index 0000000000..5df5c6b15f --- /dev/null +++ b/files/fr/outils/firefox_os_simulator_clone/index.html @@ -0,0 +1,88 @@ +--- +title: Simulateur Firefox OS +slug: Outils/Firefox_OS_Simulator_clone +translation_of: Tools/Firefox_OS_Simulator_clone +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page décrit le Simulateur Firefox OS à l'attention des développeurs qui ciblent Firefox OS à partir de la version 1.2. Si vous développez des applications pour Firefox OS 1.1, il faut à la place consulter la documentation pour le <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Simulateur Firefox OS 1.1</a>.</p> +</div> + +<p><span style="line-height: 1.5;">Le Simulateur Firefox OS est une version des couches supérieures de<span style="line-height: 1.5;"> Firefox OS</span> qui permet de simuler le fonctionnement d'un appareil Firefox OS sur un ordinateur de bureau</span><span style="line-height: 1.5;">. Cela signifie que dans la plupart des cas, il n'est pas nécessaire d'avoir un véritable appareil pour tester et déboguer votre application. </span><span style="line-height: 1.5;">Il s'affiche dans une fenêtre de la même taille qu'un appareil Firefox OS, comprend l'interface utilisateur de Firefox OS et ses applications intégrées, et simule la plupart des APIs des appareils Firefox OS.</span></p> + +<p><span style="line-height: 1.5;">Le Simulateur est distribué comme un module complémentaire pour Firefox. Une fois que vous l'avez téléchargé et installé dans Firefox, vous pouvez le lancer, y envoyer des applications ainsi qu'utiliser les outils de développement avec le <a href="/fr/Firefox_OS/Using_the_App_Manager">Gestionnaire d'applications</a>, et à l'heure actuelle dans <a href="https://nightly.mozilla.org/">Nightly</a>/<a href="https://www.mozilla.org/fr/firefox/channel/#aurora">Aurora</a>, </span><span style="line-height: 1.5;">avec </span><a href="/fr/docs/Outils/WebIDE"><span style="line-height: 1.5;">WebIDE</span></a><span style="line-height: 1.5;">.</span></p> + +<h2 id="Installation"><span style="line-height: 1.5;">Installation</span></h2> + +<p><span style="line-height: 1.5;">Pour installer le simulateur, utilisez le <a href="/docs/Tools/WebIDE#Adding_a_Simulator">panneau de gestion des Simulateurs dans WebIDE</a> (disponible dans Firefox à partir de la version 33). Plusieurs versions sont disponibles, et il est conseillé de toutes les installer pour un maximum de flexibilité.</span></p> + +<p>Pour lancer le Simulateur, choisissez-le dans la liste des environnements de WebIDE. Pour plus de détails, voir les <a href="/docs/Tools/WebIDE#Selecting_a_runtime" style="font-size: 14px; font-weight: normal; line-height: 1.5;">instructions dans la documentation de WebIDE</a>. Une fois le Simulateur lancé, vous pouvez y envoyer des applications et les déboguer grâce à WebIDE, comme vous le feriez avec un vrai appareil.</p> + +<p>Si vous utilisez le <a href="/Firefox_OS/Using_the_App_Manager">Gestionnaire d'applications</a> (l'ancien outil, disponible avant WebIDE), vous pouvez installer un simulateur en cliquant sur le bouton suivant :</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Installer le Simulateur</a></p> + +<h2 id="L'interface_du_Simulateur" style="line-height: 30px;">L'interface du Simulateur</h2> + +<p><span style="line-height: 22.00800132751465px;">Le Simulateur apparaît dans une fenêtre séparée, dimensionnée de manière à ce que l'écran simulé fasse 320x480 pixels. </span><span style="line-height: 22.00800132751465px;">Pour simuler les événements tactiles, vous pouvez cliquer avec la souris et glisser en maintenant le bouton enfoncé. Donc, en cliquant et glissant de la droite vers la gauche sur l'écran d'accueil, vous verrez les applications intégrées tout comme celles que vous avez ajoutées :</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="display: block; height: 623px; margin: 0px auto; width: 810px;"></p> + +<p>Le Simulateur dispose de deux boutons dans la barre d'outils en bas de l'écran :</p> + +<ul> + <li>Le bouton de gauche vous renvoie à l'écran d'accueil, ou éteint le Simulateur si vous le maintenez enfoncé.</li> + <li>Le bouton de droite bascule entre portrait et paysage l'orientation de l'écran du Simulateur. Cela générera un événement <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a>.</li> +</ul> + +<h2 id="Limitations_du_Simulateur">Limitations du Simulateur</h2> + +<p>Notez que le Simulateur Firefox OS ne réalise pas une simulation parfaite.</p> + +<h3 id="Limitations_au_niveau_du_matériel">Limitations au niveau du matériel</h3> + +<p>À part la taille de l'écran, le Simulateur ne simule pas les limitations du matériel d'un appareil Firefox OS comme la mémoire disponible ou la vitesse du CPU.</p> + +<h3 id="Codecs_audiovidéo">Codecs audio/vidéo</h3> + +<p>Les codecs suivants dépendent du décodage pris en charge par le matériel et ne sont donc pas encore supportés :</p> + +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> + +<p>Cela implique qu'il n'est pas possible d'utiliser le Simulateur pour tester la lecture de vidéo dans des applications ni sur des sites web comme Youtube qui reposent sur ces codecs.</p> + +<h3 id="APIs_non_supportées"><a name="Unsupported-APIs">APIs non supportées</a></h3> + +<p>Certaines APIs qui fonctionnent sur un appareil ne fonctionneront pas sur le Simulateur, en général parce que le matériel supporté n'est pas disponible sur l'ordinateur. Nous avons implémenté des simulations pour quelques APIs comme la géolocalisation, et envisageons d'en ajouter davantage dans les versions à venir. Néanmoins, à l'heure actuelle, les APIs suivantes ne sont pas prises en charge. Le fait de les utiliser peut générer des erreurs ou juste renvoyer des résultats incorrects :</p> + +<ul> + <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Événements navigator.onLine et offline</a></li> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> +</ul> + +<h2 id="Obtenir_de_l'aide"><a name="Simulator-help"></a>Obtenir de l'aide</h2> + +<p><span style="line-height: 1.5;">Si vous avez une question, essayez de nous la poser sur la </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.5;">liste de diffusion dev-developer-tools</a><span style="line-height: 1.5;"> ou sur </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools on irc.mozilla.org</a><span style="line-height: 1.5;">.</span></p> + +<h3 id="Comment_activer_la_journalisation_verbeuse"><a name="Simulator-verbose-logging"></a>Comment activer la journalisation verbeuse</h3> + +<p>Vous pouvez voir les messages enregistrés dans les journaux de votre application dans la <a href="/en-US/docs/Tools/Web_Console">Console Web</a>, cette dernière pouvant être liée à votre app en utilisant <a href="/docs/Tools/WebIDE/Troubleshooting">WebIDE</a>. Si vous souhaitez capturer plus tôt les messages qui surviennent durant le démarrage de l'application, avant que la console ne soit connectée et fonctionnelle, vous pouvez activer l'enregistrement verbeux des journaux dans le Simulateur.</p> + +<p>Allez sur about:config et <strong>créer</strong> une nouvelle préférence. Le nom de la préférence est différent selon la version du Simulateur :</p> + +<ul> + <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel pour Firefox OS 1.3</li> + <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel pour Firefox OS 1.2</li> +</ul> + +<p>Attribuez-lui la valeur chaîne "all", désactivez, puis réactivez le module dans les modules complémentaires. À présent, des messages supplémentaires concernant les opérations du Simulateur apparaîtront dans la <a href="/en-US/docs/Tools/Browser_Console">Console du navigateur</a>.</p> diff --git a/files/fr/outils/frise_chronologique/index.html b/files/fr/outils/frise_chronologique/index.html new file mode 100644 index 0000000000..6fd67b4022 --- /dev/null +++ b/files/fr/outils/frise_chronologique/index.html @@ -0,0 +1,24 @@ +--- +title: Frise chronologique +slug: Outils/Frise_chronologique +tags: + - Gecko + - Guide + - Tools +translation_of: Tools/Performance/Waterfall +--- +<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/outils/index.html b/files/fr/outils/index.html new file mode 100644 index 0000000000..50ac8a8db2 --- /dev/null +++ b/files/fr/outils/index.html @@ -0,0 +1,225 @@ +--- +title: Outils de développement Firefox +slug: Outils +tags: + - Développement Web + - 'Développement Web:Outils' + - Firefox + - Guide + - Outils +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.</p> + +<p>Si vous cherchez des informations sur l'utilisation des outils de développement disponibles dans Firefox, vous êtes au bon endroit.</p> + +<p>Cette page fournit des liens vers des informations détaillées sur tous les outils principaux et additionnels de Firefox. Ainsi que d'autres liens vers par exemple : comment connecter et déboguer Firefox pour Android, comment étendre les outils de développement, et comment déboguer le navigateur lui-même.</p> + +<p>Nous vous encourageons à explorer les liens de la barre latérale, et ceux dans la page, pour en apprendre plus sur les outils de développement. Si vous avez des retours ou des problèmes sur ces outils, vous pouvez nous envoyer des messages sur notre mailing-list ou notre canal IRC (Voir les <a href="/fr/docs/Tools#Join_the_Developer_tools_community">liens communauté, vers la fin de la page</a>). Si vous avez des questions ou des retours spécifiquement sur la documentation, <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> est l'endroit parfait.</p> + +<div class="note"> +<p><strong>Note</strong>: Si vous débutez dans le développement web et/ou l'utilisation des outils de développement, la page <a href="/fr/docs/Learn">apprendre le développement web</a> peut vous aider. Vous pouvez également consulter <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le web</a> et <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Découvrir les outils de développement des navigateurs</a>.</p> +</div> + +<h2 id="Outils_principaux"><a id="The_Core_Tools" name="The_Core_Tools">Outils principaux</a></h2> + +<p>Les outils de développement peuvent être ouverts avec <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> ou <kbd>F12</kbd> sous Windows et Linux, et <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> sous macOS.</p> + +<p>La partie droite de la barre d'outils contient plusieurs boutons qui permettent d'effectuer des actions, ou de changer certaines options des outils.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>Ce bouton apparait lorsqu'il y a plusieurs iframe dans la page. Cliquer dessus affiche la liste des iframes sur la page actuelle, et permet de sélectionner celle ciblée par les outils.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Ce bouton permet de prendre une capture d'écran de la page. (<strong>Note:</strong> Cette fonctionnalité n'est pas activée par défaut, et doit être activée dans les paramètres avant).</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Active le mode Vue Adaptative.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Ouvre le menu qui inclut les options d'ancrage, la possibilités d'activer la console scindée, et d'afficher les options des outils de développement. Ce menu inclut également des liens vers la documentation des outils de développement de Firefox et vers la communauté Mozilla.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Ferme les outils de développement.</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Inspecteur">Inspecteur</h3> + +<p><a href="/fr/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Permet de voir et modifier une page en HTML et en CSS. Permet de visualiser différents aspects de la page y compris les animations, l'agencement de la grille.</p> +</div> + +<div class="column-half"> +<h3 id="Console_Web">Console Web</h3> + +<p><a href="/fr/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.</p> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Débogueur_JavaScript">Débogueur JavaScript</h3> + +<p><a href="/fr/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page</p> +</div> + +<div class="column-half"> +<h3 id="Réseau">Réseau</h3> + +<p><a href="/fr/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Permet d'inspecter les requêtes réseau lors du chargement de la page.</p> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Performances">Performances</h3> + +<p><a href="/fr/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Permet d'analyser les performances de la réactivité globale, du JavaScript et, de l'agencement des sites.</p> +</div> + +<div class="column-half"> +<h3 id="Vue_Adaptative">Vue Adaptative</h3> + +<p><a href="/fr/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Permet de voir comment un site web ou une application se comporte avec différents types d'appareils et de connexions.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Inspecteur_d'Accessibilité">Inspecteur d'Accessibilité</h3> + +<p><a href="/fr/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Permet d’examiner l’arborescence d’accessibilité de la page courante, qui est utilisée par les lecteurs d’écran et d’autres technologies d’assistance, afin de pouvoir savoir ce qui manque ou ce qui peut être amélioré.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: Le terme utilisé pour designer l'interface qui contient tout les outils de dévelopement est: <a href="/fr/docs/Tools/Tools_Toolbox">La boîte à outils</a>.</p> +</div> + +<h2 id="Outils_supplémentaires"><a id="More_Tools" name="More_Tools">Outils supplémentaires</a></h2> + +<p>Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/fr/docs/Tools/Memory">Mémoire</a></dt> + <dd>Déterminer quels objets prennent de la place en mémoire.</dd> + <dt><a href="/fr/docs/Tools/Storage_Inspector">Inspecteur de Stockage</a></dt> + <dd>Inspecter les cookies, le stockage local, l'indexedDB, et le stockage de session présent dans une page.</dd> + <dt><a href="/fr/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspecter les propriétés DOM d'une page (fonctions, etc.)</dd> + <dt><a href="/fr/docs/Tools/Eyedropper">Pipette</a></dt> + <dd>Sélectionner une couleur de la page.</dd> + <dt><a href="/fr/docs/Tools/Scratchpad">Ardoise JavaScript</a></dt> + <dd>Un éditeur de texte intégré à Firefox qui permet d'écrire et d'exécuter du JavaScript..</dd> + <dt><a href="/fr/docs/Outils/Style_Editor">Éditeur de Styles</a></dt> + <dd>Voir et modifier les styles CSS de la page affichée.</dd> + <dt><a href="/fr/docs/Outils/Shader_Editor">Éditeur de Shaders</a></dt> + <dd>Voir et éditer les <em>vertex shaders</em> et les <em>fragment shaders</em> utilisés par <a href="/fr/docs/WebGL">WebGL</a>.</dd> + <dt><a href="/fr/docs/Outils/Web_Audio_Editor">Éditeur Web Audio</a></dt> + <dd>Examiner les nœuds audio dans un contexte audio, et modifier leurs paramètres.</dd> + <dt><a href="/fr/docs/Tools/Screenshot_tool">Capture d'écran</a></dt> + <dd>Prendre une capture d'écran de la page entière ou d'un seul élément</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Tools/Measure_a_portion_of_the_page">Mesurer une portion de la page</a></dt> + <dd>Mesurer une zone spécifique de la page web</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Tools/Rulers">Règles</a></dt> + <dd>Afficher des règles verticales et horizontales sur une page web</dd> +</dl> +</div> + +<hr> +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition</p> + +<p><a href="https://www.mozilla.org/fr/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Télécharger Firefox Developer Edition</a></p> +</div> +</div> + +<h2 id="Connecter_les_outils_de_développement"><a id="Connecting_the_Developer_Tools" name="Connecting_the_Developer_Tools">Connecter les outils de développement</a></h2> + +<p>Si vous ouvrez les outils de développent avec des <a href="https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourcis clavier</a> ou les éléments équivalents du menu, ils cibleront la page actuellement ouverte dans l'onglet actif. Il est cependant possible également d'attacher ces outils à diverses autres cibles, à la fois dans le navigateur ouvert et dans d'autres navigateurs et même dans d'autres appareils.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/fr/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Déboguer des modules complémentaires, des onglets de contenu et ceux qui travaillent dans l'explorateur.</dd> + <dt><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Se connecter à Firefox pour Android</a></dt> + <dd>Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.</dd> + <dt><a href="/fr/docs/Tools/Working_with_iframes">Se connecter aux iframes</a></dt> + <dd>Connecter les outils de développement sur un iframe donné dans la page en cours.</dd> + <dt><a href="/fr/docs/Tools/Valence">Se connecter aux autres navigateurs</a></dt> + <dd>Connecter les outils de développement à Chrome pour Android et Safari pour IOS.</dd> +</dl> +</div> + +<hr> +<h2 id="Déboguer_le_navigateur"><a id="Debugging_the_browser" name="Debugging_the_browser">Déboguer le navigateur</a></h2> + +<p>Par défaut, les outils de développement sont attachés à une page ou une application Web. Il est cependant possible de les connecter au navigateur en lui même. C'est utile lors de développements portant sur le navigateur ou sur un module complémentaire.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/fr/docs/Tools/Browser_Console">Console du navigateur</a></dt> + <dd>Voir les messages issus du navigateur lui-même et des modules, et exécuter du code JavaScript dans le contexte du navigateur.</dd> + <dt><a href="/fr/docs/Outils/Browser_Toolbox">Boîte à outils du navigateur</a></dt> + <dd>Attacher les outils de développement au navigateur lui-même.</dd> +</dl> +</div> + +<hr> +<h2 id="Étendre_les_outils_de_développement"><a id="Extending_the_devtools" name="Extending_the_devtools">Étendre les outils de développement</a></h2> + +<p>Pour en savoir plus sur l'extension des outils de développement de Firefox, voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extension des outils de développement</a> dans la section <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> de MDN.</p> + +<h2 id="Migrer_de_Firebug"><a id="Migrating_from_Firebug" name="Migrating_from_Firebug">Migrer de Firebug</a></h2> + +<p>Firebug est arrivé en fin de vie (voir <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug, présent en esprit dans les outils de Firefox</a> sur le pourquoi du comment), et nous sommes conscients que certains peuvent avoir du mal à faire la transition. Pour faciliter celle-ci, nous avons écrit un guide pratique : <a href="/fr/docs/Tools/Migrating_from_Firebug">Migrer depuis Firebug</a>.</p> + +<hr> +<h2 id="Contribuer"><a id="Contribute" name="Contribute">Contribuer</a></h2> + +<p>Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://devtools-html.github.io/#getting-in-touch">S'impliquer</a></dt> + <dd>La page de documentation expliquant comment s'impliquer.</dd> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd>Un outil pour aider à trouver des bugs sur lesquels travailler.</dd> +</dl> +</div> diff --git a/files/fr/outils/index/index.html b/files/fr/outils/index/index.html new file mode 100644 index 0000000000..7b9cbade37 --- /dev/null +++ b/files/fr/outils/index/index.html @@ -0,0 +1,8 @@ +--- +title: Index +slug: Outils/Index +tags: + - Outils +translation_of: Tools/Index +--- +<div>{{ToolsSidebar}}</div><p>{{Index("/fr/docs/Outils")}}</p> diff --git a/files/fr/outils/inspecteur/3-pane_mode/index.html b/files/fr/outils/inspecteur/3-pane_mode/index.html new file mode 100644 index 0000000000..763f953ad3 --- /dev/null +++ b/files/fr/outils/inspecteur/3-pane_mode/index.html @@ -0,0 +1,65 @@ +--- +title: Mode 3 panneaux de l'Inspecteur +slug: Outils/Inspecteur/3-pane_mode +translation_of: Tools/Page_Inspector/3-pane_mode +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Cet article explique comment utiliser le mode 3 panneaux de l'Inspecteur.</p> + +<h2 id="Résumé_de_la_fonctionnalité">Résumé de la fonctionnalité</h2> + +<p>Depuis Firefox 62, l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a> possède un nouveau mode : le mode 3 panneaux. Lorsqu'il est activé, il permet de voir les panneaux suivants :</p> + +<ul> + <li>Le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panneau HTML</a> sur la gauche, comme de coutume.</li> + <li>Le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">panneau des règles CSS</a> au milieu dans son panneau personnel plutôt que dans un onglet.</li> + <li>Les autres fonctionnalités CSS. Par exemple <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">l'onglet Calculé</a>, <a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">l'onglet Animations</a>, et <a href="/fr/docs/Tools/Page_Inspector/How_to/View_fonts">l'onglet Polices</a>— sur la droite.</li> +</ul> + +<p><img alt="The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> + +<div class="note"> +<p><strong>Note</strong>: Si la fenêtre n'est pas assez large, le panneau des onglets s'affiche en dessous du panneau des règles CSS.</p> +</div> + +<p>Avoir les règles CSS dans leur propre panneau est très utile, car cela permet non seulement d'inspecter l'HTML et d'éditer le CSS qui lui est appliqué, mais aussi d'en voir les effets sur les fonctionnalités CSS tels que les styles calculés et les grilles en temps réel. Il suffit d'avoir les panneaux concernés d'ouvert pour voir les effets.</p> + +<h2 id="Un_guide_rapide">Un guide rapide</h2> + +<p>Le mode 3 panneaux est désactivé par défaut. Pour l'activer, il suffit d'appuyer sur le bouton en haut à gauche du panneau des onglets de l'Inspecteur.</p> + +<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p> + +<p>Avant.</p> + +<p><img alt="The Firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p> + +<p>Après.</p> + +<p><img alt="The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> + +<p>Avec le mode 6 panneaux activé, il est possible d'observer des changements des fonctionnalités CSS en temps réel lorsque les règles en question sont modifiées. Par exemple, il est possible d'éditer une propriété de <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grille CSS</a> et d'observer les changements immédiats dans l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspecteur de grilles</a>.</p> + +<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p> + +<h2 id="Activer_le_mode_3_panneaux_avant_Firefox_62">Activer le mode 3 panneaux avant Firefox 62</h2> + +<p>Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à <code>true</code> :</p> + +<p><code>devtools.inspector.split-rule-enabled</code> — Cela active/Désactive le mode 3 panneaux.</p> + +<p><code>devtools.inspector.split-sidebar-toggle</code> — Active le bouton UI qui permet d'activer/désactiver le mode.</p> + +<p>Dans Firefox 61, ces préférences ont été renommés en :</p> + +<ul> + <li><code>devtools.inspector.three-pane-enabled</code></li> + <li><code>devtools.inspector.three-pane-toggle</code></li> +</ul> + +<p>YIl est nécessaire de passer ces deux préférences à <code>true</code> dans les versions Release/Beta de Firefox 61 pour tester cette fonctionnalité.</p> + +<div class="note"> +<p><strong>Note</strong>: Le mode 3 panneaux est activé par défaut dans les versions Nightly/Developer edition avant Firefox 62.</p> +</div> diff --git a/files/fr/outils/inspecteur/comment/edition_filtres_css/index.html b/files/fr/outils/inspecteur/comment/edition_filtres_css/index.html new file mode 100644 index 0000000000..75d7f15f39 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/edition_filtres_css/index.html @@ -0,0 +1,37 @@ +--- +title: Edition des filtres CSS +slug: Outils/Inspecteur/Comment/Edition_filtres_css +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +<div>{{ToolsSidebar}}</div> + +<p>Les propriétés <code><a href="/fr/docs/Web/CSS/filter">filter</a></code> dans la <a href="/fr/docs/Outils/Inspecteur/UI_Tour#Rules_view">vue Règles</a> ont une icône ronde à fond gris/blanc : </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16454/click_to_edit_filter.png" style="border: 1px solid black; display: block; height: 146px; margin-left: auto; margin-right: auto; width: 366px;"></p> + +<p>Cliquer sur le rond ouvre l'éditeur de filtre :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16455/css_filter_edit.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 576px;"></p> + +<p>L'éditeur de filtre liste chaque effet sur sa propre ligne. Il est alors possible d'ajouter, de supprimer, d'éditer les filtres et de changer l'ordre dans lesquels ils sont appliqués</p> + +<p>Il est également possible d'ajouter de nouveaux effets grâce à la liste en bas de l'éditeur. Il suffit de cliquer sur le bouton "+" une fois l'effet voulu sélectionné dans la liste.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16457/edit_filter_settings.png" style="display: block; height: 255px; margin: 0px auto; width: 520px;"></p> + +<p>Une fois l'effet rajouté, il faut spécifier les paramètres voulus puis appuyer sur <kbd>Entrée</kbd> pour mettre a jour l'effet. Le changement sera effectif après <kbd>Entrée</kbd>.</p> + +<h2 id="Enregistrer_des_filtres">Enregistrer des filtres</h2> + +<p>Il est possible d'ajouter des filtres à une liste de configuration. La liste sera persistante aux entre plusieurs sessions du navigateur, rendant ainsi l'application d'effets facile dans le futur.</p> + +<p>Voici comment enregistrer le filtre actuel dans la liste :</p> + +<ul> + <li>Cliquer pour éditer le filtre, afficher la liste de configuration en cliquant sur l’icône mise en avant dans la capture ci-dessous.</li> + <li>Nommez votre configuration, puis cliquer sur le bouton "+" pour l'ajouter à la liste.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16458/filter_presets.png" style="display: block; height: 240px; margin-left: auto; margin-right: auto; width: 530px;"></p> + +<p>Il est ainsi possible d'appliquer des filtres sauvegardés à de nouveaux éléments. Il suffit de cliquer sur le nom d'une des configuration dans la liste.</p> diff --git a/files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html b/files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html new file mode 100644 index 0000000000..b653021231 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html @@ -0,0 +1,125 @@ +--- +title: "Inspecteur de grille CSS\_: examiner les grilles" +slug: Outils/Inspecteur/Comment/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><strong>L'inspecteur de grilles</strong> permet de trouver, d'examiner, et de modifier les <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grilles CSS</a> en utilisant les outils de développement de Firefox</p> + +<div class="note"> +<p><strong>Note</strong>: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> (Jen Simmons), des expériences "<a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid"</a>, et de "<a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">live named grid area example</a>" (Rachel Andrew).</p> +</div> + +<h2 id="Découvrir_les_grilles_CSS">Découvrir les grilles CSS</h2> + +<p>Lorsqu'un élément HTML d'une page possède l'attribut <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.</p> + +<h3 id="Dans_le_panneau_HTML">Dans le panneau HTML</h3> + +<p><img alt="Le panneau HTML, montrant un marqueur de grille" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p> + +<h3 id="Dans_le_panneau_CSS">Dans le panneau CSS</h3> + +<p>Dans l'onglet règles du <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>, toutes les instances d'une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code> possèdent une icône de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) :</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p> + +<p>Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "<em>tracks</em>" de la grille CSS :</p> + +<p><img alt="Une superposition en couleur de la grille CSS" src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p> + +<p>La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.</p> + +<h3 id="La_section_grilles_de_longlet_mise_en_page">La section "grilles" de l'onglet mise en page</h3> + +<p>Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.</p> + +<div class="note"> +<p><strong>Note</strong>: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.</p> +</div> + +<h2 id="Options_de_grilles">Options de grilles</h2> + +<p>La section grille de l'onglet mise en page ressemble à ceci :<img alt="Les options des grilles CSS" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p> + +<p>Ces options sont :</p> + +<ul> + <li>Superposer une grille : contient une case à cocher pour chaque grille CSS présente sur la page,ainsi que quelques options . Cela permet de superposer une grille d'indication sur les grilles CSS.</li> + <li>Paramètres d'affichage des grilles : + <ul> + <li>Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).</li> + <li>Afficher le nom des zones : active/désactive les noms des zones si la grille possède des noms de zones (activé par défaut quand utile).</li> + <li>Prolonger les lignes à l'infini : Par défaut, les lignes/<em>tracks</em> des grilles CSS ne sont affichées que dans l'élément sur lequel <code>display: grid</code> est attaché. Lorsque cette option est activée, les lignes de la grille d'indication se prolongent jusqu'au bord de la fenêtre sur chaque axe.</li> + </ul> + </li> + <li>Mini vue de grilles : Une vue réduite des grilles actuellement superposées.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).</p> +</div> + +<h3 id="Grille_de_superposition">Grille de superposition</h3> + +<p>Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :</p> + +<p><img alt="Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus" src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p> + +<p>Chaque entrée est composée de (de gauche à droite) :</p> + +<ul> + <li>Une case à cocher permettant d'activer/désactiver la superposition pour cette grille. Il est à noter qu'actuellement, une seule superposition à la fois est possible.</li> + <li>Un nom pour identifier la grille, il s'agit du sélecteur identifiant l'élément HTML auquel la grille est appliquée. Cliquer sur le nom active/désactive également la superposition.</li> + <li>Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.</li> + <li>Un sélecteur de couleur permettant de change la couleur de la superposition. C'est utile pour pouvoir facilement différencier la grille de sa superposition.</li> +</ul> + +<h3 id="Afficher_le_numéro_des_lignes">Afficher le numéro des lignes</h3> + +<p>Par défaut le numéro des lignes est affiché dans la superposition :</p> + +<p><img alt="Une superposition de grille CSS avec les numéros de lignes affichés" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p> + +<p>Décocher la case "Afficher les numéros des lignes" les désactivent :</p> + +<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Afficher_le_nom_des_zones">Afficher le nom des zones</h3> + +<p>Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :</p> + +<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p> + +<p>Décocher la case désactive cet affichage :</p> + +<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p> + +<h3 id="Prolonger_les_lignes_à_linfini">Prolonger les lignes à l'infini</h3> + +<p>Par défaut les lignes/<em>tracks </em>ne sont affichées que dans l'élément sur laquelle la grille est appliquée :</p> + +<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p> + +<p>Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :</p> + +<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p> + +<h3 id="Mini_vue_de_la_grille">Mini vue de la grille</h3> + +<p>Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.</p> + +<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p> + +<p>Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.</p> + +<p><img alt="A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="À_voir_également">À voir également</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — Plein d'exemples intéressants de l'utilisation des grilles.</li> + <li><a href="https://gridbyexample.com/">Grid by Example</a> — L'apprentissage des grilles CSS par Rachel Andrew.</li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — La référence et les tutoriaux MDN sur les grilles CSS.</li> +</ul> diff --git a/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html b/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html new file mode 100644 index 0000000000..c193dc25cd --- /dev/null +++ b/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html @@ -0,0 +1,228 @@ +--- +title: Examiner et modifier le CSS +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS +tags: + - Guide + - Inspector + - tool +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +<div>{{ToolsSidebar}}</div><p>Il est possible d'examiner et d'éditer le CSS via le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>.</p> + +<h2 id="Examiner_les_règles_CSS">Examiner les règles CSS</h2> + +<p><a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">L'onglet des règles </a>liste toutes les règles qui s'appliquent à l'élément sélectionné, ordonnés du plus spécifique au moins spécifique :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Affichage_des_règles">Affichage des règles</h3> + +<p>Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclarations de type<code> propriété:valeur;</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>Afficher en surbrillance les éléments correspondants</em>: à côté du sélecteur, se trouve une icône en forme de cible. Cliquer sur celle-ci affichera tous les noeuds de la page qui correspondent à ce sélecteur.</li> + <li><em>Déclaration surchargée</em>: les styles qui sont surchargés par des règles suivantes sont affichés "barrés". Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">déclarations surchargées</a></li> + <li><em>Afficher la cascade</em>: à côté des déclarations surchargées, se trouve une icône en forme de loupe. Cliquer sur celle-ci affiche la cascade de règles contenant la propriété surchargée. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">déclarations surchargées</a></li> + <li><em>Activer/Désactiver</em>: Lors du survol d'une déclaration, une case à cocher apparait à côté de cette déclaration. Cette case sert à activer.désactiver la règle.</li> + <li><em>Nom de fichier et numéro de ligne</em>: dans la partie droite, on retrouve un lien vers la règle. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">lien vers le fichier CSS</a>.</li> +</ul> + +<p>Depuis Firefox 52, si un élément à une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, alors une icône en forme de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">examiner les grilles</a> pour plus d'informations.</p> + +<p>Pour lister les <a href="/fr/docs/Web/CSS/Cascade">user-agent styles</a> (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les <a href="/fr/docs/Outils/Outils_boite_à_outils#Inspecteur">options des outils de développement</a>. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#.C3.89xaminer_le_CSS_calcul.C3.A9">l'onglet « Calculé »</a>.</p> + +<p>Les user-agent styles sont affichés sur un fond différent et le lien vers la feuille de style contient le préfixe <code>(user agent)</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="element_rule">element {} rule</h3> + +<p>La règle <code>élément {}</code> en haut de la liste des règles n'est pas réellement une règle CSS. C'est simplement la représentation des propriétés CSS assignée à l'élément via sont attribut {{htmlattrxref("style")}}.</p> + +<p>A partir de Firefox 52, cette règle obtient sa propre icône de cible (<img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">). Cela permet d'affiche facilement l'élément sélectionné de la page.</p> + +<p>{{EmbedYouTube("bQzOAFvEDco")}}</p> + +<h3 id="Filtrer_les_règles">Filtrer les règles</h3> + +<p>La boite "Filtrer les styles" se trouve en haut de l'onglet des règles :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">Écrire une expression dans cette boite a pour effet que :</p> + +<ul> + <li>Toute règle ne contenant pas la chaine caractère tapée est cachée.</li> + <li>Toute déclaration contenant la chaine tapée est mise en surbrillance</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Cliquer sur l'icône en forme de "X" à la fin de la boîte supprime le filtre.</p> + +<div class="note"> +<p>Si l'onglet des règles est sélectionné, il est possible d'appuyer sur <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> pour sélectioner le champ de recherche. Il est alors possible d'appuyer sur <kbd>Esc</kbd> pour supprimer le filtre.</p> +</div> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Recherche_stricte">Recherche stricte</h4> + +<p>Par défaut, la recherche affiche toutes les déclarations qui contiennent une partie de la chaine de caractère de la recherche. Par exemple filtrer avec "color" afficher les déclarations contenant <code><a href="/fr/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> et <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code> en plus de <code><a href="/fr/docs/Web/CSS/color">color</a></code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Si l'expression de recherche est encadrée ainsi : `color`, alors la recherche n'affiche que les correspondances exactes :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Étendre_les_propriétées_raccourcies">Étendre les propriétées raccourcies</h3> + +<p><a href="/fr/docs/Web/CSS/Shorthand_properties">Les propriétées raccourcies</a> peuvent être étendues pour afficher leur noms complets en cliquant sur la flèche à coté de celles-ci.</p> + +<h3 id="Afficher_les_pseudo-elements">Afficher les pseudo-elements</h3> + +<p>L'onglet des règles peut afficher les <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> suivant, si ceux ci sont appliqués à l'élément sélectioné :</p> + +<p><code>::after<br> + ::backdrop</code><br> + <code>::before<br> + ::first-letter<br> + ::first-line<br> + ::selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>Si l'élément sélection possède des pseudo-éléments appliqués, ils sont affichés avant la règle "élément", mais sont cachés par l'icone en forme de triangle :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>Cliquer sur cette icône affiche les pseudo-éléments :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Activer_hover_active_focus">Activer :hover, :active, :focus</h3> + +<p>Il y a un bouton à droite de la boite de recherche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Cliquer sur ce bouton afficher trois cases à cocher qui permettent d'activer les pseudo-classes {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} pour l'élément sélectionné :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">Cette fonctionnalité est également accessible depuis le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menu popup de l'onglet HTML</a>.</p> + +<p>Si une de ces classes est activée pour un noeud, un point orange apparait dans l'onglet HTML pour chaque noeud pour lesquels la pseudo-classe a été appliquée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Lien_vers_le_fichier_CSS">Lien vers le fichier CSS</h3> + +<p>En haut à droite de chaque règle, le nom du fichier source et le numéro de ligne de la règle est affiché sous forme de lien. Cliquer sur ce lien ouvre le fichier dans <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de style</a>.</p> + +<p>Il est possible de copier l'emplacement du fichier source. Il suffit pour cela de faire un clic droit sur le lien et de sélectionner "Copier l'adresse".</p> + +<p>L'inspecteur comprend les source maps CSS. Cela signifie que si vous utilisez un préprocesseur CSS qui supporte les source maps, et que vous avez activé l'option « Afficher les sources originales » dans les <a href="/fr/docs/Outils/Outils_boite_à_outils#.C3.89diteur_de_style">options de l'éditeur de style</a>, alors le lien pointera vers la source originale pas vers le CSS généré. Vous pouvez en apprendre plus sur le support des source map CSS dans la <a href="/fr/docs/Outils/Éditeur_de_style#Support_de_.22Source_map.22">documentation de l'éditeur de style</a>.</p> + +<h3 id="Déclarations_surchargées">Déclarations surchargées</h3> + +<p>Si une déclaration CSS est surchargée par une autre règle avec plus d'importance, cette déclaration est affichée "barrée".</p> + +<p>Les déclarations surchargées ont une icône en forme de loupe à côté d'elles. Cliquer sur cette icône filtra les propriétés du noeud pour n'afficher que celles contenant des déclarations qui essayent de configurer la même propriété : Il s'agit d'une cascade complète pour une propriété donnée.</p> + +<p>Cela permet de savoir quelle règle surcharge quelle déclaration :</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examiner_le_CSS_calculé">Examiner le CSS calculé</h2> + +<p>Pour voir le CSS calculé intégral pour l'élément sélectionné, il faut ouvrir <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Computed_view">l'onglet « Calculé »</a>. Cet onglet montre la valeur calculée de chaque propriété CSS pour l'élément sélectionné :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Il est possible d'utiliser <kbd>Tab</kbd> pour itérer parmi les éléments. Depuis Firefox 49, ile st possible d'obtenir plus d'information sur la propriété sélectionnée en pressant <kbd>F1</kbd> . Cela affiche la page MDN en référence à la propriété.</p> + +<p>Cliquer sur la flèche à côté du nom d'une propriété (ou presser <kbd>Entrée</kbd> ou <kbd>Espace</kbd> si elle est sélectionnée) affiche la règle qui fixe cette valeur, ainsi qu'un lien vers le fichier source :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Par défaut, cet onglet n'affiche que les valeurs qui ont été explicitement définies par la feuille de style. Pour voir toutes les valeurs, il faut cocher la case « Styles navigateur ».</p> + +<p>Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.</p> + +<div class="note"> +<p>Dans l'onglet des règles calculé, il est possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec <kbd>Esc</kbd>.</p> +</div> + +<h2 id="Modifier_les_règles">Modifier les règles</h2> + +<p>Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec <kbd>Tab</kbd>, et de les éditer avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).</p> + +<p>Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur <kbd>Tab </kbd> accepte la suggestion sélectionnée, et <kbd>Flèche Haut</kbd> et <kbd>Flèche Bas</kbd> permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Si le nom de la propriété est erroné ou inconnu, une icône jaune d'alerte s'affichera alors à côté de la déclaration.</p> + +<div class="note"> +<p><strong>Note</strong>: Depuis Firefox 60 les <a href="/fr/docs/Web/CSS/Using_CSS_variables">noms de variable CSS</a> sont également autocomplétés (voir {{bug(1422635)}}). Taper <code>var(</code> dans une valeur de propriété et ensuite rentrer un tiret (<code>-</code>), fera apparaitre toutes les variables déclarées dans le CSS dans une liste d'autocomplétion.<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/15813/css-variable-autocomplete.png" style="display: block; margin: 0 auto;"></p> +</div> + +<p>Attention, tous les changements effectués sont temporaires : recharger la page restaure le style original.</p> + +<p>Il est possible d'utiliser les <kbd>flèches haut/bas</kbd> et les touches page haut/bas pour augmenter/diminuer les valeurs numériques lorsqu'on modifie une règle :</p> + +<ul> + <li>La <kbd>flèche haut</kbd> augmentera les valeurs de 1. "1px" changera en "2px", par exemple.</li> + <li><kbd>Maj</kbd> + flèche haut/bas modifiera de 10.</li> + <li><kbd>Alt</kbd> + <kbd>flèche haut/bas</kbd> modifie de 0.1. Il est a noter que depuis Firefox 60, cette combinaison a été remplacée par <kbd>Ctrl</kbd> + <kbd>Haut</kbd>/<kbd>Bas</kbd> sur Linux et Windows pour éviter les conflits avec les raccourcis par défaut de ces systèmes d'exploitation (voir {{bug("1413314")}}). Le raccourci est resté le même sous Mac OS - — <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sous Mac OS est le raccourci par défaut pour ouvrir Mission Control.</li> + <li><kbd>Maj</kbd> + <kbd>Page haut/bas</kbd> modifie de 100.</li> +</ul> + +<p>Les modifications apportées dans l'onglet des règles sont visibles dans <a href="/fr/docs/Tools/Style_Editor">l'Éditeur de Style</a>, et vice versa.</p> + +<p>A partir de Firefox 52, lors de l'édition de CSS, le menu contextuel est celui par défaut pour la modification de texte :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h2 id="Ajouter_de_nouvelles_règles">Ajouter de nouvelles règles</h2> + +<p>Pour ajouter de nouvelles règles, il suffit de faire un clic droit pour afficher le menu contextuel puis de sélectionner « Ajouter une règle ». Cela ajoutera une règle qui correspond au nœud du document qui est sélectionné.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Il existe également un bouton pour faire la même chose :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copie_une_règle">Copie une règle</h2> + +<p>Pour copier une règle, il faut utiliser une des options suivantes du menu contextuel (clic droit) :</p> + +<ul> + <li>Copier la règle</li> + <li>Copier le sélecteur</li> + <li>Copier la déclaration de la propriété</li> + <li>Copier le nom de la propriété</li> + <li>Copier la valeur de la propriété</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La liste complète des <a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts">raccourcis clavier</a> de l'Inspecteur.</li> + <li>L'inspecteur inclut également divers outils pour travailler avec des fonctionnalités CSS spécifiques telles que les couleurs, les polices et les animations. Pour en apprendre plus sur ces fonctionnalités, voir les <a href="/fr/docs/Outils/Inspecteur">guides pratiques</a>.</li> +</ul> diff --git a/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_modèle_de_boîte/index.html b/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_modèle_de_boîte/index.html new file mode 100644 index 0000000000..1c890f872b --- /dev/null +++ b/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_modèle_de_boîte/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner et modifier le modèle de boîte +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_modèle_de_boîte +tags: + - Guide + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +<div>{{ToolsSidebar}}</div><h2 id="Examiner_le_modèle_de_boîte">Examiner le modèle de boîte</h2> + +<p>En ayant le bouton de <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">Sélection d'éléments</a> activé, survoler un élément de la page aura pour effet d'afficher son <a href="/fr/docs/Web/CSS/box_model">modèle de boite </a>en surbrillance :</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>Survoler le noeud d'un élément dans le panneau HTML l'affichera également :</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<h3 id="La_vue_modèle_de_boite">La vue "modèle de boite"</h3> + +<p>Lorsqu'un élément est sélectionné, il est possible d'avoir un aperçu détaillé du modèle de boite dans la <a href="/fr/Tools/Page_Inspector/UI_Tour#Computed_view">vue modèle de boite </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Survoler une valeur affichera une infobulle indiquant d'où la valeur est issue :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p> + +<p>Survoler une partie du modèle de boite dans cette vue affiche la partie correspondante de l'élément dans la page :</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Éditer_le_modèle_de_boites">Éditer le modèle de boites</h2> + +<p>Il est également possible d'éditer les valeurs dans la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Computed_view">vue modèle de boite</a> et les changements dans la page sont affiché immédiatement :</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> diff --git a/files/fr/outils/inspecteur/comment/examiner_et_éditer_le_code_html/index.html b/files/fr/outils/inspecteur/comment/examiner_et_éditer_le_code_html/index.html new file mode 100644 index 0000000000..d71e356662 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/examiner_et_éditer_le_code_html/index.html @@ -0,0 +1,326 @@ +--- +title: Éxaminer et modifier le code HTML +slug: Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML +tags: + - Guide + - Inspector + - Outils + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d’examiner et d'éditer le code HTML d'une page grâce au <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a>.</p> + +<h2 id="Naviguer_dans_le_HTML">Naviguer dans le HTML</h2> + +<h3 id="Fil_d'Ariane_HTML">Fil d'Ariane HTML</h3> + +<p>En bas du panneau HTML, se trouve un <a href="https://fr.wikipedia.org/wiki/Fil_d%27Ariane_%28ergonomie%29">fil d'Ariane</a>. Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p> + +<p>Survoler un élément du fil mettra celui-ci en surbrillance dans la page.</p> + +<p>Le fil possède ses propres <a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">raccourcis clavier</a>.</p> + +<div class="note"> +<p>Il est à noter que dans les versions antérieures à Firefox 48, le fil d'Ariane se trouvait en haut du panneau et non en bas.</p> +</div> + +<h3 id="Recherche">Recherche</h3> + +<p>À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames.</p> + +<p>Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier <kbd>Ctrl</kbd> + <kbd>F</kbd> , ou <kbd>Cmd</kbd> + <kbd>F</kbd> sous Mac.</p> + +<p>Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID qui correspondent à la recherche en cours :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Pour itérer parmi les suggestions, il faut utiliser <kbd>Flèche Haut</kbd> et <kbd>Flèche Bas</kbd>. <kbd>Tab</kbd> permet de choisir la suggestion sélectionnée. <kbd>Entrée</kbd> permet alors de sélectionner le premier noeud correspondant.</p> + +<p>Si la recherche est faite sans utiliser de valeur d'autocomplétion, alors la recherche sera effectuée sur tout le texte du document, incluant les balises, les attributs, et le contenu textuel des noeuds.</p> + +<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p> + +<p>Pour parcourir les résultats, il faut utiliser <kbd>Enter</kbd> . Depuis Firefox 48, il est possible d'itérer à l'envers avec <kbd>Maj</kbd> + <kbd>Enter</kbd> .</p> + +<h3 id="Arbre_HTML">Arbre HTML</h3> + +<p>Le reste du panneau affiche le HTML de la page sous forme d'arbre (cette interface est également appelée Markup View). À la gauche de chaque nœud se trouve une flèche, cliquer sur celle-ci développera le nœud. appuyer sur la touche "Alt" développera tous les nœuds inclus dans l'élément.</p> + +<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;">Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.</p> + +<p>Les nœuds qui ne sont pas visibles (par exemple avec <a href="/fr/docs/Web/CSS/display">display:none)</a> sont affichés en transparence dans l'arbre.</p> + +<p>Depuis Firefox 53, une ellipse est affichée entre la balise ouvrante et fermante d'un élément réduit à cause d'un contenu trop long.</p> + +<p>Avant Firefox 53, il était impossible de déterminer si noeud réduit avait des enfants. Maintenant, ce cas est indiqué par une icône de points de suspension ( <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"> )</p> + +<div class="note"> +<p><strong>Note</strong>: Il existe des raccourcis clavier fort pratiques qui peuvent être utilisés dans l'arbre HTML : voir la <a href="/fr/docs/Tools/Keyboard_shortcuts#HTML_pane">liste des raccourcis clavier</a>.</p> +</div> + +<h3 id="before_et_after">::before et ::after</h3> + +<p>Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant {{cssxref("::before")}} <code>et</code> {{cssxref("::after")}} :</p> + +<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p> + +<h3 id="Noeuds_ne_contenant_que_des_espaces">Noeuds ne contenant que des espaces</h3> + +<div class="geckoVersionNote">Nouveauté de Firefox 52</div> + +<p>Les développeurs web n'écrivent (généralement) pas tout leur code en une seule ligne. Ils utilisent des espaces, des retours à la ligne, ou des tabulations dans leur HTML pour le rendre plus lisible.</p> + +<p>Normalement, ces espaces n'ont aucun effet sur le visuel de la page. Mais en réalité, lorsqu'un navigateur analyse l'HTML, il génère automatiquement des noeuds de texte anonymes pour les éléments qui ne sont pas contenus dans des balises. Cela inclut les espaces (qui après tout, sont un type de texte).</p> + +<p>Si ces noeuds autogénérés sont des éléments <a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">"en ligne" (inline level)</a>, alors les navigateurs leur donneront une hauteur et largeur non nulle. Des espaces étranges entre les éléments apparaitront alors, même si aucun margin ou padding n'est appliqué sur ces éléments.</p> + +<p>Depuis Firefox 52, l'Inspecteur affiche ces noeuds d'espaces, afin de pouvoir savoir d'où viennent les espaces dans la mise en page. Ces noeuds sont représentés par un point: <img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;"> et affichent une infobulle explicative au survol :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p>Il est possible de trouver une démonstration de ceci à l'adresse : <a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a>.</p> + +<h3 id="Shadow_roots">Shadow roots</h3> + +<p>Tous les noeuds <em>shadow roots</em> présents dans le DOM sont exposés par la page HTML, de la même manière que le DOM normal. Le <em>shadow root</em> est représenté par un noeud nommé <code>#shadow-root</code> — il est possible de cliquer sur la flèche d'expansion pour voir le contenu complet du <em>shadow DOM</em>, et le manipuler, exactement comme avec les noeuds DOM normaux. Il existe cependant des limites, il n'est par exemple pas possible de glisser/déposer ou de supprimer des noeuds <em>shadow DOM</em>.</p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16051/shadow-root-in-html-pane.png" style="height: 485px; width: 1303px;"></p> + +<p>Si un <em>shadow DOM</em> contient un élément avec attribut <code>slot</code> ayant été inspiré dans un élément {{htmlelement("slot")}} — voir <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots">Flexibilitée ajoutée par les slots</a> pour une explication de l'utilisation de ceux-ci --- cet élément sera affiché à l'intérieur de son élément {{htmlelement("slot")}} correspondant, avec un lien à côté. Cliquer sur ce lien affichera l'élément avec l'attibut <code>slot</code> tel qu'il existe en dehors du <em>shadow DOM</em></p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16063/slots.png" style="height: 208px; width: 672px;"></p> + +<p>Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <code><slot></code></p> + +<div class="note"> +<p><strong>Note</strong>: L'inspection du <em>Shadow DOM</em> à été implémenté dans Firefox 61, mais est actuellement caché par la préférence <code>dom.webcomponents.shadowdom.enabled</code>. Elle sera activée par défaut lorsque les <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web components/Shadow DOM</a> seront disponible dans la plateforme, l'estimation actuelle pour cela est Firefox 63.</p> +</div> + +<h2 id="Menu_contextuel">Menu contextuel</h2> + +<p>Il est possible d’effectuer des tâches courantes sur un élément spécifique grâce au menu contextuel. Pour ouvrir celui-ci, il suffit de faire un clic droit sur l'élément :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9759/inspector-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 456px;"></p> + +<h3 id="Référence_du_menu_contextuel">Référence du menu contextuel</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Modifier comme HTML</td> + <td><a href="#Editing_HTML">Modifie le code HTML de l'élément</a>.</td> + </tr> + <tr> + <td>Copier >> l’intérieur du HTML</td> + <td>Copie le contenu interne à l'élément HTML</td> + </tr> + <tr> + <td>Copier >> l’extérieur du HTML</td> + <td>Copie le contenu HTML à l'intérieur par rapport à l'élément courant en incluant la balise de l'élément courant</td> + </tr> + <tr> + <td>Copier >> le sélecteur CSS</td> + <td>Copie un sélecteur CSS qui sélectionne uniquement l'élément.</td> + </tr> + <tr> + <td>Copier >> le chemin CSS</td> + <td>Copie un sélecteur CSS qui représente le chemin complet vers l'élément</td> + </tr> + <tr> + <td> + <p>Copier >> le Data-URL de l'image</p> + </td> + <td>Copie l'image en tant que data:// URL, si l'élément sélectionné est une image.</td> + </tr> + <tr> + <td>Afficher les propriétés DOM</td> + <td> + <p>Ouvre la <a href="/fr/docs/Tools/Web_Console#The_split_console">console scindée</a> et entre la commande "<code>inspect($0)</code>" pour <a href="/fr/docs/Tools/Web_Console#Inspecting_objects">inspecter</a> l'élément actuellement sélectionné.</p> + </td> + </tr> + <tr> + <td>Utiliser dans la console</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 43</p> + </div> + + <p>Assigne le noeud actuellement sélectionné dans une variable nommée <code>temp0</code> (ou <code>temp1</code> si <code>temp0</code> est déjà utilisée, etc.), puis ouvre la <a href="/fr/docs/Tools/Web_Console#The_split_console">console scindée</a>, vous permettant d'interagir avec ce noeud depuis la ligne de commande.</p> + </td> + </tr> + <tr> + <td>Tout étendre</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Étend l'élément sélectionné ainsi que tous ses enfants dans l'arbre HTML. C'est l'équivalent d'utiliser la touche <kbd>Alt</kbd> et le bouton pour étendre un élément (le triangle en début de ligne)</td> + </tr> + <tr> + <td>Réduire</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Réduit l'élément sélectionné. C'est l'équivalent du bouton en forme de triangle en début de ligne.</td> + </tr> + <tr> + <td>Coller >> à l’intérieur du HTML</td> + <td> + <p>Colle le contenu du presse-papier dans le nœud en tant qu'<a href="/fr/docs/Web/API/element.innerHTML">innerHTML</a>.</p> + </td> + </tr> + <tr> + <td>Coller >> à l’extérieur du HTML</td> + <td>Colle le contenu du presse-papier dans le nœud en tant qu'<a href="/fr/docs/Web/API/element.outerHTML">outerHTML</a>.</td> + </tr> + <tr> + <td>Coller >> Avant</td> + <td>Colle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.</td> + </tr> + <tr> + <td>Coller >> Après</td> + <td>Colle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.</td> + </tr> + <tr> + <td>Coller >> Comme premier nœud enfant</td> + <td>Colle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.</td> + </tr> + <tr> + <td>Coller >> Comme dernier nœud enfant</td> + <td>Colle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.</td> + </tr> + <tr> + <td>Faire défiler la vue jusqu'au noeud</td> + <td> + <p>Fait défiler la page jusqu'a ce que le noeud sélectionné soit visible.</p> + + <p>À partir de Firefox 44, il est possible d'utiliser le raccourci clavier <kbd>S</kbd> fera la même action.</p> + </td> + </tr> + <tr> + <td>Prendre une capture du noeud</td> + <td>Prend une capture du noeud sélectionné. La capture est directement sauvegardée dans votre dossier de téléchargement. Voir <a href="/fr/docs/Tools/Taking_screenshots">Prendre des captures</a>.</td> + </tr> + <tr> + <td>Créer un nouveau noeud</td> + <td>Crée une balise <div> en dernier enfant de l'élément sélectionné. Voir <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_%C3%A9diter_le_code_HTML$edit#Inserting_new_nodes">Insérer des nouveaux noeuds</a>.</td> + </tr> + <tr> + <td>Dupliquer le noeud</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Crée une copie de l'élément sélectionné, et l'insère immédiatement après.</td> + </tr> + <tr> + <td>Supprimer le nœud</td> + <td>Supprime l'élément</td> + </tr> + <tr> + <td>Attributs >> Ajouter un attribut</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + Ajoute un attribut à l'élément.</td> + </tr> + <tr> + <td>Attributs >> Modifier l'attribut</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + (seulement quand un attribut est sélectionné) Modifie l'attribut.</td> + </tr> + <tr> + <td>Attributs >> Supprimer l'attribut</td> + <td> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 44</p> + </div> + (seulement quand un attribut est sélectionné) Supprime l'attribut.</td> + </tr> + <tr> + <td>Attributs >> Copier la valeur de l'attribut</td> + <td>Copie la valeur de l'attribut</td> + </tr> + <tr> + <td>Ouvrir le lien dans un nouvel onglet</td> + <td>(seulement quand un lien - comme un attribut href - est sélectionné) Ouvre l'élément dans un nouvel onglet.</td> + </tr> + <tr> + <td>Ouvrir dans le Débogueur</td> + <td>(seulement quand un lien vers une source JS est sélectionné) Ouvre la source dans le Débogueur.</td> + </tr> + <tr> + <td>Ouvrir fichier dans l'éditeur de style</td> + <td>(seulement quand un lien vers une source CSS est sélectionné) Ouvre la source dan l'éditeur de style.</td> + </tr> + <tr> + <td>Copier l'adresse du lien</td> + <td>(seulement quand une URL est sélectionnée) Copie l'URL</td> + </tr> + <tr> + <td>:hover</td> + <td>Définit la pseudo classe CSS <a href="/fr/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a></td> + </tr> + <tr> + <td>:active</td> + <td>Définit la pseudo classe CSS <a href="/fr/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a></td> + </tr> + <tr> + <td>:focus</td> + <td>Définit la pseudo classe CSS <a href="/fr/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a></td> + </tr> + </tbody> +</table> + +<h2 id="Éditer_le_code_HTML"><a name="Editing_HTML">Éditer le code HTML</a></h2> + +<p>Il est possible d'éditer les éléments HTML directement dans le panneau HTML. Il suffit de double cliquer sur le texte voulu, de le modifier puis d'appuyer sur Entrée. Les modifications sont immédiatement effectives.</p> + +<p>Pour éditer le <a href="/fr/docs/Web/API/Element.outerHTML">outerHTML</a>, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML" . Une boite apparaîtra alors dans le panneau HTML :</p> + +<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;">N'importe quel fragment HTML peut être ajouté ici. Il est par exemple possible de changer les balises de l’élément, d'ajouter de nouvelles balises, de modifier des éléments existants, etc. Les modifications sont effectives dès que vous cliquez en-dehors de la boite</p> + +<p>À partir de Firefox 52, lors de l'édition, le menu contextuel est le même que pour le texte modifiable normal :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="Copier_coller">Copier coller</h3> + +<p>Il est possible d'utiliser le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menu popup</a> pour copier des noeuds dans l'arbre HTML.</p> + +<h3 id="Glisser_déposer">Glisser déposer</h3> + +<p>Il est possible de modifier l'HTML en déplaçant les noeuds dans l'arbre HTML. Il suffit de rester cliqué sur un élément et de le glisser vers le haut ou vers le bas. Lorsque le clic est relâché, l'élément sera inséré à la position voulue.</p> + +<p>{{EmbedYouTube("oI-a035nfWk")}}</p> + +<p>À partir de Firefox 44, il est possible d'annuler le glisser-déposer en utilisant la touche <kbd>Esc</kbd>.</p> + +<h3 id="Insérer_de_nouveaux_noeuds">Insérer de nouveaux noeuds</h3> + +<div class="geckoVersionNote">Nouveau dans Firefox 48</div> + +<p>À partir de Firefox 48, il y a une icône "+" en haut du panneau :</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p> + +<p> </p> + +<p>Cliquer sur cette icône insère une balise <code><a href="/fr/docs/Web/HTML/Element/div"><div></a></code> dans le document en tant que dernier enfant de l'élément sélectionné. Il est alors possible de modifier le contenu et le style du noeud, exactement comme n'importe quel autre élément.</p> + +<p>{{EmbedYouTube("NG5daffvVZM")}}</p> + +<p>L'option "Créer un nouveau noeud" dans le menu contextuel fait la même chose.</p> + +<p>Il est à noter que le bouton est désactivé si l'élément sélection est tel qu'ajouter un dernier enfant n'aurait aucun effet (par exemple un <code><a href="/fr/docs/Web/HTML/Element/html"><html></a></code> ou un <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <code><div></code>, ( <code><a href="/fr/docs/Web/HTML/Element/style"><style></a></code> ou <code><a href="/fr/docs/Web/HTML/Element/link"><link></a></code> par exemple). Dans ces cas, l'élément ajouté est un texte.</p> diff --git a/files/fr/outils/inspecteur/comment/examiner_les_écouteurs_d_évènements/index.html b/files/fr/outils/inspecteur/comment/examiner_les_écouteurs_d_évènements/index.html new file mode 100644 index 0000000000..192e82ef37 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/examiner_les_écouteurs_d_évènements/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner les écouteurs d'évènements +slug: Outils/Inspecteur/Comment/Examiner_les_écouteurs_d_évènements +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +<div>{{ToolsSidebar}}</div> + +<p>L'inspecteur affiche dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a> le mot "event" à côté des éléments qui ont un écouteur lié :</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16253/inspect_element_with_eventhandler.png" style="border: 1px solid black; display: block; height: 24px; margin-left: auto; margin-right: auto; width: 491px;"></p> + +<p> </p> + +<p>Cliquer sur cette icône fera apparaitre une pop-up listant tous les écouteurs liés à cet élément :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16254/inspector_event_handlers.png" style="border: 1px solid black; display: block; height: 702px; margin-left: auto; margin-right: auto; width: 828px;">Chaque ligne contient :</p> + +<ul> + <li>Une flèche droite. Cliquer dessus étend la ligne et affiche le code source de la fonction de l'écouteur.</li> + <li>Le nom de l'évènement.</li> + <li>Le nom du fichier et le numéro de ligne où se trouve l'écouteur : cliquer fera apparaitre la fonction de l'écouteur dans la pop-up.</li> + <li>Une flèche courbée. Cliquer dessus affiche le code de l'handler dans le Débogueur</li> + <li>Une indication pour savoir si l'évènement se propage ("bubbles") ou non.</li> + <li>Une indication qui affiche le système qui définit l'évènement. Firefox peut afficher : + <ul> + <li>Les évènements DOM standards</li> + <li><a class="external external-icon" href="http://api.jquery.com/category/events/">Les évènements jQuerry</a></li> + <li><a href="https://facebook.github.io/react/docs/events.html">Les évènements React</a></li> + </ul> + </li> +</ul> diff --git a/files/fr/outils/inspecteur/comment/index.html b/files/fr/outils/inspecteur/comment/index.html new file mode 100644 index 0000000000..3d3e1418dc --- /dev/null +++ b/files/fr/outils/inspecteur/comment/index.html @@ -0,0 +1,10 @@ +--- +title: Comment faire… +slug: Outils/Inspecteur/Comment +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="seoSummary">Cette page présente différents "Comment faire ?" pour l'Inspecteur, décrivant des techniques avancées.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/fr/outils/inspecteur/comment/inspecter_et_sélectionner_des_couleurs/index.html b/files/fr/outils/inspecteur/comment/inspecter_et_sélectionner_des_couleurs/index.html new file mode 100644 index 0000000000..93e353dff0 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/inspecter_et_sélectionner_des_couleurs/index.html @@ -0,0 +1,22 @@ +--- +title: Inspecter et sélectionner des couleurs +slug: Outils/Inspecteur/Comment/Inspecter_et_sélectionner_des_couleurs +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +<div>{{ToolsSidebar}}</div><p>Dans l'onglet "<a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Règles" </a>du panneau CSS, si une règle contient une valeur de couleur, un aperçu de cette couleur sera affiché à côté de la valeur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>Cliquer sur cet aperçu ouvre un sélecteur de couleur, permettant de changer la couleur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>Le sélecteur de couleur inclut une icône en forme de pipette. Cliquer sur cette icône permet de sélectionner une nouvelle couleur depuis la page :</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p>À partir de Firefox 40, cliquer sur l'aperçu tout en maintenant la touche <kbd>Maj</kbd> enfoncée change le format de couleur :</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p>Depuis sa version 53, Firefox supporte les <a href="https://drafts.csswg.org/css-color/">valeurs de couleurs CSS "level 4"</a>.</p> diff --git a/files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html b/files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html new file mode 100644 index 0000000000..6e8f25c1b1 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html @@ -0,0 +1,35 @@ +--- +title: Ouvrir l'inspecteur +slug: Outils/Inspecteur/Comment/Ouvrir_l_Inspecteur +tags: + - Guide + - Inspecteur + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>Il y a deux façons principales d’ouvrir l'inspecteur :</p> + +<ul> + <li><strong>Sans élément sélectionné </strong>: cliquer sur l'option "Inspecteur" du menu "Développement", ou bien utiliser le <a href="/fr/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourci clavier</a> correspondant (Ctrl + Maj + C)</li> + <li><strong>Avec un élément sélectionné </strong>: faire un clic droit sur un élément et sélectionner "Examiner l'élément"</li> +</ul> + +<p>L'inspecteur s’ouvrira alors dans votre navigateur :</p> + +<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16386/pageInspector.png" style="display: block; height: 691px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Il est également possible de le faire apparaitre à gauche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16390/inspector_leftSide.png" style="height: 691px; width: 800px;"></p> + +<p>Ou à droite :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16391/inspector_rightSide.png" style="height: 691px; width: 800px;"></p> + +<p>Ou dans une fenêtre séparée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16392/inspector_sideXside.png" style="height: 361px; width: 800px;"></p> + +<p>La <a class="new" href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/UI_Tour">visite guidée de l'interface utilisateur</a> peut vous aider à vous repérer dans l'inspecteur.</p> diff --git a/files/fr/outils/inspecteur/comment/prévisualiser_des_images_de_fond/index.html b/files/fr/outils/inspecteur/comment/prévisualiser_des_images_de_fond/index.html new file mode 100644 index 0000000000..9d6bdb09e4 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/prévisualiser_des_images_de_fond/index.html @@ -0,0 +1,12 @@ +--- +title: Prévisualiser des images de fond +slug: Outils/Inspecteur/Comment/Prévisualiser_des_images_de_fond +translation_of: Tools/Page_Inspector/How_to/View_background_images +--- +<div>{{ToolsSidebar}}</div><p>Dans <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">l'onglet des règles</a>, il est possible de prévisualiser les images spécifiées avec la propriété <a href="/fr/docs/Web/CSS/background-image">background-image</a>. Il suffit de survoler cette règle :</p> + +<h4 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/11215/css-image-preview.png" style="display: block; height: 422px; margin-left: auto; margin-right: auto; width: 585px;"></h4> + +<p>Depuis Firefox 41, lors d'un clic-droit sur la déclaration de l'image, il y a une option pour copier l'image en tant que data URL :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11213/css-copy-image-data-url.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 587px;"></p> diff --git a/files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html b/files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..1d640ebf74 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: Repositionner des éléments dans la page +slug: Outils/Inspecteur/Comment/Reposition_elements_in_the_page +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">Nouveau dans Firefox 48</div> + +<p>A partir de Firefox 48; il est possible de déplacer les élément positionnés en absolu en les glissant dans la page.</p> + +<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p> + +<p>Si un élément a sa propriété <code>{{cssxref("position")}}</code> mise à <code>absolute</code>, <code>relative</code> ou <code>fixed</code> et une ou plus des propriétés {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, alors la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">vue "Modèle de boîte"</a> affiche un bouton :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Cliquer sur ce bouton fera apparaitre deux poignées à coté de l'élément :</p> + +<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p> + +<p>Il est alors possible d'utiliser ces poignées pour déplacer l’élément dans la page.</p> + +<p>Si l’élément est positionné en absolu, des lignes pointillées apparaissent pour représenter le décalage par rapport au parent. Pour les éléments positionnés en relatif, elles représentent la position d'origine du nœud. les distances sont affichés par des infobulles pour chaque coté.</p> diff --git a/files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html b/files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html new file mode 100644 index 0000000000..b04d2d6e1f --- /dev/null +++ b/files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html @@ -0,0 +1,30 @@ +--- +title: Sélectionner et mettre en surbrillance +slug: Outils/Inspecteur/Comment/Select_and_highlight_elements +translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements +--- +<div>{{ToolsSidebar}}</div><p>L'élément <em>sélectionné</em> est élément de la page ciblé par l'Inspecteur. Cet élément est affiché dans le<a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane"> panneau HTML</a> et son CSS est affiché dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>.</p> + +<p>L'élément en <em>surbrillance </em>est l'élément dans la page en surbrillance avec son modèle de boit d'affiché, ainsi qu'une infobulle avec son tag et sa taille :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="Via_le_menu_contextuel">Via le menu contextuel</h2> + +<p>Pour ouvrir l'Inspecteur et sélectionner un élément immédiatement, il suffit d'activer le menu contextuel de n'importe quel élément de la page et de sélectionner "Inspecter l'élément" :</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="Via_le_panneau_HTML">Via le panneau HTML</h2> + +<p>Lorsque l'Inspecteur est ouvert, survoler un élément listé dans le panneau HTML affichera en surbrillance l'élément correspondant dans la page. Cliquer sur un élément dans le panneau HTML le sélectionne :</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre DOM.</p> + +<h2 id="Via_le_sélectionneur_de_noeuds">Via le sélectionneur de noeuds</h2> + +<p>Pour sélectionner un élément de la page, il faut activer l'outil en cliquant sur son icône : <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;">. Ensuite, survoler un élément de la page l'affichera en surbrillance. Cliquer sur un élément le sélectionne :</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> diff --git a/files/fr/outils/inspecteur/comment/sélectionner_un_élément/index.html b/files/fr/outils/inspecteur/comment/sélectionner_un_élément/index.html new file mode 100644 index 0000000000..084b33f3be --- /dev/null +++ b/files/fr/outils/inspecteur/comment/sélectionner_un_élément/index.html @@ -0,0 +1,36 @@ +--- +title: Sélectionner un élément +slug: Outils/Inspecteur/Comment/Sélectionner_un_élément +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +<div>{{ToolsSidebar}}</div><p><em>L'élément sélectionné</em> est l'élément de la page sélectionné dans l'Inspecteur. Il est affiché dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a> et son CSS est affiché dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>.</p> + +<p><em>L'élément en surbrillance </em>est l'élément de la page sur lequel est superposé une image affichant son modèle de boite, ainsi qu'une une infobulle avec son type et sa taille :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="Avec_le_menu_contextuel">Avec le menu contextuel</h2> + +<p>Pour ouvrir l'Inspecteur et sélectionner immédiatement un élément, il suffit d'ouvrir le menu contextuel sur cet élément (clic droit) puis de sélectionner "Inspecter l'élément" :</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="Avec_le_panneau_HTML">Avec le panneau HTML</h2> + +<p>Lorsque l'inspecteur est ouvert, l'élément survolé par la souris est mis en évidence dans la page. Cliquer sur cet élément le sélectionnera :</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre HTML.</p> + +<h2 id="Avec_le_sélectionneur_de_noeuds">Avec le sélectionneur de noeuds</h2> + +<p>Pour sélectionner un élément dans la page, il est possible d'activer le sélectionneur en cliquant sur son icône ( <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> ) en haut à gauche. Dès lors, chaque élément survolé par la souris sera mis en évidence et cliquer sur un élément le sélectionnera :</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> + +<p>Depuis Firefox 52, utiliser la touche <kbd>Maj</kbd> lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)</p> diff --git a/files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html b/files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html new file mode 100644 index 0000000000..a870167e19 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html @@ -0,0 +1,46 @@ +--- +title: Utiliser l'API de l'Inspecteur +slug: Outils/Inspecteur/Comment/Utiliser_l_API_de_l_Inspecteur +tags: + - Inspector + - Reference + - Référence(2) + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +<div>{{ToolsSidebar}}</div> + +<p>Les modules complémentaires de Firefox peuvent accéder aux objets du contexte <code>chrome://browser/content/devtools/inspector/inspector.xul </code>suivants :</p> + +<h3 id="window.inspector">window.inspector</h3> + +<p>Défini dans <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Attributs et fonctions :</p> + +<ul> + <li>.selection - information sur la sélection de l'inspecteur : + <ul> + <li>.isNode() - retourne true si la sélection est un nœud.</li> + <li>.node - retourne l'élément de la page</li> + <li>.window - l'objet window de la frame dans laquelle la sélection est.</li> + </ul> + </li> + <li>.markDirty() - marque la page comme ayant été modifié par l'inspecteur. un avertissement sera affiché en quittant la page, car les changements faits par l'inspecteur sont réécrits au rechargement.</li> +</ul> + +<p>Événements Bindables :</p> + +<h4 id="markuploaded">markuploaded</h4> + +<p>Appelé quand le panneau de gauche a été rafraichi après un changement de panneau</p> + +<h4 id="ready">ready</h4> + +<p>Appelé au premier <code>markuploaded</code>.</p> + +<h4 id="pseudoclass">pseudoclass</h4> + +<p>Appelé après affichage ("toggle") d'une pseudo classe</p> + +<h4 id="layout-change">layout-change</h4> + +<p>"low-priority change event for things like paint and resize." (évènements de changement basse priorité pour les choses comme paint et resize).</p> diff --git a/files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html b/files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html new file mode 100644 index 0000000000..1b3f3c13b2 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html @@ -0,0 +1,16 @@ +--- +title: Utiliser l'Inspecteur depuis la Console Web +slug: Outils/Inspecteur/Comment/Utiliser_l_Inspecteur_depuis_la_Console_Web +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +--- +<div>{{ToolsSidebar}}</div> + +<p>L'élément qui est sélectionné dans <a href="/fr/docs/Outils/inspecteur" title="/fr/docs/Outils/inspecteur">l'Inspecteur</a> peut être <span class="tgtColl" id="ctl00_cC_ucResEM_lblTranslation" lang="1036">référencé dans la <a href="/fr/docs/Outils/Web_Console" title="/fr/docs/Outils/Web_Console">Console Web</a></span> en utilisant la variable <code>$0</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10057/console-$0.png" style="display: block; margin-left: auto; margin-right: auto; width: 761px;">Les éléments DOM dans la Console Web ont une icône en forme de cible à côté d'eux. Survoler cette icône met l'élément en surbrillance. Cliquer sur cette icône sélectionne l'élément dans l'Inspecteur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10059/console-highlight.png" style="display: block; margin-left: auto; margin-right: auto; width: 760px;"></p> diff --git a/files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html b/files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html new file mode 100644 index 0000000000..a00bd795b5 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html @@ -0,0 +1,14 @@ +--- +title: Visualiser les transformations +slug: Outils/Inspecteur/Comment/Visualiser_les_transformations +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Visualiser_les_transformations">Visualiser les transformations</h2> + +<p>Survoler une propriété <a href="/fr/docs/Web/CSS/transform"><code>transform</code></a> dans <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">l'onglet des règles</a>, fera apparaitre la transformation dans la page :<img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p> diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html new file mode 100644 index 0000000000..a5c09e4f45 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html @@ -0,0 +1,26 @@ +--- +title: Inspecteur d'animations (Firefox 41 et 42) +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +--- +<div>{{ToolsSidebar}}</div> + +<div class="note"> +<p>Il est à noter que l'interface utilisateur de l'inspecteur d'animations a été refaite dans Firefox 43. Pour voir à quoi ressemble cette nouvelle interface, consultez la page : <a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">"Travailler avec des animations"</a>.</p> +</div> + +<p>L’inspecteur d'animations permet de :</p> + +<ul> + <li>Voir des informations sur toutes les animations fonctionnant dans la page.</li> + <li>Démarrer/stopper toutes les animations</li> + <li>Démarrer/arrêter/rembobiner/avancer rapidement chaque animation</li> + <li>Aller à un point spécifique de l'animation</li> + <li>Mettre en surbrillance et inspecter le noeud animé</li> + <li>Ajuster la vitesse de chaque animation</li> + <li>Voir si une animation tourne dans le compositor thread (une icône en forme d'éclair est affichée à côté des animations dans ce cas)</li> +</ul> + +<p>{{EmbedYouTube("0vSIuKaqD8o")}}</p> diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html new file mode 100644 index 0000000000..929963fa4a --- /dev/null +++ b/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html @@ -0,0 +1,107 @@ +--- +title: 'Exemple d''inspecteur d''animations : Web Animations API' +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_example:_Web_Animations_API +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +--- +<div>{{ToolsSidebar}}</div><h2 id="firefox-logo-animation" name="firefox-logo-animation">logo-animation-Firefox</h2> + +<p>Exemple d'animation utilisant la <a href="/fr/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/> + <span id="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="Contenu_CSS">Contenu CSS</h3> + +<pre class="brush: css">.channel { + padding: 2em; + margin: 0.5em; + box-shadow: 1px 1px 5px #808080; + margin: 1.5em; +} + +.channel > * { + vertical-align: middle; + line-height: normal; +} + +#icon { + width: 50px; + height: 50px; + filter: grayscale(100%); +} + +#note { + margin-left: 1em; + font: 1.5em "Open Sans",Arial,sans-serif; + overflow: hidden; + white-space: nowrap; + display: inline-block; + opacity: 0; + width: 0; +} +</pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js">var iconKeyframeSet = [ + { transform: 'scale(1)', filter: 'grayscale(100%)'}, + { filter: 'grayscale(100%)', offset: 0.333}, + { transform: 'scale(1.5)', offset: 0.666 }, + { transform: 'scale(1.5)', filter: 'grayscale(0%)'} +]; + +var noteKeyframeSet = [ + { opacity: '0', width: '0'}, + { opacity: '1', width: '300px'} +]; + +var iconKeyframeOptions = { + duration: 750, + fill: 'forwards', + easing: 'ease-in', + endDelay: 100 +} + +var noteKeyframeOptions = { + duration: 500, + fill: 'forwards', + easing: 'ease-out', + delay: 150 +} + +var icon = document.getElementById("icon"); +var note = document.getElementById("note"); + +var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions); +var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions); + +iconAnimation.pause(); +noteAnimation.pause(); + +var firstTime = true; + +function animateChannel(e) { + if (e.button != 0) { + return; + } + if (e.target.id != "icon") { + return; + } + if (firstTime) { + iconAnimation.play(); + noteAnimation.play(); + firstTime = false; + } else { + iconAnimation.reverse(); + noteAnimation.reverse(); + } +} + +document.addEventListener("click", animateChannel); +</pre> diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html new file mode 100644 index 0000000000..6d6ea21654 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html @@ -0,0 +1,84 @@ +--- +title: Exemples d'animations +slug: Outils/Inspecteur/Comment/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +<div>{{ToolsSidebar}}</div><h2 id="firefox-logo-animation" name="firefox-logo-animation">firefox-logo-animation</h2> + +<p>Exemples d'animations utilisant les <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">transitions CSS</a>.</p> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/> + <span class="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="Contenu_CSS">Contenu CSS</h3> + +<pre class="brush: css">.channel { + padding: 2em; + margin: 0.5em; + box-shadow: 1px 1px 5px #808080; + margin: 1.5em; +} + +.channel > * { + vertical-align: middle; + line-height: normal; +} + +.icon { + width: 50px; + height: 50px; + filter: grayscale(100%); + transition: transform 750ms ease-in, filter 750ms ease-in-out; +} + +.note { + margin-left: 1em; + font: 1.5em "Open Sans",Arial,sans-serif; + overflow: hidden; + white-space: nowrap; + display: inline-block; + + opacity: 0; + width: 0; + transition: opacity 500ms 150ms, width 500ms 150ms; +} + +.icon#selected { + filter: grayscale(0%); + transform: scale(1.5); +} + +.icon#selected+span { + opacity: 1; + width: 300px; +} +</pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js">function toggleSelection(e) { + if (e.button != 0) { + return; + } + if (e.target.classList.contains("icon")) { + var wasSelected = (e.target.getAttribute("id") == "selected"); + clearSelection(); + if (!wasSelected) { + e.target.setAttribute("id", "selected"); + } + } +} + +function clearSelection() { + var selected = document.getElementById("selected"); + if (selected) { + selected.removeAttribute("id"); + } +} + +document.addEventListener("click", toggleSelection);</pre> diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/index.html new file mode 100644 index 0000000000..0bbcab5957 --- /dev/null +++ b/files/fr/outils/inspecteur/comment/work_with_animations/index.html @@ -0,0 +1,180 @@ +--- +title: travailler avec les animations +slug: Outils/Inspecteur/Comment/Work_with_animations +tags: + - Guide + - Inspecteur + - Outils +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +<div>{{ToolsSidebar}}</div> + +<p>Cet article couvre trois outils que vous pouvez utilisez pour visualiser et éditer des animations:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">the animation inspector</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">editing @keyframes</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">editing timing functions</a></li> +</ul> + +<h2 id="Animation_inspector">Animation inspector</h2> + +<p>The Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">Animations view</a> displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.</p> + +<p>It displays animations created using <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes rules</a>, or the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. Starting in Firefox 48, it will show animations applied to the <code><a href="/en-US/docs/Web/CSS/::before">::before</a></code> and <code><a href="/en-US/docs/Web/CSS/::after">::after</a></code> pseudo-elements.</p> + +<p>To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.</p> + +<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}</p> + +<p>These animations are made using the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p> + +<p>Let's use the animation inspector to see what's going on in this example.</p> + +<ol> + <li>Right-click in the box and select "Inspect Element"</li> + <li>Make sure the selected element is the <code><div class="channel"></code></li> + <li>Switch over to the "Animations" tab</li> + <li>Play the animation</li> +</ol> + +<p>{{EmbedYouTube("XmKeAKryE5I")}}</p> + +<p>Let's take a closer look at the contents of the animation inspector here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16354/animation_pane.png" style="border: 1px solid black; display: block; height: 297px; margin-left: auto; margin-right: auto; width: 394px;"></p> + +<p>It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).</p> + +<h3 id="Animation_bars">Animation bars</h3> + +<p>Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:</p> + +<ul> + <li>blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property</li> + <li>orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used</li> + <li>green if the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> was used</li> +</ul> + +<p>The bar contains a lightning bolt icon <img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;"> if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</p> + +<p>The bar is shaped to reflect the easing effect used for the animation. In the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out.</p> + +<p>If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS <code>@keyframes</code>, there is one bar for each animation, labeled with its name.</p> + +<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> and <code>endDelay</code></a> are both represented.</p> + +<p>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:</p> + +<ul> + <li>the type of animation: CSS transition, CSS animation, or Web Animations API</li> + <li>the duration of the animation</li> + <li>the animation's start and end delay</li> + <li>the animation's easing (or timing function).</li> + <li>the animation's fill</li> + <li>the Playback rate of the animation</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16355/animation_details.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p> + +<h3 id="Information_about_the_animated_element">Information about the animated element</h3> + +<p>To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.</p> + +<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). Clicking this icon locks the highlighter on the element.</p> + +<h3 id="Animation_details">Animation details</h3> + +<p>If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for <code>img#icon</code>'s animation:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16356/animation_icon_details.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p> + +<p>This is telling us that two properties were modified: <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. <code>filter</code> was given a value at 250ms and <code>transform</code> at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16357/animation_icon_scale.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p> + +<p>This is essentially a visual representation of the animation's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">keyframes</a>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span> + <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)' </span><span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="punctuation token">{</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.333</span><span class="punctuation token"> }</span><span class="punctuation token">,</span> + <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.666</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(0%)'</span><span class="punctuation token"> }</span> +<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Application_to_the_example">Application to the example</h3> + +<p>Applying all this to our example, we can see that:</p> + +<ul> + <li>The animation involved two elements, <code>span#note</code> and <code>img#icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.</li> + <li>The <code>img#icon</code> animation: + <ul> + <li>animated the <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> properties, to scale the icon and color it</li> + <li>lasted 750ms, had an <code>endDelay</code> of 100ms</li> + <li>used the compositor thread</li> + <li>was given an <code><a href="/en-US/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> value of <code>ease-in</code>: you can see this by the concave shape of the green bar.</li> + </ul> + </li> + <li>The <code>span#note</code> animation: + <ul> + <li>animated the <code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> properties, to make the name gradually appear</li> + <li>lasted 500ms, and had a <code>delay</code> of 150ms</li> + <li>was given an <code><a href="/en-US/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> value of <code>ease-out</code>: you can see this by the convex shape of the green bar.</li> + </ul> + </li> +</ul> + +<h3 id="Animation_playback">Animation playback</h3> + +<p>At the top of the animation inspector:</p> + +<ul> + <li>there are buttons to play/pause and restart the animation</li> + <li>there's a dropdown to change the animation playback rate</li> + <li>the current time in the animation is displayed.</li> +</ul> + +<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.</p> + +<h3 id="Further_information_about_animation_compositing">Further information about animation compositing</h3> + +<p>If you open <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html">animation-inspector-compositing.html</a> and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:</p> + +<ul> + <li>The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.</li> + <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."</li> + <li>The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16359/animation_swoosh_01.png" style="border: 1px solid black; display: block; height: 313px; margin: 0px auto; width: 549px;"></p> + +<p>Let's now look at <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the <code>transform</code> property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that:</p> + +<ul> + <li>The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.</li> + <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."</li> + <li>Properties whose animation is <strong>not</strong> being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16360/animation_not_optimized.png" style="border: 1px solid black; display: block; height: 375px; margin: 0px auto; width: 549px;"></p> + +<h2 id="Edit_keyframes">Edit @keyframes</h2> + +<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Edit_timing_functions">Edit timing functions</h2> + +<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p> + +<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p> + +<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> diff --git a/files/fr/outils/inspecteur/index.html b/files/fr/outils/inspecteur/index.html new file mode 100644 index 0000000000..ff14d6634c --- /dev/null +++ b/files/fr/outils/inspecteur/index.html @@ -0,0 +1,61 @@ +--- +title: Inspecteur +slug: Outils/Inspecteur +tags: + - CSS + - DOM + - Développement Web + - HTML + - Outils + - Styles +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.</p> + +<p>Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page <a href="/fr/docs/Tools/Remote_Debugging">débogage distant </a>pour apprendre comment connecter les outils de développement à une cible distante.</p> + +<hr> +<h2 id="Visite_guidée_de_linterface_utilisateur">Visite guidée de l'interface utilisateur</h2> + +<p>Pour vous repérer dans l’inspecteur, voici une courte <a href="/fr/docs/Tools/Page_Inspector/UI_Tour">visite guidée de l'interface utilisateur</a>.</p> + +<p>Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du <a href="/fr/docs/Tools/Page_Inspector/3-pane_mode">mode à trois panneaux.</a></p> + +<hr> +<h2 id="Comment">Comment ?</h2> + +<p>Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :</p> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Ouvrir l'Inspecteur</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examiner et éditer l'HTML</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boites</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspecter et sélectionner des couleurs</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_fonts">Éditer les polices d'écriture</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualiser les transformations</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Utiliser l'API de l'inspecteur</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element">Sélectionner un élément</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examiner et éditer le CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examiner les écouteurs d'évènements</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec des animations</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Éditer les filtres CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les formes CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/View_background_images">Voir les images de fond</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Utiliser l'inspecteur depuis la console web</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examiner les grilles CSS</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examiner les layout CSS flexbox</a></li> +</ul> +</div> + +<hr> +<h2 id="Référence">Référence</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts">Raccourcis clavier</a></li> + <li><a href="/fr/docs/Tools/Tools_Toolbox#Inspector">Paramètres</a></li> +</ul> +</div> diff --git a/files/fr/outils/inspecteur/panneau_html/index.html b/files/fr/outils/inspecteur/panneau_html/index.html new file mode 100644 index 0000000000..b09ae3ff2e --- /dev/null +++ b/files/fr/outils/inspecteur/panneau_html/index.html @@ -0,0 +1,11 @@ +--- +title: Panneau HTML +slug: Outils/Inspecteur/Panneau_HTML +tags: + - HTML + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Page_Inspector/UI_Tour +--- +<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/outils/inspecteur/raccourcis_clavier/index.html b/files/fr/outils/inspecteur/raccourcis_clavier/index.html new file mode 100644 index 0000000000..d69433edb7 --- /dev/null +++ b/files/fr/outils/inspecteur/raccourcis_clavier/index.html @@ -0,0 +1,10 @@ +--- +title: Raccourcis Clavier +slug: Outils/inspecteur/Raccourcis_clavier +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> + +<h3 id="Raccourcis_clavier">Raccourcis clavier</h3> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/fr/outils/inspecteur/ui_tour/index.html b/files/fr/outils/inspecteur/ui_tour/index.html new file mode 100644 index 0000000000..b0f9e07205 --- /dev/null +++ b/files/fr/outils/inspecteur/ui_tour/index.html @@ -0,0 +1,94 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Inspecteur/UI_Tour +translation_of: Tools/Page_Inspector/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :</p> + +<ul> + <li>Le bouton de sélection d'éléments</li> + <li>Le panneau HTML</li> + <li>Le panneau CSS</li> +</ul> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;">Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.</p> + +<h2 id="Le_bouton_de_sélection_d'éléments">Le bouton de sélection d'éléments</h2> + +<p>L'inspecteur donne accès à des informations détaillées à propos de l'élément sélectionné. Ce bouton est l'une des façons de sélectionner un élément pour l'inspecter :</p> + +<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Notez qu'il fait partie de la <a href="/fr/docs/Outils/Outils_boite_à_outils#Barre_d'outils">barre d'outils de la boîte à outils</a>, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.</p> + +<p>Pour savoir comment sélectionner un élément, voir le guide pour <a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">sélectionner un élément</a>.</p> + +<h2 id="Le_panneau_HTML">Le panneau HTML</h2> + +<p>L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML:</p> + +<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Pour en savoir plus sur la structure du panneau HTML, voir la page "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">Examiner et éditer le code HTML</a>".</p> + +<h2 id="Le_panneau_CSS">Le panneau CSS</h2> + +<p>La partie droite est occupée par le panneau CSS :</p> + +<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">Ce panneau CSS est composé de 5 vues :</p> + +<ul> + <li>Règles</li> + <li>Calculé</li> + <li>Disposition</li> + <li>Animations</li> + <li>Polices</li> +</ul> + +<p>Utilisez ces onglets pour passer d'une vue à une autre.</p> + +<div class="note"> +<p><strong>Note </strong>: Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du <a href="/fr/docs/Tools/Page_Inspector/3-pane_mode">mode à trois panneaux.</a></p> +</div> + +<h3 id="La_vue_Règles">La vue "Règles"</h3> + +<p>Cette vue liste toutes les règles CSS qui s'appliquent à l'élément sélectionné. Les règles sont ordonnées de la plus précise à la moins précise.</p> + +<p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS">Examiner et éditer le CSS</a>" pour plus de détails.</p> + +<h3 id="La_vue_Calculé">La vue "Calculé"</h3> + +<p>Cette vue liste toutes les règles CSS calculées pour l'élément sélectionné, ainsi qu'une représentation visuelle éditable du modèle de boite.</p> + +<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>Pour en savoir plus sur le modèle de boite, voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boite</a>". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.</p> + +<p>Pour plus de détails sur les déclarations CSS de cette vue, voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Examiner_le_CSS_calculé">Examiner le CSS calculé</a>".</p> + +<h3 id="La_vue_Polices">La vue "Polices"</h3> + +<p>Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.</p> + +<p> </p> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Voir_les_polices">Voir les polices</a>" pour plus de détails.</p> + +<h3 id="La_vue_Animations">La vue "Animations"</h3> + +<p>Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.</p> + +<p> </p> + +<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>Voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec les animations</a>" pour plus de détails.</p> diff --git a/files/fr/outils/inspecteur_accessibilite/index.html b/files/fr/outils/inspecteur_accessibilite/index.html new file mode 100644 index 0000000000..cc493a0836 --- /dev/null +++ b/files/fr/outils/inspecteur_accessibilite/index.html @@ -0,0 +1,182 @@ +--- +title: Inspecteur de l'accessibilité +slug: Outils/Inspecteur_accessibilite +tags: + - Accessibilité + - DevTools + - Guide + - Inspecteur Accessibilié + - Outils +translation_of: Tools/Accessibility_inspector +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.</p> + +<h2 id="Un_(très)_bref_guide_sur_l'accessibilité">Un (très) bref guide sur l'accessibilité</h2> + +<p>L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.</p> + +<p>On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API d'accessibilité</a> disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).</p> + +<p>Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> afin de fournir des rôles spécifiques.</p> + +<p>Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.</p> + +<p>Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.</p> + +<h2 id="Accéder_à_l'inspecteur_d'accessibilité">Accéder à l'inspecteur d'accessibilité</h2> + +<p>L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :</p> + +<p><img alt="L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »" src="https://mdn.mozillademos.org/files/16366/Screen_Shot_2018-11-30_at_11.58.54.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1986px;"></p> + +<p>Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (<a href="/fr/docs/Outils/Memory">Mémoire</a> et <a href="/fr/docs/Outils/Performance">Performances</a> par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.</p> + +<p>Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».</p> + +<p>Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.</p> + +<div class="note"> +<p><strong>Note</strong> : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.</p> +</div> + +<h2 id="Fonctionnalité_du_panneau_Accessibilité">Fonctionnalité du panneau Accessibilité</h2> + +<p>Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :</p> + +<p><img alt="Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité." src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p> + +<p>Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :</p> + +<ul> + <li>Rôle — le rôle de cet élément sur la page (ex. <code>pushbutton</code> ou <code>footer</code>). Cette valeur peut être celle d'un rôle fourni par le navigateur ou un rôle fourni via l'attribut WAI-ARIA <code>role</code>.</li> + <li>Nom — le nom donné à cet élément sur la page. Le nom dépend de l'élément. Ainsi, la plupart des éléments textuels auront comme nom la valeur de leur attribut <code>textContent</code> tandis que les contrôles de formulaires seront nommés selon l'élément {{htmlelement("label")}} associé.</li> +</ul> + +<p>Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :</p> + +<ul> + <li><em>name</em> — le nom de l'élément, tel qu'indiqué ci-avant.</li> + <li><em>role</em> — le rôle de l'élément, tel qu'indiqué ci-avant.</li> + <li><em>actions</em> — une liste d'actions qui peuvent être effectuées sur l'élément. Ainsi, un bouton poussoir (<code>pushbutton</code>) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).</li> + <li><em>value</em> — la valeur de l'élément. Cette propriété peut avoir un sens différent selon le type d'élément. Ainsi, un champ d'un formulaire (<em>role</em>: <em>entry</em>) aurait comme valeur celle qui est saisie dans le champ. Pour un hyperlien, la valeur associée serait l'URL indiquée dansvia l'attribut <code>href</code> de l'élément <code><a></code>.</li> + <li><em>DOMNode</em> — le type de nœud du DOM que représente l'élément de l'arbre d'accessibilité. Vous pouvez cliquer sur l'icône de ciblage situé à la droite de la valeur afin de sélectionner le nœud dans l'<a href="/fr/docs/Outils/Inspecteur">inspecteur</a>. Survoler cette icône surlignera le nœud sur la page.<br> + <img alt="La propriété DOMNode, située dans l'inspecteur d'accessibilité avec l'icône de ciblage qui permet de mettre en avant l'élément correspondant sur la page." src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li> + <li><em>description</em> — une description plus détaillée fournie par l'élément ; c'est généralement la valeur de l'attribut <code>title</code>.</li> + <li><em>help</em> — cette propriété n'est pas implémentée par Gecko et renvoie toujours la chaîne de caractères vide. Cette propriété a été retirée de l'inspecteur dans Firefox 62 ({{bug(1467643)}}).</li> + <li><em>keyboardShortcut</em> — un raccourci clavier qui permet d'activer l'élément, comme indiqué avec l'attribut <code>accessKey</code>. Cette propriété fonctionne correctement à partir de Firefox 62 ({{bug("1467381")}}).</li> + <li><em>childCount</em> — le nombre d'éléments fils que contient l'élément courant dans la hiérarchie de l'arbre d'accessibilité.</li> + <li><em>indexInParent</em> — un index qui situe l'élément courant parmi ses voisins par rapport à son élément parent. Si l'élément courant est le premier élément de son élément parent, la valeur de cet index sera 0, si c'est le deuxième élément, cet index vaudra 1, etc.</li> + <li><em>states</em> — une liste des différents états, liés à l'accessibilité, qui peuvent être appliqués à l'élément courant. Ainsi, un lien pourra avoir les états <em>focusable</em> (recevoir le focus), <em>linked</em>, <em>text selectable</em><em>, opaque, enabled</em> et <em>sensitive</em>. Pour connaître la liste des différents états internes, voir l'article <a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/States">États dans Gecko</a>.</li> + <li><em>attributes</em> — une liste de l'ensemble des attributs relatifs à l'accessibilité qui sont appliqués à l'élément. Ces attributs peuvent contenir les attributs stylistiques tels que {{cssxref("margin-left")}} et {{cssxref("text-indent")}} mais aussi des d'autres informations : est-ce que l'élément peut être déplacé à la souris, quel est son niveau de titre, etc. Pour connaître la liste des attributs possibles, voir l'article <a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Attributs d'objet dans Gecko</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.</p> +</div> + +<h3 id="Contrôles_au_clavier">Contrôles au clavier</h3> + +<p>Le panneau Accessibilité est intégralement accessible au clavier :</p> + +<ul> + <li>Il est possible d'utiliser la touche tabulation pour passer du bouton de désactivation au panneau gauche au panneau droit.</li> + <li>Lorsqu'un des panneaux a le focus, on peut déplacer le focus entre les différents éléments qui compose ce panneau grâce aux flèches haut et bas du clavier. Les flèches droite et gauche permettent de développer ou de réduire les arborescences.</li> +</ul> + +<p> </p> + +<h3 id="Afficher_l'arbre_accessibilité_en_JSON">Afficher l'arbre accessibilité en JSON</h3> + +<p>Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "<strong>Afficher JSON" </strong>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 238px; margin: 0px auto; width: 800px;"></p> + +<p>Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p> + +<p>Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.</p> + +<h2 id="Fonctionnalités_notables_associées">Fonctionnalités notables associées</h2> + +<p>Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.</p> + +<h3 id="Options_de_menu_contextuel">Options de menu contextuel</h3> + +<p>Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :</p> + +<p><img alt="Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p> + +<p><img alt="Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p> + +<p>Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.</p> + +<div class="note"> +<p><strong>Note</strong> : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option <em>Inspecter les propriétés d'accessibilité</em> du menu sera masquée.</p> +</div> + +<h3 id="Mise_en_avant_des_éléments">Mise en avant des éléments</h3> + +<p>Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.</p> + +<p>Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est <em><code>graphic</code></em> et que son nom est <code><em>"Road, Asphalt, Sky, Clouds, Fall"</em></code>. On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p> + +<h4 id="Contraste_des_couleurs">Contraste des couleurs</h4> + +<p>Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, <a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Web Content Accessibility Guidelines (WCAG) 1.4</a>, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).<br> + <br> + Par exemple :</p> + +<p><img alt="A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold." src="https://mdn.mozillademos.org/files/16459/Screen_Shot_2019-01-29_at_10.11.13.png" style="display: block; height: 237px; margin: 0px auto; width: 357px;"></p> + +<p>Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.</p> + +<p>À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :</p> + +<p> </p> + +<p><img alt="A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines." src="https://mdn.mozillademos.org/files/16460/Screen_Shot_2019-01-29_at_10.21.07.png" style="display: block; height: 434px; margin: 0px auto; width: 1484px;"></p> + +<p> </p> + +<p>On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.</p> + +<p>Voir <a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Color_and_color_contrast">les bonnes pratiques d'accessibilité CSS et JavaScript</a> pour plus d'informations.</p> + +<h3 id="Sélecteur_d'accessibilité">Sélecteur d'accessibilité</h3> + +<p><a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">Le panneau Inspecteur pour l'inspection du code HTML</a> possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau <em>Accessibilité</em> possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.</p> + +<p>Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :</p> + +<p><img alt="Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p> + +<p><img alt="Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p> + +<p>Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche <kbd>Maj</kbd> lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche <kbd>Maj</kbd> sera enfoncée).</p> + +<p>Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche <kbd>Esc</kbd>.</p> + +<h2 id="Scénarios_d'utilisation">Scénarios d'utilisation</h2> + +<p>L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut <code>alt</code> ou les champs de formulaire sans libellé), car ils auront la propriété <code>name</code> qui vaudra <code>null</code>. Par exemple :</p> + +<p><img alt="Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<p>Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..</p> + +<p><img alt="Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Apprendre/a11y">Notions fondamentales d'accessibilité</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité">Informations pour le débogage</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG">Comprendre les règles WCAG</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">Notions de base WAI-ARIA</a></li> + <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Les API d'accessibilité : un outil clé pour l'accessibilité web</a> (en anglais), écrit par Léonie Watson</li> +</ul> diff --git a/files/fr/outils/inspecteur_accessibilite/simulation/index.html b/files/fr/outils/inspecteur_accessibilite/simulation/index.html new file mode 100644 index 0000000000..5247d65941 --- /dev/null +++ b/files/fr/outils/inspecteur_accessibilite/simulation/index.html @@ -0,0 +1,96 @@ +--- +title: Simulation +slug: Outils/Inspecteur_accessibilite/Simulation +tags: + - Accessibilité + - DevTools + - Guide + - Inspecteur Accessibilié + - Outils + - Simulation + - couleur +translation_of: Tools/Accessibility_inspector/Simulation +--- +<p><span class="seoSummary">Le simulateur dans <a href="https://wiki.developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">l'inspecteur de l'accessibilité</a> des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de <em>déficience de la perception des couleurs</em> (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de <em>perte de sensibilité au contraste</em>.</span></p> + +<p>La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.</p> + +<p>La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.</p> + +<div class="blockIndicator note"> +<p>Pour activer cette fonctionnalité vous devez avoir activé le <em>webrender</em>. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'<a href="https://support.mozilla.org/fr/kb/editeur-configuration-firefox">éditeur de configuration de Firefox</a>, assurez-vous que l'option <strong>gfx.webrender.all</strong> est définie sur <code>true</code>.<em> </em></p> +</div> + +<p>Dans le menu <strong>Simuler</strong>, vous pouvez choisir une option à la fois dans la liste suivante :</p> + +<ul> + <li>Aucun — choisissez cette option pour revenir à un affichage normal ;</li> + <li>Protanomalie (rouge faible) ;</li> + <li>Deutéranomalie (vert faible) ;</li> + <li>Tritanomalie (bleu faible) ;</li> + <li>Protanopie (pas de rouge) ;</li> + <li>Deutéranopie (pas de vert) ;</li> + <li>Tritanopie (pas de bleu) ;</li> + <li>Perte de contraste ;</li> +</ul> + +<div class="blockIndicator note"> +<p>Ces simulations de ne sont pas tout à fait exactes sur le plan médical. Cependant, elles peuvent vous donner une idée de ce à quoi ressemble votre site web pour les utilisateurs ayant des troubles de la vision, et donc vous aider à juger si vous devez faire des ajustements dans vos choix de couleurs et/ou de contrastes.</p> +</div> + +<p>Le tableau suivant montre une image colorée d'une tête de chat, et à quoi elle ressemble dans les différentes simulations.</p> + +<table> + <thead> + <tr> + <th scope="col">Simulation</th> + <th scope="col">Image affichée</th> + </tr> + </thead> + <tbody> + <tr> + <td>Aucun</td> + <td><img alt="Colorful image of a cat's face, without modification" src="https://mdn.mozillademos.org/files/16876/28369550088_617db0d6f2_m.jpg" style="height: 240px; width: 240px;"></td> + </tr> + <tr> + <td>Protanomalie (rouge faible)</td> + <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="https://mdn.mozillademos.org/files/16877/colorcat_protanomaly.png" style="height: 250px; width: 250px;"></td> + </tr> + <tr> + <td>Deutéranomalie (vert faible)</td> + <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="https://mdn.mozillademos.org/files/16878/colorcat_deuteranomaly.png" style="height: 250px; width: 250px;"></td> + </tr> + <tr> + <td>Tritanomalie (bleu faible)</td> + <td><img alt="Colorful image of a cat's face, with tritanomaly simulation" src="https://mdn.mozillademos.org/files/16879/colorcat_tritanomaly.png" style="height: 250px; width: 250px;"></td> + </tr> + <tr> + <td>Protanopie (pas de rouge)</td> + <td><img alt="Colorful image of a cat's face, with protanopia simulation" src="https://mdn.mozillademos.org/files/16880/colorcat_protanopia.png" style="height: 250px; width: 250px;"></td> + </tr> + <tr> + <td>Deutéranopie (pas de vert)</td> + <td><img alt="Colorful image of a cat's face, with deuteranopia simulation" src="https://mdn.mozillademos.org/files/16881/colorcat_deuteranopia.png" style="height: 250px; width: 250px;"></td> + </tr> + <tr> + <td>Tritanopie (pas de bleu)</td> + <td><img alt="Colorful image of a cat's face, with tritanopia simulation" src="https://mdn.mozillademos.org/files/16882/colorcat_tritanopia.png" style="height: 250px; width: 250px;"></td> + </tr> + <tr> + <td>Perte de contraste</td> + <td><img alt="Colorful image of a cat's face, with contrast loss simulation" src="https://mdn.mozillademos.org/files/16883/colorcat_contrastloss.png" style="height: 250px; width: 250px;"></td> + </tr> + </tbody> +</table> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://www.color-blindness.com/types-of-color-blindness/">Types de daltonisme</a> (en anglais)</li> + <li><a href="https://www.color-blindness.com/coblis-color-blindness-simulator/">Simulateur de daltonisme</a> (en anglais)</li> + <li><a href="http://www.vision-and-eye-health.com/contrast-sensitivity.html">Sensibilité aux contrastes</a> (en anglais)</li> + <li><a href="http://mkweb.bcgsc.ca/colorblind/">Palettes de couleurs pour le daltonisme</a> (en anglais)</li> + <li><a href="https://jfly.uni-koeln.de/color/">Conception universelle des couleurs</a> (en anglais)</li> + <li><a href="https://www.w3.org/TR/WCAG21/#use-of-color">Critère de succès des WCAG 1.4.1 : l'utilisation de la couleur</a> (en anglais)</li> + <li><a href="https://www.w3.org/TR/WCAG21/#use-of-color">Critère de succès des WCAG 1.4.11 </a><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">: contraste non textuel</a> (en anglais)</li> +</ul> diff --git a/files/fr/outils/json_viewer/index.html b/files/fr/outils/json_viewer/index.html new file mode 100644 index 0000000000..d92e1ae379 --- /dev/null +++ b/files/fr/outils/json_viewer/index.html @@ -0,0 +1,22 @@ +--- +title: Lecteur JSON +slug: Outils/JSON_viewer +translation_of: Tools/JSON_viewer +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Le Lecteur JSON est une des nouveautés de Firefox 44.</p> + +<p>Avant Firefox 53, le Lecteur JSON n'est activé par défaut que dans Firefox Developer Edition et Firefox Nightly. Pour activer cette fonctionnalité dans les autres versions, il faut passer la préférence <code>devtools.jsonview.enabled</code> à <code>true</code> dans <code>about:config</code></p> + +<p>Depuis Firefox 53, le Lecteur JSON est également activé par défaut dans Firefox Beta et dans la version normale de Firefox.</p> +</div> + +<p>Firefox inclut un lecteur JSON. Lors de l'ouverture d'un fichier JSON ou d'une URL distante avec un Content-Type application/json, il est alors parsé et affiché avec coloration syntaxique. Les tableaux et les objets sont affichés réduits, et peuvent être étendus en cliquant sur les icônes "+".</p> + +<p>{{EmbedYouTube("ktFcevMwYXw")}}</p> + +<p>Le Lecteur JSON fournit également une barre de recherche pour filtrer le JSON.</p> + +<p>Il est également possible d'afficher le JSON originel ainsi que de le formater et l'indenter.</p> + +<p>Enfin, si le document était le résultat d'une requête réseau, le lecteur affiche la requête ainsi que les entêtes de réponse.</p> diff --git a/files/fr/outils/measure_a_portion_of_the_page/index.html b/files/fr/outils/measure_a_portion_of_the_page/index.html new file mode 100644 index 0000000000..4837589662 --- /dev/null +++ b/files/fr/outils/measure_a_portion_of_the_page/index.html @@ -0,0 +1,31 @@ +--- +title: Measure a portion of the page +slug: Outils/Measure_a_portion_of_the_page +translation_of: Tools/Measure_a_portion_of_the_page +--- +<div>{{ToolsSidebar}}</div> + +<p class="geckoVersionNote">Nouveau dans Firefox 59.</p> + +<p>Depuis Firefox 59, il est possible de mesurer une zone spécifique d'une page web, en utilisant l'outil <em>mesurer une zone de la page</em>.</p> + +<p>Cet outil est caché par défaut. Pour activer ce bouton il faut :</p> + +<ul> + <li>Aller dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">options des outils de développement</a>.</li> + <li>Dans la catégorie <em>boutons de la boite à outils </em>cocher<em> Mesurer une zone de la page.</em></li> +</ul> + +<p>Un nouveau bouton apparaitra en haut de la page, à côté du bouton des options.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15787/measure-button.png" style="display: block; height: 190px; margin: 0px auto; width: 324px;"></p> + +<p>Il suffit alors de cliquer sur ce bouton pour activer l'outil. Une fois activé, un viseur apparait sur le curseur et affiche ses coordonnées à côté.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15786/cursor-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 277px; margin: 0px auto; width: 447px;"></p> + +<p>Lorsque la souris est déplacée avec son bouton enfoncé, l'outil commence a dessiner un rectangle avec les dimensions x,y et diagonale affichée. Les unités sont en pixels.</p> + +<p>Lorsque le bouton souris est relâché, le rectangle ne disparait pas afin de pouvoir prendre des captures d'écrans, noter l'information, etc. Pour supprimer le rectangle il suffit de cliquer à nouveau.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15785/box-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 303px; margin: 0px auto; width: 438px;"></p> diff --git a/files/fr/outils/memory/aggregate_view/index.html b/files/fr/outils/memory/aggregate_view/index.html new file mode 100644 index 0000000000..add2eb1979 --- /dev/null +++ b/files/fr/outils/memory/aggregate_view/index.html @@ -0,0 +1,149 @@ +--- +title: Vue "Agrégats" +slug: Outils/Memory/Aggregate_view +translation_of: Tools/Memory/Aggregate_view +--- +<div>{{ToolsSidebar}}</div><p>Avant Firefox 48 il s'agissait de la vue par défaut. Après Firefox 48, la <a href="/fr/docs/Tools/Memory/Tree_map_view">vue "Carte proportionnelle"</a> est la vue par défaut. Pour afficher la vue "Agrégats", il suffit de le sélectionner dans la liste déroulante "vue" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13028/memory-tool-switch-view.png" style="display: block; height: 270px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>Cette vue ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13030/memory-tool-aggregate-view.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>Cela représente un tableau qui affiche une liste triée du contenu de la heap. Il y a trois façons différentes de visualiser la heap :</p> + +<ul> + <li>{{anch("Type")}}</li> + <li>{{anch("Call Stack")}}</li> + <li>{{anch("Inverted Call Stack")}}</li> +</ul> + +<p>Pour passer de l'une à l'autre, il suffit d'utiliser la liste déroulante "Trier par" en haut du panneau.</p> + +<p>En haut à droite, se trouve le champ "Filtrer". Il permet de filtrer le contenu affiché, afin par exemple de pouvoir rapidement voir combien d'objets d'une classe ont été alloués.</p> + +<h2 id="Type">Type</h2> + +<p>Il s'agit du tri par défaut qui ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13030/memory-tool-aggregate-view.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>Cette option regroupe la heap par grandes catégories :</p> + +<ul> + <li><strong>JavaScript objects:</strong> tels que des <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> ou des <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code></li> + <li><strong>DOM elements:</strong> tel que <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> ou <code><a href="/fr/docs/Web/API/Window">Window</a></code></li> + <li><strong>Strings:</strong> listées en tant que <code>"strings"</code></li> + <li><strong>JavaScript sources:</strong> listées en tant que "<code>JSScript"</code></li> + <li><strong>Internal objects:</strong> tels que "<code>js::Shape</code>". Ce type est préfixé de <code>"js::"</code>.</li> +</ul> + +<p>Chaque type occupe une ligne du tableau. Les lignes sont triées par ordre décroissant d'utilisation mémoire. Par exemple dans la capture d'écran ci-dessus, il est possible de voir que les <code>Object</code>s JavaScriptoccupent la plus grande partie de la mémoire. Suivis par les stings.</p> + +<ul> + <li>La colone "Somme" affiche le nimbre total d'objets alloués dans chaque catégorie.</li> + <li>La colonne "Octets" affiche le nombre d'octets occupés par les objets de chaque catégorie, et le pourcentage de la taille totale de la heap que cela représente.</li> +</ul> + +<div class="pull-aside"> +<div class="moreinfo">Les captures d'écran sur cette page montrent des instantanés capturés grâce à <a href="/fr/docs/Tools/Memory/Monster_example">l'exemple "monster"</a></div> +</div> + +<p>Par exemple, dans la capture d'écran ci-dessus, on peut voir que :</p> + +<ul> + <li>Il y a quatre objects <code>Array</code></li> + <li>Ceux-ci représentent 15% de la heap totale.</li> +</ul> + +<p>A coté du nom de chaque type, on trouve une icône en forme de trois étoiles en triangle :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13054/memory-tool-in-group-icon.png" style="display: block; height: 136px; margin-left: auto; margin-right: auto; width: 496px;"></p> + +<p>Cliquer sur cette icône affichera toutes les instances de ce type. Par exemple cliquer sur l'icône de <code>Array</code> affichera les quatre instances :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13032/memory-tool-in-group.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>Pour chaque instance, on peut voir <a href="/fr/docs/Tools/Memory/Dominators#Shallow_and_retained_size"> taille retenue et la taille de l'objet</a> de cette instance. Dans ce cas, il est possible de voir que les trois premiers tableaux ont une taille importante (5% du total de la heap) et une traille retenue encore plus importante (26% du total).</p> + +<p>Dans la partie droite, on retrouve un panneau qui affiche simplement une phrase. Sélectionner un noeud affichera <a href="/fr/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel"> chemins de rétention :</a></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13034/memory-tool-in-group-retaining-paths.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>{{EmbedYouTube("uLjzrvx_VCg")}}</p> + +<h2 id="Call_Stack">Call Stack</h2> + +<p>La pile d'allocation (call stack) affiche exactement ou dans le code sont faites des allocations sur la heap.</p> + +<p>Cette option étant gourmande en terme de performances, elle n'est pas activée par défaut. Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations <em>avant</em> d'allouer la mémoire dans la capture.</p> + +<p>Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"><br> + La structure de ce tri ressemble fortement à celle de <a href="/fr/docs/Tools/Performance/Call_Tree">l'Arbre d'appel</a>, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :</p> + +<ul> + <li>4,832,592 octets (93% de l'utilisation totale de la heap), ont été alloués dans une fonction à la ligne 35 du fichier "alloc.js", <strong>ou dans des fonctions appelées par cette fonction</strong></li> +</ul> + +<p>Il est possible d'utiliser l'icône en forme de triangle pour avoir plus de précisions et trouver l'endroit exact d'où l'allocation à été faite.</p> + +<p>Il est plus simple d'expliquer ce comportement avec un exemple. <a href="/fr/docs/Tools/Memory/DOM_allocation_example">Cette page contient</a> contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> et 4000 objets <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>) :</p> + +<p>Réalisons maintenant une allocation trace. Pour cela, il faut :</p> + +<ol> + <li>Ouvrir l'outil Mémoire</li> + <li>Cocher "Enregistrer les piles d'allocations"</li> + <li>Charger la page <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a></li> + <li>Prendre une capture</li> + <li>Choisir la vue "Agrégats"</li> + <li>Choisir le regroupement par "Call Stack"</li> +</ol> + +<p>{{EmbedYouTube("aZ5Rq9lXD80")}}</p> + +<p>Quelque chose comme ceci devrait apparaitre :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"></p> + +<p>Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à <code>createToolbars()</code>).</p> + +<p>Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13042/memory-tool-call-stack-expanded.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 762px;"></p> + +<p>C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.</p> + +<p>Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans <code>createToolbarButton()</code>, à <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/dom-allocs/scripts/alloc.js#L9">la ligne 9 de alloc.js</a>, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments {{HTMLElement("span")}} sont crées.</p> + +<p>Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :</p> + +<p>{{EmbedYouTube("zlnJcr1IFyY")}}</p> + +<h2 id="Inverted_Call_Stack">Inverted Call Stack</h2> + +<p>La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point <strong>ou en des points plus loin dans l'arbre</strong>. C'est pratique pour avoir une vue d'ensemble des endroits ou le programme consomme beaucoup de mémoire. Cependant cette vue implique de devoir parcourir un long chemin pour trouver l'emplacement exact d'où les allocations sont faites.</p> + +<p>L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.</p> + +<p>Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13044/memory-tool-inverted-call-stack.png" style="display: block; height: 141px; margin-left: auto; margin-right: auto; width: 762px;"></p> + +<p>Maintenant, la première ligne affiche directement l'appel <code>createToolbarButton()</code> qui correspond à l'allocation de 89% de la heap de la page.</p> + +<h2 id="(no_stack_available)">(no stack available)</h2> + +<p>Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.</p> + +<p>Exemples d'usage de la heap non alloué par un script :</p> + +<ul> + <li>Tous les scripts que la page charge occupent de l'espace dans la heap</li> + <li>Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM {{domxref("Event")}} sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.</li> +</ul> + +<p>Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.</p> diff --git a/files/fr/outils/memory/basic_operations/index.html b/files/fr/outils/memory/basic_operations/index.html new file mode 100644 index 0000000000..e132baed90 --- /dev/null +++ b/files/fr/outils/memory/basic_operations/index.html @@ -0,0 +1,64 @@ +--- +title: Opérations de base +slug: Outils/Memory/Basic_operations +translation_of: Tools/Memory/Basic_operations +--- +<div>{{ToolsSidebar}}</div><h2 id="Ouvrir_l'outil_Mémoire">Ouvrir l'outil Mémoire</h2> + +<p>L'outil Mémoire n'est pas activé par défaut. Pour l'activer, il faut ouvrir et cocher la case "Mémoire" dans la catégorie "Outils de développement pas défaut" :</p> + +<p>{{EmbedYouTube("qi-0CoCOXwc")}}</p> + +<p>Depuis Firefox 50, l'outil mémoire est activé par défaut.</p> + +<h2 id="Capturer_un_instantané">Capturer un instantané</h2> + +<p>Pour capturer un instantané de la heap il faut cliquer sur le bouton "Capturer un instantané" ou sur l'icône en forme d'appareil photo, en haut à gauche :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13651/memory-1-small.png" style="display: block; height: 244px; margin: 0px auto; width: 900px;"></p> + +<p>L'instantané, occupera une large partie du panneau de droite. Sur la gauche, il y aura une liste des instantanés capturée. Ce panneau inclut le timestamp, la taille et les actions supprimer/enregistrer :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13653/memory-2-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<h2 id="Supprimer_un_instantané">Supprimer un instantané</h2> + +<p>Pour supprimer un instantané, il suffit de cliquer sur l'icône "X" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13655/memory-3-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<h2 id="Sauvegarder_et_charger_des_instantanés">Sauvegarder et charger des instantanés</h2> + +<p>Fermer l'outil, supprimera tous les instantanés non sauvegardés. Pour sauvegarder un instantané, il suffit de cliquer sur "Enregistrer" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13657/memory-4-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>Il vous sera ensuite demandé un nom et un emplacement. Le fichier sera alors enregistré avec une extension <code>.fxsnapshot</code></p> + +<p>Pour charger un instantané depuis un fichier <code>.fxsnapshot</code>, il faut de cliquer sur le bouton en forme de rectangle avec un flèche pointée vers le haut (avant Firefox le bouton avait le texte "Importer") :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13659/memory-5-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>Il suffit ensuite de sélectionner un instantané précédemment enregistré sur votre disque.</p> + +<h2 id="Comparer_des_instantanés">Comparer des instantanés</h2> + +<p>À partir de Firefox 45, il est possible de comparer deux instantanés. Le diff affiche les endroits ou de la mémoire a été allouée, et où de la mémoire a été libéré entre les deux instantanés.</p> + +<p>Pour créer une diff, il faut cliquer sur l'icône en forme de diagramme de Venn en haut à gauche (note: avant Firefox 47, l'icône ressemblait à un "+/-") :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13661/memory-6-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>Il faut ensuite sélectionner l'instantané qui sert de base de comparaison puis l'instantané à comparer. L'outil affiche alors les différences entre les deux instantanés :</p> + +<p>{{EmbedYouTube("3Ow-mdK6b2M")}}</p> + +<div class="note"> +<p>Lors d'une comparaison, il n'est pas possible d'utiliser la vue "Dominants" ou "Carte proportionnelle"</p> +</div> + +<h2 id="Enregistrer_les_piles_d'allocations">Enregistrer les piles d'allocations</h2> + +<p>L'outil Mémoire permet de savoir exactement où dans le code la mémoire est allouée. Cependant, enregistrer ces informations a un cout en performance. Il faut donc activer manuellement l'enregistrement <em>avant </em>de faire les allocations mémoires. Pour cela, il suffit de cocher la case "Enregistrer les pilles d'allocations" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13663/memory-7-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> diff --git a/files/fr/outils/memory/comparing_heap_snapshots/index.html b/files/fr/outils/memory/comparing_heap_snapshots/index.html new file mode 100644 index 0000000000..2f4438449b --- /dev/null +++ b/files/fr/outils/memory/comparing_heap_snapshots/index.html @@ -0,0 +1,14 @@ +--- +title: Comparer deux captures de la heap +slug: Outils/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +--- +<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/outils/memory/dom_allocation_example/index.html b/files/fr/outils/memory/dom_allocation_example/index.html new file mode 100644 index 0000000000..0f3a4b04d6 --- /dev/null +++ b/files/fr/outils/memory/dom_allocation_example/index.html @@ -0,0 +1,54 @@ +--- +title: Exemple d'allocation DOM +slug: Outils/Memory/DOM_allocation_example +translation_of: Tools/Memory/DOM_allocation_example +--- +<div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.</p> + +<p>Il est possible de visiter le site à l'adresse : <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a>.</p> + +<p>Cette page contient simplement un script qui crée un grand nombre de noeuds DOM :</p> + +<pre class="brush: js">var toolbarButtonCount = 20; +var toolbarCount = 200; + +function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function createToolbarButton() { + var toolbarButton = document.createElement("span"); + toolbarButton.classList.add("toolbarbutton"); + // empêche Spidermonkey de partager les instances + toolbarButton[getRandomInt(0,5000)] = "foo"; + return toolbarButton; +} + +function createToolbar() { + var toolbar = document.createElement("div"); + // empêche Spidermonkey de partager les instances + toolbar[getRandomInt(0,5000)] = "foo"; + for (var i = 0; i < toolbarButtonCount; i++) { + var toolbarButton = createToolbarButton(); + toolbar.appendChild(toolbarButton); + } + return toolbar; +} + +function createToolbars() { + var container = document.getElementById("container"); + for (var i = 0; i < toolbarCount; i++) { + var toolbar = createToolbar(); + container.appendChild(toolbar); + } +} + +createToolbars();</pre> + +<p>Voici une représentation en pseudo-code de ce que fait ce code :</p> + +<pre>createToolbars() + -> createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois + -> createToolbarButton() // appelé 20 fois par <em>toolbar</em>, crée un élément SPAN à chaque fois</pre> + +<p>Ainsi, au total ce code crée 200 objets <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code>, et 4000 objets <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>.</p> diff --git a/files/fr/outils/memory/dominators/index.html b/files/fr/outils/memory/dominators/index.html new file mode 100644 index 0000000000..30dee2db22 --- /dev/null +++ b/files/fr/outils/memory/dominators/index.html @@ -0,0 +1,62 @@ +--- +title: Dominants +slug: Outils/Memory/Dominators +translation_of: Tools/Memory/Dominators +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary" id="Concepts"> +<p>Cet article fournit une introduction aux concepts d'<em>Accessibilité</em>, de taille <em>Objet</em> et de taille <em>Retenue</em>, ainsi que des <em>Dominants</em>, et de comment ses concepts s'appliquent dans des langages à ramasse-miette (garbage-collector) comme le JavaScript.</p> + +<p>Ces concepts sont importants pour l'analyse mémoire, car souvent, un objet peut être en lui même petit, mais contenir des références à des objets beaucoup plus gros et cela empêche le ramasse-miette de collecter ces objets et de libérer de la mémoire.</p> + +<p>Il est possible de voir les dominants d'une page en utilisant la <a href="/fr/docs/Tools/Memory/Dominators_view">Vue "Dominants" </a>dans l'outil Mémoire.</p> +</div> + +<p>Dans un langage comme JavaScript, les programmeurs n'ont généralement pas à se soucier de la gestion de la mémoire. Ils peuvent simplement créer des objets, les utiliser, et lorsque ceux-ci ne sont plus nécessaires, le runtime se charge de faire le nettoyage, et libère la mémoire que les objets utilisaient.</p> + +<h2 id="Accessibilité"><em>Accessibilité</em></h2> + +<p>Dans les implémentations modernes de JavaScript, le runtime décide de quand un objet n'est plus nécessaire en se basant sur <em>l'accessibilité</em>. Dans ce système, la heap est représentée par un ou plusieurs graphes. Chaque noeud dans le graphe représente un objet, et chaque connexion entre les noeuds (edge) représente une référence d'un objet à un autre. Le graphe commence au noeud racine, indiqué dans les diagrammes suivant par un "R" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12383/memory-graph.svg" style="display: block; height: 268px; margin-left: auto; margin-right: auto; width: 384px;"></p> + +<p>Lors du passage du ramasse-miette, le runtime parcourt le graphe à partir de la racine et marque chaque objet qu'il trouve. Tous les objets qui ne sont pas trouvés dans ce parcours, ne sont pas accessibles et peuvent être désalloués.</p> + +<p>Donc lorsqu'un objet devient inaccessible (par exemple parce qu'il était référencé par une seule variable locale qui sort du scope actuel) alors tout objet qu'il référence devient également inaccessible à son tour (sauf s’il était référencé par d'autres objets qui sont eux toujours accessibles) :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12375/memory-graph-unreachable.svg" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 383px;"></p> + +<p>A l'inverse, cela veut dire que des objets sont gardés en vie tant qu'un autre objet accessible comporte une référence à cet objet.</p> + +<h2 id="Taille_de_lobjet_et_taille_retenue">Taille de l'objet et taille retenue</h2> + +<p>Tout cela donne naissance à deux façons différentes de considérer la taille d'un objet :</p> + +<ul> + <li><em>taille de l'objet</em>: la taille de l'objet lui-même</li> + <li><em>taille retenue </em>: la taille de l'objet lui-même ainsi que la raille de tous les objets qui sont gardés en vie grâce à cet objet.</li> +</ul> + +<p>Souvent, les objets auront une taille d'objet faible, mais une bien plus grande taille retenue, à cause de ses références à d'autres objets. La taille retenue est un concept important dans l'analyse de l'utilisation mémoire, car cela répond à la question "si cet objet cesse d'exister, quelle est la taille de mémoire libérée ?".</p> + +<h2 id="Dominants">Dominants</h2> + +<p>Un concept lié à cela est le concept de <em>dominants</em>. Un noeud B "domine" le noeud A si tous les chemins depuis la racine jusqu'à A passent par B :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12379/memory-graph-dominators.svg" style="display: block; height: 309px; margin-left: auto; margin-right: auto; width: 471px;"></p> + +<p>Si un des noeuds dominants du noeud A est libéré, alors le noeud A lui-même devient éligible au ramasse-miette.</p> + +<p><a id="immediate_dominator" name="immediate_dominator">Si le noeud B domine le noeud A mais ne domine aucun des dominants de A, alors B est le <em>dominant immédiat </em>de A :</a></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12381/memory-graph-immediate-dominator.svg" style="display: block; height: 309px; margin-left: auto; margin-right: auto; width: 467px;"></p> + +<p><a id="multiple-paths" name="multiple-paths">Une subtilité ici est que si un objet A est référencé par deux autres objets B et C, alors aucun de ces deux objets n'est un dominant de A</a>, car il est possible de retirer soit B soit C du graphe et A serait alors toujours référencé par son autre référent. À la place, le dominant immédiat de A est le premier ancêtre commun :<br> + <img alt="" src="https://mdn.mozillademos.org/files/12331/memory-graph-dominator-multiple-references.svg" style="display: block; height: 283px; margin-left: auto; margin-right: auto; width: 211px;"></p> + +<h2 id="Voir_Aussi">Voir Aussi</h2> + +<p><a href="https://en.wikipedia.org/wiki/Dominator_%28graph_theory%29">Les dominants dans la théorie des graphes</a>.</p> + +<p><a href="https://en.wikipedia.org/wiki/Tracing_garbage_collection">Tracing garbage collection</a>.</p> diff --git a/files/fr/outils/memory/dominators_view/index.html b/files/fr/outils/memory/dominators_view/index.html new file mode 100644 index 0000000000..bfa472bded --- /dev/null +++ b/files/fr/outils/memory/dominators_view/index.html @@ -0,0 +1,156 @@ +--- +title: Vue "Dominants" +slug: Outils/Memory/Dominators_view +translation_of: Tools/Memory/Dominators_view +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>La vue "Dominants" est une des nouveautés de Firefox 46.</p> +</div> + +<p>À partir de Firefox 46, l'outil Mémoire inclut une nouvelle vue nommée "Dominants". Celle-ci est utile pour comprendre la "Taille retenue" des objets d'un site : il s'agit de la taille des objets eux-mêmes ainsi que la taille des objets qu'ils gardent en vie par référence.</p> + +<p>Si vous n'êtes pas familier avec la "taille de l'objet", la "taille retenue" et les Dominants, il est recommandé de lire l'article sur les <a href="/fr/docs/Tools/Memory/Dominators">concepts des Dominants</a>.</p> + +<h2 id="Interface_utilisateur_des_Dominants">Interface utilisateur des Dominants</h2> + +<p>Pour afficher la vue des Dominants, il faut sélectionner "Dominants" dans le menu déroulant "Afficher" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13627/dominators-1.png" style="display: block; height: 230px; margin: 0px auto; width: 800px;"></p> + +<p>Cette vue est constituée de deux panneaux:</p> + +<ul> + <li>Le panneau de <a href="/fr/docs/Tools/Memory/Dominators_view#Dominators_Tree_panel">l'arbre des Dominants</a> qui affiche quel sont les noeuds de la capture qui retiennent le plus de mémoire.</li> + <li>Le panneau des <a href="/fr/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Chemins de rétention</a> (depuis Firefox 47) affiche les 5 plus courts chemins de rétention pour un noeud.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13629/dominators-2.png" style="display: block; margin: 0px auto;"></p> + +<h3 id="Arbre_des_Dominants">Arbre des Dominants</h3> + +<p>Ce panneau affiche les objets de la capture qui retiennent le plus de mémoire.</p> + +<p>Dans la partie principale de l'UI, la première ligne est nommée "Racines GC". En dessous de cette ligne, il y a une ligne pour :</p> + +<ul> + <li>Chaque noeud racine GC. Dans Gecko, il y a plusieurs graph mémoire, et donc plusieurs racines. Il peut y avoir beaucoup de racines (souvent temporaires). Par exemple, les variables allouées sur la stack ont besoin d'être enracinées, les caches internes peuvent eux aussi avoir besoin d'enraciner leurs éléments.</li> + <li>Chaque autre noeud qui est référencé depuis deux racines différentes (vu que dans ce cas, aucune des deux racines ne le domine).</li> +</ul> + +<p>Pour chacune de ces lignes, seront affichés :</p> + +<ul> + <li>La taille retenue du noeud, en octets et en pourcentage total.</li> + <li>La taille de l'objet du noeud en octets et en pourcentage total.</li> + <li>Le nom du noeud et son adresse mémoire.</li> +</ul> + +<p>Les lignes sont classées par la taille de mémoire retenue. Par exemple :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13631/dominators-3.png" style="display: block; height: 228px; margin: 0px auto; width: 700px;"></p> + +<p>Dans cette capture d'écran, il est possible de voir qu'il y a cinq linges en dessus de "GC roots". Les deux premiers objets sont "Call" et "Window", et retiennent respectivement 21% et 8% de la mémoire totale de la capture. Il est également possible de voir qu'ils ont une taille (shallow) réduite, donc quasiment toute la mémoire retenue vient d'objets qu'ils dominent.</p> + +<p>Juste en dessous de chaque racine GC, tout les noeuds pour lequel cette racine est le <a href="https://developer.mozilla.org/fr/docs/Tools/Memory/Dominators#immediate_dominator">dominant immédiat</a> sont affichés et triés par taille retenue.</p> + +<p>Par exemple, cliquer sur le premier objet "Window" affichera ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13633/dominators-4.png" style="display: block; height: 292px; margin: 0px auto; width: 700px;"></p> + +<p>Il est possible de voir que "Window" domine un objet "CSS2Properties", dont la taille retenue est de 2ù de la capture. Encore une fois, la taille de l'objet est faible, quasiment toute sa taille retenue est due aux objets dominés. En cliquant sur l'icone en fore de triangle à coté de la fonction, il est possible de voir ces noeuds.</p> + +<p>Il est ainsi possible de se faire rapidement une idée de quels objets retiennent le plus de mémoire dans la capture.</p> + +<p>Il est possible d'utiliser <kbd>Alt</kbd> + clic pour étendre le graph entier d'un noeud.</p> + +<h4 id="Pile_d'allocations">Pile d'allocations</h4> + +<p>Dans la barre d'outils, il y a une liste déroulante : "Nommer selon" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13635/dominators-5.png" style="display: block; height: 224px; margin: 0px auto; width: 800px;"></p> + +<p>Par défaut, l'option sélectionnée est "Type". Il est possible de choisir "Call Stack" à la place pour savoir exactement d'ou dans le code les objets sont alloués.</p> + +<div class="note"> +<p>Cette option est appelée "Allocation Stack" dans Firefox 46.</p> +</div> + +<p>Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations" <em>avant</em> de lancer le coder qui alloue les objets. Il faut ensuite prendre une capture, puis sélectionner "Call Stack" dans le menu déroulant "Nommer selon".</p> + +<p>Maintenant, le nom du noeud contient le nom de la fonction qui l'a alloué, ainsi que le fichier, la ligne et la position exacte d'ou dans la fonction l'allocation a été faite. Cliquer sur le nom du fichier ouvrira cette position dans le Débogueur.</p> + +<p>{{EmbedYouTube("qTF5wCSD124")}}</p> + +<div class="note"> +<p>Parfois, une ligne nommée "(no stack available)" est présente. Les piles d'allocations ne sont actuellement enregistrées que pour les objets, pas pour les tableaux, les strings ou les structures internes.</p> +</div> + +<h3 id="Chemins_de_rétention">Chemins de rétention</h3> + +<div class="geckoVersionNote">Ce panneau est une des nouveautés de Firefox 47.</div> + +<p>Ce panneau affiche, pour un noeud sélectionné les 5 plus courts chemins depuis ce noeud jusqu'a une racine GC. Cela permet de voir tous les noeuds qui empêchent ce noeud d'être détruit par le garbage collector (ramasse-miette en <s>bon </s>français). Si un objet est soupçonné de cause une fuite mémoire, ce panneau affichera les objets qui réfrènent l'objet soupçonné.</p> + +<p>Pour voir le chemin de rétention, il suffit de sélectionner un noeud dans le panneau de l'arbre des Dominants :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13637/dominators-6.png" style="display: block; height: 415px; margin: 0px auto; width: 800px;"></p> + +<p>Ici, un objet a été sélectionné et l'on peut voir un unique chemin jusqu'a la racine GC.</p> + +<p>La racine GC <code>Window</code> contient une référence à un objet <code>HTMLDivElement</code>. Cet objet contient lui une référence à un <code>Object</code>, et ainsi de suite. Il est possible de retracer le chemin juste en regardant le panneau de l'arbre des Dominants. Si une seule de ces références venait à être supprimée, les objets en dessous seraient détruits par le garbage collector.</p> + +<p>Chaque connexion dans le graph est annoté avec le nom de la variable qui référence l'objet.</p> + +<p>Parfois, il y a plus d'un seul chemin de rétention :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13639/dominators-7.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p> + +<p>Ici, il y a deux chemins depuis le noeud <code>DocumentPrototype</code> vers la racine GC. Si seulement l'un des des deux venait à être supprimé, le noeud ne serait pas détruit par le garbage collector, puisqu'il serait toujours retenu par l'autre chemin.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Pour tester l'outil, il est plus simple d'utiliser un exemple</p> + +<p><br> + Nous utiliserons <a href="/fr/docs/Tools/Memory/Monster_example">l'exemple d'allocation de monstres</a>. Cet exemple crée trois tableaux chacun contenant 5000 monstres, chaque monstre possède un nom généré aléatoirement.<br> + </p> + +<h3 id="Prendre_une_capture">Prendre une capture</h3> + +<p>Pour voir à quoi cela ressemble avec la vue "Dominants", il faut :</p> + +<ul> + <li>Charger la page</li> + <li>Activer l'outil Mémoire dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">Options</a>, s’il n'est pas encore activé.</li> + <li>Ouvir l'outil Mémoire</li> + <li>Cocher la case " Enregistrer les piles d'allocations"</li> + <li>Appuyer sur le bouton "Make monsters!"</li> + <li>Prendre une capture</li> + <li>Passer à la vue "Dominants"</li> +</ul> + +<p>{{EmbedYouTube("HiWnfMoMs2c")}}</p> + +<h3 id="Analyse_de_l'arbre_des_dominants">Analyse de l'arbre des dominants</h3> + +<p>Les trois tableaux seront les trois premières racines GC, chacun retenant à peu près 23% de la mémoire totale de la capture :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13641/dominators-8.png" style="display: block; height: 165px; margin: 0px auto; width: 700px;"></p> + +<p>Étendre un tableau affichera les objets (monstres) qu'il contient. Chaque monstre à une taille réduite de 160 octets. Cette taille inclut les variables int "eye" et "tentacle-count". Chaque monstre à une taille retenue plus grande, car ils retiennent la string utilisée pour stocker le nom du monstre :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13643/dominators-9.png" style="display: block; height: 327px; margin: 0px auto; width: 700px;"></p> + +<p>Tout cela se rapproche précisément du <a href="/fr/docs/Tools/Memory/Monster_example#allocation-graph">graph mémoire attendu</a>. Une chose curieuse cependant, où est passé l'objet qui contient ces trois tableaux ? En regardant le chemin de rétention pour un des tableaux, il est possible de le voir :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13645/dominators-10.png" style="display: block; height: 467px; margin: 0px auto; width: 700px;"></p> + +<p>Ici, il est possible de voir l'objet retenant le tableau; et même qu'il s'agit du tableau de monstres <code>friendly</code>. Dans la capture d'écran ci-dessus, ce n'est pas visible, cependant ce tableau est aussi enraciné directement à la racine GC. Donc si l'objet arrête de référencer le tableau, celui-ci ne serait toujours pas éligible au garbage collector.</p> + +<p>Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également, <a href="/fr/docs/Tools/Memory/Dominators#multiple-paths">l'article sur le concept des Dominants.</a></p> + +<h3 id="Utiliser_la_vue_Call_Stack">Utiliser la vue Call Stack</h3> + +<p>Enfin, il est possible de passer à la vue "Call Stack", afin de voir quels objets sont alloués et de se rendre à ce point dans le Débogueur :</p> + +<p>{{EmbedYouTube("qTF5wCSD124")}}</p> diff --git a/files/fr/outils/memory/index.html b/files/fr/outils/memory/index.html new file mode 100644 index 0000000000..017e5b69c5 --- /dev/null +++ b/files/fr/outils/memory/index.html @@ -0,0 +1,68 @@ +--- +title: Mémoire +slug: Outils/Memory +tags: + - DevTools + - Firefox + - Mozilla + - Tools + - outils de développement +translation_of: Tools/Memory +--- +<div>{{ToolsSidebar}}</div><p>L'outil Mémoire permet de prendre une capture de l'état actuel de la <a class="external external-icon" href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap wikipedia page">heap</a> de la mémoire. Il fournit plusieurs manières de visualiser la heap. Cela permet de voir la taille mémoire que prennent les objets et les endroits exacts du code d'où la mémoire est allouée.</p> + +<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p> + +<hr> +<h3 id="La_base">La base</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Memory/Open_the_memory_tool">Ouvrir l'outil Mémoire</a></li> + <li><a href="/fr/docs/Tools/Memory/Take_a_heap_snapshot">Prendre une capture de la heap</a></li> + <li><a href="/fr/docs/Tools/Memory/Basic_operations#Comparing_snapshots">Comparer deux captures</a></li> + <li><a href="/fr/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">Supprimer des captures</a></li> + <li><a href="/fr/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">Sauvegarder et charger des captures</a></li> + <li><a href="/fr/docs/Tools/Memory/Basic_operations#Recording_call_stacks">Capturer la pile d'exécution</a></li> +</ul> +</div> + +<hr> +<h3 id="Analyser_les_captures">Analyser les captures</h3> + +<div class="geckoVersionNote"> +<p>La vue "carte proportionnelle" est une nouveauté de Firefox 48, la vue "Dominants" est une nouveauté de Firefox 46.</p> +</div> + +<p>Une fois qu'une capture est prise, il y a deux vues principales que l'outil fournit :</p> + +<ul> + <li><a href="/fr/docs/Tools/Memory/Tree_Map_view">La vue "Carte proportionnelle"</a> affiche l'usage mémoire sous forme de <a href="https://fr.wikipedia.org/wiki/Treemapping">carte proportionnelle</a>.</li> + <li><a href="/fr/docs/Tools/Memory/Aggregate_view">La vue "Agrégats"</a> affiche l'usage mémoire trié par type alloué (objets JavaScript, chaines de caractères, et scripts ).</li> + <li><a href="/fr/docs/Tools/Memory/Dominators_view">La vue "Dominants"</a> affiche la "taille retenue" des objets : Il s'agit de la taille des objets plus la taille des objets celles des objets qu'ils gardent vivant par leurs références.</li> +</ul> + +<p>Si l'option "Enregistrer les piles d'allocations" est cochée, les deux vues affichent d'où exactement dans le code les allocations sont originaires.</p> + +<p>Enfin, il est possible de <a href="/fr/docs/Tools/Memory/Comparing_heap_snapshots">comparer deux captures</a>, et d'analyser le résultat de la différence.</p> + +<hr> +<h3 id="Concepts">Concepts</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Memory/Dominators">Dominants</a></li> +</ul> +</div> + +<hr> +<h3 id="Pages_d'exemples">Pages d'exemples</h3> + +<p>Exemples utilisés dans la documentation de l'outil Mémoire :</p> + +<div class="twocolumns"> +<ul> + <li><a href="/fr/docs/Tools/Memory/Monster_example">Exemple "Monstres"</a></li> + <li><a href="/fr/docs/Tools/Memory/DOM_allocation_example">Exemple "Allocations DOM"</a></li> +</ul> +</div> diff --git a/files/fr/outils/memory/monster_example/index.html b/files/fr/outils/memory/monster_example/index.html new file mode 100644 index 0000000000..48357b8d8b --- /dev/null +++ b/files/fr/outils/memory/monster_example/index.html @@ -0,0 +1,81 @@ +--- +title: Exemple d'allocation de monstres +slug: Outils/Memory/Monster_example +translation_of: Tools/Memory/Monster_example +--- +<div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil <a href="/fr/docs/Outils/Memory">Mémoire</a>.</p> + +<p>Il est possible de l'essayer sur le site : <a class="external external-icon" href="https://mdn.github.io/performance-scenarios/js-allocs/alloc.html">https://mdn.github.io/performance-scenarios/js-allocs/alloc.html</a>. Voici le code :</p> + +<pre class="brush: js">var MONSTER_COUNT = 5000; +var MIN_NAME_LENGTH = 2; +var MAX_NAME_LENGTH = 48; + +function Monster() { + + function randomInt(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + + function randomName() { + var chars = "abcdefghijklmnopqrstuvwxyz"; + var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH); + var name = ""; + for (var j = 0; j &lt; nameLength; j++) { + name += chars[randomInt(0, chars.length-1)]; + } + return name; + } + + this.name = randomName(); + this.eyeCount = randomInt(0, 25); + this.tentacleCount = randomInt(0, 250); +} + +function makeMonsters() { + var monsters = { + "friendly": [], + "fierce": [], + "undecided": [] + }; + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.friendly.push(new Monster()); + } + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.fierce.push(new Monster()); + } + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.undecided.push(new Monster()); + } + + console.log(monsters); +} + +var makeMonstersButton = document.getElementById("make-monsters"); +makeMonstersButton.addEventListener("click", makeMonsters);</pre> + +<p>Cette page contient un bouton : Lorsque celui-ci est activé, le code crée des monstres plus précisément :</p> + +<ul> + <li>Le code crée un objet avec trois propriétés, chacune étant un tableau : + <ul> + <li>Un pour les monstres "méchants" (fierce).</li> + <li>Un pour les monstres "gentils" (friendly).</li> + <li>UIn pour les monstres qui n'ont pas encore décidé (undecided).</li> + </ul> + </li> + <li>Pour chaque tableau, le code crée 5000 monstres générés aléatoirement. Chaque monstre a : + <ul> + <li>Une chaine de caractères, pour le nom du monstre.</li> + <li>Un nombre représentant le nombre d'yeux qu'il possède.</li> + <li>Un nombre représentant le nombre de tentacules qu'il possède.</li> + </ul> + </li> +</ul> + +<p>Ainsi, la structure de la mémoire allouée sur la heap JavaScript est un objet contenant trois tableaux contenant chacun 5000 objets (les monstres) chaque objet contient une string et deux int :</p> + +<p><a name="allocation-graph"><img alt="" src="https://mdn.mozillademos.org/files/12369/monsters.svg" style="display: block; height: 521px; margin-left: auto; margin-right: auto; width: 500px;"></a></p> diff --git a/files/fr/outils/memory/open_the_memory_tool/index.html b/files/fr/outils/memory/open_the_memory_tool/index.html new file mode 100644 index 0000000000..79b383dbbd --- /dev/null +++ b/files/fr/outils/memory/open_the_memory_tool/index.html @@ -0,0 +1,8 @@ +--- +title: Ouvrir l'outil Mémoire +slug: Outils/Memory/Open_the_Memory_tool +translation_of: Tools/Memory/Basic_operations +--- +<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/outils/memory/take_a_heap_snapshot/index.html b/files/fr/outils/memory/take_a_heap_snapshot/index.html new file mode 100644 index 0000000000..8a9356889a --- /dev/null +++ b/files/fr/outils/memory/take_a_heap_snapshot/index.html @@ -0,0 +1,8 @@ +--- +title: Capturer un instantané +slug: Outils/Memory/Take_a_heap_snapshot +translation_of: Tools/Memory/Basic_operations +--- +<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/outils/memory/tree_map_view/index.html b/files/fr/outils/memory/tree_map_view/index.html new file mode 100644 index 0000000000..a009e59a7a --- /dev/null +++ b/files/fr/outils/memory/tree_map_view/index.html @@ -0,0 +1,45 @@ +--- +title: Vue carte proportionnelle +slug: Outils/Memory/Tree_map_view +translation_of: Tools/Memory/Tree_map_view +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Cette vue est une des nouveautés de Firefox 48.</p> +</div> + +<p>La vue carte proportionnelle fournit une représentation visuelle d'une capture instantané de la mémoire. Cela aide à avoir rapidement une idée de quels objets occupent le plus de mémoire.</p> + +<p>Une carte affiche : <a href="https://fr.wikipedia.org/wiki/Treemapping">"Une représentation de données hiérarchiques dans un espace limité" </a>sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).</p> + +<p>Pour les cartes affichées dans l'outil Mémoire, la heap (le tas) est divisé en quatre grandes catégories :</p> + +<ul> + <li><strong>objects</strong>: Les objets JavaScript et DOM, tels que <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, et les types DOM tels que <code><a href="/fr/docs/Web/API/Window">Window</a></code> et <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code>.</li> + <li><strong>scripts</strong>: Les sources JavaScript chargés par la page.</li> + <li><strong>strings</strong></li> + <li><strong>other</strong>: Cela inclut les objets internes de <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>.</li> +</ul> + +<p>Chaque catégorie, est représentée dans un rectangle, et la taille de ce rectangle correspond à la portion de la heap occupée par les éléments de cette catégorie. Cela signifie qu'il est facile d'avoir rapidement une idée de ce qui prend le plus de place mémoire.</p> + +<p>A l’intérieur des grandes catégories :</p> + +<ul> + <li><strong>objects</strong> est ensuite divisé par type d'objet.</li> + <li><strong>scripts</strong> est ensuite divisé par origine de script. Cela inclut un rectangle séparé pour le code qui n'a put être associé à une origine, tel que le code optimisé pour le <a href="https://fr.wikipedia.org/wiki/Compilation_%C3%A0_la_vol%C3%A9e">JIT</a>.</li> + <li><strong>other</strong> est ensuite divisé selon le type d'objet.</li> +</ul> + +<p>Voici quelques captures d'exemple, tel qu'elles apparaissent dans la vue carte proportionnelle :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13048/treemap-domnodes.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>Cette carte provient de l'exemple <a href="/fr/docs/Tools/Memory/DOM_allocation_example"> d'allocation DOM</a>, qui crée simplement un grand nombre de nœuds DOM. (200 objets <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> et 4000 objets <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>). Il est possible de voir que quasiment tout l'espace occupé dans la heap l'est par les objets <code>HTMLSpanElement</code> crées.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13046/treemap-monsters.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>Cette carte vient de l'exemple <a href="/fr/docs/Tools/Memory/Monster_example">allocation de monstres</a>, qui représente trois tableaux contenant chacun 5000 monstres. Chaque monstre possède un nom aléatoire. Il est possible de voir que la heap est occupée principalement par les strings utilisés pour le nom des monstres, ainsi que par les objets utilisé pour contenir les autres attributs des monstres.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13050/treemap-bbc.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>Cette carte provient de <a href="http://www.bbc.com/">http://www.bbc.com/</a>, et est probablement plus représentative de la vie réelle que les exemples. Il est possible de voir qu'une partie beaucoup plus importante de la heap est occupée par les scripts qui sont chargés depuis un grand nombre d'origines.</p> diff --git a/files/fr/outils/migrating_from_firebug/index.html b/files/fr/outils/migrating_from_firebug/index.html new file mode 100644 index 0000000000..5191e43e8e --- /dev/null +++ b/files/fr/outils/migrating_from_firebug/index.html @@ -0,0 +1,270 @@ +--- +title: Migrating from Firebug +slug: Outils/Migrating_from_Firebug +translation_of: Tools/Migrating_from_Firebug +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Pendant la migration de Firebug vers les outils de développement de Firefox, vous vous demanderez certainement ou sont vos fonctionnalités adorés. Et bien, cette liste est faite pour vous.</p> + +<hr> +<div class="column-container"> +<div class="column-third"> </div> + +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition</p> + +<p><a href="https://www.mozilla.org/fr/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Télécharger Firefox Developer Edition</a></p> +</div> + +<div class="column-third"> </div> +</div> + +<hr> +<h2 id="Général">Général</h2> + +<h3 id="Activation">Activation</h3> + +<p><a href="https://getfirebug.com/wiki/index.php/Activation">L'activation de Firebug</a> est basé sur des URL respectant la "<a href="https://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>". Cela signifie que si vous ouvrez une page de la même origine dans un onglet différent, Firefbug s'ouvre automatiquement. Et lorsque une page d'une origine différente dans le même onglet, il se ferme automatiquement. L'activation des devtools sont eux basé sur les onglets. Par exemple, si vous ouvrez les devtools dans onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les devtools se ferment.</p> + +<h3 id="Ouvrir_les_outils">Ouvrir les outils</h3> + +<p>Firebug peut être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il est possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>C</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>C</kbd>. Les DevTools partagent les mêmes raccourcis, mais fournissent également des <a href="/fr/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourcis pour les différent panneaux</a>. Le <a href="/fr/docs/Tools/Network_Monitor">Moniteur Réseau</a> peut être ouvert avec <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>Q</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>Q</kbd>, la <a href="/fr/docs/Tools/Web_Console">Console</a> via <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>K</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>K</kbd> et le Déboguer avec <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>S</kbd>.</p> + +<h2 id="Console">Console</h2> + +<p>La <a href="/fr/docs/Tools/Web_Console">Console</a> est l'équivalent du panneau <a href="https://getfirebug.com/wiki/index.php/Console_Panel">Console</a> de Firebug. Elle affiche les log associé à une page web et permet d'exécuter des expressions JavaScript via sa <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande</a>. L'affichage est différent. Le {{bug(1269730)}} changera peut être cela.</p> + +<h3 id="Filtrer_les_log">Filtrer les log</h3> + +<p>Firebug offre deux façons de filtrer les messages de log, via le <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Options_Menu">menu des options</a> et via les <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Filter_buttons"> boutons des filtres</a> dans la barre d'outils. La Console des devtools offre une fonctionnalité similaire via les <a href="/fr/docs/Tools/Web_Console/Console_messages#Filtering_by_category">buttons de filtre dans sa barre d'outils</a> — le tout centralisé à un seul endroit.</p> + +<h3 id="API_de_ligne_de_commande">API de ligne de commande</h3> + +<p>L'<a href="https://getfirebug.com/wiki/index.php/Command_Line_API">API de ligne de commande dans Firebug </a>fournit des fonction spéciales pour votre confort. La ligne de commande des outils de développement, à <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">quelques fonctions en commun</a>, mais possède également des fonction supplémentaires et n'a pas certaines fonction de Firefbug.</p> + +<h3 id="API_de_la_Console">API de la Console</h3> + +<p>Pour loguer des choses dans la consoles depuis une page web, Firebug rend disponible une <a href="https://getfirebug.com/wiki/index.php/Console_API">API Console</a> dans la page. Les outils de développement partagent la <a href="/fr/docs/Web/API/console">même API</a>, donc vos expressions <code>"console.*</code> continueront de fonctionner.</p> + +<h3 id="Logs_persistants">Logs persistants</h3> + +<p>Dans Firebug, il est possible de cliquer sur <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Persist">bouton "Persist"</a> dans la barre d'outils pour garder les messages de log entre différent navigations de pages et entre les rechargements. Dans les outils de développemnt, cette option est appelée <em><a href="/fr/docs/Tools/Settings#Common_preferences">Activer les journaux persistants</a></em> et est disponible dans les options de la boîte à outils.</p> + +<h3 id="Logs_de_serveur">Logs de serveur</h3> + +<p>Les extension Firebug tels que <a href="https://addons.mozilla.org/en-US/firefox/addon/firephp/">FirePHP</a> permettent d'afficher des messages du serveur dans la console Firefbug. Cette fonctionnalité est déja <a href="/fr/docs/Tools/Web_Console/Console_messages#Server">intégrée dans les outils de développement</a> en utilisant le protocole <a href="https://craig.is/writing/chrome-logger">ChromeLogger</a> et ne nécessite pas d'autres extensions pour être installé.</p> + +<h3 id="Historique_de_commande">Historique de commande</h3> + +<p><a href="https://getfirebug.com/wiki/index.php/Command_Line#Command_History">L'historique de commande</a> disponible grâce à un bouton dans la ligne de commande de Firebug est disponible en utilisant les touches <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Command_history"><kbd>↑</kbd>/<kbd>↓</kbd> dans la ligne de commande de la Console</a></p> + +<h3 id="Inspecter_les_propriétés_des_objets">Inspecter les propriétés des objets</h3> + +<p>En cliquant sur objet logué dans la console, il est possible d'inspecter les propriétés de l'objet grâce au panneau DOM. Dans les outils de développement de Firefox, il est aussi possible d'inspecter les objets. La différence est qu'ils montrent <a href="/fr/docs/Tools/Web_Console/Rich_output#Examining_object_properties">les propriétés et les méthodes dans un panneau annexe dans la Console.</a></p> + +<h3 id="Afficher_les_requêtes_réseau">Afficher les requêtes réseau</h3> + +<p>Le panneau Console dans Firebug permet d'afficher les requêtes {{Glossary("AJAX")}} (aka {{Glossary("XMLHttpRequest", "XMLHttpRequests")}}). Cette option est également disponible dans la Console des outils de developpement, grâce au filtre <em>XHR</em>. De plus, la Console permet d'afficher tous les autres types de requêtes résseau grace au filtre <em>Requêtes.</em></p> + +<h3 id="Afficher_les_structures_JSON_et_XML">Afficher les structures JSON et XML</h3> + +<p>Pour afficher les réponses JSON et XML des requêtes {{Glossary("AJAX")}}, Firebug a des onglets spéciaux lors de l'expension d'une requête dans son panneau Console. La Cosnsole des outils de developpement affiche ces structures directement dans l'onglet "Réponses".</p> + +<h3 id="Multi-line_command_line">Multi-line command line</h3> + +<p>La Console Firebug a une ligne de commande multi-ligne appelée <a href="https://getfirebug.com/wiki/index.php/Command_Editor">Command Editor</a>. Les outils de développment n'ont pas un panneau comme le Command Editor (ce qui a déja été demandé dans le {{bug(1133849)}}), mais possède en revanche un outil séparé nommé <a href="/fr/docs/Tools/Scratchpad">Ardoise JavaScript</a>, qui peut être <a href="/fr/docs/Tools/Settings#Default_Firefox_Developer_Tools">ajouté comme panneau dans la boite à outils</a> ou ouvert dans une fenêtre séparée, via le menu Firefox > Développement web > Ardoise, ou avec <kbd>Maj</kbd> + <kbd>F4</kbd>. Il est également bon à savoir que la ligne de commande normale ajoutte intélligement des retour à la ligne lorsqu'elle reconait une commande incomplete, <code>document.</code> et ensuite appuyer sur <kbd>Entrée</kbd>. Il est également possible de faire un retour à la ligne manuel avec <kbd>Maj</kbd> + <kbd>Entrée</kbd>.</p> + +<h3 id="Prévisualisation_de_réponse">Prévisualisation de réponse</h3> + +<p>Il y a un onglet <em>Preview</em> lors de l'expensin d'une requête réseau affiché dans Firebug. La Console web affiche une prévisualisation dasn l'onget <em>Réponse</em>. Pour le moment, la prévisualisation pour le HTML, le XML et le SVG, est cependant manquant. Vous pouvez suivre l'historque dans le {{bug(1247392)}} et le {{bug(1262796)}}. Mais lors d'un clic sur l'URL de la requête, les outils de développement passent au <a href="/fr/docs/Tools/Network_Monitor">Moniteur Réseau</a>, qui lui a un onglet <em>Preview</em>.</p> + +<h2 id="Inspecteur">Inspecteur</h2> + +<p>Firebug a un <a href="https://getfirebug.com/wiki/index.php/HTML_Panel">panneau HTML</a>, qui permet d'éditer le HTML/XML/SVG et le CSS en relation. Dans les outils de développement, cette fonctionalitée est assurée par l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a>.</p> + +<h3 id="Editer_l'HTML">Editer l'HTML</h3> + +<p>Dans l'Inspecteur, les attributs des balises et leur contenu peuvent être édités, tout comme dans Firebug. Il permet en plus d'éditer également les balises elles-même.</p> + +<p>Il est également possible d'éditer l'HTML directement. Dans Firebug, il faut faire clic-droit sur un noeud puis cliquer sur <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Edit">Edit HTML...</a> dans le menu contextuel. Dans les outils de développement la même option est également dispobible dans le menu contextuel. Elle est nommée <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Editing_HTML_2">Éditer en tant qu'HTML</a>. Seul la prévisualtisation des changements en temps réel est maquante, voir {{bug(1067318)}} et {{bug(815464)}}.</p> + +<h3 id="Copier_l'HTML_et_les_informations_en_relation">Copier l'HTML et les informations en relation</h3> + +<p>Le panneau HTML de Firebug permet de copier l'interieur ou l'exterieur d'un élément HTML, ainsi que le CSS et le XPath via le menu contextuel d'un élément. L'inspecteur fournit les même fonctionalités, sauf pour la copie des XPaths. Voir {{bug(987877)}}.</p> + +<h3 id="Éditer_le_CSS">Éditer le CSS</h3> + +<p>Les deux outils permètent de voir et d'éditer les règles CSS des éléments sélectionnés dans la vue du noeud de façon similaire. Firebug possède le panneau <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel">Style</a> pour ça, les outils de developpement eux ont le panneau <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Règles</a>.</p> + +<p>Dans Firebug il est possible d'ajouter des règles en effectuant un clic-droit puis en sélectionant <em><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Context_Menu">Add Rule...</a></em> dans le menu contextuel. Les outils de developpement eux ont une option dans le menu contextuelle nommée <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules"><em>Ajouter une règle</em></a> ainsi qu'un <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules">bouton +</a> dans la barre d'outils de l'onglet Règles.</p> + +<p>Pour éditer le style des élements (les propriétés CSS de l'attribut {{htmlattrxref("style")}} d'un élément), dans Firebug il faut faire un clic-droit dans l'onglet Style et sélectionner <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Context_Menu">Edit Element Style...</a> dans le menu contextuel. Les outils de développement affichent une <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">règle element {}</a> pour ceci. Ainsi un simple clic sur cette règle permet de commencer à éditer les propriétés.</p> + +<h3 id="Auto-completion_du_CSS">Auto-completion du CSS</h3> + +<p>Tout comme dans Firebug, l'onglet des règles fournit de l'auto-complétion pour les propriétés CSS et leurs valeurs. Quelques propriétés ne sont pas complétés, elles sont listés dans le {{bug(1337918)}}.</p> + +<h3 id="Copier_coller_du_CSS">Copier & coller du CSS</h3> + +<p>L'onglet Style de Firebug ainsi que l'onglet Règles des outils de developpement fournissent tous deux l'option dans leurs menu contextuels de copier/coller les règles CSS. Les outils de développement fournissent en plus une option pour copier le sélecteur d'une règle et de copier les règles désactivé comme du code commenté. Il manque par contre les options por copier la déclaration de style entière. Cependant cela peut être fait en sélectionant les règles dans l'onglet et copier la sélection avec <kbd>Ctrl</kbd> + <kbd>C</kbd> ou via le menu contextuel.</p> + +<p>L'onglet des règles des outils de developpement est plus intélligent quand il s'agit de coller du CSS dedans. Il est possible de coller des déclarations de style entière dans des règles existantes. Et les règles commenté sont directement désactivées.</p> + +<h3 id="Afficher_les_pseudo-classes">Afficher les pseudo-classes</h3> + +<p>Firebug permet d'afficher les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> CSS {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} d'un élément, grâce aux options <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">options du menu du panneu latéral Style</a>. Dans les outils de développement, il y a deux façons de faire de même. La première est de les activer via <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Setting_hover_active_focus">l'onglet pseudo-class dans le panneau des Règles</a>. La seconde est de faire un clic droit sur un élément dans la vue des noeuds et d'affichier les pseudo-classes via le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Context_menu_reference">menu contextuel</a>.</p> + +<h3 id="Examiner_les_raccourcis_de_propriétés_CSS">Examiner les raccourcis de propriétés CSS</h3> + +<p>Les <a href="/fr/docs/Web/CSS/Shorthand_properties">raccourcis de propriétés CSS</a> peuvent être converties dans leur version complète en sélectionnant l'option <em><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">Étendre les propriétés raccouricies </a></em>dans le panneau latéral Style. Le panneau des Règles des outils de developpement est plus malin et permet de les étendre en cliquant sur les acolades entre.</p> + +<h3 id="Afficher_uniquement_les_styles_appliqués">Afficher uniquement les styles appliqués</h3> + +<p>Le <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">panneau latéral Style de Firebug a une option</a> pour afficher uniquement les propriétés CSS d'une règle qui sont appliqué à l'élement sélectionné, et cache alors toutes les règles surchargées. Cette fonctionalité n'est pas présente dans les outils de développement. Mais elle a déja été demandée dans le {{bug(1335327)}}.</p> + +<h3 id="Inspecter_le_modèle_de_boite">Inspecter le modèle de boite</h3> + +<p>Dans Firebug the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">box model</a> can be inspected via the <a href="https://getfirebug.com/wiki/index.php/Layout_Side_Panel">Layout side panel</a>. In the DevTools the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">box model is part of the Computed side panel</a>. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.</p> + +<h3 id="Inspecter_les_styles_calculés">Inspecter les styles calculés</h3> + +<p> </p> + +<p>Les valeurs calculées des propriétés CSS sont affichées dans le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">panneau latéral "Calculé"</a> des outils de développement exactement comme elle le sont dans le <a href="https://getfirebug.com/wiki/index.php/Computed_Side_Panel">panneau latéral "Calculé"</a> de Firebug. La différence est que dans outils de développement les propriétés sont toujours listées par ordre alphabétique et non groupées (voir {{bug(977128)}}) et il n'y a pas d'option pour cacher les styles spécifiques à Mozilla, mais il y a un champ de saisie permettant de filtrer les propriétés.</p> + +<h3 id="Inspecter_les_évènements">Inspecter les évènements</h3> + +<p> </p> + +<p>Les événements affectés à un élément sont affichés dans le <a href="https://getfirebug.com/wiki/index.php/Events_Side_Panel">panneau latéral Événements</a> de Firebug. Dans les outils de développement, ils sont affichés en cliquant sur la petite icône 'ev' à côté d'un élément dans la vue du noeud. Les deux outils permettent d'afficher les écouteurs d'événements "wrapped" (par exemple les écouteurs "wrapped" dans des fonctions jQuery). Pour améliorer l'interface utilisateur des outils de développement, il y a aussi une demande d'ajout d'un panneau latéral Événements comme celui de Firebug (voir {{bug(1226640)}}).</p> + +<h3 id="Stoper_l'exécution_sur_des_mutations_DOM">Stoper l'exécution sur des mutations DOM</h3> + +<p> </p> + +<p>Dans Firebug il est possible de s’arrêter sur les mutations DOM, ce qui signifie que lorsqu'un élément est modifié, l'exécution du script est arrêtée à la ligne correspondante dans le fichier JavaScript, ce qui a causé le changement. Cette fonction peut être activée globalement via le bouton <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Break_On_Mutate">"<em>Break On Mutate</em>"</a>, ou <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Context_Menu">individuellement pour chaque élément</a> et pour différents types de changements comme les changements d'attributs, les changements de contenu ou la suppression d'éléments. Malheureusement, les outils de développement n'ont pas encore cette fonctionnalité (voir {{bug(1004678)}}). Pour arrêter l'exécution du script, il est nécessaire de définir un point d'arrêt sur la ligne avec la modification dans le <a href="/fr/docs/Tools/Debugger">Débogueur</a>.</p> + +<h3 id="Chercher_des_éléments_par_sélecteurs_CSS_ou_XPaths">Chercher des éléments par sélecteurs CSS ou XPaths</h3> + +<p>Firebug permet de <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Search">rechercher des élément de le panneau HTML par sélecteur CSS ou XPaths</a>. Les outils de développement permentent également de <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">rechercher par sélecteur CSS</a>. Ils affichent même les IDs et classes correspondantes. Rechercher par XPaths n'est pas encore implémenté (voir {{bug(963933)}}.</p> + +<h2 id="Debugger">Debugger</h2> + +<p>What's the <a href="https://getfirebug.com/wiki/index.php/Script_Panel">Script panel</a> in Firebug, is the <a href="/en-US/docs/Tools/Debugger">Debugger panel</a> in the DevTools. Both allow you to debug JavaScript code executed on a website.</p> + +<h3 id="Switch_between_sources">Switch between sources</h3> + +<p>Firebug has a <a href="https://getfirebug.com/wiki/index.php/Script_Panel#Script_Location_Menu">Script Location Menu</a> listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, <code>eval()</code>, <code>new Function()</code>, etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Sources side panel</a>. Dynamically generated scripts are only listed there when they are <a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">named via a <code>//# sourceURL</code> comment</a>.</p> + +<h3 id="Managing_breakpoints">Managing breakpoints</h3> + +<p>In Firebug you can set different types of breakpoints, which are all listed within the <a href="https://getfirebug.com/wiki/index.php/Breakpoints_Side_Panel">Breakpoints side panel</a>. In the DevTools the breakpoints are shown below each script source within the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Sources side panel</a>. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see {{bug(821610)}}, {{bug(1004678)}}, {{bug(895893)}} and {{bug(1165010)}}). While there are no breakpoints for single JavaScript errors, there is a setting <em>Pause on Exceptions</em> within the <a href="/en-US/docs/Tools/Debugger/Settings">Debugger panel options</a>.</p> + +<h3 id="Step_through_code">Step through code</h3> + +<p>Once the script execution is stopped, you can step through the code using the Continue (<kbd>F8</kbd>), Step Over (<kbd>F10</kbd>), Step Into (<kbd>F11</kbd>) and Step Out (<kbd>Shift</kbd>+<kbd>F11</kbd>) options. They work the same in both tools.</p> + +<h3 id="Examine_call_stack">Examine call stack</h3> + +<p>When the script execution is paused, Firebug displays the function call stack within its <a href="https://getfirebug.com/wiki/index.php/Stack_Side_Panel">Stack side panel</a>. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack_pane">Call Stack side panel</a>. To see the call parameters in the DevTools, you need to have a look at the <a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables#Examine_variables">Variables side panel</a>.</p> + +<h3 id="Examine_variables">Examine variables</h3> + +<p>The <a href="https://getfirebug.com/wiki/index.php/Watch_Side_Panel">Watch side panel</a> in Firebug displays the {{domxref("window")}} object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a <a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Variables side panel</a>, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the <code>window</code> object. Though you can inspect that object either via the <a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM property viewer</a> or via the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>.</p> + +<h2 id="Style_Editor">Style Editor</h2> + +<p>The <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's <a href="https://getfirebug.com/wiki/index.php/CSS_Panel">CSS panel</a> does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.</p> + +<h3 id="Switch_between_sources_2">Switch between sources</h3> + +<p>The CSS panel of Firebug allows to switch between different CSS sources using the <a href="https://getfirebug.com/wiki/index.php/CSS_Panel#CSS_Location_Menu">CSS Location Menu</a>. The Style Editor has a <a href="/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">sidebar</a> for this purpose.</p> + +<h3 id="Edit_a_style_sheet">Edit a style sheet</h3> + +<p>Firebug's <a href="https://getfirebug.com/wiki/index.php/CSS_Panel">CSS panel</a> offers three different ways for editing style sheets. The default one is to edit them inline like within the <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel">Style side panel</a>. Furthermore it has a <a href="https://getfirebug.com/wiki/index.php/CSS_Panel#Edit_Button">Source and a Live Edit mode</a>, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.</p> + +<h3 id="Try_out_CSS_selectors">Try out CSS selectors</h3> + +<p>Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in {{bug(1323746)}}.</p> + +<h3 id="Searching_within_the_style_sheets">Searching within the style sheets</h3> + +<p>Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see {{bug(889571)}}) and also not via a regular expression (see {{bug(1362030)}}.</p> + +<h2 id="Performance_Tool">Performance Tool</h2> + +<p>Firebug allows to profile JavaScript performance via the <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Profile">"Profile" button within the Console panel</a> or the <code><a href="https://getfirebug.com/wiki/index.php/Console.profile">console.profile()</a></code> and <code><a href="https://getfirebug.com/wiki/index.php/Console.profileEnd">console.profileEnd()</a></code> commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via <code><a href="/en-US/docs/Web/API/Console/profile">console.profile()</a></code> and <code><a href="/en-US/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code> like in Firebug or via the "Start Recording Performance" button in the <a href="/en-US/docs/Tools/Performance">Performance Tool</a>. The output of the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.</p> + +<p>This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.</p> + +<h3 id="View_JavaScript_call_performance">View JavaScript call performance</h3> + +<p>What comes nearest to Firebug's <a href="https://getfirebug.com/wiki/index.php/Profiler">profiler output</a> is the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree view</a> in the Performance panel. Like in Firebug it lists the total execution time of each function call under <em>Total Time</em> as well as the number of calls under <em>Samples</em>, the time spent within the function under <em>Self Time</em> and the related percentages in reference to the total execution time.</p> + +<div class="note"> +<p><strong>Note:</strong> The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.</p> +</div> + +<h3 id="Jump_to_function_declaration">Jump to function declaration</h3> + +<p>Like in Firebug's profiler output the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree view</a> of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the <a href="https://getfirebug.com/wiki/index.php/Console_Panel">Console panel</a> output while within the DevTools the link is placed on the right side within the Call Tree View.</p> + +<h2 id="Network_Monitor">Network Monitor</h2> + +<p>To monitor network requests Firebug provides a <a href="https://getfirebug.com/wiki/index.php/Net_Panel">Net panel</a>. The Firefox DevTools allow to inspect the network traffic using the <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>. Both tools provide similar information including a timeline showing the request and response times of the network requests.</p> + +<h3 id="Inspect_request_information">Inspect request information</h3> + +<p>Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.</p> + +<p>In both tools there are different tabs containing different kinds of information for the selected request. They contain a <em>Headers</em>, <em>Params</em>, <em>Response</em> and <em>Cookies</em> panel. A preview of the response is shown within specifically named panels like <em>HTML</em>. The Network Monitor has a <em>Preview</em> panel for this purpose. It doesn't provide information about the cached data yet (see {{bug(859051)}}), but provides a <em>Security</em> tab in addition to Firebug's information and a <em>Timings</em> tab showing detailed information about the network timings.</p> + +<h3 id="View_request_timings">View request timings</h3> + +<p>Firebug offers detailed information about the network timings related to a request by hovering the <a href="https://getfirebug.com/wiki/index.php/Net_Panel#Timeline">Timeline column within its Net panel</a>. The Network Monitor shows this information within a <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings side panel</a> when you select a request.</p> + +<h3 id="View_remote_address">View remote address</h3> + +<p>The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at <em>Remote Address</em> in the <em>Headers</em> tab when a request is selected.</p> + +<h3 id="Search_within_requests">Search within requests</h3> + +<p>The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.</p> + +<p>Firebug allowed to search within the response body of the network requests by checking <em>Response Bodies</em> within its <a href="https://getfirebug.com/wiki/index.php/Search_Field#Options">search field options</a>. This feature is not available yet within the Network Monitor, but it's requested in {{bug(1334408)}}. While response bodies can't be searched yet, the Network Monitor allows to<a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_properties"> filter by different request properties</a>.</p> + +<h2 id="Storage_Inspector">Storage Inspector</h2> + +<p>The <a href="https://getfirebug.com/wiki/index.php/Cookies_Panel">Cookies panel</a> in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases.</p> + +<h3 id="Inspect_cookies">Inspect cookies</h3> + +<p>All cookies related to a website are listed inside the <a href="https://getfirebug.com/wiki/index.php/Cookies_Panel">Cookies panel</a> in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.</p> + +<p>The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking <em>Secure</em> from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.</p> + +<h3 id="Edit_cookies">Edit cookies</h3> + +<p>To edit a cookie in Firebug you have to right-click the cookie and choose <em>Edit</em> from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.</p> + +<h3 id="Delete_cookies">Delete cookies</h3> + +<p>Firebug's Cookies panel allows you to delete all cookies of a website via the menu option <em><a href="https://getfirebug.com/wiki/index.php/Cookies_Panel#Cookies">Cookies</a></em> > <em>Remove Cookies</em> or by pressing <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd>. It also allows you to only remove session cookies via <em>Cookies</em> > <em>Remove Session Cookies</em> and to remove single cookies by right-clicking them and choosing <em>Delete</em>. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing <em>Delete All</em> resp. <em>Delete "<cookie name>"</em>. Additionally, it allows to delete all cookies from a specific domain via the context menu option <em>Delete All From "<domain name>"</em>. It currently does not allow to only delete session cookies (see {{bug(1336934)}}).</p> + +<h2 id="Developer_Toolbar">Developer Toolbar</h2> + +<h3 id="Display_of_error_count">Display of error count</h3> + +<p>When there are JavaScript errors on a page, the <a href="https://getfirebug.com/wiki/index.php/Start_Button#Error_info">Firebug Start Button shows a badge</a> with their number. The DevTools show the number of errors in the <a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a>.</p> + +<h3 id="Command_API">Command API</h3> + +<p>Firebug offers a great variety of <a href="https://getfirebug.com/wiki/index.php/Command_Line_API">commands</a>, which can be executed within its command line. The Developer Toolbar also provides an <a href="/en-US/docs/Tools/GCLI#Commands">API with a lot of different commands</a> to control the DevTools and execute different tasks.</p> + +<h2 id="Feedback">Feedback</h2> + +<p>We are always happy to respond to feedback and questions. If you have any queries or points of view, feel free to share them on our <a href="https://discourse.mozilla.org/c/devtools">DevTools Discourse Forum</a>.</p> diff --git a/files/fr/outils/moniteur_réseau/index.html b/files/fr/outils/moniteur_réseau/index.html new file mode 100644 index 0000000000..9506bbdbe8 --- /dev/null +++ b/files/fr/outils/moniteur_réseau/index.html @@ -0,0 +1,64 @@ +--- +title: Moniteur Réseau +slug: Outils/Moniteur_réseau +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor +--- +<div>{{ToolsSidebar}}</div> + +<p>Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou lors de <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>). Le temps que prend chaque requête ainsi que ses détails seront également affichés.</p> + +<h2 id="Ouvrir_le_Moniteur_Réseau">Ouvrir le Moniteur Réseau</h2> + +<p>Il existe plusieurs façons d'ouvrir le Moniteur :</p> + +<ul> + <li>Utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> sur Mac).</li> + <li>Sélectionner "Réseau" dans le menu développement ( qui est un sous-menu du menu "Outils" sur MAC OS X et Linux).</li> + <li>Cliquer sur l'onglet "Réseau" dans la boite à outils (appuyer sur F12 pour ouvrir la boite à outils).</li> +</ul> + +<p>Le moniteur réseau va alors apparaître au bas de la fenêtre du navigateur. Lors de l'ouverture, le moniteur est vide et ressemble à ceci:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16854/network_monitor_new.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Recharger la page ou cliquer su le bouton, activera l'analyse de l'activité réseau. Une fois que l'outil est actif, il ressemblera à ceci:</p> + +<p><img alt="Ouvrir Le Moniteur Réseau" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p> + +<p>Le moniteur enregistre les requêtes dès le moment où la boite à outils est ouverte, même si l'onglet réseau n'est pas sélectionné. Cela signifie que vous pouvez commencer le débogage d'une page dans la Console puis passer à l'onglet réseau sans avoir à recharger la page.</p> + +<h2 id="Vue_d'ensemble_de_l'interface_utilisateur">Vue d'ensemble de l'interface utilisateur</h2> + +<p>L'UI est divisé en quatre grandes catégories :</p> + +<ul> + <li>L'écran principal, qui contient: la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>, la <a href="/fr/docs/Tools/Network_Monitor#Network_request_list">liste des requêtes</a>, ainsi que <a href="/fr/docs/Tools/Network_Monitor#Network_request_details">le panneau des détails de la requête </a>:</li> +</ul> + +<p><img alt="Écran_Principal_Du_Moniteur_Réseau" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor#Performance_analysis">L'analyse de performances </a>qui est un écran séparé :</li> +</ul> + +<p><img alt="Écran analyse de performace" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p> + +<h2 id="Utiliser_le_moniteur_Réseau">Utiliser le moniteur Réseau</h2> + +<p>Les articles suivants décrivent différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barres d'outils</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details">Détail des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/recording">Enregistrement du trafic réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse des performances réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de la bande passante</a></li> +</ul> diff --git a/files/fr/outils/moniteur_réseau/performance_analysis/index.html b/files/fr/outils/moniteur_réseau/performance_analysis/index.html new file mode 100644 index 0000000000..731bce1671 --- /dev/null +++ b/files/fr/outils/moniteur_réseau/performance_analysis/index.html @@ -0,0 +1,43 @@ +--- +title: Analyse de performance réseau +slug: Outils/Moniteur_réseau/Performance_Analysis +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +<p>{{ToolsSidebar}}</p> + +<p>Le Moniteur Réseau inclut un outil d'analyse de performances pour vous aider à comprendre combien de temps le navigateur met pour télécharger les différentes parties de votre site.</p> + +<h2 id="Analyse_des_performances">Analyse des performances</h2> + +<p>Pour lancer l'outil d'analyse de performances, cliquez sur l'icône chronomètre en bas de la barre d'outils du Moniteur :</p> + +<p>(notez que si vous venez d'ouvrir le Moniteur Réseau, sans avoir lancé d'analyse, le chronomètre sera dans la fenêtre principale)</p> + +<p>Le Moniteur Réseau charge alors le site deux fois : une avec un cache vide et une avec une mise en cache. Il simule ainsi la première visite du site et les visites suivantes. Il affiche les résultats pour chaque test côte à côte ou verticalement, suivant la place disponible :</p> + +<p><img alt="capture décran de performances réseau" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Les résultats de chaque test sont résumés dans un tableau et un diagramme à secteurs. Le tableau rassemble les ressources par type et affiche la taille de chaque ressource ainsi que le temps total pour la charger. Le diagramme "camembert" l'accompagnant affiche la taille relative de chaque ressource.</p> + +<p>Pour revenir à la liste de requêtes, cliquer sur le bouton "Retour" à gauche.</p> + +<p>Cliquer sur un secteur du diagramme affiche le Moniteur Réseau pour cette page, mais avec un filtre seulement pour ce <a href="/fr/docs/Tools/Network_Monitor#Filtering_by_content_type">type de ressource</a></p> + +<h2 id="Fonctionnalités_du_Moniteur_Réseau">Fonctionnalités du Moniteur Réseau</h2> + +<p>Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barre d'outils</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_details">Détails des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse de performances</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de bande passante</a></li> +</ul> diff --git a/files/fr/outils/moniteur_réseau/recording/index.html b/files/fr/outils/moniteur_réseau/recording/index.html new file mode 100644 index 0000000000..1aff22be9a --- /dev/null +++ b/files/fr/outils/moniteur_réseau/recording/index.html @@ -0,0 +1,32 @@ +--- +title: Enregistrement des journaux réseau +slug: Outils/Moniteur_réseau/recording +translation_of: Tools/Network_Monitor/recording +--- +<p>{{ToolsSidebar}}</p> + +<p>Il est possible d’interrompre et de reprendre l'enregistrement des requêtes réseau grâce au bouton pause.</p> + +<h2 id="InterrompreReprendre_l'enregistrement_des_requêtes_réseau">Interrompre/Reprendre l'enregistrement des requêtes réseau</h2> + +<p>Le Moniteur Réseau possède un bouton pour interrompre/reprendre l'enregistrement du trafic réseau d'une page. C'est pratique par exemple, pour avoir une vue de la page stable pour un instant T pendant le débug (et ainsi éviter d'avoir quarante milles requêtes qui noient le poisson).</p> + +<p>Le bouton est situé en haut à gauche de la barre d'outils principale du Moniteur. Il ressemble à un bouton pause typique : <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> + +<p>Voir image :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> + +<p>Une fois pressé, le bouton se transforme en une icône "Lecture", afin de reprendre l'enregistrement.</p> + +<h2 id="Fonctionnalités_du_Moniteur_Réseau">Fonctionnalités du Moniteur Réseau</h2> + +<p>Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barre d'outils</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_details">Détails des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse de performances</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de bande passante</a></li> +</ul> diff --git a/files/fr/outils/moniteur_réseau/request_details/index.html b/files/fr/outils/moniteur_réseau/request_details/index.html new file mode 100644 index 0000000000..f63ae19e4c --- /dev/null +++ b/files/fr/outils/moniteur_réseau/request_details/index.html @@ -0,0 +1,184 @@ +--- +title: Détails des requêtes réseau +slug: Outils/Moniteur_réseau/request_details +translation_of: Tools/Network_Monitor/request_details +--- +<p>{{ToolsSidebar}}</p> + +<p>Le panneau du détail des requêtes réseau apparait après la sélection d'une requête dans la liste. Ce panneau fournit des informations détaillées sur la requête.</p> + +<h2 id="Détails_des_requêtes_réseau">Détails des requêtes réseau</h2> + +<p>Cliquer sur une ligne affiche un nouveau panneau sur le côté droit du moniteur réseau, qui affiche plus d'informations détaillées sur la requête :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p> + +<p>Les onglets en haut du panneau vous permettent de passer entre cinq différentes pages :</p> + +<ul> + <li><strong>En-têtes</strong></li> + <li><strong>Messages (seulement pour les éléments de WebSocket)</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Paramètres</strong></li> + <li><strong>Réponse</strong></li> + <li><strong>Délais</strong></li> + <li><strong>Sécurité </strong>(seulement pour les pages sécurisées)</li> + <li><strong>Trace de la pile</strong> (seulement lorsque la requête a une trace de la pile, c'est-à-dire un script appelé dans un script).</li> +</ul> + +<p>Cliquer sur l'icône à gauche des onglets vous permet de fermer le panneau et retourner à la liste.</p> + +<h3 id="En-têtes">En-têtes</h3> + +<p>Cet onglet liste des informations essentielles de la requête :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Cela inclut :</p> + +<ul> + <li>L'URL de la requête.</li> + <li>La méthode de la requête.</li> + <li>L'adresse IP distante et son port <em>(e de Firefox 39).</em></li> + <li>Le code d'état, avec un point d'interrogation redirigeant vers la documentation MDN (si disponible)</li> + <li>La requête HTTP et les en-têtes de la réponse qui ont été envoyés.</li> + <li>Un bouton pour <a href="/fr/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">éditer et renvoyer </a>la requête</li> + <li>Un bouton pour afficher les en-têtes bruts, et les en-têtes de réponse</li> +</ul> + +<p>Il est possible de filtrer les en-têtes qui sont affichés :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><span style="color: #000000;">Une icône en forme de point d'interrogation</span> est présente à côté de chaque en-tête (sur la même ligne que le code d'état). Ce lien pointe vers la <a href="/fr/docs/Web/HTTP/Headers">documentation des en-têtes HTTP</a> pour en savoir plus.</p> + +<h3 id="Cookies">Cookies</h3> + +<p>Cet onglet énumère tous les détails de chaque cookie avec la requête ou la réponse :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + +<p>Comme avec les en-têtes, vous pouvez filtrer la liste des cookies affichés. La liste complète des attibuts de cookie est affichée (voir la capture ci dessous pour un exemple).</p> + +<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p> + +<p>L'attribut <code>samesite</code> est affiché depuis Firefox 62 ({{bug("1452715")}}).</p> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Cet onglet affiche les paramètres de GET et les données POST de chaque requête :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="Réponse">Réponse</h3> + +<p>Le contenu complet de la réponse. Si la réponse est du HTML, du JS ou du CSS, elle sera affichée comme texte :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Si la réponse est du JSON, elle sera affichée comme objet inspectable :</p> + +<p>Si la réponse est une image, l'onglet affiche un aperçu :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h4 id="Cache">Cache</h4> + +<p>Si la réponse est mise en cache (c.-à-d. un 304), l'onglet cache affichera tous les détails sur la ressource mise en cache.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p> + +<p>Parmis ces détails on trouve :</p> + +<ul> + <li>Dernière consultation : La data à laquelle la ressource a été consultée.</li> + <li>Nombre de consultations : Le nombre de fois dans la session où la ressource a été consultée.</li> + <li>Taille des données : La taille de la ressource.</li> + <li>Dernière modification : La data à laquelle la ressource a été modifiée.</li> + <li>Expire le : La date a laquelle la ressource expire.</li> + <li>Appareil : L'appareil depuis lequel la ressource a été consultée (ex: "disque").</li> +</ul> + +<h4 id="Pré-visualisation_HTML">Pré-visualisation HTML</h4> + +<p>Depuis Firefox 59, si la réponse est du HTML, une prévisualisation du HTML rendu apparaitra dans l'onglet Réponse, au-dessus du texte de la réponse.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16272/settings_for_browser_debugger.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 744px; margin: 0px auto; width: 900px;"></p> + +<h3 id="Délais">Délais</h3> + +<p>L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'<a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Archive HTTP</a> : </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Bloqué</td> + <td> + <p>Temps passé dans la file d'attente de la connexion réseau</p> + + <p>Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code>. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.</p> + </td> + </tr> + <tr> + <td>Résolution DNS</td> + <td>Temps pris pour résoudre le nom d'un hôte</td> + </tr> + <tr> + <td>Connexion</td> + <td>Temps pris pour créer une connexion TCP</td> + </tr> + <tr> + <td>Envoi</td> + <td>Temps pris pour envoyer la requête HTTP au serveur</td> + </tr> + <tr> + <td>Attente</td> + <td>Temps d'attente du serveur</td> + </tr> + <tr> + <td>Réception</td> + <td>Temps pris pour recevoir la réponse entière depuis le serveur (ou le cache)</td> + </tr> + </tbody> +</table> + +<p>Il présente également la chronologie de la requête de façon plus détaillée et annotée :</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p> + + + +<h3 id="Sécurité">Sécurité</h3> + +<p>Si le site est chargé via HTTPS, l'onglet "Sécurité" apparait. Il contient les détails sur la connexion sécurisée. Cela inclut le protocole, le chiffrage, et les détails du certificat :</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + + + +<p>L'onglet sécurité affiche un avertissement sur les faiblesses de sécurité. Actuellement il avertit de deux faiblesses :</p> + +<ol> + <li>Utiliser SSLv3 au lieu de TLS</li> + <li>Utiliser le chiffrage RC4</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="Trace_de_la_pile">Trace de la pile</h3> + +<p><span style="color: #000000;">La trace de la pile est affichée dans son propre onglet, <span class="dico_title_2">surprenamment</span> nommé "Trace de la pile". Bien entendu, cela n'est valable que pour les réponses qui possèdent une trace de pile.</span></p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p> diff --git a/files/fr/outils/moniteur_réseau/request_list/index.html b/files/fr/outils/moniteur_réseau/request_list/index.html new file mode 100644 index 0000000000..7b461f7ff2 --- /dev/null +++ b/files/fr/outils/moniteur_réseau/request_list/index.html @@ -0,0 +1,377 @@ +--- +title: Liste des requêtes réseau +slug: Outils/Moniteur_réseau/request_list +translation_of: Tools/Network_Monitor/request_list +--- +<p>{{ToolsSidebar}}</p> + +<p>La Liste des requêtes réseau du Moniteur Réseau affiche une liste des requêtes faites dans la page depuis son chargement.</p> + +<h2 id="Liste_des_requêtes_réseau">Liste des requêtes réseau</h2> + +<p>Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :<img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;">Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les <a href="/fr/docs/Tools_Toolbox#Common_preferences">paramètres</a> des outils de développement.</p> + +<h3 id="Champs_des_requêtes_réseau">Champs des requêtes réseau</h3> + +<p>Il est possible d'afficher/cacher les différentes colonnes avec un clic droit sur l'en-tête du tableau (la ligne des noms des colonnes). Une option "<strong>Réinitialiser les colonnes</strong>" est également disponible. Voici une liste de toutes les colonnes disponibles:</p> + +<p>Il est également possible d'ajuster la largeur des colonnes pour faciliter la lecture. L'option "<strong>Réinitialiser les colonnes</strong>" réinitialise aussi la largeur des colonnes.</p> + +<p>{{EmbedYouTube("5fbuDO2s9Pk")}}</p> + +<p>Cliquer sur un en-tête de colonne trie la liste par rapport à cette colonne. "<strong>Réinitialiser les colonnes</strong>" remet le tri par défaut.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16627/network_monitor_header_right_click.png" style="display: block; margin: 0 auto;"></p> + +<p>Voici une liste des colonnes disponibles:</p> + +<ul> + <li><strong>État </strong>: le code de statut HTTP renvoyé. Il est indiqué par une icône de couleur : Le code exact est affiché juste après l'icône. + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">un cercle bleu pour les codes d'information (1XX codes). Cela inclut notamment le code 101 (Changement de protocole) pour les upgrades <a href="/fr/docs/Web/API/WebSocket">WebSocket</a>.</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> un cercle vert pour le succès (codes 2XX),</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> un triangle orange pour la redirection (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> un carré rouge pour les erreurs (4XX et 5XX).</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> un cercle gris pour les réponses récupérées dans le cache du navigateur</li> + </ul> + </li> + <li><strong>Méthode </strong>: la méthode de la requête HTTP.</li> + <li><strong>Fichier </strong>: nom du fichier requis.</li> + <li><strong>Protocole:</strong> Le protocole réseau utilisé pour transférer les donnée.</li> + <li><strong>Scheme:</strong> Le "scheme" (https/http/ftp/...) du chemin demandé.</li> + <li><strong>Domaine </strong>: le domaine du chemin requis. + <ul> + <li><strong></strong>Si la requête utilise le protocole SSL/TLS et que la connexion a une faiblesse de sécurité telle qu'un chiffrement peu solide, une icône en forme de triangle apparaît à côté du domaine. On peut trouver davantage de détails sur le problème dans <a href="/fr/docs/Tools/Network_Monitor#Security">l'onglet Sécurité</a>.</li> + <li>Survolez le domaine pour voir l'adresse IP.</li> + <li>Il y a une icône à côté du domaine qui donne des informations supplémentaires sur le statut de sécurité de la requête. Voir <a href="/fr/docs/Tools/Network_Monitor#Security_icons">icônes de sécurité</a>.</li> + </ul> + </li> + <li><strong>IP distante</strong>: l'adresse IP du serveur répondant à la requête.</li> + <li><strong>Source</strong>: La cause de la requête, par exemple un une requête XHR, un {{htmlelement("img")}}, un script, etc.</li> + <li><strong>Type</strong>: Le <code>Content-type</code> de la réponse.</li> + <li><strong>Cookies:</strong> Le nombre de "cookies de requêtes" associés à la requête.</li> + <li><strong>Set-Cookies:</strong> Le nombre de "cookies de réponse" associés à la requête.</li> + <li><strong>Transfert</strong> : Le nombre d'octets qui ont réellement été transférés pour charger la ressource. Cela sera plus petit que "<strong>Taille</strong>" si la ressource a été compressée. Si la ressource a été chargée depuis le cache d'un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>, alors la case affiche "service worker"</li> + <li><strong>Taille </strong>: la taille de la ressource transférée.</li> +</ul> + +<p>La barre supérieure donne l'intitulé des colonnes, et en cliquant sur ces intitulés classera toutes les requêtes en fonction de la colonne sélectionnée.</p> + +<h4 id="Miniature_dimage">Miniature d'image</h4> + +<p>Si le fichier est une image, survoler son nom de fichier affichera un aperçu de l'image :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16257/image_preview.png" style="border: 1px solid black; display: block; height: 334px; margin: 0px auto; width: 900px;"></p> + +<h4 id="Icônes_sécurité">Icônes sécurité</h4> + +<p>Le Moniteur réseau affiche une icône dans la colonne "Domaine" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16194/network_message_list_63.png" style="border: 1px solid black; display: block; height: 191px; margin: 0 auto; width: 845px;"></p> + +<p>Cela donne une information supplémentaire concernant la sécurité de la requête :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Icône</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS faible (un encodage faible par exemple )</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS invalide (un certificat invalide par exemple)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> + <td>HTTP</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> + <td>Localhost</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16192/tracker_icon.png" style="height: 16px; width: 16px;"></td> + <td>Indique que l'URL appartient à un traqueur connu qui serait bloqué si le blocage de contenu était activé.</td> + </tr> + </tbody> +</table> + +<p>Pour chaque requête HTTPS faible ou ratée, il est possible de voir des détails du problème dans <a href="/fr/docs/Tools/Network_Monitor#Security">l'onglet Sécurité</a>.</p> + +<h4 id="Colonne_source">Colonne source</h4> + +<p>Cette colonne indique la cause de la requête. C'est généralement évident et il est possible de voir la corrélation avec la colonne "Type". Les valeurs les plus courantes sont :</p> + +<ul> + <li>document : le document HTML source.</li> + <li>img: élément {{htmlelement("img")}}.</li> + <li>imageset: élément {{htmlelement("img")}}.</li> + <li>script: un fichier JavaScript.</li> + <li>stylesheet: un fichier CSS.</li> +</ul> + +<h3 id="Chronologie">Chronologie</h3> + +<p>La liste des requêtes affiche également une chronologie des différentes parties de chaque requête :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16259/timeline.png" style="border: 1px solid black; display: block; height: 331px; margin: 0px auto; width: 900px;">La chronologie de chaque requête est donnée relativement aux autres, de telle façon que vous puissiez voir le temps de chargement total. Pour plus d'informations concernant le code couleur utilisé ici, consultez la section <a href="/fr/docs/Tools/Network_Monitor#Timings">Délais</a> de cette page.</p> + +<p>La chronologie contient également deux lignes verticales :</p> + +<ul> + <li>La ligne <span style="color: blue;">bleue</span> marque le point à partir duquel l'évènement <code><a href="/fr/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> de la page est activé.</li> + <li>La ligne <span style="color: red;">rouge</span> marque le point à partir duquel l'évènement<code><a href="/fr/docs/Web/Events/load"> load</a></code> de la page est activé</li> +</ul> + +<h3 id="Filtrer_les_requêtes">Filtrer les requêtes</h3> + +<p>Il est possible de filtrer le contenu des requêtes par type de contenu, par URL, par s'il s'agit de requêtes XMLHttpRequests ou WebSocket, ou par propriétés de requête.</p> + +<h4 id="Bloquer_une_URL_spécifique">Bloquer une URL spécifique</h4> + +<p>Pour voir comme une page s'en sort sans une ressource, il est possible de bloquer une URL spécifique depuis la liste de requêtes.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16701/beforeBlocking.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<ol> + <li>Survoler la requête voulue.</li> + <li>Sélectionner "Bloquer l'URL" dans le menu contextuel.</li> + <li>Lors du rechargement de la page, l'URL en question sera bloquée et un message ajouté sur la ligne pour indiquer que la ressources a été bloqué par les outils de développement.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16700/afterBlocking.png" style="border: 1px solid black; display: block; height: 865px; margin: 0px auto; width: 1136px;"></p> + +<p>Pour débloquer l'URL :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16702/unblockUrl.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<ol> + <li>Survoler la requête voulue.</li> + <li>Sélectionner "Débloquer l'URL" dans le menu contextuel</li> + <li>Lors du rechargement de la page, l'URL en question sera à nouveau disponible.</li> +</ol> + +<h4 id="Filtrer_par_type_de_contenu">Filtrer par type de contenu</h4> + +<p>Pour filtrer par type de contenu, il faut utiliser les boutons de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>.</p> + +<h4 id="Filtrer_les_requêtes_XHR">Filtrer les requêtes XHR</h4> + +<p>Pour ne voir que les les requêtes {{Glossary("XHR (XMLHttpRequest)", "XHR")}} , il faut utiliser le bouton "XHR" de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a></p> + +<h4 id="Filtrer_les_WebSockets">Filtrer les WebSockets</h4> + +<p>Pour ne voir que les connections WebSocket, il faut utiliser le bouton "WS" de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a></p> + +<p>Le module complémentaire <a href="https://addons.mozilla.org/en-US/firefox/addon/websocketsniff">WebSocket Sniffer</a> peut également s'avérer utile.</p> + +<h4 id="Filtrer_par_URL">Filtrer par URL</h4> + +<p>Pour cela, il y a une barre de recherche dans la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>. Cliquez à l'intérieur, ou faites la combinaison de touches clavier <kbd>Ctrl</kbd> + <kbd>F</kbd> (ou <kbd>Cmd</kbd> + <kbd>F</kbd> sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".</p> + +<p>{{EmbedYouTube("HUcWOBBhLHg")}}</p> + +<p>Il est possible de filtrer les requêtes qui ne contiennent<em> pas</em> la chaine de caractères recherchée. Il faut pour cela préfixer votre recherche par l'opérateur "-". Par exemple la recherche "-google.fr" affichera toutes les requêtes qui n'ont <em>pas </em>"google.fr" dans leur URL.</p> + +<h4 id="Filtrer_par_propriétés">Filtrer par propriétés</h4> + +<p>Pour filtrer par propriétés de requêtes, il faut utiliser la boite de recherche de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>. Cette boite reconnait les mot-clés spécifiques qui peuvent être utilisés pour filtrer les requêtes. Un mot-clé doit être suivi de deux points, puis d'une valeur de filtre valide. Les valeurs de filtres ne sont pas sensibles à la case (majuscule ou minuscule). précéder l'expression d'un moins (-) inverse le filtre. Il est possible de combiner différents filtres en les séparant par un espace.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Mot-clé</th> + <th scope="col">Signification</th> + <th scope="col">Exemple(s)</th> + </tr> + <tr> + <td><code>status-code</code></td> + <td>Affiche les ressources avec un code de statut HTTP spécifique.</td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td>Affiche les ressources qui ont été requises par un une méthode HTTP spécifique.</td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td>Affiche les ressources provenant d'un domaine spécifique.</td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td>Affiche les ressources provenant d'un serveur à l'adress IP spécifique.</td> + <td><code>remote-ip:63.245.215.53</code><br> + <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> + </tr> + <tr> + <td><code>cause</code></td> + <td>Affiche les ressources qui correspondent à une cause spécifique. Ces types se trouvent dans la <a href="/fr/docs/Outils/Moniteur_r%C3%A9seau$edit#Cause_column">colonne source</a>.</td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td>Affiche les ressources ayant une taille de transfert spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (<code>1k</code> vaut alors <code>1024)</code>.</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td>Affiche les ressources ayant une taille (après décompression) spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (<code>1k</code> vaut alors <code>1024)</code></td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td>Affiche les ressources qui sont plus grandes que la taille spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (<code>1k</code> vaut alors <code>1024)</code></td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td>Affiche les ressources qui coresspondent au type MIME spécifié.</td> + <td><code>mime-type:text/html</code><br> + <code>mime-type:image/png</code><br> + <code>mime-type:application/javascript</code></td> + </tr> + <tr> + <td><code>is</code></td> + <td><code>is:cached</code> et <code>is:from-cache</code> affichent uniquement les ressources venant du cache.<br> + <code>is:running</code> affiche seulement les ressources en cours de transfert.</td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td>Affiche les ressources transfére par le "scheme" spécifié.</td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td>Affiche les ressources qui contienent la "response header HTTP" spécifiée.</td> + <td><code>has-response-header:cache-control</code><br> + <code>has-response-header:X-Firefox-Spdy</code></td> + </tr> + <tr> + <td><code>set-cookie-domain</code></td> + <td>Affiche les ressources qui ont un header <code>Set-Cookie</code> avec un attribut <code>Domain</code> qui correspond à la valeur spécifiée.</td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td>Affiche les ressources qui ont un header <code>Set-Cookie</code> avec un nom qui correspond à la valeur spécifiée.</td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td>Affiche les ressources qui ont un header <code>Set-Cookie</code> avec une valeur qui correspond à la valeur spécifiée.</td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td>Affiche les ressources dont l'URL correspond l'{{Glossary("regular expression")}} spécifiée.</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<p>Pour trouver toutes les erreurs 404, il est possible de taper "404" et la recherche complétera automatiquement par "status-code:404" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16677/404_filter.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<h3 id="Menu_contextuel">Menu contextuel</h3> + +<p>Un clic droit sur une ligne de la liste affiche un menu contextuel avec les options suivantes :</p> + +<ul> + <li>Copier l'URL</li> + <li>Copier les paramètres de l'URL (à partir de Firefox 40)</li> + <li>Copier les données POST (à partir de Firefox 40, uniquement pour les requêtes POST)</li> + <li>Copier en tant que commande cURL</li> + <li>Copier les En-têtes de la requête (à partir de Firefox 40)</li> + <li>Copier les En-têtes de la réponse (à partir de Firefox 40)</li> + <li>Copier la réponse (à partir de Firefox 40)</li> + <li>Copier l'image comme Data URI (seulement pour les images)</li> + <li>Tout copier en tant qu’HAR (à partir de Firefox 41)</li> + <li>Tout enregistrer en tant qu’HAR (à partir de Firefox 41)</li> + <li>Enregistrer l'image (à partir de Firefox 55, et seulement pour les images)</li> + <li>Modifier et renvoyer</li> + <li>Ouvrir dans un nouvel onglet</li> + <li>Lancer <a href="/fr/docs/Tools/Network_Monitor#Performance_analysis">l'analyse des performances</a> pour la page</li> +</ul> + +<h4 id="Modifier_et_renvoyer">Modifier et renvoyer</h4> + +<p>Cette option ouvre un éditeur qui vous permet de modifier les méthodes de requêtes, les URLs, les paramètres, les en-têtes et de renvoyer la requête.</p> + +<h4 id="Ouvrir_dans_un_nouvel_onglet">Ouvrir dans un nouvel onglet</h4> + +<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000;">Renvoie la nouvelle requête dans un nouvel onglet. Très utile pour déboguer des requêtes asynchrones.</span></p> + +<h4 id="Copier_en_tant_que_commande_cURL">Copier en tant que commande cURL</h4> + +<p>Cette option copie la requête réseau dans le presse-papier en tant que commande <a href="http://curl.haxx.se/">cURL</a>, de telle sorte que vous puissiez l'exécuter depuis une ligne de commande. La commande peut inclure les paramètres suivants :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METHOD]</code></td> + <td>Si la méthode n'est pas GET ou POST</td> + </tr> + <tr> + <td><code>--data</code></td> + <td>pour les paramètres de requêtes URL encodés</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>Pour les paramètres de requêtes multiparties</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>Si la version de HTTP n'est pas 1.1</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>Si la méthode est HEAD</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p>Un pour chaque en-tête de requête :</p> + + <p>Si l'en-tête "Accept-Encoding" est présent, la commande cURL inclura <code>--compressed</code> à la place de <code>-H "Accept-Encoding: gzip, deflate"</code>. Cela signifie que la réponse sera automatiquement décompressée.</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Tout_copierenregistrer_en_tant_qu’HAR">Tout copier/enregistrer en tant qu’HAR</h4> + +<p>Ces options crée une <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">Archive HTTP</a> (HAR) pour toutes les requêtes listées. Ce format permet d'exporter des informations détaillées sur les requêtes réseau. "Tout copier" copie le contenu dans le presse-papiers. "Tout enregistrer" ouvre une fenêtre pour sauvegarder l'archive sur un disque. Le nouveau menu 'HAR' (en haut à droite) inclut également ces options, ainsi qu'une option pour importer un HAR :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16056/har-dropdown.png" style="border-style: solid; border-width: 1px; height: 262px; width: 723px;"></p> + +<h2 id="Fonctionnalités_du_Moniteur_Réseau">Fonctionnalités du Moniteur Réseau</h2> + +<p>Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barre d'outils</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_details">Détails des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse de performances</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de bande passante</a></li> +</ul> diff --git a/files/fr/outils/moniteur_réseau/throttling/index.html b/files/fr/outils/moniteur_réseau/throttling/index.html new file mode 100644 index 0000000000..0e538857c9 --- /dev/null +++ b/files/fr/outils/moniteur_réseau/throttling/index.html @@ -0,0 +1,101 @@ +--- +title: Limitation de bande passante +slug: Outils/Moniteur_réseau/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +<p>{{ToolsSidebar}}</p> + +<p>Le moniteur réseau permet de limiter la bande passante réseau afin de simuler divers types de connexion.</p> + +<h2 id="Limitation_de_la_bande_passante">Limitation de la bande passante</h2> + +<p>La barre d'outils inclut une liste déroulante pour limiter la bande passante. Cela permet d'émuler la vitesse de différents réseaux. Il suffit alors de sélectionner une option dans un menu, et elle persistera à travers les rechargements de la page.</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16260/throttling.png" style="border: 1px solid black; display: block; height: 177px; margin: 0px auto; width: 150px;"></p> + + + +<p>Les caractéristiques émulées sont :</p> + +<ul> + <li>Vitesse de téléchargement</li> + <li>Vitesse de téléversement (upload)</li> + <li>Latence minimum</li> +</ul> + +<p>Le tableau ci-dessous liste les paramètres associés à chaque type de réseau. Cependant, il n'est pas recommandé de se baser sur ces données pour des mesures exactes de performance. Elles ne sont là que pour donner une idée aproximative de l'experience utilisateur dans ces conditions. Les vitesses sont exprimées en multiples de bits par seconde.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Selection</th> + <th scope="col">Download speed</th> + <th scope="col">Upload speed</th> + <th scope="col">Minimum latency (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 Kpbs</td> + <td>20 Kpbs</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 Kpbs</td> + <td>50 Kpbs</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 Kpbs</td> + <td>150 Kpbs</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 Kpbs</td> + <td>250 Kpbs</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 Mbps</td> + <td>750 Kpbs</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 Mbps</td> + <td>3 Mbps</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 Mbps</td> + <td>1 Mbps</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 Mbps</td> + <td>15 Mbps</td> + <td>2</td> + </tr> + </tbody> +</table> + +<h2 id="Fonctionnalités_du_Moniteur_Réseau">Fonctionnalités du Moniteur Réseau</h2> + +<p>Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barre d'outils</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_details">Détails des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse de performances</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de bande passante</a></li> +</ul> diff --git a/files/fr/outils/moniteur_réseau/toolbar/index.html b/files/fr/outils/moniteur_réseau/toolbar/index.html new file mode 100644 index 0000000000..da70faa365 --- /dev/null +++ b/files/fr/outils/moniteur_réseau/toolbar/index.html @@ -0,0 +1,61 @@ +--- +title: Barres d'outils du Moniteur Réseau +slug: Outils/Moniteur_réseau/toolbar +tags: + - '110n:priority' + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/toolbar +--- +<p>{{ToolsSidebar}}</p> + +<p>Le moniteur Réseau fournit deux barres d'outils, l'une en haut de la fenêtre, l'autre en dessous.</p> + +<h2 id="Barre_d'outils">Barre d'outils</h2> + +<p>La première barre se trouve en haut de la fenêtre principale :</p> + +<p><img alt="première barre doutils" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p> + +<p>Cette barre fournit :</p> + +<ul> + <li>Une icône pour vider la <a href="/fr/docs/Outils/Moniteur_réseau/request_list">liste des requêtes</a></li> + <li>A box enabling you to <a href="/fr/docs/Outils/Moniteur_réseau/request_list#Filtering_requests">filter requests</a> by URL and by properties.</li> + <li>Un tableau d'icônes pour filtrer les requêtes par type : + <ul> + <li>Par type de contenu de la réponse</li> + <li>Par requêtes XHR</li> + <li>Par upgrade WebSocket (icone "WS")</li> + </ul> + </li> + <li>Une case à cocher pour "conserver les journaux" (n'effacera pas le contenu lors d'un changement de page ou d'un rafraichissement).</li> + <li>Une case à cocher pour désactiver le cache.</li> + <li>Une liste déroulante, fournissant plusieurs options pour limiter la bande passante</li> + <li>Un menu d'options HAR</li> +</ul> + +<p><img alt="deuxième barre doutils" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p> + +<p>La deuxième barre d'outils se trouve en bas de la fenêtre :</p> + +<ul> + <li>Une icône pour lancer <a href="/fr/docs/Outils/Moniteur_réseau/Performance_Analysis">l'analyse de performances</a></li> + <li>Un résumé des requêtes de cette page, avec leur nombre, leur taille totale et leur durée totale.</li> +</ul> + +<h2 id="Fonctionnalités_du_Moniteur_Réseau">Fonctionnalités du Moniteur Réseau</h2> + +<p>Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barre d'outils</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/request_details">Détails des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse de performances</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de bande passante</a></li> +</ul> diff --git a/files/fr/outils/outils_boite_à_outils/index.html b/files/fr/outils/outils_boite_à_outils/index.html new file mode 100644 index 0000000000..5b5987fc71 --- /dev/null +++ b/files/fr/outils/outils_boite_à_outils/index.html @@ -0,0 +1,102 @@ +--- +title: Boite à Outils +slug: Outils/Outils_boite_à_outils +tags: + - Toolbox + - Tools +translation_of: Tools/Tools_Toolbox +--- +<div>{{ToolsSidebar}}</div> + +<p>La boîte à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit.</p> + +<p>Vous pouvez l'ouvrir de plusieurs façons :</p> + +<ul> + <li>Sélectionner "Outils de développement" dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows),</li> + <li>Cliquer sur l'icône en forme de clé à mollette (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), dans la barre d'outils principale ou dans le menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), puis sélectionner "Afficher les outils"</li> + <li>Activer l'un des outils, par exemple le débogueur JavaScript ou l'inspecteur web).</li> + <li>Utiliser le raccourci <kbd>Ctrl</kbd>+ <kbd>Maj</kbd>+ <kbd>I</kbd> sous Windows ou Linux, ou bien <kbd>Cmd</kbd>+ <kbd>Opt</kbd> +<kbd>i</kbd> pour OS X. Ou bien même utiliser la touche <kbd>F12</kbd>. Voir aussi les <a href="/fr/docs/Tools/Keyboard_shortcuts">raccourcis clavier</a>.</li> +</ul> + +<p>Par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voici à quoi ressemble la fenêtre en mode attaché :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">Cette fenêtre est séparée en deux parties : la barre d'outils en haut et la partie principale en dessous :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Mode_d'ancrage">Mode d'ancrage</h2> + +<p>Par défaut, la boîte à outils apparait ancrée en bas de la fenêtre du navigateur. Mais il est possible de l'ancrer sur la droite du navigateur, ou de la faire apparaitre dans sa propre fenêtre. Pour cela il faut utiliser les <a href="/fr/docs/Tools/Tools_Toolbox#Toolbox_controls">boutons de la barre d'outils</a>.</p> + +<h2 id="Barre_d'outils">Barre d'outils</h2> + +<p>La barre d'outils contient les boutons pour activer les outils, pour attacher, détacher ou fermer la boîte à outils.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3> + +<p>Le bouton à gauche sert à activer le sélecteur. Il permet de sélectionner un élément de la page pour l'inspecter. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element" title="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element">"Sélectionner un élément"</a>.</p> + +<h3 id="Outils_de_la_boîte_à_outils">Outils de la boîte à outils</h3> + +<p>Il y a ensuite plusieurs boutons vous permettant de naviguer entre les différents outils de la Boîte à outils. La barre peut contenir les boutons suivants :</p> + +<ul> + <li><a href="/fr/docs/Tools/Web_Console" title="/fr/docs/Tools/Web_Console">Console Web</a></li> + <li><a href="/fr/docs/Tools/Debugger" title="/fr/docs/Tools/Debugger">Débogueur</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector" title="/fr/docs/Tools/Page_Inspector">Inspecteur</a></li> + <li><a href="/fr/docs/Tools/Style_Editor" title="/fr/docs/Tools/Style_Editor">Éditeur de style </a></li> + <li><a href="/fr/docs/Tools/Profiler" title="/fr/docs/Tools/Profiler">Profileur</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor" title="/fr/docs/Tools/Network_Monitor">Moniteur Réseau</a></li> +</ul> + +<p>Il est à noter que tous les outils n'apparaitront pas forcément dans la barre : uniquement les outils disponibles sont visibles (par exemple : tous les outils ne prennent pas encore en charge le débogage à distance, donc si la cible du débogage n'est pas la fenêtre active, tous les outils ne seront pas disponibles).</p> + +<h3 id="Outils_supplémentaires">Outils supplémentaires</h3> + +<p>La barre de boutons à gauche de la barre d'outils peut être personnalisée dans les <a href="#Settings">options de développement</a>. Par défaut, elle inclut :</p> + +<ul> + <li><a href="/fr/docs/Tools/Web_Console#The_split_console" title="/fr/docs/Tools/Web_Console#The_split_console">Console scindée</a></li> + <li><a href="/fr/docs/Tools/Responsive_Design_View">Vue adaptative</a></li> + <li><a href="/fr/docs/tools/Working_with_iframes">Sélectionner une iframe en tant que document cible </a>(présent par défaut uniquement depuis Firefox 41).</li> +</ul> + +<p>Les outils suivants ne sont pas affichés par défaut mais peuvent être activés via les <a href="#Settings">options </a>:</p> + +<ul> + <li><a href="/fr/docs/Tools/Paint_Flashing_Tool">Afficher en surbrillance les zones repeintes</a></li> + <li><a href="/fr/docs/Tools/3D_View">Vue 3D</a></li> + <li><a href="/fr/docs/Tools/Scratchpad">Ardoise JavaScript</a></li> + <li><a href="/fr/docs/Tools/Eyedropper">Sélectionner une couleur depuis la page</a></li> + <li>Prendre une capture d'écran de la page entière : Prend une capture d'écran de la page web et l'enregistre dans le dossier "Téléchargements".</li> + <li><a href="/fr/docs/Tools/Rulers">Afficher les règles pour la page</a></li> + <li>Mesurer une portion de la page : mesure une portion du site web en sélectionnant des éléments dans la page.</li> +</ul> + +<h3 id="Contrôles_de_la_boîte_à_outils">Contrôles de la boîte à outils :</h3> + +<p>Grâce à ces boutons il est possible de :</p> + +<ul> + <li>Fermer la fenêtre.</li> + <li>Choisir entre le mode attaché sur le côté ou en dessous.</li> + <li>Choisir entre fenêtre indépendante ou attachée</li> + <li>Acceder aux <a href="#Settings" title="#Settings">options de développement</a></li> +</ul> + +<h2 id="Options"><a name="Settings">Options</a></h2> + +<p><a href="/fr/docs/Tools/Settings">Voir la page sur les options des outils de développement.</a></p> + +<h2 id="Panneau_principal">Panneau principal</h2> + +<p>Le contenu du panneau principal dans la fenêtre est entièrement contrôlé par, et est spécifique à l'outil actuellement sélectionné.</p> + +<h2 id="Raccourcis_clavier">Raccourcis clavier</h2> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}</p> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/fr/outils/paint_flashing_tool/index.html b/files/fr/outils/paint_flashing_tool/index.html new file mode 100644 index 0000000000..408372ebed --- /dev/null +++ b/files/fr/outils/paint_flashing_tool/index.html @@ -0,0 +1,86 @@ +--- +title: Outil de mise en surbrillance des zones repeintes +slug: Outils/Paint_Flashing_Tool +translation_of: Tools/Paint_Flashing_Tool +--- +<div>{{ToolsSidebar}}</div> + +<p>L'outil de mise en surbrillance des zones repeintes lorsqu’il est activé met en surbrillance les parties de la page que le navigateur doit repeindre en réponse à un changement. Par exemple, lorsque l'utilisateur fait défiler, certains blocs vont être repeints. Avec l'aide de cet outil, il est possible de savoir si votre site web cause plus de repaint qu'il ne devrait. C'est important, car les repaints peuvent être des opérations très couteuses. Ainsi, éliminer les repaints inutiles peut améliorer la réactivité de votre site web.</p> + +<h2 id="Les_Repaints_et_la_réactivité">Les Repaints et la réactivité</h2> + +<p>Lorsque le navigateur affiche une page web, il parse l'HTML et le CSS, détermine comment l'organiser et ensuite le peint pour pouvoir afficher du contenu sur l'écran. Lorsqu'un évènement qui peut changer une partie visible de la page se produit, le navigateur doit alors repeindre une partie de la page. Par exemple, un repaint sera nécessaire si l'utilisateur scrolle la page ou, place son curseur sur un élément disposant de la pseudo classe <a href="/fr/docs/Web/CSS/:hover" title="/fr/docs/Web/CSS/:hover"><code>:hover</code></a> qui change le style de l'élément.</p> + +<p>Repeindre peut être une opération couteuse, le navigateur essaie donc de minimiser la partie à repeindre au maximum. Le navigateur essaie de trouver quelles parties de l'écran sont "endommagées" et ne repeint que celles-ci. Le navigateur sépare également le modèle de la page en couches qui vont à son avis être mises à jour indépendamment les unes des autres. Ainsi, le changement d'une couche n'oblige pas un repaint sur une autre couche, et lorsque le changement n'affecte qu'une relation entre deux couches (une animation par exemple) aucun repaint n'est nécessaire.</p> + +<p>Les choix faits par un développeur web peuvent gêner le navigateur, lui imposant de faire plus de repaints et sur de plus grandes surfaces que nécessaire. Cela peut causer des pertes de réactivité dans les saisies utilisateur (aussi connu sous le nom de "janky"). C'est dans ces moments-là que l'outil de mise en surbrillance des zones repeintes s'avère utile : En montrant les zones que le navigateur repeint en réponse à un évènement, il est possible de voir s’il repeint plus que de raison.</p> + +<h2 id="Utiliser_l'outil_de_mise_en_surbrillance_des_zones_repeintes">Utiliser l'outil de mise en surbrillance des zones repeintes</h2> + +<p>Ouvrir la <a href="/fr/docs/Tools_Toolbox" title="/fr/docs/Tools_Toolbox">Boite à outils</a>, puis cliquer sur l'icône nommée "afficher en surbrillance les zones repeintes" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Après cela, les zones repeintes seront mises en surbrillance. Ainsi, après avoir bougé la souris et scrollé, la page ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">Dans cet exemple il y a deux sources de repaints principales :</p> + +<ul> + <li>Survoler des liens avec la souris font que le navigateur les repeint, ceux-ci ont en effet la pseudo-classe <a href="/fr/docs/Web/CSS/:hover" title="/fr/docs/Web/CSS/:hover"><code>:hover</code></a>.</li> + <li>Scroller fait que le navigateur repeint la partie de la page qui deviens visible au bas de la page, et également la barre de défilement en haut à droite.</li> +</ul> + +<p>Pour désactiver l'outil, il faut cliquer à nouveau sur le bouton de la boite à outils.</p> + +<h2 id="Exemple_transitions_CSS">Exemple : transitions CSS</h2> + +<p>Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les <a href="/fr/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">transitions CSS</a>. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la<code> </code><a href="/fr/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété <a href="/fr/docs/Web/CSS/transform" title="/fr/docs/Web/CSS/transform"><code>transform</code></a>.</p> + +<pre class="brush: html"><body> + <div id="container"> + <div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div> + <div class="moving-box" id="moving-box-transform">Transition utilisant transform</div> + </div> +</body> + +</pre> + +<pre class="brush: css">#container { + border: 1px solid; +} + +.moving-box { + height: 20%; + width:20%; + margin: 2%; + padding: 2%; + background-color: blue; + color: white; + font-size: 24px; +} + +#moving-box-left-margin { + transition: margin-left 4s; +} + +#moving-box-transform { + transition: transform 4s; +} + +body:hover #moving-box-left-margin{ + margin-left: 74%; +} + +body:hover #moving-box-transform { + transform: translate(300%); +}</pre> + +<p>Pour voir la transition, placez la souris dans l'espace ce dessous :</p> + +<p>{{ EmbedLiveSample('Exemple_transitions_CSS', 600, 300) }}</p> + +<p>Maintenant, activez l'outil puis essayez à nouveau. Il apparait alors que la version "margin-left" cause une série de repaints tout au long du déplacement de l'élément, alors que la version "<code>transform</code>" ne cause qu'un repaint au début et à la fin.</p> + +<p>Pourquoi ? Parce que lors de l'utilisation de <code>transform</code>, le navigateur crée une couche séparée pour l'élément. Ainsi lorsque celui est déplacé, la seule chose qui est changée c'est la relation entre les deux couches, ce qui est géré lors de la composition. Ainsi, aucune des deux couches n'a besoin de repaint.</p> + +<p>Dans ce cas, avec un style très simple, les différences de performance ne se font pas réellement ressentir. Cependant, si le style était couteux en performance, la différence pourrait être importante. Il est difficile de savoir quelles optimisations le navigateur fait pour économiser des repaints, et celles-ci peuvent changer d'une version à une autre. Ainsi tester votre site avec cet outil permet de s'assurer qu'il fonctionne toujours de façon optimale.</p> diff --git a/files/fr/outils/performance/allocations/index.html b/files/fr/outils/performance/allocations/index.html new file mode 100644 index 0000000000..21cdf3b008 --- /dev/null +++ b/files/fr/outils/performance/allocations/index.html @@ -0,0 +1,86 @@ +--- +title: Allocations +slug: Outils/Performance/Allocations +translation_of: Tools/Performance/Allocations +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>La vue Allocations de l'outil Performance affiche quelles fonctions dans une page web allouent le plus de mémoire durant le profil.</p> + +<p>C'est important pour la performance, car allouer beaucoup de mémoire ou faire beaucoup d'allocations peut activer le <a href="/fr/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">ramasse-miette</a> (garabage collector). Celui-ci peut affecter la réactivité de la page.</p> +</div> + +<div class="geckoVersionNote"> +<p>La vue Allocations est une des nouveautés de Firefox 46.</p> +</div> + +<p>Pour activer la vue Allocations, il faut activer l'option "Enregistrer les Allocations" dans les options de l'outil Performance, <em>avant</em> d'enregister un profil. Il faut ensuite <a href="/fr/docs/Tools/Performance/How_to#Record_a_profile">enregistrer un profil</a>, un nouvel onglet nommé "Allocations" apparaitra alors dans la barre d'outils :</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<h2 id="Anatomie_de_la_vue_allocations">Anatomie de la vue allocations</h2> + +<p>La vue allocations ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12393/allocations-view-1.png" style="display: block; height: 156px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Cette vue fait périodiquement des échantillons des allocations qui sont faites durant l'enregistrement. Chaque ligne représente une fonction pour laquelle au moins un échantillon d'allocation a été pris durant l'enregistrement.</p> + +<p>La vue inclut les colonnes suivantes :</p> + +<ul> + <li>Self Count: Le nombre d'échantillons d'allocations qui ont été prises dans cette fonction (affiché également en pourcentage du total)</li> + <li>Self Bytes: Le nombre total d'octets qui ont été alloués dans les échantillons d'allocations dans cette fonction (affiché également en pourcentage du total)</li> +</ul> + +<p>Les lignes sont triées par la colonne "Self Bytes".</p> + +<p>Anisi dans l'exemple ci-dessus :</p> + +<ul> + <li>8904 échantillons ont été pris dans la fonction <code>signalLater()</code>, ce qui représente 28.57% du nombre total d'échantillons pris.</li> + <li>Ces échantillons ont alloué 1102888 octets, ce qui représente 30.01% de la taille totale de mémoire alloué par tous les échantillons.</li> +</ul> + +<p>À côté de chaque nom de fonction, se trouve une flèche de développement. Cliquer sur celle-ci affichera l'endroit d'où la fonction a été appelée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Ici, il est possible de voir que <code>signalLater()</code> a été appelée depuis deux endroits :<code> removeInner()</code> et <code>setSelectionInner()</code>. Il est ainsi possible de remonter l'arbre d'appel et de mieux comprendre le contexte de ces allocations.</p> + +<h3 id="Self_Cost_et_Total_Cost">Self Cost et Total Cost</h3> + +<ul> +</ul> + +<p>Les colonnes de coût sont séparées en "Self" et en "Total". La colonne "Self" correspond aux échantillons pris seulement dans cette fonction. La colonne "Total" correspond aux échantillons pris dans cette fonction ou dans les fonctions appelées par cette fonction. Au premier niveau, ces deux colones sont les mêmes, vu que la vue représente les dernières fonctions (il s'agit d'une vue inversée de l'arbre d'appel). Mais, si l'on remonte l'arbre en développant les lignes, alors la différence devient visible.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Ici, 8904 échantillons ont été pris dans <code>signalLater()</code>. Mais <code>signalLater()</code> a été appelé depuis deux endroits : <code>removeInner()</code> et <code>setSelectionInner()</code>. Mais ces deux fonctions ont 0 en Self Count, ce qui veut dire qu'aucune allocation n'a été faite depuis ces fonctions. Cependant<code> removeInner()</code> a 8901 en Total Count, tandis que <code>setSelectionInner()</code> a seulement 3 en Total Count. Cela révèle que sur les 8904 allocations faites dans <code>signalLater()</code>, toutes sauf trois proviennent de la branche <code>removeInner()</code>.</p> + +<h2 id="Allocations_et_garbage_collection">Allocations et garbage collection</h2> + +<p>Bien sûr, en savoir plus sur l'utilisation mémoire d'un site est très utile. Cependant la connexion principale entre la réactivité d'un site et le profil d'allocation réside dans le coût de la garbage collection (GC) (ramasse-miette).</p> + +<p>Dans un langage à ramasse miette comme JavaScript, le runtime a périodiquement besoin de parcourir la heap à la recherche d'objets qui ne sont plus <a href="/fr/docs/Tools/Memory/Dominators#Reachability">accessibles</a>, pour libérer l'espace mémoire qu'ils occupent. Lors du passage du ramasse-miette, le moteur JavaScript doit être mis en pause, le programme est donc suspendu et ne répondra pas.</p> + +<p>Pour réduire l'impact de ce phénomène sur la réactivité des sites, <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (le moteur JavaScript de Firefox) possède un ramasse-miette incrémental. Celui-ci procède par petites étapes, lassant le programme tourner entre chaque incrémentation. Quelques fois cependant le moteur a besoin de réaliser un passage complet non incrémental et le programme doit alors attendre la fin du nettoyage.</p> + +<p>Les passages du ramasse-miette sont affichés en rouge dans la vue <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>, et sont des véritables points noirs pour la réactivité, ils peuvent en effet prendre jusqu'a des centaines de millisecondes :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12399/allocations-view-long-gc.png" style="display: block; height: 160px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Que faire en cas de passage intempestif du ramasse-miette ? SpiderMonkey utilise un <a href="https://dxr.mozilla.org/mozilla-central/rev/584870f1cbc5d060a57e147ce249f736956e2b62/js/src/gc/GCRuntime.h#192">ensemble complexe d'heuristiques</a> pour déterminer quand et quel type de passage de ramasse-miette est nécessaire.</p> + +<p>En général, cependant :<em> "l'allocation pressure" - allouer beaucoup de mémoire ou allouer de la mémoire a haute fréquence - tend a augmenter la probabilité de SpiderMonkey à ordonner le passage du ramasse-miette, et tend également a faire plus de passages non incrémentaux.</em></p> + +<p>Si un passage du ramasse-miette a été causé par de "l'allocation pressure", alors le panneau droit du marqueur dans la vue Chronologie contient un lien nommé "Show allocation triggers". Cliquer sur celui-ci passe la vue en vue allocations et sélectionne la période de temps entre la fin du dernier passage du ramasse-miette et le début de celui qui a été cliqué. Cela révèle toute les allocations qui ont amené à déclencher ce passage du ramasse-miette :</p> + +<p>{{EmbedYouTube("tO5ovD9Jw4k")}}</p> + +<p>Si vous rencontrez ces problèmes, il est conseillé d'essayer de réduire la taille de vos allocations. Par exemple :</p> + +<ul> + <li>Est-il possible d'allouer de la mémoire en "<a href="https://en.wikipedia.org/wiki/Lazy_loading">lazy load</a>", lorsqu'elle est nécessaire plutôt que de l'allouer en avance ?</li> + <li>Si vous allouez de la mémoire dans une boucle, pouvez-vous réutiliser une seule allocation dans chaque itération ?</li> +</ul> diff --git a/files/fr/outils/performance/call_tree/index.html b/files/fr/outils/performance/call_tree/index.html new file mode 100644 index 0000000000..e8a3447894 --- /dev/null +++ b/files/fr/outils/performance/call_tree/index.html @@ -0,0 +1,122 @@ +--- +title: Arbre d'appels +slug: Outils/Performance/Call_Tree +translation_of: Tools/Performance/Call_Tree +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"> +<p>L'arbre d'appel permet de savoir dans quelles fonctions JavaScript le navigateur passe le plus de temps. En analysant ces résultats, il est possible de trouver les points noirs du code (les endroits ou le navigateur passe beaucoup trop de temps).</p> + +<p>Ces points noirs sont les endroits où les optimisations auront le plus grand impact.</p> +</div> + +<p>L'arbre d'appel est un profileur par échantillons. Il prend périodiquement des échantillons de l'état du moteur JavaScript, et enregistre la pile pour le code s'exécutant dans ce moment. Statistiquement, le nombre d'échantillons dans lequel on exécute une fonction en particulier correspond au temps que le navigateur passe à l'exécuter. Il est alors possible de trouver les points noirs de votre code.</p> + +<div class="note"> +<p>Cet article utilisera le résultat d'un programme simple comme exemple. Si vous voulez récupérer ce programme pour expérimenter l'outil vous-même, il est disponible <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/">ici</a>. Vous pouvez trouver le profil discuté dans cet article <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/profile/call-tree.json">ici</a> - importez juste le profil dans l'outil Performance pour pouvoir voir le profil utilisé dans cet article.</p> + +<p>Il y a une courte page décrivant la structure du programme disponible <a href="https://developer.mozilla.org/fr/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">ici</a>.</p> + +<p>Il est à noter que le même programme et le même profil est utilisé pour la page de documentation sur le <a href="/fr/docs/Tools/Performance/Flame_Chart">Flame Chart</a>.</p> +</div> + +<p>La capture d'écran ci-dessous montre les résultats d'un programme qui compare trois différents algorithmes de tri (tri à bulle, tri par sélection et tri rapide). Pour faire cela, il génère un nombre de tableaux remplis avec des int aléatoires et les tris avec chaque algorithme.</p> + +<p>Nous avons <a href="/fr/docs/Tools/Performance/UI_Tour#Zooming_in">zoomé</a> dans une partie de l'enregistrement qui montre un long marker JavaScript :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10981/perf-call-tree.png" style="display: block; height: 574px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>L'arbre d'appel présente les résultats dans un tableau. Chaque ligne représente une fonction dans laquelle au moins un échantillon a été pris, et les lignes sont classées par nombre d'échantillons pris dans la fonction.</p> + +<p><em>Échantillons</em> correspond au nombre d'échantillons pris lors de de l'exécution de la fonction. Cela inclu ses enfants (les autres fonctions appelées par cette fonction).</p> + +<p><em>Durée Totale </em>correspond est ce nombre, traduit en millisecondes, basées sur le temps total couvert par la portion sélectionnée de l'enregistrement. Ces deux nombres devraient être approximativement les même.</p> + +<p><em>Cout Total </em>correspond à ce nombre traduit en pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.</p> + +<p><em>Coût individuel</em> correspond au temps passé dans cette fonction en particulier, sans inclure ses enfants. Cela vient de la pille capturé lorsque cette fonction est la plus basse.</p> + +<p><em>Durée individuelle</em> est calculé depuis <em>Coût individuel </em>comme un pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.</p> + +<p>Dans la version actuelle de l'arbre d'appel, ce sont les colones les plus importantes. Les fonctions avec un <em>Cout individuel</em> important sont de bons candidats pour de l'optimisation, soit parce qu’elles prennent beaucoup de temps à s'exécuter, soit parce qu'elles sont appelées très souvent.</p> + +<p>Cette capture d'écran révèle ce que l'on savait déjà : <code>bubbleSort()</code> est un algorithme très inefficace. Il y a à peu près 6 fois plus d'échantillons dans <code>bubbleSort()</code> que de dans <code>selectionSort()</code>, et 13 fois plus dans que dans <code>quickSort()</code>.</p> + +<h2 id="Se_déplacer_dans_l'arbre_d'appel">Se déplacer dans l'arbre d'appel</h2> + +<p>A coté de chaque nom de fonction, se trouve une flèche d'expansion : cliquer sur celle-ci révèle le chemin allant de l'appel de la fonction jusqu'a la racine. Par exemple, il est possible d'étendre l'entrée pour <code>bubbleSort()</code> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10983/perf-call-tree-expanded-bubblesort.png" style="display: block; height: 512px; margin-left: auto; margin-right: auto; width: 1054px;"></p> + +<p>On peut donc voir que le graphique d'appel est comme ceci :</p> + +<pre>sortAll() + + -> sort() + + -> bubbleSort()</pre> + +<p>Notez également que le <em>Cout individuel </em>pour <code>sort()</code> est ici de 1.45%, et notez également que ce chiffre est le même pour une autre ligne de <code>sort()</code> plus tard dans la liste. Cela révèle que quelques échantillons ont été pris dans <code>sort()</code> elle-même plutôt que dans la fonction qu'elle appelle.</p> + +<p>Quelques fois, il y a plus d'un chemin menant à la même fonction. Essayons par exemple d'étendre la ligne de <code>swap()</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10985/perf-call-tree-expanded-sawp.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>Il y a 253 échantillons qui ont été pris à l'intérieur de<code> swap()</code>. Mais <code>swap()</code> a été accédé par deux chemins différents car <code>bubbleSort()</code> <code>et selectionSort()</code> l'utilisent tous deux. Il est également possible de voir que 252 des 253 échantillons ont été pris dans la branche <code>bubbleSort()</code>, et uniquement un dans la branche <code>selectionSort()</code>.</p> + +<p>Cela signifie que le tri à bulle est encore moins efficient que ce que l'on pensait ! La fonction coute 252 échantillons de plus, soit 10% de cout supplémentaire.</p> + +<p>Avec ce genre de recherche, il est possible de déduire le graphique d'appel complet, avec le nombre d'échantillons associés :</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<h2 id="Données_de_la_plateforme">Données de la plateforme</h2> + +<p>Vous pouvez également remarquer des lignes nommées <em>Gecko</em>, <em>Input & Events</em>, et ainsi de suite. Cela représente les appels internes au navigateur.</p> + +<p>Cela peut être utile comme informations. Par exemple si votre site donne beaucoup de travail au navigateur. Ces échantillons ne sont peut-être pas pris dans votre code, mais c'est quand même votre problème.</p> + +<p>Dans notre exemple, il y a 679 échantillons assignés à <em>Gecko </em>- le deuxième plus gros groupe après <code>bubbleSort()</code>. étendons donc cela :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10987/perf-call-tree-expanded-gecko.png" style="display: block; height: 478px; margin-left: auto; margin-right: auto; width: 1050px;"></p> + +<p>Cela révèle que 614 de ces échantillons, soit environ 20% du cout total, viennent de l'appel de <code>sort()</code>. Si nous regardons au code de la fonction, il devient évident que le cout élevé des données de plateforme viennent des appels répétés à <code>console.log()</code>:</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>Il serait certainement intéressant de considérer des façons plus efficientes d'implémenter cela.</p> + +<p>Une chose à garder en tête est que les périodes d'inactivité sont classifiées en tant que <em>Gecko</em>, donc les parties de votre profil où votre JavaScript ne tourne pas contribueront aux échantillons <em>Gecko</em>. Ces échantillons n'impactent pas la performance de votre site.</p> + +<div class="note"> +<p>Par défaut, l'arbre d'appel ne sépare par les données de plateforme dans des fonctions séparées, car elles ajoutent beaucoup de nuisance et ces détails ont peu de chances d'être utiles à des personnes ne travaillant sur le développement de Firefox. Si vous voulez cependant voir ces détails, il faut cocher l'option "Afficher les données de la plateforme Gecko" dans les <a href="/fr/docs/Tools/Performance/UI_Tour#Toolbar">options</a>.</p> +</div> + +<p> </p> + +<h2 id="Utiliser_un_arbre_inversé_(_Bottom-Up)">Utiliser un arbre inversé ( Bottom-Up)</h2> + +<p>Un arbre d'appel inversé, inverse l'ordre de toutes les piles, en mettant la fonction la plus loin dans l'arbre au début. La conséquence directe est que cette vue se focalise plus sur l'information <em>Durée Individuelle</em>. Cette vue est pratique pour trouver les points "chauds" du code.</p> + +<p>Pour afficher cette vue, cliquer sur l'icône en forme d'engrenage dans la partie droite et de cliquer sur <strong>L'arbre d'appel</strong>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16093/performance_menu_invert_call_tree.png" style="border-style: solid; border-width: 1px; display: block; height: 201px; margin: 0 auto; width: 492px;"></p> diff --git a/files/fr/outils/performance/examples/index.html b/files/fr/outils/performance/examples/index.html new file mode 100644 index 0000000000..e3ca28d9bd --- /dev/null +++ b/files/fr/outils/performance/examples/index.html @@ -0,0 +1,8 @@ +--- +title: Exemples +slug: Outils/Performance/Examples +translation_of: Tools/Performance/Examples +--- +<div>{{ToolsSidebar}}</div><p>Liste des pages de démos pour les scénarios de performances et walkthroughs.</p> + +<p>{{ ListSubpages ("/en-US/docs/Tools/Performance/Examples", 5) }}</p> diff --git a/files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html b/files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html new file mode 100644 index 0000000000..608691a9d5 --- /dev/null +++ b/files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html @@ -0,0 +1,71 @@ +--- +title: Comparaison des algorithmes de tri +slug: Outils/Performance/Examples/Sorting_algorithms_comparison +translation_of: Tools/Performance/Examples/Sorting_algorithms_comparison +--- +<div>{{ToolsSidebar}}</div><p>Ce articlé décrit un programe simple qui est utilisé dans deux des guides de l'outil Performance : le guide pour <a href="/fr/docs/Tools/Performance/Call_Tree">l'arbre d'appel</a> et le guide pour le <a href="/fr/docs/Tools/Performance/Flame_Chart">diagramme de flamme</a>.</p> + +<p>Ce programme compare les performances de trois algorithmes de tri différents :</p> + +<ul> + <li>le tri à bulles</li> + <li>le tri par sélection</li> + <li>le Ttri rapide</li> +</ul> + +<p>Ce programme est composé des fonctions suivantes :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong><code>sortAll()</code></strong></td> + <td>Fonction principale. génère itérativement (200 itérations) des tableaux aléatoires et appelle<code>sort()</code>.</td> + </tr> + <tr> + <td><strong><code>sort()</code></strong></td> + <td>Appelle les fonctions <code>bubbleSort()</code>, <code>selectionSort()</code>, et <code>quickSort()</code> tour à tour et affiche le résultat.</td> + </tr> + <tr> + <td><strong><code>bubbleSort()</code></strong></td> + <td>Implémente un tri à bulles, retourne le tableau trié</td> + </tr> + <tr> + <td><strong><code>selectionSort()</code></strong></td> + <td>Implémente un par sélection retourne le tableau trié</td> + </tr> + <tr> + <td><strong><code>quickSort()</code></strong></td> + <td>Implémente un tri rapide, retourne le tableau trié</td> + </tr> + <tr> + <td><code><strong>swap()</strong></code></td> + <td>fonction d'aide pour <code>bubbleSort()</code> et <code>selectionSort()</code>.</td> + </tr> + <tr> + <td><code><strong>partition()</strong></code></td> + <td>fonction d'aide pour <code>quickSort()</code>.</td> + </tr> + </tbody> +</table> + +<p>le graphique d'appel ressemble à ceci :</p> + +<pre>sortAll() // (génère un tableau aléatoire puis appelle sort) x 200 + + -> sort() // tri le tableau avec chaque tri et affiche le résultat + + -> bubbleSort() + + -> swap() + + -> selectionSort() + + -> swap() + + -> quickSort() + + -> partition()</pre> + +<p>Les implémentations des algorithmes de tri dans ce programme ont été tirées du dépôt <a href="https://github.com/nzakas/computer-science-in-javascript/">https://github.com/nzakas/computer-science-in-javascript/</a> et sont utilisées sous la licence MIT.</p> + +<p>Vous pouvez tester ce programme d'exemple <a href="https://mdn.github.io/performance-scenarios/js-call-tree-1/index.html">ici</a> et cloner le code <a href="https://github.com/mdn/performance-scenarios">ici</a> (soyez sûr de bien check out la branche gh-pages).</p> diff --git a/files/fr/outils/performance/flame_chart/index.html b/files/fr/outils/performance/flame_chart/index.html new file mode 100644 index 0000000000..0bcb285b4d --- /dev/null +++ b/files/fr/outils/performance/flame_chart/index.html @@ -0,0 +1,103 @@ +--- +title: Flame Chart +slug: Outils/Performance/Flame_Chart +translation_of: Tools/Performance/Flame_Chart +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>Le Flame Chart affiche l'état de la pile JavaScript de votre code à chaque milliseconde durant le profil de performance.</p> + +<p>Cela permet de savoir exactement quelle fonction s'est exécutée à un moment donné dans l’enregistrement, combien de temps elle a mis, et d'où elle a été appelée.</p> +</div> + +<p>L'Arbre d'appel et le Flame Chart sont tous deux utilisés pour analyser les performances du code JavaScript de pages web. Et ils utilisent tous deux les mêmes données : des échantillons de la pile du moteur JavaScript, pris périodiquement durant l'enregistrement.</p> + +<p>Cependant, tandis que le Call Tree organise ces données pour mettre en évidence les endroits où le code passe le plus de temps, de manière cohérente à travers tout l'enregistrement, le Flame Chart lui utilise ces données pour afficher où exactement dans l'enregistrement les fonctions s'exécutent. Essentiellement, il affiche l'état de la pile d'appel à n’importe quel point donné de l'enregistrement.</p> + +<p>Voici une capture d'écran montrant le Flame Chart pour une section d'un profil :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10989/perf-flame-chart-overview.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 1676px;"></p> + +<p>Tout d'abord, vous pouvez remarquer que dans le <a href="/fr/docs/Tools/Performance/UI_Tour#Recording_overview">panneau de vue globale de l'enregistrement</a>. Ici, une petite partie de l'enregistrement est sélectionné et affiché dans le Flame Chart. Le Flame Chart affiche beaucoup de données, donc pour obtenir des résultats pertinents, il est souvent nécessaire de zoomer.</p> + +<p>Dans la vue du Flame Chart, l'axe X représente le temps. La capture d'écran couvre la période de 1435ms à un peu plus de 1465ms. Sur l'axe Y, on trouve les fonctions de la pile d'appel à ce point dans le temps, avec le haut niveau en haut, et les fonctions filles en bas. Les fonctions ont un code couleur pour pouvoir les distinguer facilement.</p> + +<p>Cela fournit une façon de savoir à tout moment de l'enregistrement quelles fonctions sont exécutées, quand et pendant combien de temps, et également d'où elles ont été appelées.</p> + +<h2 id="Zoomer_et_faire_un_panoramique">Zoomer et faire un panoramique</h2> + +<p>Pour travailler efficacement avec le Flame Chart, il est nécessaire de pouvoir naviguer dedans. Il existe deux contrôles principaux pour naviguer dans le Flame Chart :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Zoom </strong>: Augmente/diminue la portion du profil sélectionné qui est affiché dans le Flame Chart</td> + <td> + <p>1) Souris : mollette vers le haut ou vers le bas dans le Flame Chart.</p> + + <p>2) Pavé tactile : deux doigts vers le haut ou vers le bas dans le Flame Chart.</p> + </td> + </tr> + <tr> + <td><strong>Déplacement </strong>: Déplace la portion du profil sélectionné qui est affiché dans le Flame Chart</td> + <td> + <p>1) Clic puis glissement de la partie sélectionnée dans le <a href="/fr/docs/Tools/Performance/UI_Tour#Recording_overview">panneau de la vue d'ensemble de l'enregistrement</a>.</p> + + <p>2) Clic puis glissement n'importe où dans le Flame Chart (attention, cliquer dans le panneau de vue d'ensemble à l’extérieur de la partie sélectionnée entraînera une nouvelle sélection)</p> + </td> + </tr> + </tbody> +</table> + +<p>{{EmbedYouTube("BzfkBRFucp8")}}</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Afin de voir comment le Flame Chart peut révéler le comportement d'un programme, nous utiliserons cet exemple simple. Nous utilisons le même programme dans la page de <a href="/fr/docs/Tools/Performance/Call_Tree">L'Arbre d'appel</a>. Il s'agit d'un programme qui compare trois algorithmes de tri différents. Il existe une <a href="/fr/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">page séparée</a> qui fournit une vue d'ensemble de la structure du programme.</p> + +<p>Nous utiliserons le même profil que celui utilisé sur la page de l'Arbre d'appel. Le graphique d'appel et le nombre d'échantillons associé ressemblent à ceci :</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<p>Tout d'abord, sélectionnons toute la partie durant laquelle le programme était actif :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10991/perf-flame-chart-zoomed-out.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>L'appel<code>sortAll()</code>, tout en haut et coloré en mauve court du début du programme à la fin. En dessous, on trouve en couleur olive les appels que cette fonction fait à <code>sort()</code>. Encore en dessous, comme les dents d'une scie, on trouve les appels à chacun des algorithmes de tri.</p> + +<p>Zoomons un peu :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10993/perf-flame-chart-zoom-1.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>Cette partie dure à peu près 140ms, et montre plus de détails sur les fonctions appelées par <code>sort()</code>. Le code de <code>sort()</code> est celui-ci :</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>Les boites intitulées "bubb..." et colorées en vert olive sont vraisemblablement des <code>bubbleSort()</code>. Les boites colorées en vert sont vraisemblablement les autres fonctions de tri. Même au premier regard, il parait évident que les boites du tri à bulle sont bien plus grosses (et donc durent plus longtemps) que les autres.</p> + +<p>Nous pouvons également voir quelques fonctions appelées par <code>bubbleSort()</code>, en violet.</p> + +<p>Zoomons une deuxième fois :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10995/perf-flame-chart-zoom-2.png" style="display: block; height: 348px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>Cette partie dure environ 20ms. Nous pouvons voir que les boites violettes en dessous de <code>bubbleSort()</code> sont les appels à <code>swap()</code>. Si voulions tous les compter, l'Arbre d'appel nous dirait facilement qu'il en existe 253 (le nombre d'échantillons pris dans cette fonction) . Tous les échantillons dans cette portion sont en dessous de <code>bubbleSort()</code>, mais l'on peut voir dans l'arbre d'appel que le profil contient un appel dans <code>selectionSort()</code>.</p> + +<p>Nous pouvons également voir que deux des boites vertes correspondent à <code>selectionSort()</code> et <code>quickSort()</code>, mais que les autres boites vertes correspondent à des appels à la plate-forme Gecko. Il est très probable qu'il s’agisse des <code>console.log()</code> dans <code>sort()</code>.</p> diff --git a/files/fr/outils/performance/frame_rate/index.html b/files/fr/outils/performance/frame_rate/index.html new file mode 100644 index 0000000000..3f4c5016f0 --- /dev/null +++ b/files/fr/outils/performance/frame_rate/index.html @@ -0,0 +1,58 @@ +--- +title: Frame rate +slug: Outils/Performance/Frame_rate +translation_of: Tools/Performance/Frame_rate +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>Le Frame rate est une unité de mesure de la réactivité des sites web en frames par seconde (fps). Un frame rate faible ou extrêmement variable peut donner l'impression qu'un site ne répond pas ou est de mauvaise qualité. Cela donne une mauvaise expérience utilisateur.</p> + +<p><strong>Un frame rate de 60fps est la cible idéale pour des performances fluides, cela donne un budget temps de 16.7ms pour effectuer tous les changements en réponse à un évènement.</strong></p> + +<p>Le graphique du frame rate dans l'outil Performance affiche le frame rate au cours de l'enregistrement. Cela donne une indication rapide d'où se situent les problèmes dans le site analysé, et permet d'utiliser d'autres outils pour une analyse plus approfondie.</p> +</div> + +<h2 id="Frame_rate_et_réactivité">Frame rate et réactivité</h2> + +<p>Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.</p> + +<p>Dans le domaine de la performance web, une frame englobe tout le travail que doit faire le navigateur afin de mettre à jour et de repeindre l'écran. Le frame rate est évidemment applicable aux animations : si le frame rate est trop bas, une animation aura l'air saccadée, alors qu'avec un frame rate élevée, elle sera fluide. Mais le frame rate est également utile en temps qu'indicateur de performance générale de la réactivité d'un site web lorsqu’un utilisateur interagit avec.</p> + +<p>Par exemple, si déplacer la souris au-dessus d'un élément de la page active du code JavaScript qui change l'apparence de l'élément et déclenche ainsi un reflow et un repaint, alors tout le travail doit être complété dans la même frame. Si l'opération prend trop de temps au navigateur, alors celui-ci apparaitra momentanément non réactif.</p> + +<p>Similairement, si faire défiler une page implique un grand nombre de mises à jour complexes et que le navigateur ne peut alors pas garder un frame rate décent, alors le navigateur sera saccadé et sera occasionnellement bloqué (freeze).</p> + +<p>En général, un frame rate constant et élevé rendra les interactions de l'utilisateur plus agréables.</p> + +<div class="note"> +<p>Un frame rate de 60fps est reconnu comme le saint Graal de la performance. Cela donne un budget temps de 16.7ms pour toutes les opérations à effectuer dans une frame.</p> + +<p>Cependant, la constance est très importante, surtout si le frame rate ne peut pas être de 60fps. Il est recommandé d'avoir un frame rate moins élevé, mais plus constant afin d’éviter des différences de réactivité brusques.</p> +</div> + +<h2 id="Graphique_du_Frame_rate">Graphique du Frame rate</h2> + +<p>Le graphique du frame rate se trouve dans la <a href="/fr/docs/Tools/Performance/UI_Tour#Recording_overview">vue d'ensemble de l'enregistrement</a> de l'outil Performance. Il prend un simple timestamp lorsque le navigateur finit une frame, et l'utilise pour connaitre le frame rate tout au long de l'enregistrement.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">L'axe X est le temps dans le profil. Il y a trois annotations : le frame rate maximum, le frame rate minimum, et le frame rate moyen.</p> + +<h2 id="Utiliser_le_graphique_du_frame_rate">Utiliser le graphique du frame rate</h2> + +<p>Le principal intérêt de ce graphique est que tout comme la <a href="/fr/docs/Tools/Web_Console">Console web</a>, il donne une indication rapide d'ou le site peut avoir des problèmes et permet une analyse plus approfondie par d'autres outils. Voici par exemple une capture d'écran d'un profil de performance :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Il est possible de voir que le frame rate moyen est raisonnable, mais qu'il existe cependant trois endroits où le frame rate s'effondre pendant 10 millisecondes. Cela causera certainement un freeze considérable dans les animations de la page.</p> + +<p>Le graphique du frame rate est en relation avec la <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble de la Chronologie</a> et celle-ci est affichée directement au-dessus. Il est donc possible de voir que les chutes correspondent aux barres orange qui dénotent le temps passé à exécuter du JavaScript.</p> + +<p>Sélectioner une partie de l'enregistrement contenant une chute permet de zoomer sur cette partie. La vue principale de la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> en dessous affiche alors les informations de cette portion uniquement. Il est alors possible de trouver le coupable :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Il y a ici une fonction JavaScript exécutée à la suite d'un évènement de clic qui bloque le processus principal pendant 170 millisecondes.</p> + +<p>Pour savoir de quelle fonction il s'agit exactement, il faut passer au <a href="/fr/docs/Tools/Performance/Flame_Chart">Flame Chart (Graphique JS)</a> pour voir la pile d'appels à ce moment donné :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>La fonction coupable est <code>doPointlessComputations()</code>, et est définie dans "main.js". Pour régler ce problème, il est possible de séparer cette fonction en plusieurs parties et d'exécuter ces parties dans <code><a href="/fr/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code>, ou bien même d'exécuter la fonction dans un <a href="/fr/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a>. L'article <a href="/fr/docs/Tools/Performance/Scenarios/Intensive_JavaScript">JavaScript intensif</a> expose des stratégies pour résoudre ce genre de problèmes.</p> diff --git a/files/fr/outils/performance/how_to/index.html b/files/fr/outils/performance/how_to/index.html new file mode 100644 index 0000000000..f7cd86402f --- /dev/null +++ b/files/fr/outils/performance/how_to/index.html @@ -0,0 +1,63 @@ +--- +title: Comment faire ? +slug: Outils/Performance/How_to +translation_of: Tools/Performance/How_to +--- +<div>{{ToolsSidebar}}</div><h2 id="Ouvrir_l'outil_Performance">Ouvrir l'outil Performance</h2> + +<p>Pour ouvrir l'outil Performance, il existe plusieurs possibilités :</p> + +<ul> + <li>Utiliser le raccourci clavier Maj + F5.</li> + <li>Selectioner "Performances" depuis le menu "Développement" présent dans le menu de Firefox (ou du menu outils sous OS X).</li> + <li>Ouvrir la <a href="/fr/docs/Outils/Outils_boite_%C3%A0_outils">boite à outils</a> (F12).</li> + <li>Sélectionner l’icône de l'outil depuis la barre d'outils si vous en avez une :<img alt="" src="https://m311pxdn.mozillademos.org/files/10997/devtools-button.png" style="height: 76px; width: 728px;"></li> +</ul> + +<h2 id="Enregistrer_un_profil">Enregistrer un profil</h2> + +<p>Pour commencer un nouvel enregistrement, il faut presser sur le bouton en forme de chronomètre dans le panneau des enregistrements. Pour arrêter l'enregistrement, il suffit d'appuyer à nouveau sur le bouton :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13230/perf-record.png" style="display: block; height: 346px; margin-left: auto; margin-right: auto; width: 744px;"></p> + +<p>Il est également possible de démarrer et d'arrêter un enregistrement depuis la Console Web, en utilisant <code><a href="/fr/docs/Web/API/Console/profile">console.profile()</a></code> et <code><a href="/fr/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code>.</p> + +<h2 id="Sauvegarder_un_profil">Sauvegarder un profil</h2> + +<p>Pour sauvegarder un profil, il faut cliquer sur le lien "Enregistrer" dans le tableau des enregistrements :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13232/perf-save.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Charger_un_profil">Charger un profil</h2> + +<p>Pour charger un profil, il suffit de cliquer sur "Importer..." et sélectionner le fichier :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13226/perf-load.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Effacer_tous_les_profils_chargés">Effacer tous les profils chargés</h2> + +<p>Pour effacer tous les profils chargés, il faut cliquer sur "Effacer".</p> + +<div class="note"> +<p>Attention, cette action entrainera la perte de tout profil non sauvegardé</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13224/perf-clear.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Sélectioner_un_outil">Sélectioner un outil</h2> + +<p>Les outils <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>, <a href="/fr/docs/Tools/Performance/Call_Tree">Arbre d'appel</a>, et <a href="/fr/docs/Tools/Performance/Flame_Chart">Flame Chart (Graphique JS)</a> proposent chacun une méthode de visualisation différente. Pour passer de l'une à l'autre, il faut utiliser leurs boutons associés :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13234/perf-select.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Configurer_les_données_affichées">Configurer les données affichées</h2> + +<p>Pour contrôler quels types de données sont affichées dans la chronologie, il faut utiliser ce bouton :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13228/perf-markers.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Zoomer">Zoomer</h2> + +<p>Pour zoomer sur une partie de l'enregistrement, il faut sélectionner cette partie dans la vue d'ensemble :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13236/perf-zoom.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> diff --git a/files/fr/outils/performance/index.html b/files/fr/outils/performance/index.html new file mode 100644 index 0000000000..503820e30f --- /dev/null +++ b/files/fr/outils/performance/index.html @@ -0,0 +1,94 @@ +--- +title: Performance +slug: Outils/Performance +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div> + +<p>L'outil Performance donne un aperçu de : la réactivité générale du site, la performance de son code JavaScript et de la performance du layout (disposition). Cet outil permet de réaliser un enregistrement (appelé profil) d'un site sur une période donnée. L'outil montre alors une <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble</a> des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du <a href="/fr/docs/Tools/Performance/Frame_rate">frame rate</a> lors du profil est également affiché.</p> + +<p>Il existe quatre sous-outils pour examiner les différents aspects du profil en détail :</p> + +<ul> + <li>La <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> révèle les différentes opérations que le navigateur fait, par exemple l'exécution de JavaScript ou de layout, les repaints ou bien même la garbage collection</li> + <li><a href="/fr/docs/Tools/Performance/Call_Tree">L'Arbre d'appels</a> met en évidence les fonctions JavaScripts dans lesquels le navigateur passe le plus de temps.</li> + <li>Le <a href="/fr/docs/Tools/Performance/Flame_Chart">Graphique JS (Flame Chart)</a> montre la pile d'appels JavaScript durant l'enregistrement.</li> + <li>La vue <a href="/fr/docs/Tools/Performance/Allocations">Allocations</a> affiche les allocations faites par le code tout au long de l'enregistrement. Cette vue n'apparait que si vous avez coché l'option « Enregistrer les allocations » dans les outils de développement.</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Débuter">Débuter</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Performance/UI_Tour">UI Tour</a></dt> + <dd> + <p>Une visite guidée rapide pour s'y retrouver dans l'interface.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Performance/How_to">Comment faire ?</a></dt> + <dd>Tutoriels pour les tâches de base : ouverture de l'outil, création, sauvegarde, chargement et configuration des enregistrements.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Composants_de_l'outil_Performance">Composants de l'outil Performance</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Performance/Frame_rate">Frame rate</a></dt> + <dd>Comprendre la réactivité générale des sites.</dd> + <dt><a href="/fr/docs/Tools/Performance/Call_Tree">Arbre d'appel</a></dt> + <dd>Trouver les points noirs dans le code JavaScript d'un site.</dd> + <dt><a href="/fr/docs/Tools/Performance/Allocations">Allocations</a></dt> + <dd>Afficher les allocations faites par le code tout au long de l'enregistrement.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a></dt> + <dd>Comprendre les opérations que fait le navigateur pendant que l'utilisateur interagit avec un site.</dd> + <dt><a href="/fr/docs/Tools/Performance/Flame_Chart">Graphique JS</a></dt> + <dd>Voir quelles fonctions JavaScript s'exécutent et quand elles s'exécutent pendant toute la durée de l'enregistrement.</dd> + <dd></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Scenarios">Scenarios</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animer des propriétés CSS</a></dt> + <dd>Utiliser l'arbre d'appel pour comprendre comme le navigateur met à jour une page, et comment différentes animations de propriétés CSS peuvent impacter la performance.</dd> + <dd></dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/fr/docs/Tools/Performance/Scenarios/Intensive_JavaScript">JavaScript intensif</a></dt> + <dd>Utiliser le frame rate et l'arbre d'appel pour mettre en évidence les problèmes causés par du JavaScript à longue exécution et comment l'utilisation des workers peut aider à résoudre cette situation..</dd> +</dl> +</div> +</div> + + + +<div class="column-half"> +<dl> + <dd></dd> +</dl> +</div> diff --git a/files/fr/outils/performance/scenarios/animating_css_properties/index.html b/files/fr/outils/performance/scenarios/animating_css_properties/index.html new file mode 100644 index 0000000000..b2767f6b32 --- /dev/null +++ b/files/fr/outils/performance/scenarios/animating_css_properties/index.html @@ -0,0 +1,154 @@ +--- +title: Animer des propriétés CSS +slug: Outils/Performance/Scenarios/Animating_CSS_properties +translation_of: Tools/Performance/Scenarios/Animating_CSS_properties +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"> +<p>Le cout en performance des animations CSS peuvent varier d'une propriété à une autre, et animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (<a href="/fr/docs/Glossary/Jank">jank</a>) tandis que le navigateur se débat pour obtenir un frame rate fluide.</p> + +<p>Le <a href="/fr/docs/Tools/Performance/Frame_rate">Frame rate</a> et la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> peuvent fournir des renseignements sur les opérations que fait le navigateur lors d'une animation CSS, dans le but d'aider à diagnostiquer les problèmes de performances.</p> +</div> + +<p>Avec les <a href="/fr/docs/Web/Guide/CSS/Using_CSS_animations">animations CSS</a>, il est possible de spécifier un nombre <a href="/fr/docs/Web/CSS/@keyframes">keyframes</a>, chacune de celle-ci utilisent du CSS pour définir l'apparence d'un élément à un moment donné de l'animation. Le navigateur crée l'animation comme étant une transition d'une keyframe à une autre.</p> + +<p>Comparées à l'animation via JavaScript, les animations CSS peuvent être plus faciles à créer. Elles peuvent également donner de meilleures performances, car elles donnent plus de contrôle au navigateur pour afficher les frames au bon moment et les supprimer si nécessaire.</p> + +<p>Cependant, le cout en performances de la modification des propriétés CSS varient d'une propriété à une autre. Animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (<a href="/fr/docs/Glossary/Jank">jank</a>) tandis que le navigateur se débat pour obtenir un frame rate fluide.</p> + +<h2 id="La_chronologie_du_rendu_CSS">La chronologie du rendu CSS</h2> + +<p>Le processus que le navigateur utilise pour mettre à jour la page lorsqu'une propriété CSS a changé peut être décrit comme une chronologie consistant des étapes suivantes :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10821/css-rendering-waterfall.png" style="display: block; height: 203px; margin-left: auto; margin-right: auto; width: 546px;"></p> + +<ol> + <li><strong>Recalculate Style (recalculer le style) </strong>: à chaque fois qu'une propriété CSS d'un élément change, le navigateur doit recalculer les styles calculés.</li> + <li><strong>Layout (disposition) </strong>: ensuite, le navigateur utilise les styles calculés pour trouver la position et la géométrie des éléments. Cette opération est appelée "layout" mais peut être également appelée "reflow".</li> + <li><strong>Paint</strong> (affichage) : enfin, le navigateur doit repeindre les éléments à l'écran. Une dernière étape qui n'est pas montrée dans cette séquence : la page peut être séparée en calques qui sont affichés indépendamment, puis combinés dans un processus appelé "Composition".</li> +</ol> + +<p>Cette séquence doit tenir dans une seule frame, vu que l'écran n'est pas mis à jour avant sa complétion. Il est généralement accepté que 60 frames par secondes est le frame rate auquel les animations apparaitront fluides. Un frame rate de 60 frames par secondes (fps) donne au navigateur 16.7 millisecondes pour exécuter entièrement cette séquence.</p> + +<h2 id="Cout_des_propriétés_CSS">Cout des propriétés CSS</h2> + +<p>Lors de l'exécution de la chronologie du rendu CSS, certaines propriétés sont plus couteuses que d'autres :</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Nom de la propriété</th> + <th scope="col">Cout</th> + <th scope="col">Exemples</th> + </tr> + </thead> + <tbody> + <tr> + <td>Les propriétés qui impactent la forme d'un élément ou sa position déclenchent une recalculation du style, une disposition, et un repaint.</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10825/layout.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td> + <td> + <p><code><a href="/fr/docs/Web/CSS/left">left</a></code><br> + <code><a href="/fr/docs/Web/CSS/max-width">max-width</a></code><br> + <code><a href="/fr/docs/Web/CSS/border-width">border-width</a></code><br> + <code><a href="/fr/docs/Web/CSS/margin-left">margin-left</a></code><br> + <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code></p> + </td> + </tr> + <tr> + <td> + <p>Les propriétés qui n'impactent pas la forme d'un élément ou sa position, mais qui ne sont pas dans leur propre calque, ne déclenchent pas de disposition (layout)</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td> + <td> + <p><code><a href="/fr/docs/Web/CSS/color">color</a></code></p> + </td> + </tr> + <tr> + <td>Les propriétés dans leur propre calque ne déclenchent même pas un repaint, car la mise à jour est gérée dans la composition.</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10839/paint-faint.png" style="height: 26px; width: 123px;"></td> + <td><code><a href="/fr/docs/Web/CSS/transform">transform</a></code><br> + <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Le site web <a href="http://csstriggers.com/">CSS Triggers</a> affiche le cout pour chacune des propriétés CSS. Cela n'est valable que pour les navigateurs WebKit, mais la plupart des couts seront les mêmes dans tous les navigateurs récents.</p> +</div> + +<h2 id="Example_margin_contre_transform">Example : <code>margin </code>contre <code>transform</code></h2> + +<p>Dans cette section, la façon dont la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> peut mettre en évidence la différence entre une animation utilisant <code><a href="/fr/docs/Web/CSS/margin">margin</a></code> et une utilisant <code><a href="/fr/docs/Web/CSS/transform">transform </a></code>serra démontrée.</p> + +<p>L'intention de ce scénario n'est pas de convaincre que l'animation en utilisant <code>margin</code> est forcement une mauvaise idée. Mais plutôt de démontrer comment les outils de développement peuvent donner une idée du travail qu'effectue le navigateur pour afficher un site web, et comment utiliser ces renseignements pour régler les problèmes de performance..</p> + +<p>Si vous voulez expérimenter en même temps, le site de la démo est disponible <a href="http://mdn.github.io/performance-scenarios/animation-transform-margin/index.html">ici</a>. Il ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11029/css-animations-demo.png" style="display: block; height: 677px; margin-left: auto; margin-right: auto; width: 1000px;">Le site comporte deux boutons : un pour démarrer/arrêter l'animation, et un groupe pour sélectionner le type d'animation.</p> + +<p>Il y a quelques éléments, et ceux-ci ont les propriétés CSS <code><a href="/fr/docs/Web/CSS/linear-gradient">linear-gradient</a></code> et <code><a href="/fr/docs/Web/CSS/box-shadow">box-shadow</a></code>, car elles sont relativement couteuses.</p> + +<p>Il existe également une version vidéo de cette démo.</p> + +<p>{{EmbedYouTube("Tvu6_j8Qzfk")}}</p> + +<h3 id="Animer_en_utilisant_margin">Animer en utilisant margin</h3> + +<p>Il faut laisser l'option "Use margin" sélectionnée, puis lancer l'animation. Il faut ensuite ouvrir l'outil Performances (maj+F5) et faire un enregistrement, seulement quelques secondes sont nécessaires.</p> + +<p>En ouvrant l'enregistrement, ce que vous verrez dépend grandement de votre machine et de la charge du système, mais cela devrait ressembler à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10853/margin-recording.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Cette capture d'écran montre trois vues distinctes : une vue d'ensemble de la chronologie, le frame rate, et les détails de la frise chronologique.</p> + +<h4 id="Vue_densemble_de_la_chronologie">Vue d'ensemble de la chronologie</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10857/margin-timeline-overview.png" style="display: block; height: 58px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Il s'agit d'une représentation compressée de la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>. La prédominance du vert révèle que <a href="/fr/docs/Tools/Performance/Timeline#timeline-color-coding">la page passe beaucoup de temps à peindre.</a>.</p> + +<h4 id="Frame_rate">Frame rate</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10859/margin-frame-rate.png" style="display: block; height: 64px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Cette partie montre le <a href="/fr/docs/Tools/Performance/Frame_rate">frame rate</a>. Le frame rate moyen est de 46.67fps, bien en dessous de la cible de 60fps. Pire, le frame rate n'est pas du tout constant, avec un nombre conséquent de décentes dans les 20fps. Il est donc peu probable que l'animation soit fluide, surtout si une interaction utilisateur est ajoutée.</p> + +<h4 id="Chronologie">Chronologie</h4> + +<p>Le reste de l'enregistrement montre la vue de la chronologie. En faisant défiler un peu, on trouve le pattern suivant :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10861/margin-timeline.png" style="display: block; height: 532px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Cela représente la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#The_CSS_rendering_waterfall">chronologie du rendu</a>. À chaque frame de l'animation, les styles de chaque élément sont recalculés, puis composés en une seule disposition, et enfin le repaint a lieu.</p> + +<p>Il est facile de voir que le paint prend beaucoup de performance ici. Dans la capture d'écran ci-dessus, une opération paint est mise en surbrillance. La partie sur la droite révèle que cette opération prend 13.11ms. Avec seulement 16.7ms de budget temps par frame, il n'est pas surprenant d'avoir un frame rate si bas.</p> + +<p>Vous pouvez expérimenter avec l'exemple : essayez d'enlever la propriété <code>box-shadow</code> en utilisant <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">l'Inspecteur</a>, et regardez comment cela affecte le temps que prend paint. Par la suite, nous verrons comment utiliser <code><a href="/fr/docs/Web/CSS/transform">transform</a></code> au lieu de <code><a href="/fr/docs/Web/CSS/margin">margin</a></code> élimine complètement ces paint couteux.</p> + +<h3 id="Animer_en_utilisant_transform">Animer en utilisant transform</h3> + +<p>En cliquant sélectionnant l'option "Use transform", et en effectuant un nouvel enregistrement, on obtient quelque chose ressemblant à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10863/transform-recording.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h4 id="Vue_densemble_de_la_chronologie_2">Vue d'ensemble de la chronologie</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10869/transform-timeline-overview.png" style="display: block; height: 57px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>En comparaison avec la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview"> version utilisant margin</a>, on remarque beaucoup moins de vert et beaucoup plus de rose, ce qui peut être <a href="/fr/docs/Tools/Performance/Waterfall#timeline-color-coding">soit du positionnement soit de la recalculation de style.</a></p> + +<h4 id="Frame_rate_2">Frame rate</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10865/transform-frame-rate.png" style="display: block; height: 62px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>En comparaison avec la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview"> version utilisant margin</a>, cela semble bien mieux. Le frame rate moyen est quasiment à 60fps et le frame rate est quasiment constant.</p> + +<h4 id="Chronologie_2">Chronologie</h4> + +<p>La frise chronologique montre la raison pour laquelle le frame rate s'est amélioré. The timeline view shows the reason for the improved frame rate. Contrairement à la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview"> version utilisant margin</a> aucun temps n'est dépensé dans la disposition ou dans paint :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10867/transform-timeline.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Dans ce cas-là, utiliser <code>transform</code> a considérablement amélioré la performance du site, et l'outil de performance permet de voir comment et pourquoi.</p> diff --git a/files/fr/outils/performance/scenarios/index.html b/files/fr/outils/performance/scenarios/index.html new file mode 100644 index 0000000000..1b5969c1ff --- /dev/null +++ b/files/fr/outils/performance/scenarios/index.html @@ -0,0 +1,8 @@ +--- +title: Scénarios +slug: Outils/Performance/Scenarios +tags: + - NeedsContent +translation_of: Tools/Performance/Scenarios +--- +<div>{{ToolsSidebar}}</div><p>Scénarios de performances</p> diff --git a/files/fr/outils/performance/scenarios/intensive_javascript/index.html b/files/fr/outils/performance/scenarios/intensive_javascript/index.html new file mode 100644 index 0000000000..9d9a2291de --- /dev/null +++ b/files/fr/outils/performance/scenarios/intensive_javascript/index.html @@ -0,0 +1,231 @@ +--- +title: Intensive JavaScript +slug: Outils/Performance/Scenarios/Intensive_JavaScript +translation_of: Tools/Performance/Scenarios/Intensive_JavaScript +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>Par défaut, le navigateur n'utilise qu'un seul thread pour exécuter tout le JavaScript d'une page et pour effectuer les layout, reflows et garbage collections. Cela signifie que les fonctions JavaScript qui mettent trop de temps à s'exécuter peuvent bloquer le thread, empêchant ainsi à la page de répondre et donnant alors une mauvaise expérience utilisateur.</p> + +<p>Il est possible d'utiliser les outils <a href="/fr/docs/Tools/Performance/Frame_rate">Frame rate</a> et <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> pour repérer le code JavaScript qui cause des problèmes de performances, et pour mettre en évidence les fonctions qui demandent une attention particulière.</p> + +<p>Dans cet article, nous prendrons un exemple d'un site où le JavaScript cause des problèmes de réactivité, et nous utiliserons deux approches différentes pour résoudre ce problème. La première approche est de fractionner les fonctions trop gourmandes en plusieurs morceaux et d'utiliser <code><a href="/fr/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code> pour planifier l'exécution de chaque morceau. La seconde approche est d'exécuter la fonction en entier dans un thread séparé en utilisant un <a href="/fr/docs/Web/API/Web_Workers_API/Using_web_workers">web worker</a>.</p> +</div> + +<p>Si vous souhaitez expérimenter par vous même tout en lisant, le site web de démonstration est disponible <a class="external external-icon" href="http://mdn.github.io/performance-scenarios/js-worker/index.html">ici</a>.</p> + +<p>Il existe également une version vidéo de cet article :</p> + +<p>{{EmbedYouTube("Pcc6jQX6JDI")}}</p> + +<p>Le site de démonstration ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11031/js-worker-demo.png" style="display: block; height: 677px; margin-left: auto; margin-right: auto; width: 1000px;">Il y trois contrôles :</p> + +<ul> + <li>un bouton de sélection qui permet de contrôler comment exécuter le JavaScript : soit d'un seul bloc dans le thread principal, soit en plusieurs parties avec <code>requestAnimationFrame()</code>, soit en utilisant un thread séparé grâce à un worker.</li> + <li>Un bouton nommé "Do pointless computations!" (faire des calculs inutiles) pour exécuter le JavaScript.</li> + <li>Un bouton pour démarrer et arrêter des animations CSS. Cela donne au navigateur des tâches de fond à exécuter.</li> +</ul> + +<p>Afin de voir le problème de cette page, il faut laisser le bouton de sélection sur "Use blocking call in main thread" (appel de fonction bloquant dans le thread principal), puis faire un enregistrement. Pour ce faire, il faut réaliser les étapes suivantes :</p> + +<ul> + <li>Presser le bouton "Start animations"</li> + <li>Démarrer l'enregistrement d'un profil</li> + <li>Presser le bouton "Do pointless computations!" deux ou trois fois</li> + <li>Arreter l'enregistrement du profil</li> +</ul> + +<p>Le résultat sera différent d'une machine à l'autre, mais globalement il devrait ressembler à ceci :</p> + +<p><a id="js-blocking-overview" name="js-blocking-overview"><img alt="" src="https://mdn.mozillademos.org/files/10891/perf-js-blocking-overview.png" style="display: block; height: 113px; margin-left: auto; margin-right: auto; width: 800px;"></a></p> + +<p>La partie haute est la <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble de la chronologie</a>. Cela donne une vue compressée de la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>, qui affiche quels types d'opérations le navigateur effectue durant l'enregistrement. La partie rose indique que le navigateur effectue principalement des <a href="/fr/docs/Tools/Performance/Waterfall#Markers">calculs CSS et potentiellement des reflows</a>: il s'agit des animations CSS qui s'exécutent tout au long du profil. Il y a également des gros blocs orange, représentant l'exécution de JavaScript, il y a un bloc par appui de bouton "Do pointless computations!".</p> + +<p>La partie basse qui est relation avec le résumé de la frise chronologique, montre le <a href="/fr/docs/Tools/Performance/Frame_rate">frame rate</a>. Celui-ci est bon pendant la plus grande partie de l'enregistrement, mais s'effondre complètement à chaque appui de bouton.</p> + +<p>Il est possible de sélectionner une de ces périodes afin d'obtenir des informations plus précises dans la vue principale de la chronologie :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10895/perf-js-blocking-waterfall.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Ici, lorsque le bouton est pressé, le navigateur a exécuté une fonction JavaScript, ou une série de fonctions qui ont bloqué le thread principal pendant 71.73ms, soit plus de trois fois le budget de temps pour une frame (1000ms/60frames = 16.67ms par frame).</p> + +<p>Mais quelle est cette fonction qui prend tant de temps ? En passant à la vue du <a href="/fr/docs/Tools/Performance/Flame_Chart">Flame Chart</a> (Graphique JS), il est possible de le découvrir :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10893/perf-js-blocking-flame-chart.png" style="display: block; height: 230px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Cela révèle la pile d'appels JavaScript à cet instant de l'exécution. Sur le haut de la pile, on trouve une fonction nommée <code>calculatePrimes()</code>, le nom du fichier dans laquelle elle est contenue ainsi que le numéro de ligne à laquelle elle se trouve est également affiché. Le code incriminé est le suivant :</p> + +<pre class="brush: js">const iterations = 50; +const multiplier = 1000000000; + +function calculatePrimes(iterations, multiplier) { + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + return primes; +} + +function doPointlessComputationsWithBlocking() { + var primes = calculatePrimes(iterations, multiplier); + pointlessComputationsButton.disabled = false; + console.log(primes); +} +</pre> + +<p>Il s'agit tout simplement d'un test (mal optimisé) de nombre primaire réalisé 50 fois, pour des nombres assez grands.</p> + +<h2 id="Utilisation_de_requestAnimationFrame">Utilisation de requestAnimationFrame</h2> + +<p>La première manière de régler ce problème de performance consiste à fractionner la fonction en plusieurs parties plus restreintes, et de planifier l'exécution de chacune avec <code><a href="/fr/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>.</p> + +<p><code>requestAnimationFrame()</code> ordonne au navigateur d'effectuer une fonction à chaque frame, juste avant qu'il effectue un repaint. Tant que les chaque fonction est raisonnablement courte, le navigateur devrait être capable de de ne pas dépasser le budget temps idéal.</p> + +<p>Il est assez facile de fractionner <code>calculatePrimes()</code>: Il suffit de calculer la primarité de chaque nombre dans une fonction séparée :</p> + +<pre class="brush: js">function doPointlessComputationsWithRequestAnimationFrame() { + + function testCandidate(index) { + // finishing condition + if (index == iterations) { + console.log(primes); + pointlessComputationsButton.disabled = false; + return; + } + // test this number + var candidate = index * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + // schedule the next + var testFunction = testCandidate.bind(this, index + 1); + window.requestAnimationFrame(testFunction); + } + + var primes = []; + var testFunction = testCandidate.bind(this, 0); + window.requestAnimationFrame(testFunction); +}</pre> + +<p>Il est maintenant temps de tester cette version. Pour cela on répète les étapes précédentes. Cette fois par contre, l'enregistrement devrait ressembler à ceci :</p> + +<p><a id="js-raf-overview" name="js-raf-overview"><img alt="" src="https://mdn.mozillademos.org/files/10897/perf-js-raf-overview.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 800px;"></a></p> + +<p>Au lieu <a href="#js-blocking-overview">d'un seul bloc organe continu</a>, chaque pression de bouton révèle une longue séquence de courts blocs orange. Ces blocs sont tous espacés d'une frame, et chacun représente une des fonctions appelées par <code>requestAnimationFrame()</code>. Il est à noter qu'il n'y a eu que deux pressions de bouton dans ce profil.</p> + +<p>Ces appels de fonction sont en parallèle aux blocs roses des animations CSS, et chaque fonction est assez courte pour que le navigateur puisse l'exécuter sans faire baisser le frame rate.</p> + +<p>Utiliser <code>requestAnimationFrame</code> pour résoudre le problème de réactivité a fonctionné ici. Cependant, il existe quelques problèmes potentiels à cette solution :</p> + +<ul> + <li>Il peut être difficile de fractionner des longues fonctions. Même cet exemple simple a rendu nécessaire l'écriture de code plus complexe.</li> + <li>La version fractionnée prend beaucoup plus de temps à s'exécuter. En fait il est possible d'être assez précis sur le temps utilisé : il y a 50 itérations, et le navigateur tourne à 60 frames par secondes. Cela prendra donc presque une seconde d'exécuter tous les calculs, et cela à des répercussions sur l'expérience utilisateur et sur le profil.</li> +</ul> + +<h2 id="Utilisation_des_web_workers">Utilisation des web workers</h2> + +<p>Cette solution tente de régler le problème en utilisant un web worker. Les web workers permettent d'exécuter du JavaScript dans un thread séparé. Le thread principal et le thread du worker ne peuvent pas s'appeler directement, mais peuvent cependant communiquer via une API de messagerie asynchrone.</p> + +<p>Le code du thread principal doit ressembler à ceci :</p> + +<pre class="brush: js">const iterations = 50; +const multiplier = 1000000000; + +var worker = new Worker("js/calculate.js"); + +function doPointlessComputationsInWorker() { + + function handleWorkerCompletion(message) { + if (message.data.command == "done") { + pointlessComputationsButton.disabled = false; + console.log(message.data.primes); + worker.removeEventListener("message", handleWorkerCompletion); + } + } + + worker.addEventListener("message", handleWorkerCompletion, false); + + worker.postMessage({ + "multiplier": multiplier, + "iterations": iterations + }); +}</pre> + +<p>La différence avec le code original est que l'on a besoin de :</p> + +<ul> + <li>Créer un worker.</li> + <li>Lui envoyer un message lorsque l'on est pretr à calculer.</li> + <li>Être à l'écoute d'un message nommé "done", qui indique quand le worker est finni.</li> +</ul> + +<p>Un fichier "calculate.js", est également nécessaire, son code est le suivant :</p> + +<pre class="brush: js">self.addEventListener("message", go); + +function go(message) { + var iterations = message.data.iterations; + var multiplier = message.data.multiplier; + primes = calculatePrimes(iterations, multiplier); + + self.postMessage({ + "command":"done", + "primes": primes + }); +} + +function calculatePrimes(iterations, multiplier) { + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + return primes; +}</pre> + +<p>Dans le worker, il est nécessaire d'être à l'écoute d'un message donnant l'ordre de démarrer. Il est également nécessaire d'envoyer un message "done" lorsque les calculs sont finis. La partie du code qui réalise les calculs elle n'a pas changé.</p> + +<p>Comment s'en tire cette version ? Pour le savoir, il suffit de sélectionner "Use a worker", et de capturer un nouveau profil. Il devrait ressembler à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10899/perf-js-worker-overview.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Dans ce profil, le bouton a été pressé trois fois. <a href="#js-blocking-overview">Comparé à l'original</a>, chaque pression de bouton est visible dans le résumé sous la forme de deux blocs orange très courts :</p> + +<ul> + <li>La fonction <code>doPointlessComputationsInWorker()</code> qui gère l'évènement de clic et lance le worker</li> + <li>La fonction <code>handleWorkerCompletion()</code> qui s'exécute lorsque le worker appelle "donne".</li> +</ul> + +<p>Entre ces deux blocs, le worker effectue ses opérations, et n'a aucun effet visible sur le frame rate et donc sur la réactivité du thread principal. Cela peut sembler étrange, mais puisque le worker s'exécute dans thread séparé, l'ordinateur peut profiter de l'architecture multi coeurs, ce qu'un site web à thread unique ne peut pas faire.</p> + +<p>La limitation principale des webs workers est que le code qui s'exécute dans un worker n'a pas accès à l'API DOM.</p> diff --git a/files/fr/outils/performance/ui_tour/index.html b/files/fr/outils/performance/ui_tour/index.html new file mode 100644 index 0000000000..b364f3029b --- /dev/null +++ b/files/fr/outils/performance/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: UI Tour +slug: Outils/Performance/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>La plateforme d'outils se découpe en 4 parties principales :<img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p> + +<ul> + <li><a href="/en-US/docs/">La barre d'outils</a></li> + <li>La zone d'enregistrement</li> + <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">Recording overview</a></li> + <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>, which may contain any one of: + <ul> + <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li> + </ul> + </li> +</ul> + +<h2 id="Outil">Outil</h2> + +<p>La boite à outils contient les boutons pour :</p> + +<ul> + <li>commencer et arrêter l'enregistrement</li> + <li>importer les enregistrements de vos sauvegardes précédentes</li> + <li>nettoyer le volet d'enregistrements. <em>à noter que si vous faîtes cela, vous perdrez tout ce que vous n'avez pas sauvegardé.L.</em></li> + <li>filtrer les <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">markers</a> qui sont affichés dans la vue Cascade</li> + <li>switch the active tool in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>.</li> + <li>accéder au menu des paramètres</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10915/perf-toolbar-annotated.png" style="display: block; height: 191px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="Recordings_pane">Recordings pane</h2> + +<p>The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p> + +<p>Pour un temps donné, un enregistrement est sélectionné, et cet enregistrement est affiché dans le reste de l'outil. Pour sélectionner un enregistrement différent, cliquer sur son entrée dans le panneau. Pour sauvegarder l'enregistrement en tant que fichier d'extension JSON, appuyer sur "Save".</p> + +<h2 id="Vue_d'ensemble_de_l'enregistrement">Vue d'ensemble de l'enregistrement</h2> + +<p>Ceci affiche une vue d'ensemble de la totalité de l'enregistrement.This displays an overview of the entire recording, with the x-axis representing time.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>It contains two elements: an overview of the Waterfall and a frame rate graph.</p> + +<h3 id="Waterfall_overview">Waterfall overview</h3> + +<p>This presents a compressed view of the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Recorded operations are color-coded using <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">the same scheme as in the main Waterfall view</a>.</p> + +<h3 id="Frame_rate_graph">Frame rate graph</h3> + +<p>The frame rate gives you an overview of the browser's responsiveness during the recording:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>See the separate article on <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a>.</p> + +<h3 id="Correlating_events">Correlating events</h3> + +<p>Because these elements are synchronized, you can correlate events in one element with events in another.</p> + +<p>For example, in the screenshot below a long-running paint operation (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">shown as a green bar</a> in the waterfall overview) corresponds to a drop in the frame rate:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h3 id="Zooming_in">Zooming in</h3> + +<p>You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h2 id="Details_pane">Details pane</h2> + +<p>The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>.</p> + +<h3 id="Waterfall">Waterfall</h3> + +<p>The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>To learn much more about the Waterfall, see the separate <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> page.</p> + +<h3 id="Call_Tree">Call Tree</h3> + +<p>The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br> + To learn much more about the Call Tree, see the separate <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page.</p> + +<h3 id="Flame_Chart">Flame Chart</h3> + +<p>If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>To learn much more about the Flame Chart, see the separate <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> page.</p> + +<h3 id="Allocations">Allocations</h3> + +<div class="geckoVersionNote"> +<p>La vue Allocations est une des nouvautés de Firefox 46.</p> +</div> + +<p>La vue Allocations ressemble à la vue Call tree view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<p>To learn much more about the Allocations view, see the separate <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Allocations</a> page.</p> diff --git a/files/fr/outils/performance/waterfall/index.html b/files/fr/outils/performance/waterfall/index.html new file mode 100644 index 0000000000..cf30f9a81d --- /dev/null +++ b/files/fr/outils/performance/waterfall/index.html @@ -0,0 +1,481 @@ +--- +title: Chronologie +slug: Outils/Performance/Waterfall +translation_of: Tools/Performance/Waterfall +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"> +<p>La chronologie vous donne des indications sur les opérations qu'effectue le navigateur lorsqu'il fait tourner une page web ou une application. Cet outil se base sur l'idée que les opérations qu'effectue un navigateur peuvent être divisées en plusieurs types : exécution du JavaScript, mise à jour du layout, et ainsi de suite... Ainsi que l'idée qu'à n'importe quel point donné dans le temps, le navigateur effectue l'une ou l'autre de ces actions.</p> + +<p>Donc, si vous voyez un problème de performance - une chute du frame rate par exemple - vous pouvez utiliser la chronologie pour voir ce que le navigateur faisait à ce moment de l'enregistrement.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>L'axe X représente le temps. Les opérations enregistrées, appelées marqueurs sont affichées sous la forme de barres de couleur horizontales. Ces marqueurs sont disposés en cascade pour refléter le caractère séquentiel de l'exécution du navigateur.</p> + +<p>Lorsqu'un marqueur est sélectionné, des informations supplémentaires sur celui-ci s'affichent dans le panneau de droite. Ces informations intègrent la durée du marqueur et quelques informations spécifiques de son <a href="/fr/docs/Tools/Performance/Waterfall#Marqueurs">type</a>.</p> + +<h2 id="Marqueurs"><a id="timeline-color-coding" name="timeline-color-coding"></a>Marqueurs</h2> + +<p>Les marqueurs possèdent un code couleur et un libellé. Les opérations suivantes sont enregistrées :</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 20%;">Nom et description</th> + <th scope="col">Couleur</th> + <th scope="col">Informations détaillées</th> + </tr> + </thead> + <tbody> + <tr> + <td style="width: 40%;"> + <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>Évènements DOM</strong></a></p> + + <p>Le code JavaScript qui est exécuté en réponse à un évènement DOM.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td style="width: 45%;"> + <dl> + <dt>Type de l'évènement</dt> + <dd>Par exemple, "click" ou "message".</dd> + </dl> + + <dl> + <dt>Phase de l'évènement</dt> + <dd>Par exemple "Target" ou "Capture".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p>Les fonctions JavaScript exécutées dans la page ont le libellé de la raison pour laquelle la fonction a été appelée :</p> + + <p><strong>Script Tag<br> + setInterval<br> + setTimeout<br> + requestAnimationFrame<br> + Promise Callback<br> + Promise Init<br> + Worker<br> + JavaScript URI<br> + Event Handler</strong></p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Pile</dt> + <dd>La pile d'appels avec des liens vers les fonctions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Parse HTML</strong></p> + + <p>Le temps passé à parser le HTML de la page.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Pile</dt> + <dd>La pile d'appels avec des liens vers les fonctions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Parse XML</strong></p> + + <p>Le temps passé à parser le XML de la page.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Pile</dt> + <dd>La pile d'appels avec des liens vers les fonctions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Recalcul des styles</strong></p> + + <p>Le calcul des styles qui s'appliquent aux éléments de la page.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Causes du recalcul</dt> + <dd>Une chaine de caractères indiquant quel type de recalcul est nécessaire. Elle peut prendre les valeurs suivantes :<br> + Self<br> + Subtree<br> + LaterSiblings<br> + CSSTransitions<br> + CSSAnimations<br> + SVGAttrAnimations<br> + StyleAttribute<br> + StyleAttribute_Animations<br> + Force<br> + ForceDescendants</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Layout</strong></p> + + <p>Le calcul des positions et de la taille des éléments de la page. Cette opération est parfois appelée "reflow".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Paint</strong></p> + + <p>Affichage des pixels à l'écran</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Ramasse-miettes</strong></p> + + <p><a href="/fr/docs/Tools/Performance/Waterfall#Garbage_collection">évènement de garbage collection</a>. Les évènements GC non incrémentaux sont nommés "non incrémentiel".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Raison</dt> + <dd>Une chaine de caractères indiquant la raison pour laquelle le ramasse-miettes a été effectué.</dd> + <dt>Raison du cycle non incrémentiel</dt> + <dd>Si l'évènement n'était pas incrémentiel, une chaine expliquant pourquoi la GC a été effectuée.</dd> + <dt> </dt> + <dd> + <div class="geckoVersionNote"> + <p>Nouveau dans Firefox 46: Si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement.</p> + + <p>Voir <a href="/fr/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations et Ramasse-miettes</a> pour plus d'informations.</p> + </div> + </dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Cycle Collection</strong></p> + + <p>Récupération des structures de données C++ qui sont en <a href="https://en.wikipedia.org/wiki/Reference_counting">"reference-count"</a></p> + + <p>Semblable au ramasse-miette, mais pour les objets C++. Voir <a href="http://blog.kylehuey.com/post/27564411715/cycle-collection">l'article de blog de Kyle Huey sur le cycle collection</a>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt><strong>Type</strong></dt> + <dd>Toujours "Collect"</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Réduction d'arbre de ramasse-miettes</strong></p> + + <p>Préparation/préoptimisation pour le Cycle Collection.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td><span style="display: none;"> </span> + <p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><strong>Type</strong></p> + <span style="display: none;"> </span> + + <dl> + <dd>Toujours "ForgetSkippable".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Console</strong></p> + + <p>La période entre les appels à <code>console.time()</code> et <code>console.timeEnd()</code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Nom du timer</dt> + <dd>L'argument passé aux fonctions <code>console</code>.</dd> + <dt>Pile au début</dt> + <dd>La pile d'appels <code>à console.time()</code>, avec des liens vers les fonctions.</dd> + <dt>Pile de fin</dt> + <dd>(Nouveau dans Firefox 41). La pile d'appels <code>console.timeEnd()</code>. S'il s'agit d'un appel dans un callback de <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, cela montrera également la <a href="/fr/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Timestamp</strong></p> + + <p>Un appel unique à <code><a href="/fr/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Label</dt> + <dd>L'argument passé à <code>timeStamp()</code>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>DOMContentLoaded</strong></p> + + <p>L'évènement <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> du document</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Load</strong></p> + + <p>L'évènement <code><a href="/en-US/docs/Web/Events/load">load</a></code> du document.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Évènement dans le thread principal du worker</strong></p> + + <p>Affiché lorsque le thread principal envoie un message à un worker, ou reçoit un message d'un worker.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td> + <td> + <p>Un parmi :</p> + + <dl> + <dt>Sérialisation des données sur le thread principal</dt> + <dd>Le thread principal sérialise un message pour l'envoyer au worker</dd> + <dt>Déserialisation des données sur le thread principal</dt> + <dd>Le thread principal désérialise un message pour l'envoyer au worker</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Worker event in worker thread</strong></p> + + <p>Affiché lorsque le worker envoie un message à un worker, ou reçoit un message du thread principal.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td> + <td> + <p>Un parmi :</p> + + <dl> + <dt>Serialisation des données dans le Worker</dt> + <dd>Le worker sérialise un message pour l'envoyer au thread principal</dd> + <dt>Déserialisation des données dans le Worker</dt> + <dd>Le worker désérialise un message pour l'envoyer au thread principal</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>Les marqueurs et leurs couleurs sont les mêmes dans la chronologie que dans la <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble de la chronologie</a>.</p> + +<h3 id="Filtrer_les_marqueurs">Filtrer les marqueurs</h3> + +<p>Il est possible de contrôler quels marqueurs sont affichés en utilisant le bouton dans la <a href="/fr/docs/Tools/Performance/UI_Tour#Toolbar">barre d'outils </a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Motifs_de_la_chronologie">Motifs de la chronologie</h2> + +<p>Le contenu de l´enregistrement dépend énormément des opérations réalisées par le site : Les sites utilisant beaucoup de JavaScript auront un profil à dominance orange, alors que les sites à contenu visuel dynamique auront beaucoup de violet et de vert. Cependant certains motifs communs peuvent vous indiquer de possibles problèmes de performance.</p> + +<h3 id="Chronologie_de_rendu">Chronologie de rendu</h3> + +<p>Le motif suivant est très courant dans la vue de la chronologie :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p> + +<p>C'est une visualisation de l´algorithme de base qu'utilise le navigateur pour mettre à jour la page en réponse à un évènement :</p> + +<ol> + <li><strong>JavaScript Function Call</strong>: Un évènement quelconque - par exemple un évènement DOM - a pour effet de lancer du JavaScript. Le code change du DOM ou du CSSOM.</li> + <li><strong>Recalculate Style</strong>: Si le navigateur pense que des styles calculés de la page ont changé, il les recalcule.</li> + <li><strong>Layout</strong>: Puis, le navigateur utilise les styles calculés pour déterminer la position et la géométrie des éléments. Cette opération est étiquetée "layout", mais on l'appelle aussi « reflow ».</li> + <li><strong>Paint</strong>: Enfin, le navigateur a besoin de réafficher les éléments à l'écran. Une dernière étape n'est pas représentée dans cette séquence: La page peut être divisée en couches, qui sont affichées indépendamment puis assemblées lors d'un processus appelé "Composition".</li> +</ol> + +<p>Cette séquence doit se terminer en une seule image, puisque l'écran n'est pas mis à jour avant qu'elle soit terminée. Il est communément admis que 60 images/secondes est la vitesse à laquelle les animations apparaîtront fluides. Pour un taux de 60 images/secondes, cela laisse au navigateur 16,7 millisecondes pour exécuter le flow complet.</p> + +<p>Il est important pour la réactivité à ce que le navigateur n´ait pas à passer par toutes ces étapes à chaque fois :</p> + +<ul> + <li><a href="/fr/docs/Web/Guide/CSS/Using_CSS_animations">Les animations CSS</a> mettent à jour la page sans avoir besoin d'exécuter du JavaScript.</li> + <li>Toutes les propriétés CSS modifiées ne causent pas de « reflow ». Modifier des propriétés qui changent la position ou la géométrie d'un objet, telles que <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/display">display</a></code>, <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, ou <code><a href="/fr/docs/Web/CSS/top">top</a></code>, provoqueront un « reflow ». Par contre, modifier des propriétés qui ne changent par la géométrie ou le positionnement, telles que <code><a href="/fr/docs/Web/CSS/color">color</a></code> ou <code><a href="/fr/docs/Web/CSS/opacity">opacity</a></code>, n'en feront rien.</li> + <li>Toutes les propriétés CSS modifiées n'amènent pas à un repaint. En particulier, si vous animez un élément en utilisant la propriété <code><a href="/fr/docs/Web/CSS/transform">transform</a></code>, le navigateur utilisera une couche séparée pour l'élément transformé, et n'aura peut-être même pas à faire un repaint si l'élément est déplacé : Sa nouvelle position est traitée dans la composition.</li> +</ul> + +<p>L'article <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animer des propriétés CSS </a>montre qu'animer différentes propriétés CSS peut donner des résultats de performance différents, et comment la chronologie peut aider à le voir.</p> + +<h3 id="JavaScript_bloquant">JavaScript bloquant</h3> + +<p>Par défaut, le JavaScript des pages web est exécuté sur le même thread que celui que le navigateur utilise pour les mises à jour de layout, les repaints, les évènements DOM et ainsi de suite. Cela signifie que des fonctions JavaScript qui mettent longtemps à s´exécuter peuvent causer des ralentissements (jank). Les animations ne seront pas fluides et le site pourra même freezer.</p> + +<p>En utilisant l'outil frame rate et la « chronologie », il est facile de voir lorsque des fonctions JavaScript posent problème. Dans la capture d´écran ci-dessous, un zoom a été fait sur une fonction JS qui cause une chute du frame rate :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p> + +<p>L'article <a href="/fr/docs/Tools/Performance/Scenarios/Intensive_JavaScript">JavaScript Intensif</a> montre comment la « chronologie » peut mettre en évidence les problèmes de réactivité causés par des fonctions JavaScript trop gourmandes, et comment utiliser des méthodes asynchrones pour garder le thread principal réactif.</p> + +<h3 id="«_Décorations_»_coûteuses">« Décorations » coûteuses</h3> + +<p>Certains effets tels que <code><a href="/fr/docs/Web/CSS/box-shadow">box-shadow</a></code>, peuvent être coûteux ; surtout lors de transitions où le navigateur doit recalculer cet effet à chaque image. Si vous remarquez des chutes de frame rate surtout lors d'opérations et transitions graphiques couteuses, recherchez les longs marqueurs verts (repaint) dans la chronologie.</p> + +<h3 id="Ramasse-miettes_(Garbage_Collection)">Ramasse-miettes (Garbage Collection)</h3> + +<p>Les marqueurs rouges dans la chronologie représentent le passage du ramasse-miettes (GC), pour lequel <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (le moteur JavaScript de Firefox) parcourt la pile à la recherche d´éléments en mémoire qui ne sont plus accessible pour les libérer. La GC est un indice de performance, car lorsqu’elle « tourne », le moteur JavaScript doit être en pause et donc le programme est mis en pause et ne répondra pas.</p> + +<p>Pour aider à réduire la durée de ces pauses, SpiderMonkey implémente une <em>GC</em> morcelée. Cela signifie qu´il peut faire de la garbage collection par petites « passes », permettant au programme de tourner entre celles-ci. Parfois, le moteur à besoin de réaliser une garbage collection complète et non par morceaux et alors, le programme a besoin d'attendre la fin de cette opération.</p> + +<p>Pour essayer d’éviter les évènements GC et surtout les passages complets, il est sage de ne pas essayer d'optimiser pour l'implémentation spécifique du moteur JavaScript. SpiderMonkey utilise un ensemble complexe <span class="tag_lemma"><span class="dictTerm">d'heuristiques pour déterminer quand la GC est nécessaire, et quand une GC non incrémentale en particulier est nécessaire. En général cependant :</span></span></p> + +<ul> + <li>La GC est nécessaire lorsque beaucoup de mémoire est allouée.</li> + <li>La GC complète est généralement nécessaire lorsque le taux d'allocation mémoire est assez haut pour que SpiderMonkey puisse être à court de mémoire durant une GC morcelée.</li> +</ul> + +<p>Lorsque la Chronologie enregistre un marqueur GC, cela indique :</p> + +<ul> + <li>Si le ramasse-miettes passait de manière morcelée ou pas.</li> + <li>La raison de l'événement GC qui a eu lieu.</li> + <li>Si la passe du ramasse-miettes était complète, et la raison pour laquelle elle l'était.</li> + <li>Depuis de Firefox 46, si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement. Voir <a href="/fr/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations et Ramasse-miettes</a> pour plus d'informations.</li> +</ul> + +<h2 id="Ajouter_des_marqueurs_avec_la_console_API">Ajouter des marqueurs avec la console API</h2> + +<p>Deux marqueurs peuvent être contrôlés par des appels à la <a href="/fr/docs/Web/API/Console">console API</a> : "Console" et "Timestamp".</p> + +<h3 id="Marqueurs_de_console">Marqueurs de console</h3> + +<p>Ces marqueurs permettent de marquer une section spécifique de l'enregistrement.</p> + +<p>Pour faire un marqueur console, il faut appeler<code> console.time()</code> au début d'une section, et <code>console.timeEnd()</code> à la fin. Ces fonctions prennent un argument qui est le nom de la section.</p> + +<p>Par exemple si nous avons un code comme ceci :</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + + console.timeEnd("calculating..."); + + return primes; +}</pre> + +<p>La sortie de la Chronologie ressemblera à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p>Le marqueur est nommé par l'argument passé à <code>console.time()</code>, et lorsque le marqueur est sélectionné, il est possible de voir la pile du programme dans l'encadré sur le coté droit.</p> + +<h4 id="Tache_Async">Tache Async</h4> + +<p class="geckoVersionNote">Nouveau dans Firefox 41.</p> + +<p>À partir de Firefox 41, l'encadré de droite affichera également la stack à la fin de la période. C´est à dire au moment où <code>console.timeEnd()</code> a été appelé. Si <code>console.timeEnd()</code> a été appelé par la résolution d'une <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, l'encadré affichera également le label "(Async: Promise)", sous lequel sera affiché la "async stack" : Il s'agit de la pile d'appels au moment où la promise a été faite.</p> + +<p>Par exemple, avec ce code :</p> + +<pre class="brush: js">var timerButton = document.getElementById("timer"); +timerButton.addEventListener("click", handleClick, false); + +function handleClick() { + console.time("timer"); + runTimer(1000).then(timerFinished); +} + +function timerFinished() { + console.timeEnd("timer"); + console.log("ready!"); +} + +function runTimer(t) { + return new Promise(function(resolve) { + setTimeout(resolve, t); + }); +}</pre> + +<p>La Chronologie affichera un marqueur pour la période entre <code>time()</code> et <code>timeEnd()</code>, et s’il est sélectionné, la pile async apparaitra dans l'encadré :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p> + +<h3 id="Marqueurs_de_temps">Marqueurs de temps</h3> + +<p>Les Timestamps permettent de marquer un instant dans l'enregistrement.</p> + +<p>Pour faire un timestamp, il faut appeler <code><a href="/fr/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>. Il est possible de passer un argument pour nommer le timestamp.</p> + +<p>Par exemple, supposons que nous adaptions le code au-dessus pour faire un timestamp toutes les 10 itérations de la boucle ayant pour nom le nombre de l'itération :</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + + if (i % 10 == 0) { + console.timeStamp(i.toString()); + } + + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + console.timeEnd("calculating..."); + return primes; +}</pre> + +<p>Dans la Chronologie, vous verrez quelque chose comme ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p> diff --git a/files/fr/outils/pipette_à_couleur/index.html b/files/fr/outils/pipette_à_couleur/index.html new file mode 100644 index 0000000000..090cf16ce1 --- /dev/null +++ b/files/fr/outils/pipette_à_couleur/index.html @@ -0,0 +1,47 @@ +--- +title: Pipette à couleur +slug: Outils/Pipette_à_couleur +tags: + - Firefox + - Tools + - 'Web Development:Tools' +translation_of: Tools/Eyedropper +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>La pipette à couleur est unes des nouvautées de Firefox 31.</p> +</div> + +<p>La pipette à couleur vous permet de sélectionner des couleurs dans la page courante. Cela marche comme une loupe au-dessus de la page, vous permettant de sélectionner au pixel près. En dessous de la loupe, le code couleur du pixel courant est affiché sous le format choisi dans <a href="/fr/docs/Tools/Settings#Inspector">Options > Inspecteur</a> > Unité par défaut pour les couleurs :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;">Vous pouvez l'utiliser de deux manières :</p> + +<ul> + <li>pour sélectionner une couleur depuis la page et la copier dans le presse-papier</li> + <li>pour changer une couleur dans l'inspecteur web vers une couleur que vous avez sélectionnée dans la page</li> +</ul> + +<h2 id="Copier_une_couleur_dans_le_presse-papier">Copier une couleur dans le presse-papier</h2> + +<p>Ouvrez la pipette d'une des deux manières suivantes :</p> + +<ul> + <li>Sélectionnez "Pipette" dans le menu "Développement web"</li> + <li>Cliquez sur le bouton pipette dans la <a href="/fr/docs/Tools_Toolbox#Toolbar">Barre d'outils de la boîte à outils</a></li> +</ul> + +<p>En même temps que vous bougez votre curseur sur la page, vous voyez la couleur associée dans la pipette. Cliquez pour copier le code couleur dans le presse-papier.</p> + +<p>{{EmbedYouTube("xf2uk6UyRB8")}}</p> + +<h2 id="Changer_la_valeur_d'une_couleur_dans_la_colonne_vue.">Changer la valeur d'une couleur dans la colonne vue.</h2> + +<p>Les valeurs des couleurs qui apparaissent dans la partie Règle de l'Inspecteur ont un échantillon de la couleur à côté d'elles : cliquer sur l'échantillon fait apparaître <a href="/fr/docs/Tools/Page_Inspector#Color_picker">une fenêtre de sélection de couleurs</a>. Depuis Firefox 31, cette fenêtre contient aussi une petite pipette : cliquer sur l'icône active la Pipette.</p> + +<p>Maintenant, lorsque vous cliquez sur la Pipette, la couleur dans la colonne Règle a pour valeur la couleur que vous avez choisie.</p> + +<p><br> + {{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<h2 id="Raccourcis_clavier">Raccourcis clavier</h2> + +<p>{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "Pipette") }}</p> diff --git a/files/fr/outils/raccourcis_claviers/index.html b/files/fr/outils/raccourcis_claviers/index.html new file mode 100644 index 0000000000..0861359c77 --- /dev/null +++ b/files/fr/outils/raccourcis_claviers/index.html @@ -0,0 +1,1134 @@ +--- +title: Raccourcis claviers +slug: Outils/Raccourcis_claviers +tags: + - Tools +translation_of: Tools/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>Cette page liste tous les raccourcis clavier utilisés par les outils de développement intégrés à Firefox.</p> + +<p>La première section liste les raccourcis utilisés pour ouvrir chaque outil. La deuxième section liste les raccourcis concernant la boîte à outils. Chaque section suivante concernera un outil et ses raccourcis dédiés.</p> + +<p>Les raccourcis d'accessibilité, dépendants de la locale, ne sont pas documentés sur cette page.</p> + +<h2 id="Ouvrir_et_fermer_les_outils">Ouvrir et fermer les outils</h2> + +<p>Ces raccourcis fonctionnent dans la fenêtre principale du navigateur et permettent d'ouvrir un outil donné. Pour les outils situés dans la boîte à outils, ils permettent aussi de fermer l'outil si celui-ci est déjà ouvert. Pour les outils qui s'ouvrent dans une nouvelle fenêtre (tels que la console), vous devrez fermer la fenêtre pour fermer l'outil.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Avant Firefox 66, la combinaison <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>S</kbd> sur Windows et Linux ou <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas.</p> +</div> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Boîte à outils (s'ouvre sur le dernier outil utilisé)</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Mettre la Boîte à outils au premier plan (si la boite est ouverte dans une autre fenêtre qui n'est pas au premier plan)</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Fermer la Boîte à outils (si la boite est ouverte dans une fenêtre séparée et est au premier plan)</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Console Web<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Inspecteur</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Éditeur de style</th> + <td><kbd>Maj</kbd> + <kbd>F7</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F7</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Maj</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Profileur</th> + <td><kbd>Maj</kbd> + <kbd>F5</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Maj</kbd> + <kbd>F5</kbd></td> + </tr> + <tr> + <th scope="row">Réseau <a href="https://developer.mozilla.org/fr/docs/Outils/Raccourcis_claviers$edit#opening-closing-network-monitor-note"><strong><sup>2</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Barre de développement (afficher/masquer)</th> + <td><kbd>Maj</kbd> + <kbd>F2</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F2</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Maj</kbd> + <kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Vue adaptative (afficher/masquer)</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>M</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>M</kbd></td> + </tr> + <tr> + <th scope="row">Console du navigateur<a href="#opening-closing-browser-console-note"><sup>3</sup></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Boite à outils du navigateur</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Maj</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Ardoise JavaScript</th> + <td><kbd>Maj</kbd> + <kbd>F4</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F4</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">WebIDE</th> + <td><kbd>Maj</kbd> + <kbd>F8</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F8</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Inspecteur de Stockage <a href="#disabled-tools-shortcut"><sup>4</sup></a></th> + <td><kbd>Maj</kbd> + <kbd>F9</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F9</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F9</kbd></td> + </tr> + </tbody> +</table> + +<p id="opening-closing-web-console-note">1. Contrairement aux autres outils de la boîte à outils, ce raccourci ne ferme pas également la console. Pour la console, cela passe le focus sur la ligne de commande de la console. Pour fermer la console, utilisez le raccourci global de la boîte à outils de <kbd>Ctrl + Maj + I</kbd> (<kbd>Cmd + Opt + I</kbd> sur Mac).</p> + +<p>2. Avant Firefox 55 le raccourci était <kbd>Ctrl + Maj + Q</kbd> (<kbd>Cmd + Opt + Q</kbd> sur Mac).</p> + +<p id="opening-closing-browser-console-note">3. Avant Firefox 38, quand la console du navigateur était cachée par une fenêtre de Firefox, le raccourci clavier fermait la console. Depuis Firefox 38, ce raccourci clavier met la console au premier plan.</p> + +<p id="disabled-tools-shortcut">4. L'outil est désactivé par défaut. Le raccourci ne fonctionnera pas tant que l'outil n'aura pas été activé dans le panneau des Options des outils.</p> + +<h2 id="Outils_de_développement">Outils de développement</h2> + +<div id="toolbox-shortcuts"> +<p>Ces raccourcis fonctionnent quand les outils sont ouverts, quel que soit l'outil sélectionné.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Faire défiler les outils de gauche à droite</th> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>]</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + </tr> + <tr> + <th scope="row">Faire défiler les outils de droite à gauche</th> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>[</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + </tr> + <tr> + <th scope="row">Alterner entre l'outil ouvert et les options</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Alterner entre l'outil ouvert et les options (depuis Firefox 43)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">Alterner entre les deux derniers <a href="/fr/docs/Tools/Tools_Toolbox#Docking_mode">modes d'ancrages</a> (depuis Firefox 41)</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Activer la console scindée (sauf si l'outil sélectionné est la Console)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="all-toolbox-tools"> +<p>Ces raccourcis fonctionnent pour tous les outils dans la boîte à outils.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Augmenter la taille de la police</th> + <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>+</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td> + </tr> + <tr> + <th scope="row">Diminuer la taille de la police</th> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>-</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + </tr> + <tr> + <th scope="row">Réinitialiser la taille de la police</th> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>0</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Éditeur_de_code_source">Éditeur de code source</h2> + +<div id="source-editor"> +<p>Cette liste présente les raccourcis par défaut pour l'éditeur de code source.</p> + +<p>Dans les <a href="/fr/docs/Tools/Settings#Editor_Preferences">options de l'éditeur</a>, vous pouvez choisir d'utiliser les raccourcis Vim, Emacs, ou Sublime Text.</p> + +<p>Pour les sélectionner, rendez-vous dans <code>about:config</code>, sélectionnez le paramètre <code>devtools.editor.keymap</code> et lui affecter la valeur « vim », « emacs », ou « sublime ». Ainsi, les commandes sélectionnées seront utilisées pour tous les outils de développement qui utilisent l'éditeur de source. Il vous faudra réouvrir l'éditeur pour que ce changement soit pris en compte.</p> + +<p>A partir de Firefox 33, cette option est directement disponible dans la section des <a href="/fr/docs/Tools/Settings#Editor_Preferences">préférences de l'éditeur</a> dans le panneau « Options des outils » (plutôt que de passer par <code>about:config</code>).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Aller à la ligne</th> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Chercher dans le document</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Chercher à nouveau</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">Tout sélectionner</th> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Couper</th> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>X</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + </tr> + <tr> + <th scope="row">Copier</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Coller</th> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Annuler</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Rétablir</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Indenter</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Désindenter</th> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Déplacer la/les ligne(s) vers le haut</th> + <td><kbd>Alt</kbd> + <kbd>Haut</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Haut</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Haut</kbd></td> + </tr> + <tr> + <th scope="row">Déplacer la/les ligne(s) vers le bas</th> + <td><kbd>Alt</kbd> + <kbd>Bas</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Bas</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Bas</kbd></td> + </tr> + <tr> + <th scope="row">Commenter/décommenter la/les ligne(s)</th> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>/</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Inspecteur_de_document">Inspecteur de document</h2> + +<div id="page-inspector"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Ouvrir l'inspecteur</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>C</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Sélecteur_de_noeuds">Sélecteur de noeuds</h3> + +<p>Ces raccourcis fonctionnent lorsque le <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">sélecteur de noeuds</a> est actif.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Sélectioner l'élément en dessous de la souris et arrête la sélection</th> + <td><kbd>Clic</kbd></td> + <td><kbd>Clic</kbd></td> + <td><kbd>Clic</kbd></td> + </tr> + <tr> + <th scope="row">Sélectioner l'élément en dessous de la souris et continue la sélection</th> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Onglet_HTML">Onglet HTML</h3> + +<p>Ces raccourcis fonctionnent dans l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML" title="/fr/docs/Tools/Page_Inspector#HTML_pane">onglet HTML de l'inspecteur</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Supprimer le nœud sélectionné</th> + <td><kbd>Suppr</kbd></td> + <td><kbd>Suppr</kbd></td> + <td><kbd>Suppr</kbd></td> + </tr> + <tr> + <th scope="row">Annuler la suppression d'un nœud</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Rétablir la suppression d'un nœud</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Aller au prochain nœud (développe les nœuds uniquement)</th> + <td><kbd>Flèche bas</kbd></td> + <td><kbd>Flèche bas</kbd></td> + <td><kbd>Flèche bas</kbd></td> + </tr> + <tr> + <th scope="row">Aller au nœud précédent</th> + <td><kbd>Flèche haut</kbd></td> + <td><kbd>Flèche haut</kbd></td> + <td><kbd>Flèche haut</kbd></td> + </tr> + <tr> + <th scope="row">Aller au premier nœud dans l'arbre</th> + <td><kbd>Début</kbd></td> + <td><kbd>Début</kbd></td> + <td><kbd>Début</kbd></td> + </tr> + <tr> + <th scope="row">Aller au dernier nœud dans l'arbre</th> + <td><kbd>Fin</kbd></td> + <td><kbd>Fin</kbd></td> + <td><kbd>Fin</kbd></td> + </tr> + <tr> + <th scope="row">Développer le nœud actuellement sélectionné</th> + <td><kbd>Flèche droite</kbd></td> + <td><kbd>Flèche droite</kbd></td> + <td><kbd>Flèche droite</kbd></td> + </tr> + <tr> + <th scope="row">Réduire le nœud actuellement sélectionné</th> + <td><kbd>Flèche gauche</kbd></td> + <td><kbd>Flèche gauche</kbd></td> + <td><kbd>Flèche gauche</kbd></td> + </tr> + <tr> + <th scope="row">(Lorsqu'un nœud est sélectionné) Itérer parmi les attributs</th> + <td><kbd>Entrée</kbd></td> + <td><kbd>Retour</kbd></td> + <td><kbd>Entrée</kbd></td> + </tr> + <tr> + <th scope="row">Défiler vers l'avant parmi les attributs du nœud</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Défiler vers l'arrière parmi les attributs du nœud</th> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">(Lorsqu'un nœud est sélectionné) Commencer à modifier l'attribut sélectionné</th> + <td><kbd>Entrée</kbd></td> + <td><kbd>Entrée</kbd></td> + <td><kbd>Entrée</kbd></td> + </tr> + <tr> + <th scope="row">Masquer/Afficher le nœud sélectionné</th> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + </tr> + <tr> + <th scope="row">Focus sur le champs de recherche du panneau HTML</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Éditer le code HTML</th> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Arrêter d'éditer le code HTML</th> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Entrée</kbd></td> + <td><kbd>F2</kbd> / <kbd>Cmd</kbd> +<kbd>Entrée</kbd></td> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Entrée</kbd></td> + </tr> + <tr> + <th scope="row">Copier l'extérieur du HTML du noeud sélectionné (depuis Firefox 42)</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Faire défiler jusqu'à ce que le noeud soit visible (depuis Firefox 44)</th> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Trouver la prochaine occurrence dans le markup, lorsque que la recherche est active.</th> + <td><kbd>Entrée</kbd></td> + <td><kbd>Entrée</kbd></td> + <td><kbd>Entrée</kbd></td> + </tr> + <tr> + <th scope="row">Trouver l'occurrence précédente dans le markup, lorsque que la recherche est active (depuis Firefox 48).</th> + <td><kbd>Maj</kbd> + <kbd>Entrée</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Entrée</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Entrée</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Fil_dariane">Fil d'ariane</h3> + +<p>Ces raccourcis fonctionnent lorsque le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">fil d'Ariane</a> est sélectionné.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Aller à l'élément précédent dans le fil d'Ariane.</th> + <td><kbd>Flèche gauche</kbd></td> + <td><kbd>Flèche gauche</kbd></td> + <td><kbd>Flèche gauche</kbd></td> + </tr> + <tr> + <th scope="row">Aller à l'élément suivant dans le fil d'Ariane.</th> + <td><kbd>Flèche droite</kbd></td> + <td><kbd>Flèche droite</kbd></td> + <td><kbd>Flèche droite</kbd></td> + </tr> + <tr> + <th scope="row">Sélectionner le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a></th> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Sélectionner le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a></th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Onglet_CSS">Onglet CSS</h3> + +<p>Ces raccourcis fonctionnent dans le <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">onglet CSS de l'Inspecteur</a>.</p> + +<table class="fullwidth-table" style="height: 605px; width: 1074px;"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Sélectionner la barre de recherche dans la panneau CSS</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Supprimer le contenu de la boite de recherche (seulement lorsque la boîte est sélectionnée, et contient du contenu)</th> + <td><kbd>Echap</kbd></td> + <td><kbd>Echap</kbd></td> + <td><kbd>Echap</kbd></td> + </tr> + <tr> + <th scope="row">Défiler vers l'avant parmi les propriétés et les valeurs</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Défiler vers l'arrière parmi les propriétés et les valeurs</th> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Commencer à éditer une propriété ou une valeur (dans la vue des règles seulement quand une valeur est sélectionnée et n'a pas été éditée</th> + <td><kbd>Entrée</kbd> ou <kbd>Espace</kbd></td> + <td><kbd>Retour</kbd> ou <kbd>Espace</kbd></td> + <td><kbd>Entrée</kbd> ou <kbd>Espace</kbd></td> + </tr> + <tr> + <th scope="row">Itérer parmi les suggestions d'autocomplétion (dans la vue des règles, quand une valeur est en édition</th> + <td><kbd>Flèche haut</kbd> , <kbd>Flèche bas</kbd></td> + <td><kbd>Flèche haut</kbd> , <kbd>Flèche bas</kbd></td> + <td><kbd>Flèche haut</kbd> , <kbd>Flèche bas</kbd></td> + </tr> + <tr> + <th scope="row">Choisir la suggestion d'autocomplétion sélectionnée (dans les vues des règles, quand une propriété ou une valeur est en édition)</th> + <td><kbd>Entrée</kbd> ou <kbd>Tab</kbd></td> + <td><kbd>Retour</kbd> ou <kbd>Tab</kbd></td> + <td><kbd>Entrée</kbd> ou <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Incrémenter la valeur sélectionnée de 1</th> + <td><kbd>Flèche Haut</kbd></td> + <td><kbd>Flèche Haut</kbd></td> + <td><kbd>Flèche Haut</kbd></td> + </tr> + <tr> + <th scope="row">Décrémenter la valeur sélectionnée de 1</th> + <td><kbd>Flèche Bas</kbd></td> + <td><kbd>Flèche Bas</kbd></td> + <td><kbd>Flèche Bas</kbd></td> + </tr> + <tr> + <th scope="row">Incrémenter la valeur sélectionnée de 10</th> + <td><kbd>Maj</kbd> + <kbd>Flèche Haut</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Flèche Haut</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Flèche Haut</kbd></td> + </tr> + <tr> + <th scope="row">Décrémenter la valeur sélectionnée de 10</th> + <td><kbd>Maj</kbd> + <kbd>Flèche Bas</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Flèche Bas</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Flèche Bas</kbd></td> + </tr> + <tr> + <th scope="row">Incrémenter la valeur sélectionnée de 100</th> + <td><kbd>Maj</kbd> + <kbd>Page Haut</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Page Haut</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Page Haut</kbd></td> + </tr> + <tr> + <th scope="row">Décrémenter la valeur sélectionnée de 100</th> + <td><kbd>Maj</kbd> + <kbd>Page Bas</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Page Bas</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Page Bas</kbd></td> + </tr> + <tr> + <th scope="row">Incrémenter la valeur sélectionnée de 0.1</th> + <td><kbd>Alt</kbd> + <kbd>Flèche Haut</kbd> (<kbd>Ctrl</kbd> + <kbd>Flèche Haut</kbd> depuis Firefox 60)</td> + <td><kbd>Opt</kbd> + <kbd>Flèche Haut</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Flèche Haut</kbd> (<kbd>Ctrl</kbd> + <kbd>Flèche Haut depuis</kbd> Firefox 60)</td> + </tr> + <tr> + <th scope="row">Décrémenter la valeur sélectionnée de 0.1</th> + <td><kbd>Alt</kbd> + <kbd>Flèche Bas</kbd>(<kbd>Ctrl</kbd> + <kbd>Flèche Bas</kbd> depuis Firefox 60)</td> + <td><kbd>Opt</kbd> + <kbd>Flèche Bas</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Flèche Bas</kbd> (<kbd>Ctrl</kbd> + <kbd>Flèche Bas</kbd> depuis Firefox 60)</td> + </tr> + <tr> + <th scope="row"> + <p>Afficher/Masquer plus d'informations sur la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)</p> + </th> + <td><kbd>Entrée</kbd> ou <kbd>Espace</kbd></td> + <td><kbd>Entrée</kbd> ou <kbd>Espace</kbd></td> + <td><kbd>Entrée</kbd> ou <kbd>Espace</kbd></td> + </tr> + <tr> + <th scope="row">Ouvrir la page MDN concernant la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">Ouvrir le fichier CSS sélectionnée (vue "Calculé", quand plus d'informations sont affichées pour une propriété et qu'un fichier CSS en référence est sélectionné) (depuis Firefox 49)</th> + <td><kbd>Entrée</kbd></td> + <td><kbd>Retour</kbd></td> + <td><kbd>Entrée</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Débogueur">Débogueur</h2> + +<div id="debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Rechercher une chaine de caractères dans la source actuelle</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Rechercher une chaine de caractères dans toutes les sources</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Chercher le suivant dans la source actuelle</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">Rechercher les scripts par nom</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Reprendre l'exécution depuis un point d'arrêt</th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="https://developer.mozilla.org/fr/docs/Outils/Raccourcis_claviers$edit#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Passer la fonction</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="https://developer.mozilla.org/fr/docs/Outils/Raccourcis_claviers$edit#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">Entrer dans la fonction</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="https://developer.mozilla.org/fr/docs/Outils/Raccourcis_claviers$edit#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Sortir de la fonction</th> + <td><kbd>Maj</kbd> + <kbd>F11</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F11</kbd> <sup><a href="https://developer.mozilla.org/fr/docs/Outils/Raccourcis_claviers$edit#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Maj</kbd> + <kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Ajouter/Supprimer un point d'arrêt sur la ligne sélectionnée</th> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">Ajouter/Supprimer un point d'arrêt conditionnel sur la ligne sélectionnée</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>B</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note"></a>1. Sur certains Mac, les touches fonctions sont reconfigurées par défaut pour une fonction particulière, comme le réglage du volume ou de la luminosité. Consultez ce <a href="http://support.apple.com/kb/HT3399" title="http://sHautport.apple.com/kb/HT3399">guide pour utiliser ces touches comme des touches fonctions standards</a>. Pour utiliser une touche reconfigurée comme une touche standard, maintenir la touche fonction enfoncée (ainsi pour ouvrir le profileur, utiliser <kbd>Maj + Function + F5</kbd>).</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Avant Firefox 66, la combinaison <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>S</kbd> sur Windows et Linux ou <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas</p> +</div> +</div> + +<h2 id="Console_Web">Console Web</h2> + +<div id="web-console"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Ouvrir la console Web</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Rechercher le texte dans les messages de la console</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Ouvrir le <a href="/fr/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">panneau de l'inspecteur d'object</a></th> + <td><kbd>Ctrl</kbd> + <kbd>Clic</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Clic</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Clic</kbd></td> + </tr> + <tr> + <th scope="row">Fermer le <a href="/fr/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/fr/docs/Tools/Web_Console#Inspecting_objects">panneau de l'inspecteur d'objet</a></th> + <td><kbd>Échap</kbd></td> + <td><kbd>Échap</kbd></td> + <td><kbd>Échap</kbd></td> + </tr> + <tr> + <th scope="row">Focus sur la ligne de commande</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Effacer les messages</th> + <td> + <p><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>L</kbd></p> + </td> + <td> + <p><kbd>Cmd</kbd> + <kbd>L</kbd></p> + + <p>Depuis Firefox 67 :</p> + + <p><kbd>Cmd</kbd> + <kbd>K</kbd></p> + </td> + <td> + <p><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>L</kbd></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Interpréteur_de_ligne_de_commande">Interpréteur de ligne de commande</h3> + +<p>Ces raccourcis fonctionnent lorsque vous êtes dans al popup de <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete" title="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">l'interpréteur de ligne de commande</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Si la ligne de commande est vide : revenir au début des messages de la console</th> + <td><kbd>Début</kbd></td> + <td><kbd>Début</kbd></td> + <td><kbd>Début</kbd></td> + </tr> + <tr> + <th scope="row">Si la ligne de commande est vide : défile jusqu'à la fin des messages dans la console</th> + <td><kbd>Fin</kbd></td> + <td><kbd>Fin</kbd></td> + <td><kbd>Fin</kbd></td> + </tr> + <tr> + <th scope="row">Défilement vers le haut de la sortie de la console</th> + <td><kbd>Page Haut</kbd></td> + <td><kbd>Page Haut</kbd></td> + <td><kbd>Page Haut</kbd></td> + </tr> + <tr> + <th scope="row">Défilement vers le bas de la sortie de la console</th> + <td><kbd>Page Bas</kbd></td> + <td><kbd>Page Bas</kbd></td> + <td><kbd>Page Bas</kbd></td> + </tr> + <tr> + <th scope="row">Reculer dans l'<a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">historique des commandes</a></th> + <td><kbd>Flèche Haut</kbd></td> + <td><kbd>Flèche Haut</kbd></td> + <td><kbd>Flèche Haut</kbd></td> + </tr> + <tr> + <th scope="row">Avancer dans l'historique des commandes</th> + <td><kbd>Flèche Bas</kbd></td> + <td><kbd>Flèche Bas</kbd></td> + <td><kbd>Flèche Bas</kbd></td> + </tr> + <tr> + <th scope="row">Initie une recherche inverse dnas l'historiqueme des commandes/revient en arrière parmis les commandes correspondantes</th> + <td><kbd>F9</kbd></td> + <td><kbd>F9</kbd></td> + <td><kbd>F9</kbd></td> + </tr> + <tr> + <th scope="row">Itérer en avant parmis les commandes coresspondantes (après avoir initié une recherche inverse)</th> + <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> + <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> + <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> + </tr> + <tr> + <th scope="row">Aller au début de la ligne</th> + <td><kbd>Début</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Aller à la fin de la ligne</th> + <td><kbd>Fin</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Exécuter l'expression courante</th> + <td><kbd>Entrée</kbd></td> + <td><kbd>Retour</kbd></td> + <td><kbd>Entrée</kbd></td> + </tr> + <tr> + <th scope="row">Ajouter une nouvelle ligne, pour saisir des expressions multilignes</th> + <td><kbd>Maj</kbd> + <kbd>Entrée</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Retour</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Entrée</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Fenêtre_dauto-complétion">Fenêtre d'auto-complétion</h3> + +<p>Ces raccourcis fonctionnent lorsque <a href="/fr/docs/Outils/Console_Web#Auto-complétion" title="/en-US/docs/Tools/Web_Console#Autocomplete">fenêtre d'auto-complétion</a> est ouvert :</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Choisir la suggestion d'auto-complétion courante</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Annuler la fenêtre d'auto-complétion</th> + <td><kbd>Échap</kbd></td> + <td><kbd>Échap</kbd></td> + <td><kbd>Échap</kbd></td> + </tr> + <tr> + <th scope="row">Aller à la précédente suggestion d'auto-complétion</th> + <td><kbd>Flèche Haut</kbd></td> + <td><kbd>Flèche Haut</kbd></td> + <td><kbd>Flèche Haut</kbd></td> + </tr> + <tr> + <th scope="row">Aller à la prochaine suggestion d'auto-complétion</th> + <td><kbd>Flèche Bas</kbd></td> + <td><kbd>Flèche Bas</kbd></td> + <td><kbd>Flèche Bas</kbd></td> + </tr> + <tr> + <th scope="row">Défiler vers le haut dans les suggestions d'auto-complétion</th> + <td><kbd>Page Haut</kbd></td> + <td><kbd>Page Haut</kbd></td> + <td><kbd>Page Haut</kbd></td> + </tr> + <tr> + <th scope="row">Défiler vers le bas dans les suggestions d'auto-complétion</th> + <td><kbd>Page Bas</kbd></td> + <td><kbd>Page Bas</kbd></td> + <td><kbd>Page Bas</kbd></td> + </tr> + <tr> + <th scope="row">Défile jusqu'au début des suggestions d'auto-complétion (à partir de Firefox 34)</th> + <td><kbd>Début</kbd></td> + <td><kbd>Début</kbd></td> + <td><kbd>Début</kbd></td> + </tr> + <tr> + <th scope="row">Défile jusqu'à la fin des suggestions d'auto-complétion (à partir de Firefox 34)</th> + <td><kbd>Fin</kbd></td> + <td><kbd>Fin</kbd></td> + <td><kbd>Fin</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Éditeur_de_style">Éditeur de style</h2> + +<div id="Style_Editor"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Ouvrir l'Éditeur de style</th> + <td><kbd>Maj</kbd> + <kbd>F7</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F7</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Ouvrir la fenêtre d'auto-complétion</th> + <td><kbd>Ctrl</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Espace</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="scratchpad"> +<h2 id="Ardoise_JavaScript">Ardoise JavaScript</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Ouvrir l'Ardoise</th> + <td><kbd>Maj</kbd> + <kbd>F4</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F4</kbd></td> + <td><kbd>Maj</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Exécuter le code de l'Ardoise</th> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Exécuter le code de l'Ardoise, afficher le résultat dans l'<a href="/fr/docs/Tools/Web_Console/Rich_output#Examining_object_properties">inspecteur d'objets</a></th> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Exécuter le code de l'Ardoise, insérer le résultat en tant que commentaire</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Réévaluer la fonction courante</th> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Recharger le document courant puis exécuter le code de l'Ardoise</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Enregistrer le fichier</th> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Ouvrir un fichier existant</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Créer un nouveau fichier</th> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>N</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + </tr> + <tr> + <th scope="row">Fermer l'Ardoise</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row">Formater et indenter dans l'Ardoise</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Afficher les suggestions d'auto-complétion (nouveauté de Firefox 32)</th> + <td><kbd>Ctrl</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Espace</kbd></td> + </tr> + <tr> + <th scope="row">Afficher la documentation intégrée (nouveauté de Firefox 32)</th> + <td><kbd>Maj</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Espace</kbd></td> + </tr> + <tr> + <th scope="row">Afficher la documentation intégrée (à partir de Firefox 33)</th> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="eyedropper"> +<h2 id="Pipette">Pipette</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Commande</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Sélectionner la couleur courante</th> + <td><kbd>Entrée</kbd></td> + <td><kbd>Entrée</kbd></td> + <td><kbd>Entrée</kbd></td> + </tr> + <tr> + <th scope="row">Désactiver la pipette</th> + <td><kbd>Échap</kbd></td> + <td><kbd>Échap</kbd></td> + <td><kbd>Échap</kbd></td> + </tr> + <tr> + <th scope="row">Déplacer de 1 pixel</th> + <td><kbd>Flèches</kbd></td> + <td><kbd>Flèches</kbd></td> + <td><kbd>Flèches</kbd></td> + </tr> + <tr> + <th scope="row">Déplacer de 10 pixels</th> + <td><kbd>Maj</kbd> + <kbd>Flèches</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Flèches</kbd></td> + <td><kbd>Maj</kbd> + <kbd>Flèches</kbd></td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html b/files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html new file mode 100644 index 0000000000..4821e9927c --- /dev/null +++ b/files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html @@ -0,0 +1,76 @@ +--- +title: Vue Adaptative (avant Firefox 52) +slug: Outils/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +--- +<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> diff --git a/files/fr/outils/rulers/index.html b/files/fr/outils/rulers/index.html new file mode 100644 index 0000000000..fc08120e48 --- /dev/null +++ b/files/fr/outils/rulers/index.html @@ -0,0 +1,27 @@ +--- +title: Règles +slug: Outils/Rulers +translation_of: Tools/Rulers +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible de superposer des règles verticales et horizontales dans une page web :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16364/viewport_rulers.png" style="display: block; height: 724px; margin-left: auto; margin-right: auto; width: 1018px;">Les unités sont en pixels.</p> + +<p>Les dimensions de la fenêtre sont affichées en haut en droite de celle-ci.</p> + +<p>Pour pouvoir utiliser cet outil, il est nécessaire d'activer son bouton dédié en cochant la case "Afficher/Masquer les règles pour la page" dans la catégorie "Boutons de la boîte à outils" des <a href="/fr/docs/Tools/Tools_Toolbox#Settings">options des outils de développement.</a></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16415/settings_available_buttons.png" style="border: 1px solid black; display: block; height: 247px; margin: 0px auto; width: 315px;"></p> + +<p>Une fois activé le bouton "Afficher/Masquer les règles pour la page" apparait en haut à droite de la barre d'outils à coté du bouton des options.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16362/ruler_toggle_button.png" style="border: 1px solid black; display: block; height: 326px; margin: 0 auto; width: 394px;"></p> + +<p>Comportements à garder à l'esprit lors de l'utilisation des règles :</p> + +<ul> + <li>Les commandes <code>rulers</code> doivent être réappliquées pour <strong>chaque nouvel onglet</strong> et pour <strong>chaque rafraichissement</strong>.</li> + <li>La commande n'est pas permanente.</li> +</ul> diff --git a/files/fr/outils/settings/index.html b/files/fr/outils/settings/index.html new file mode 100644 index 0000000000..485f527522 --- /dev/null +++ b/files/fr/outils/settings/index.html @@ -0,0 +1,168 @@ +--- +title: Options +slug: Outils/Settings +translation_of: Tools/Settings +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Ouvrir_les_options">Ouvrir les options</h2> + +<p>À partir de Firefox 62, l'icône pour afficher les options des outils de développement a été déplacé dans un menu accessible en cliquant sur les "..." tout à droite de la fenêtre :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16085/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p> + +<p>Ce menu inclut les options d'emplacement des outils. Il est possible de les afficher en bas, à droite, à gauche, ou bien dans une fenêtre séparée.</p> + +<p>Le menu inclut également l'option "Afficher la console scindée" qui permet d'ajouter la Console Web en bas de n'importe quel autre outil. Cela permet d'afficher une ou deux lignes de messages, et surtout de rendre disponible la ligne de commande.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16086/split_console.png" style="height: 352px; width: 902px;"></p> + +<p>La dernière option, l'option "paramètres" affiche les autres options des outils de développement. Cela ressemble à ceci :</p> + +<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/16081/dev_tools_settings.png"></p> + +<h2 id="Catégories">Catégories</h2> + +<h3 id="Outils_de_développement_par_défaut">Outils de développement par défaut</h3> + +<p>Ce groupe de cases à cocher détermine quels outils sont activés dans la boit à outils. Les nouveaux outils sont souvent inclus dans Firefox, mais ne sont pas activés par défaut.</p> + +<h3 id="Boutons_de_la_boite_à_outils">Boutons de la boite à outils</h3> + +<p>Ce groupe de cases à cocher détermine quels outils possèdent <a href="/fr/docs/Tools/Tools_Toolbox#Extra_tools">une icône dans la barre d'outils</a>.</p> + +<p>Depuis Firefox 62, si l'option "Sélectionner un iframe en tant que document cible" est activée, l'icône apparaitra dans la barre d'outils, et ce même si la page ne contient aucun iframe.</p> + +<p>Il est à noter que depuis Firefox 52 l'option "<a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">Sélectionner un élément"</a> a été supprimée. Le bouton "Sélectionner un élément" est maintenant toujours présent.</p> + +<h3 id="Thèmes">Thèmes</h3> + +<p>Cette option permet de choisir un des deux thèmes :</p> + +<ul> + <li> + <p>Le thème "clair", par défaut :</p> + + <p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/16083/theme-light.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p> + </li> + <li> + <p>Le thème "sombre" par défaut dans <a href="/fr/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> + + <p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/16084/theme-dark.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p> + </li> +</ul> + +<h3 id="Préférences_générales">Préférences générales</h3> + +<p>Ce sont les options qui s'appliquent à plusieurs outils. Il n'y a qu'une seule option :</p> + +<dl> + <dt><em>Activer les journaux persistants</em></dt> + <dd>Elle sert à contrôler si les outils Console et Réseau vident leur contenu lors d'un changement de page.</dd> +</dl> + +<div class="note"> +<p>Si les préférences générales ne sont pas incluses dans les options, les journaux persistants peuvent être activés en utilisant l'url 'about:config' du navigateur et passer la clé 'devtools.webconsole.persistlog' à <code>true</code></p> +</div> + +<h3 id="Inspecteur">Inspecteur</h3> + +<dl> + <dt><em>Afficher les styles du navigateur</em></dt> + <dd>Contrôle les styles appliqués par le navigateur (<a href="/fr/docs/Web/CSS/Cascade">user-agent styles</a>) doivent être affichées dans la <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">vue des Règles</a>. Il est à noter que cette option est indépendante de l'option "Styles navigateur" dans la <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">vue "Calculé"</a>.</dd> + <dt><em>Tronquer les attributs DOM</em></dt> + <dd>Par défaut, l'Inspecteur tronque les attributs DOM de plus de 120 caractères. Décocher cette case empêche ce comportement. Cette option fonctionne en activant/désactivant la préférence "devtools.markup.collapseAttributes dans la page about:config. Pour changer la limite de caractères, il est possible d'éditer la préférence "devtools.markup.collapseAttributeLength", toujours dans la page about:config.</dd> + <dt><em>Unité par défaut pour les couleurs</em></dt> + <dd>Cette option permet de contrôler l'unité des couleurs représentées dans l'Inspecteur. Les différentes valeurs sont : + <ul> + <li>Hex</li> + <li>HSL(A)</li> + <li>RGB(A)</li> + <li>noms de couleur</li> + <li>unité d'origine</li> + </ul> + </dd> +</dl> + +<h3 id="Console_web">Console web</h3> + +<dl> + <dt><em>Activer l'horodatage</em></dt> + <dd>Contrôle si la Console affiche les timestamp. Par défaut cette option n'est pas activée.</dd> + <dt><em>Enable new console frontend (l'option n'est pas traduite dans les outils de développement)</em></dt> + <dd>Active la nouvelle Console expérimentale. Cette option n'est disponible que dans Firefox Nightly</dd> +</dl> + +<h3 id="Débogueur">Débogueur</h3> + +<dl> + <dt><em>Afficher les sources originales</em></dt> + <dd>Activer le <a href="/fr/docs/Tools/Debugger/How_to/Use_a_source_map">support des source map</a> dans le Débogueur.</dd> + <dt><em>Enable new debugger frontend (l'option n'est pas traduite dans les outils de développement)</em></dt> + <dd>Active le nouveau Débogueur. Enable the new debugger. Cette option n'est disponible que dans Firefox Nightly</dd> +</dl> + +<h3 id="Éditeur_de_style">Éditeur de style</h3> + +<dl> + <dt><em>Afficher les sources originales</em></dt> + <dd>Lorsqu'un préprocesseur supportant les sources maps est utilisé, cette option permet à l'Éditeur de style d'afficher les sources originales du préprocesseur plutôt que le CSS généré. <a href="/fr/docs/Tools/Style_Editor#Source_map_support">Vous pouvez en apprendre plus sur le support des sources maps CSS ici.</a>. Lorsque cette option est activée la <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">vue des règles de l'Inspecteur affichera également un lien vers les sources originales</a>.</dd> + <dt><em>Compléter automatiquement le CSS</em></dt> + <dd>Autorise l'Éditeur de style à offrir des suggestions d'autocomplétion.</dd> + <dt> + <h3 id="Comportement_pour_les_captures_d'écran">Comportement pour les captures d'écran</h3> + </dt> + <dt><em>Enregistrer dans le presse-papiers</em></dt> + <dd>Copie l'image dans le presse papier lors d'un clic sur l'outil <a href="/fr/docs/Tools/Screenshot_tool">Capture d'écran</a> (l'image sera également enregistrée dans le dossier Téléchargement). Nouveau dans Firefox 53.</dd> + <dt><em>Jouer un son d'obturateur d'appareil photo</em></dt> + <dd>Lors d'un clic sur l'outil <a href="/fr/docs/Tools/Screenshot_tool">Capture d'écran</a>, un son sera joué. Nouveau dans Firefox 53.</dd> +</dl> + +<h3 id="Préférences_de_l'éditeur">Préférences de l'éditeur</h3> + +<p>Préférences de l'éditeur de code source <a href="http://codemirror.net/">CodeMirror</a>, qui est inclut dans Firefox et utilisé dans plusieurs outils de développement (incluant <a href="/fr/docs/Tools/Scratchpad">l'Ardoise JavaScript</a> et <a href="/fr/docs/Tools/Style_Editor">l'Éditeur de style</a>.</p> + +<dl> + <dt><em>Détecter l'indentation</em></dt> + <dd>indenter automatiquement les nouvelles lignes en se basant sur l'indentation actuelle..</dd> + <dt><em>Fermer automatiquement les parenthèses et les accolades</em></dt> + <dd>Détermine si rentrer un caractère ouvrant comme <code>[</code> ou <code>{</code> causera l'éditeur à insérer automatiquement un caractère fermant comme <code>]</code> ou <code>}</code>.</dd> + <dt><em>Indenter à l'aide d'espaces</em></dt> + <dd>Si coché, l'indentation sera faite en utilisant des espaces, si désactivé, l'indentation sera faite en utilisant des tabulations.</dd> + <dt><em>Taille des tabulations</em></dt> + <dd>La taille des tabulations dans l'éditeur. Les options possibles sont 2, 4, ou 8.</dd> + <dt><em>Raccourcis clavier</em></dt> + <dd>Permet de choisir les raccourcis clavier par défaut de CodeMirror, il y a le choix entre : + <ul> + <li>Vim</li> + <li>Emacs</li> + <li>Sublime Text</li> + </ul> + </dd> +</dl> + +<h3 id="Paramètres_avancés">Paramètres avancés</h3> + +<dl> + <dt><em>Afficher les données de la plate-forme Gecko</em></dt> + <dd>Cette option sert à contrôler si les profils doivent inclure des symboles de la plateforme Gecko ou non.</dd> +</dl> + +<dl> + <dt><em>Désactiver le cache HTTP</em></dt> + <dd>Désactive le cache HTTP pour simuler les performances du premier chargement. Cela s'applique à tout les onglets qui ont la boite à outils ouverte. Cette option est persistante, cela veut dire que si elle est activée, la mise en cache sera désactivée à chaque réouverture des outils de développement. La mise en cache est automatiquement réactivée lorsque les outils de développement sont fermés. Il est à noter que les service workers ne sont pas affectés par cette option. + <div class="note">Note : Cette option était appelée "Désactiver le cache" dans les versions antérieures à Firefox 49. Elle a été renommée afin de rendre plus explicite le fait que cette option n'affecte que le cache HTTP et pas les <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> ou le <a href="/fr/docs/Web/API/Cache">Cache API</a>.</div> + </dd> + <dt><em>Désactiver le JavaScript</em></dt> + <dd>Recharge la page actuelle avec le JavaScript désactivé.</dd> + <dt><em>Activer les Service Workers via HTTP</em></dt> + <dd>Autorise les enregistrements de Service Worker depuis des sites web non sécurisés.</dd> + <dt><em>Activer le débogage du chrome du navigateur et des modules</em></dt> + <dd>Permet d'utiliser les outils de développement dans le contexte du navigateur lui-même au lieu du contenu web uniquement.</dd> + <dt><em>Activer le débogage distant</em></dt> + <dd>Autorise le <a href="/fr/docs/Tools/Remote_Debugging">débogage des instances de Firefox distantes</a>.</dd> + <dt><em>Activer le débogage des workers</em></dt> + <dd>Active un panneau dans le Débogueur pour déboguer les workers. + <p class="note">Note: Cette option a été supprimée de l'interface utilisateur dans Firefox 56, car cette version contient une <a href="/fr/docs/Tools/Debugger">nouvelle interface utilisateur du Débogueur</a>, l'option peut toujours être activée pour l'ancienne interface en passant la préférence <code>devtools.debugger.workers</code> à <code>true</code> dans (about:config).</p> + </dd> +</dl> diff --git a/files/fr/outils/taking_screenshots/index.html b/files/fr/outils/taking_screenshots/index.html new file mode 100644 index 0000000000..5e1fda8c8f --- /dev/null +++ b/files/fr/outils/taking_screenshots/index.html @@ -0,0 +1,48 @@ +--- +title: Taking screenshots +slug: Outils/Taking_screenshots +tags: + - Outils +translation_of: Tools/Taking_screenshots +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d'utiliser les outils de développement pour prendre une capture d'écran de la page entière, ou d'un unique élément de la page.</p> + +<h2 id="Prendre_une_capture_d'écran_de_la_page">Prendre une capture d'écran de la page</h2> + +<p>Utilisez le bouton de capture d'écran: <img alt="" src="https://mdn.mozillademos.org/files/14713/camera-icon.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> pour prendre une capture d'écran en pleine page de la page actuelle.</p> + +<p>Par défaut, le bouton de capture d'écran n'est pas activé. Pour l'activer :</p> + +<ul> + <li>Visitez la page <a href="/fr/docs/Tools/Settings">Paramètres</a></li> + <li>Touvez la section nommée « Boutons de la boîte à outils »</li> + <li>Cochez la case « Prendre une capture d'écran de la page entière ».</li> +</ul> + +<p>Vous verrez dorénavant le bouton dans la barre d'outils :</p> + +<p>{{EmbedYouTube("KB5V9uJgcS4")}}</p> + +<p>Cliquez sur le bouton pour faire une capture d'écran de la page en cours. La capture est enregistrée dans le dossier « Téléchargements » de votre navigateur.</p> + +<p>{{EmbedYouTube("HKS6MofdXVE")}}</p> + +<h2 id="Prendre_la_capture_d'écran_d'un_élément">Prendre la capture d'écran d'un élément</h2> + +<p>Pour prendre une capture d'écran d'un seul élément dans la page, activez le menu contextuel de cet élément dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTLM</a>, et sélectionnez « Prendre une capture du nœud ». La capture d'écran est enregistrée dans le dossier « Téléchargements » du navigateur :</p> + +<p>{{EmbedYouTube("p2pjF_BrE1o")}}</p> + +<h2 id="Copier_des_captures_d'écran_dans_le_presse-papier">Copier des captures d'écran dans le presse-papier</h2> + +<p>Dans Firefox 53, il est possible de copier la capture d'écran dans le presse-papier. Pensez à cocher la case « Enregistrer dans le presse-papiers » :</p> + +<p>{{EmbedYouTube("AZedFGh6F78")}}</p> + +<p>Maintenant, dès que vous effectuerez une capture d'écran, celle-ci sera automatiquement copiée dans le presse-papier.</p> + +<h2 id="Options_additionnelles">Options additionnelles</h2> + +<p>Depuis Firefox 62, il est possible de préciser un ratio-pixel, de mettre un délai avant la capture, ou de spécifier le nom du fichier. Pour cela, il faut utiliser la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">fonction d'aide </a><code>:screenshot</code> dans la Console Web.</p> diff --git a/files/fr/outils/tips/index.html b/files/fr/outils/tips/index.html new file mode 100644 index 0000000000..45a45cf7c1 --- /dev/null +++ b/files/fr/outils/tips/index.html @@ -0,0 +1,129 @@ +--- +title: Astuces +slug: Outils/Tips +tags: + - Dev Tools + - Développement Web + - Outils + - outils de développement +translation_of: Tools/Tips +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Géneral">Géneral</h2> + +<p>Capture d'écran:</p> + +<ul> + <li>Page entière: cliquez sur le bouton de capture d'écran (<img alt="Bouton pour prendre une capture de la page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">; <a href="/fr/docs/Tools/Tools_Toolbox#Extra_tools">doit d'abord être activé</a>).</li> + <li>Partie visible de l'écran: cliquez sur le bouton de capture d'écran (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">) du <a href="fr/docs/Outils/Vue_adaptative">mode Vue Adaptative</a>.</li> + <li>noeud: clic droit sur le noeud dans l'inspecteur et cliquez sur <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Screenshot Node">"Prendre une capture du noeud"</a>.</li> + <li>Via la <a href="/fr/docs/Tools/Web_Console/Helpers">commande Console</a>: <code>screenshot [nom-du-fichier] --fullpage</code>.</li> +</ul> + +<p>Paramètres:</p> + +<ul> + <li>Choisir entre un <a href="/fr/docs/Outils/Settings">thème lumineux et un thème sombre</a> pour les outils de développement.</li> + <li><a href="/fr/docs/Outils/Settings#Pr%C3%A9f%C3%A9rences_de_l%27%C3%A9diteur">Modifiez la correspondance du clavier</a> pour Vim, Emacs ou Sublime Text s<span class="short_text" id="result_box" lang="fr"><span>i vous êtes habitué à des raccourcis </span></span><span class="short_text" lang="fr"><span>différents</span></span>.</li> + <li><span id="result_box" lang="fr"><span>Cochez ou décochez les différents outils pour les activer ou les désactiver.</span></span> (Il y en a plus que les outils par défaut !)</li> +</ul> + +<h2 id="Inspecteur_de_page">Inspecteur de page</h2> + +<p>Dans l'onglet <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">Inspecteur</a>:</p> + +<ul> + <li>Pressez <kbd>H</kbd> quand un noeud est sélectionné pour le cacher/l'afficher.</li> + <li>Pressez <kbd>Retour</kbd> ou <kbd>Suppr</kbd> quand un noeud est sélectionné pour le supprimer.</li> + <li><kbd>Alt</kbd> + clic sur un noeud pour le développer/réduire lui-même ainsi que l'ensemble de ses noeuds enfants.</li> + <li>Cliquez sur le dernier élément du <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">fil d’Ariane</a> pour faire défiler la sélection dans l'inspecteur de page.</li> + <li>Cliquez sur l’icône "ev" à côté du noeud pour <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">voir tous les évènements qui écoutent sur ce noeud</a>.</li> + <li>Pressez <kbd>S</kbd> avec un noeud sélectionné pour le voir dans la page (idem qu'un clic-droit sur un noeud puis <a href="fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML#Scroll Into View">"Faire défiler la vue jusqu'au noeud"</a>).</li> + <li>Cliquez-droit sur un noeud et cliquez sur <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML#Menu_contextuel">"Utiliser dans la console"</a> pour utiliser <a href="/fr/docs/Outils/Console_Web/The_command_line_interpreter">la ligne de commande</a> avec ce noeud en tant que variable <code>temp<var>N</var></code>.</li> +</ul> + +<p>Lors de la <a href="/fr/docs/Outils/Inspecteur/UI_Tour#Le_bouton_de_s%C3%A9lection_d%27%C3%A9l%C3%A9ment">sélection des éléments:</a></p> + +<ul> + <li><kbd>Maj</kbd> + clic pour sélectionner un élément en conservant la sélection (Le mode sélection ne se désengage pas).</li> + <li>Utilisez <kbd>←</kbd>/<kbd>→</kbd> pour naviguer sur l’élément parent/enfant (si ils sont trop durs à sélectionner).</li> +</ul> + +<p>Dans la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">vue des règles CSS</a>:</p> + +<ul> + <li>Cliquez sur l’Icône d'inspection (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) à côté de n'importe quel sélecteur pour surligner tous les éléments qui correspondent.</li> + <li>Cliquez sur l'icône d'inspection (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) à côté de la règle de l'<code>element{}</code> pour bloquer le surlignage sur l'élément courant.</li> + <li>Cliquez droit sur n'importe quelle propriété et sélectionnez "Afficher la documentation MDN" pour <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Obtenir_de_l'aide_sur_les_propriétées_CSS">voir la documentation MDN pour cette propriété</a>.</li> + <li>Cliquez sur l'icône de filtre (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height: 19px; width: 18px;">) à côté d'une propriété surchargée pour <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Déclarations_surchargées">trouver quelle autre propriété la surcharge</a>.</li> + <li>Cliquez-droit sur un nom, une valeur, une règle pour copier n'importe quel nom, valeur, déclaration ou la règle complète dans le presse-papier.</li> +</ul> + +<h2 id="Console_web">Console web</h2> + +<p>Dans tous les onglets:</p> + +<ul> + <li><kbd>Esc</kbd> ouvre la <a href="/fr/docs/Tools/Web_Console/Split_console">console scindée</a> utile lors du debug, ou l'inspection des noeuds.</li> +</ul> + +<p>Dans la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande</a>:</p> + +<ul> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#$0">$0</a></code> fait référence au noeud actuellement selectionné.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#$">$()</a></code> est un raccourci pour {{domxref("document.querySelector()")}}.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> retourne sous forme d'un tableau les résultats de {{domxref("document.querySelectorAll()")}}.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#copy">copy</a></code> copie tout comme une chaîne.</li> + <li>Cliquez-droit sur un noeud de l'Inspecteur puis cliquez sur <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"Utiliser dans la Console"</a> pour créer une variable <code><a href="/fr/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> de ce noeud.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#cd">cd</a></code> <span id="result_box" lang="fr"><span>bascule le contexte d'évaluation JavaScript dans un iframe différent dans la page</span></span>.</li> + <li><code><a href="/fr/docs/Web/API/Console/table">console.table()</a></code> affiche des données tabulaires dans un tableau.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#help">help</a></code> ouvre la page MDN de description des commandes disponibles.</li> + <li><code>:screenshot <filename.png> --fullpage</code> enregistre une capture d'écran dans le dossier "Téléchargements" en utilisant avec le nom du fichier s'il est renseigné en option. Sans nom spécifique le nom sera de ce format-ci: <code>[Date de la Capture] at [heure de la capture].png</code><br> + <br> + Le paramètre --fullpage est optionnel, s'il est inclus, la capture couvrira la page entière, pas juste la partie visible dans la fenêtre de navigation. Le nom du fichier aura également le sufixe "-fullpage". Voir <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers">Fonctions d'aides de la Console</a> pour une liste de tous les paramètres.</li> +</ul> + +<p>Dans la sortie de la console:</p> + +<ul> + <li>Cliquez sur l’icône d'inspection (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) à côté de l'élément dans la sortie de la console pour <a href="/fr/docs/Outils/Console_Web/Rich_output#Mettre_en_surbrillance_les_noeuds_DOM">le sélectionner dans l'inspecteur</a></li> + <li>Choisissez <a href="/fr/docs/Outils/Settings#Console_web">"Activer les journaux persistants"</a> dans la configuration pour conserver les messages du journal, même ceux d'avant la navigation.</li> + <li>Choisissez <a href="fr/docs/Outils/Settings#Console_web">"Activer l'horodatage"</a> dans la configuration pour montrer l'horodatage à côté des messages du journal.</li> +</ul> + +<h2 id="Débogueur">Débogueur</h2> + +<ul> + <li>Éviter les bibliothèques JavaScript durant la session de débogage via l'icône de boite noire (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">).</li> + <li>Pressez <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> pour rechercher dans tous les scripts.</li> + <li>Pressez <kbd>Ctrl</kbd>+<kbd>D</kbd> pour rechercher la définition d'une fonction.</li> + <li>Pressez <kbd>Ctrl</kbd>+<kbd>L</kbd> pour aller à une ligne spécifique.</li> +</ul> + +<h2 id="Éditeur_de_feuilles_de_style_CSS">Éditeur de feuilles de style CSS</h2> + +<ul> + <li>L'icône de boite noire (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) du panneau des feuilles de style permet d'afficher ou de cacher une feuille de style.</li> + <li>Cliquez sur une <a href="/fr/docs/Outils/Éditeur_de_style#Le_volet_media">règle @media </a> pour l'appliquer dans la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a>.</li> + <li>Cliquez sur le bouton d'import (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">) pour importer une feuille de style ou le bouton de création (<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">) pour en créer une nouvelle.</li> + <li>Cliquez sur le bouton d'option du <a href="/fr/docs/Outils/Éditeur_de_style#Le_panneau_des_feuilles_de_style">panneau des feuilles de style</a> et cliquez sur <a href="/fr/docs/Outils/Éditeur_de_style#Support_de_.22Source_map.22">"Afficher les sources originales"</a> pour basculer vers l'affichage des fichiers du pré-processeur CSS.</li> +</ul> + +<h2 id="Réseau">Réseau</h2> + +<ul> + <li>Cliquez sur le résumé de la requête pour <a href="/fr/docs/Outils/Moniteur_réseau#Analyse_des_performances">comparer la performance du chargement avec cache et du chargement sans cache.</a></li> + <li>Quand une requête est sélectionnée cliquez sur <a href="/fr/docs/Outils/Moniteur_réseau#Modifier_et_renvoyer">"Modifier et renvoyer"</a> pour modifier l'en-tête et la renvoyer.</li> + <li>Cochez <a href="/fr/docs/Outils/Settings#Préférences_générales">"Activer les journaux persistants"</a> dans la configuration pour conserver les requêtes précedentes et suivantes à la navigation.</li> + <li>Survoler <a href="/fr/docs/Outils/Moniteur_réseau#Colone_source">l'icône "js" de la colonne "Source"</a> pour voir la trace de la pile JavaScript responsable de la requête.</li> + <li>Cochez <a href="/fr/docs/Outils/Settings#Parramètres_avancés">"Désactivez le cache HTTP (lorsque la boite à outils est ouverte)"</a> dans la configuration pour désactiver le cache réseau lors du débogage des problèmes réseau.</li> +</ul> + +<h2 id="Stockage">Stockage</h2> + +<ul> + <li>Cliquez-droit sur l'en-tête de la colonne pour ouvrir un menu permettant de changer l'affichage de la colonne.</li> + <li>Cliquez-droit sur une entrée et cliquez sur "Supprimer <var>nom</var>" pour la supprimer ou "Tout supprimer" pour supprimer toute les entrées.</li> + <li>Sélectionnez une entrée pour voir sa valeur dans la barre latérale.</li> +</ul> diff --git a/files/fr/outils/travailler_avec_les_iframes/index.html b/files/fr/outils/travailler_avec_les_iframes/index.html new file mode 100644 index 0000000000..114074c320 --- /dev/null +++ b/files/fr/outils/travailler_avec_les_iframes/index.html @@ -0,0 +1,25 @@ +--- +title: Travailler avec les iframes +slug: Outils/Travailler_avec_les_iframes +tags: + - DevTools + - Frames + - Tools + - debogueur + - iframe + - outils de développement +translation_of: Tools/Working_with_iframes +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d'assigner les outils de développement à un <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe">iframe</a> spécifique à l’intérieur d'un document.</p> + +<p>{{EmbedYouTube("Me9hjqd74m8")}}</p> + +<p>Il existe un bouton dans la barre d'outils :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquer dessus affichera une liste de tous les iframes du document en pop up ainsi que le document lui même.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Sélectionner une entrée de la liste fera que tous les outils de développement - l'Inspecteur, la console, le Débogueur etc. - seront assignés uniquement à cet iframe qui se comportera comme si le reste de la page n'existait pas.</p> diff --git a/files/fr/outils/validateurs/index.html b/files/fr/outils/validateurs/index.html new file mode 100644 index 0000000000..d2a3c64358 --- /dev/null +++ b/files/fr/outils/validateurs/index.html @@ -0,0 +1,71 @@ +--- +title: Validateurs +slug: Outils/Validateurs +tags: + - Tools +translation_of: Tools/Validators +--- +<div>{{ToolsSidebar}}</div><p class="summary">Ce document liste les différentes ressources aidant les développeurs à valider leurs pages web.</p> + +<pre class="eval">Les onglets de la barre latérale ne sont pas encore disponibles. +L'assistant de mise en conformité renverra vers Devedge +</pre> + +<p>Si vous écrivez du code qui ne valide pas, regardez du côté des <a href="fr/Outils_d'%c3%a9dition_respectueux_des_standards">outils</a> respectueux des standards et des outils de <a href="fr/Outils">développement</a>.</p> + +<h3 id="Extension_Firefox_pour_la_validation" name="Extension_Firefox_pour_la_validation">Extension Firefox pour la validation</h3> + +<h4 id="Panneau_des_r.C3.A9f.C3.A9rences_rapides_pour_la_barre_lat.C3.A9rale" name="Panneau_des_r.C3.A9f.C3.A9rences_rapides_pour_la_barre_lat.C3.A9rale">Panneau des références rapides pour la barre latérale</h4> + +<p>Installez le panneau<em>DevEdge Toolbox</em> pour la barre latérale pour accéder rapidement aux références rapides de développement Web.</p> + +<h4 id="Checky" name="Checky">Checky</h4> + +<p><a class="external" href="http://checky.sourceforge.net/">Checky</a> ajoute un sous-menu au menu contextuel de Netscape, de Mozilla, et de Firefox qui permet d'accéder rapidement à l'un des 18 services de validation et d'analyse actuellement en service.</p> + +<h3 id="Applications_et_Services" name="Applications_et_Services">Applications et Services</h3> + +<h4 id="Assistant_de_mise_en_conformit.C3.A9_Web_de_DevEdge" name="Assistant_de_mise_en_conformit.C3.A9_Web_de_DevEdge">Assistant de mise en conformité Web de DevEdge</h4> + +<p><a class="external" href="http://devedge-temp.mozilla.org/toolbox/tools/2001/tune-up/">Cette interface des services du W3C</a> guide les développeurs Web débutants à travers tout le processus de mise en conformité d'un contenu pour le support de Netscape 7.x, Mozilla et de tous les autres navigateurs respectueux des standards du W3C.</p> + +<h4 id="Validateur_HTML_du_W3C" name="Validateur_HTML_du_W3C">Validateur HTML du W3C</h4> + +<p>Le <a class="external" href="http://validator.w3.org/">validateur HTML du W3C</a> permet de valider une page Web selon les HTML standards du W3C. Il est particulièrement utile pour détecter les balises propriétaires aussi bien que le code HTML non valide.</p> + +<h4 id="Validateur_CSS_du_W3C" name="Validateur_CSS_du_W3C">Validateur CSS du W3C</h4> + +<p>La <a class="external" href="http://jigsaw.w3.org/css-validator/">validateur CSS du W3C</a> permet de valider les CSS contenues dans une page Web ou d'un fichier externe, selon les standards CSS du W3C.</p> + +<h4 id="Validateur_RDF_du_W3C" name="Validateur_RDF_du_W3C">Validateur RDF du W3C</h4> + +<p>Le service de <a class="external" href="http://www.w3.org/RDF/Validator/">validation RDF</a> permet de valider le code RDF/XML contenu dans une URI.</p> + +<h4 id="Link_Checker" name="Link_Checker">Link Checker</h4> + +<p><a class="external" href="http://validator.w3.org/checklink">Cet outil</a> vérifie la validité des liens d'un page Web.</p> + +<h4 id="HTML_Tidy" name="HTML_Tidy">HTML Tidy</h4> + +<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> est un outil qui peut être utiliser pour rapporter les erreurs de codage d'une page HTML et formater ce code pour une plus grande lisibilité (certains outils de développement Web, tels que <a class="external" href="http://www.chami.com/html-kit/">HTML-Kit</a>, intègrent HTML Tidy ce qui rend plus rapide et plus facile la validation).</p> + +<h4 id="Validation_JavaScript" name="Validation_JavaScript">Validation JavaScript</h4> + +<p><a class="external" href="http://www.jslint.com">JSLint (externe)</a></p> + +<h3 id="Services_d.27accessibilit.C3.A9" name="Services_d.27accessibilit.C3.A9">Services d'accessibilité</h3> + +<h4 id="Lynx_Viewer" name="Lynx_Viewer">Lynx Viewer</h4> + +<p><a class="external" href="http://www.delorie.com/web/lynxview.html">Vérifie une page Web</a> en utilisant la visualisation Lynx et permet la validation des mesures d'accessibilité.</p> + +<div class="originaldocinfo"> +<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> + +<ul> + <li>Dernière mise à jour : 16 août 2002</li> + <li>Copyright : © 2001-2003 Netscape.</li> +</ul> +</div> + +<p><span class="comment">Interwiki Languages Lin</span></p> diff --git a/files/fr/outils/view_source/index.html b/files/fr/outils/view_source/index.html new file mode 100644 index 0000000000..9605a917b1 --- /dev/null +++ b/files/fr/outils/view_source/index.html @@ -0,0 +1,79 @@ +--- +title: Affiche le Code source +slug: Outils/View_source +translation_of: Tools/View_source +--- +<div>{{ToolsSidebar}}</div> + +<p>"Code source de la page" permet de visualiser le code HTML ou XML de la page. Pour activer cet outil, il faut :</p> + +<ul> + <li>Faire un clic droit puis sélectionner "Code source de la page".</li> + <li>Utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>U</kbd>, ou <kbd>Cmd</kbd> + <kbd>U</kbd> sur OS X</li> +</ul> + +<p>Avant Firefox 42, Une nouvelle fenêtre s'ouvre alors pour afficher le code source de la page.</p> + +<p>Depuis Firefox 42, cet outil ouvrira par défaut un nouvel onglet (à la place d'une fenêtre). Pour changer cette préférence, il faut passer la variable <code>view_source.tab</code> à <code>false</code> dans <code>about:config</code>.</p> + +<p>Depuis Firefox 60 la préférence <code>view_source.tab</code> a été supprimée ({{bug(1418403)}}), il n'est donc plus possible de changer le mode d'ouverture, les sources s'ouvriront toujours dans un nouvel onglet.</p> + +<h2 id="Fonctionnalités">Fonctionnalités</h2> + +<p>Cet outil possède trois fonctionnalités supplémentaires. Celles-ci depuis Firefox 40 peuvent être utilisées via le menu contextuel dans l'onglet du code source :</p> + +<ul> + <li>Aller à la ligne</li> + <li>Retour à la ligne automatique (activer/désactiver)</li> + <li>Coloration syntaxique (activer/désactiver)</li> +</ul> + +<p>Lorsque la coloration syntaxique est activée, l'outil met également les erreurs de parsage en surbrillance rouge. Survoler les messages d'erreurs affiche une infobulle expliquant l'erreur.</p> + +<p>Pour utiliser la fonctionnalité aller à la ligne avec le clavier, il suffit d'utiliser le raccourci clavier <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> sur Windows et Linux ou <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>L</kbd> sur Mac.</p> + +<h2 id="Lien_vers_un_numéro_de_ligne">Lien vers un numéro de ligne</h2> + +<p>Il est possible de faire un lien vers une ligne en particulier. Il suffit d'ajouter l'ancre <code>#lineNNN</code> dans l'URL du navigateur pour sauter à la ligne NNN.</p> + +<p>Par exemple : <a>view-source:https://www.mozilla.org/#line100</a></p> + +<h2 id="Code_source_de_la_sélection">Code source de la sélection</h2> + +<p>Si une partie de la page est sélectionnée, alors l'option "Code source de la sélection" est disponible dans le menu contextuel de la page. Le comportement est le même que pour "Code source de la page" sauf que la partie du code source affiché ne sera que celle correspondant à la sélection.</p> + +<h2 id="Code_MathML_de_la_sélection">Code MathML de la sélection</h2> + +<p>Si la souris survole du code <a href="/fr/docs/Web/MathML">MathML</a> lors d'un clic droit, alors l'option "Code MathML de la sélection" est disponible, il sert à visualiser le code MathML.</p> + +<h2 id="Limitations">Limitations</h2> + +<p>Il existe des limitations à l'outil qu'il faut connaitre :</p> + +<h3 id="Le_reporteur_d'erreurs_n'est_PAS_un_validateur">Le reporteur d'erreurs n'est <strong>PAS </strong>un validateur</h3> + +<p>L'outil ne reporte que les erreurs de parsing, <strong>PAS</strong> les erreurs de validité HTML. Par exemple mettre un élément {{ HTMLElement("div") }} en enfant d'un élément {{ HTMLElement("ul") }} n'est pas une erreur de parsing, mais <strong>ce n'est pas</strong> de l'HTML valide ! Cette erreur n'apparaitra donc pas dans l'outil. Pour valider un code HTML, il est nécessaire d'utiliser un validateur HTML tel que celui <a class="external" href="http://validator.w3.org/" title="http://validator.w3.org/">proposé par le W3C</a>.</p> + +<h3 id="Toutes_les_erreurs_de_parsing_ne_sont_pas_supportées">Toutes les erreurs de parsing ne sont pas supportées</h3> + +<p>Même si toutes les erreurs affichées sont des erreurs de parsing, toutes les erreurs de parsing ne sont pas affichées. Parmi celles qui ne sont pas supportées, on retrouve :</p> + +<ul> + <li>Les octets qui sont illégaux selon l'encodage du document ne sont pas considérés comme des erreurs.</li> + <li>Les caractères interdits ne sont pas considérés en tant qu'erreur.</li> + <li>Les erreurs de fin de fichier.</li> + <li>Les erreurs de Tree builder de texte (au contraire des tags, commentaires, ou doctypes) ne sont pas rapportés.</li> + <li>Les erreurs de parsing liées aux attributs <code>xmlns</code> ne sont pas rapportées.</li> +</ul> + +<h2 id="Coloration_syntaxique_XML">Coloration syntaxique XML</h2> + +<p>L'outil utilise le HTML tokenizer lorsqu'il met en surbrillance le code XML. Bien que le tokenizer supporte les processing instructions lors de la coloration de code XML, il s'agit de la seule fonctionnalité orientée XML fournie. À cause de cela, les doctypes qui ont un sous-ensemble interne ne sont pas colorés correctement, et les références d'entités des entités personnalisées ne sont pas non plus colorées correctement.</p> + +<p>Cette mauvaise coloration peut être observée en regardant le code source des fichiers chrome de Firefox (tel que les documents XUL). Cependant, cela ne devrait pas être un problème pour analyser des fichiers XML ordinaires.</p> + +<h2 id="A_voir_également">A voir également</h2> + +<ul> + <li><a class="external" href="http://hsivonen.iki.fi/view-source/" title="http://hsivonen.iki.fi/view-source/">HTML5 Parser-Based View Source Syntax Highlighting</a> (post de blog)</li> +</ul> diff --git a/files/fr/outils/vue_3d/index.html b/files/fr/outils/vue_3d/index.html new file mode 100644 index 0000000000..f750324939 --- /dev/null +++ b/files/fr/outils/vue_3d/index.html @@ -0,0 +1,101 @@ +--- +title: Vue 3D +slug: Outils/Vue_3D +tags: + - HTML + - Tools +translation_of: Tools/3D_View +--- +<div>{{ToolsSidebar}}</div> + +<div class="warning"> +<p>Depuis Firefox 47, la Vue 3D n'est plus disponible.</p> +</div> + +<p>Lorsque vous cliquez sur le bouton Vue 3D, la page passe en mode Vue 3D ; dans ce mode, vous pouvez voir votre page présentée dans une vue 3D dans laquelle les blocs imbriqués de HTML sont de plus en plus " hauts ", se projetant vers l'extérieur depuis le bas de la page. Cette vue facilite la visualisation de l'imbrication de votre contenu.</p> + +<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> + +<p>En cliquant et en glissant sur la vue, vous pouvez faire tourner et réorienter la présentation 3D de la hiérarchie de DOM de votre page pour le voir d'angles différents, mieux examiner sa structure. Hors de l'image, les éléments deviennent visibles pour que vous puissiez voir où vos éléments sont placés par rapport au contenu visible. Vous pouvez cliquer sur des éléments pour voir leur code HTML dans l'inspecteur HTML ou l'inspecteur de Style. Au contraire, vous pouvez cliquer sur des éléments dans l'inspecteur pour changer quel élément est choisi dans la vue 3D.</p> + +<p>Si vous ne voyez pas le bouton 3D dans l'inspecteur de page, il est possible que votre navigateur graphique doive être mis à jour.</p> + +<h2 id="Contrôle_de_la_vue_3D">Contrôle de la vue 3D</h2> + +<p>Il y a des raccourcis claviers et des touches avec la souris pour contrôler la vue 3D.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Fonction</td> + <td class="header">Clavier</td> + <td class="header">Souris</td> + </tr> + <tr> + <td>Zoom plus/moins</td> + <td><kbd>+</kbd> / <kbd>-</kbd></td> + <td>Mollette vers le haut/bas</td> + </tr> + <tr> + <td>Rotation gauche/droite</td> + <td><kbd>a</kbd> / <kbd>d</kbd></td> + <td>Faire glisser vers la gauche/droite</td> + </tr> + <tr> + <td>Rotation haut/bas</td> + <td><kbd>w</kbd> / <kbd>s</kbd></td> + <td>Faire glisser versle haut/bas</td> + </tr> + <tr> + <td>Se déplacer vers la gauche/droite</td> + <td><kbd>←</kbd> / <kbd>→</kbd></td> + <td>Souris à gauche/droite</td> + </tr> + <tr> + <td>Se déplacer vers le haut/bas</td> + <td><kbd>↑</kbd> / <kbd>↓</kbd></td> + <td>Souris en haut/bas</td> + </tr> + <tr> + <td>Remettre le zoom par défaut</td> + <td><kbd>0</kbd></td> + <td>Remet le taux d'agrandissement par défaut</td> + </tr> + <tr> + <td>Mettre le bloc sélectionné visible</td> + <td><kbd>f</kbd></td> + <td>Rend le bloc sélectionné visible {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td>Remettre la vue par défaut</td> + <td><kbd>r</kbd></td> + <td>Remet le zoom, la rotation et le déplacement par défaut{{ fx_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td>Masquer le bloc</td> + <td><kbd>x</kbd></td> + <td>Rend le bloc invisible, ce qui est pratique lorsqu'un bloc en dessous est caché. {{ fx_minversion_inline("12.0") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Causes_de_lutilisation_de_la_Vue_3D">Causes de l'utilisation de la Vue 3D</h2> + +<p>Il y a différentes façons la vue 3D est utile :</p> + +<ul> + <li>Si vous avez modifié le HTML causant des problèmes de disposition, en regardant avec la vue 3D peut vous aidez à trouver où vous vous êtes trompés. Souvent, les problèmes de disposition sont causés dans l'emboîtement incorrect de contenu. Ceci peut devenir beaucoup plus évident en utilisant la vue 3D et voyant où vos éléments sont mal emboîtés.</li> + <li>Si le contenu ne s'affiche pas, vous pouvez comprendre pourquoi; puisque la vue 3D vous laisse faire un zoom arrière pour voir les éléments qui rendent à l'extérieur de la zone visible de la page, vous pouvez trouver le contenu perdu cette façon.</li> + <li>Vous pouvez obtenir un regard pour savoir comment votre page est structurée, pour voir s'il peut y avoir des façons d'optimiser votre disposition.</li> + <li>Et, bien sûr, parce que c'est stupéfiant.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/Tools/Page_Inspector" title="Page Inspector">Inspecteur</a></li> + <li><a href="/fr/Tools/Page_Inspector/HTML_panel" title="HTML panel">Panneau HTML</a></li> + <li><a href="/fr/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Panneau Style</a></li> + <li><a href="/fr/Tools" title="Outils">Outils</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">Nouveaux outils de développement dans Firefox 11 Aurora</a> (blog post)</li> +</ul> diff --git a/files/fr/outils/vue_adaptative/index.html b/files/fr/outils/vue_adaptative/index.html new file mode 100644 index 0000000000..e9de1226c9 --- /dev/null +++ b/files/fr/outils/vue_adaptative/index.html @@ -0,0 +1,213 @@ +--- +title: Vue adaptative +slug: Outils/Vue_adaptative +tags: + - Firefox + - Mobile + - Responsive Design + - Tools + - Web Development +translation_of: Tools/Responsive_Design_Mode +--- +<div>{{ToolsSidebar}}</div> + +<p>Le <a href="/fr/Apps/Progressive/Responsive">responsive design</a> (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).</p> + +<p>Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.</p> + +<h2 id="Activation_et_désactivation_du_mode_de_vue_adaptative">Activation et désactivation du mode de vue adaptative</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 macOS).</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>:<img alt="" src="https://mdn.mozillademos.org/files/16318/RDM_button.png" style="display: block; height: 664px; margin-left: auto; margin-right: auto; width: 852px;"></li> + <li>Utiliser le raccourci clavier <strong>Ctrl+Maj+M</strong>, ou <strong>Cmd+Option+M</strong> pour macOS.</li> +</ul> + +<h2 id="Utiliser_la_vue_adaptative">Utiliser la vue adaptative</h2> + +<p>Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.</p> + +<div class="note"> +<p><strong>Note:</strong> L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.</p> +</div> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16319/RDM.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 852px;"></p> + +<p> </p> + +<p>Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16320/RDMdevtools.png" style="display: block; height: 799px; margin-left: auto; margin-right: auto; width: 852px;">Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.</p> + +<h2 id="Sélectionner_un_appareil">Sélectionner un appareil</h2> + +<p>Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :</p> + +<ul> + <li>Taille de l'écran</li> + <li>Ratio de pixel de l'appareil (le ratio de pixels physiques de l'appareil sur les pixels indépendants de l'appareil)</li> + <li>Simulation des évènements tactiles</li> +</ul> + +<p>En plus, Firefox modifiera l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété <code><a href="/fr/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> aura la même valeur.</p> + +<p>{{EmbedYouTube("JNAyKemudv0")}}</p> + +<p>Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : <span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices.</a></span></p> + +<h3 id="Sauvegarder_des_appareils_personnalisés">Sauvegarder des appareils personnalisés</h3> + +<p>Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :</p> + +<ul> + <li>taille</li> + <li>devicePixelRatio (DPR)</li> + <li>user agent (UA)</li> + <li>support tactile</li> +</ul> + +<p>Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Contrôler_les_appareils">Contrôler les appareils</h2> + +<p>Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.</p> + +<h3 id="Modifier_la_taille_d'écran">Modifier la taille d'écran</h3> + +<p>Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14939/rdm-set-size-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.</p> + +<p>Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.</p> + +<p>Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.</p> + +<h3 id="Modifier_le_ratio_pixel_de_l'appareil">Modifier le ratio pixel de l'appareil</h3> + +<p>Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.<img alt="" src="https://mdn.mozillademos.org/files/14941/rdm-set-dpr-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h3 id="Activerdésactiver_la_simulation_du_touch">Activer/désactiver la simulation du touch</h3> + +<p>Pour ce faire, il faut cliquer sur l'icône en forme de doigt :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14935/rdm-toggle-touch-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;">Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements <a href="/fr/docs/Web/Guide/API/DOM/Events/Touch_events">évènements touch</a>.</p> + +<h3 id="Contrôler_le_comportement_de_rechargement_de_page">Contrôler le comportement de rechargement de page</h3> + +<p>Depuis Firefox 60 le menu de sélection <em>Actualiser quand... </em>a été rajouté :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p> + +<p>Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :</p> + +<ul> + <li>Actualiser lors de l'activation/désactivation de la simulation tactile.</li> + <li>Actualiser lors du changement d'agent utilisateur.</li> +</ul> + +<p>Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.</p> + +<p>Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.</p> + +<p>Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Activerdésactiver_l'orientation">Activer/désactiver l'orientation</h3> + +<p>Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14937/rdm-toggle-orientation-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h2 id="Bridage_réseau">Bridage réseau</h2> + +<p>Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.</p> + +<p>Les caractéristiques émulées sont :</p> + +<ul> + <li>La vitesse de téléchargement</li> + <li>La vitesse d'upload (téléversement (berk))</li> + <li>latence minimum</li> +</ul> + +<p>La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Sélection</th> + <th scope="col">Vitesse de téléchargement</th> + <th scope="col">Vitesse d'upload</th> + <th scope="col">Latence minimum (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 KB/s</td> + <td>20 KB/s</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 KB/s</td> + <td>50 KB/s</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 KB/s</td> + <td>150 KB/s</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 KB/s</td> + <td>250 KB/s</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 MB/s</td> + <td>750 KB/s</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 MB/s</td> + <td>3 MB/s</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 MB/s</td> + <td>1 MB/s</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 MB/s</td> + <td>15 MB/s</td> + <td>2</td> + </tr> + </tbody> +</table> + +<p>Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :<img alt="" src="https://mdn.mozillademos.org/files/14945/rdm-network-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h2 id="Prendre_une_capture_d'écran">Prendre une capture d'écran</h2> + +<p>Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14943/rdm-screenshot-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;">Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.</p> + +<p>Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des <a href="/fr/docs/Tools/Settings">paramètres</a> alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.</p> diff --git a/files/fr/outils/webide/diagnostic/index.html b/files/fr/outils/webide/diagnostic/index.html new file mode 100644 index 0000000000..cb21658ec2 --- /dev/null +++ b/files/fr/outils/webide/diagnostic/index.html @@ -0,0 +1,165 @@ +--- +title: WebIDE diagnostic de connexion +slug: Outils/WebIDE/Diagnostic +translation_of: Archive/WebIDE/Troubleshooting +--- +<p>{{ToolsSidebar}}</p> + +<h2 id="Se_connecter_à_Firefox_pour_Android_via_USB">Se connecter à Firefox pour Android via USB</h2> + +<p>Si vous essayez de vous connecter à une instance de Firefox tournant sous Android que l'instance ne s'affiche pas, voici quelques manipulations que vous pouvez essayer :</p> + +<ul> + <li> + <p>Vérifiez votre version de Firefox : <strong>l'appareil doit avoir Firefox 36 ou plus</strong>. WebIDE ne détectera pas les versions plus anciennes automatiquement, vous avez donc besoin d'activer le suivi de port et de vous connecter au port de l'appareil. Pour cela, suivez les instructions du guide disponible <a class="external external-icon" href="/fr/docs/Tools/Remote_Debugging/Firefox_for_Android">ici</a>.</p> + </li> + <li> + <p>Vérifiez que vous avez activé le débogage distant dans Firefox : ouvrez Firefox pour Android, ouvrez son menu, sélectionnez <code>Paramètres</code>, et cochez la case a cocher située dans <code>Avancé > débogage distant via USB</code>.</p> + </li> + <li> + <p>Vérifiez que le débogage USB est autorisé dans les options de développement de l'appareil.</p> + </li> + <li> + <p>Si vous ne voyez toujours pas votre appareil dans la fenêtre de WebIDE, essayez d'activer/désactiver le débogage distant sur le téléphone :</p> + + <ul> + <li> + <p>Déconnectez votre appareil et désactivez le débogage distant sur votre téléphone.</p> + </li> + <li> + <p>Reconnectez l'appareil et activez le débogage distant. Cela relance l'instance de débogage du téléphone.</p> + </li> + <li> + <p>Essayez de nouveau de vous connecter avec WebIDE.</p> + </li> + </ul> + </li> + <li> + <p>Vérifiez le câble USB que vous utilisez :</p> + + <ul> + <li> + <p> Essayez de débrancher puis de rebrancher votre câble USB.</p> + </li> + <li> + <p>Essayez de brancher votre câble USB sur un autre port USB.</p> + </li> + <li> + <p>Essayez avec un autre câble USB. Les câbles fournis avec les téléphones on tendance à se détériorer rapidement.</p> + </li> + <li> + <p>Essayez avec un câble USB plus court, Il arrive que les câbles USB longs posent des problèmes.</p> + </li> + </ul> + </li> + <li> + <p>Si vous utilisez Linux :</p> + + <ul> + <li> + <p>Assurez vous d'avoir ajouté un fichier de règles <code>udev</code> , comme documenté dans la troisième étape de ce guide pour <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">configurer un appareil Android</a>. <code>l'attribut idVendor</code> à utiliser pour le Geeksphone est "05c6", et <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">cette page</a> liste les autres valeurs de l'attribut <code>idVendor</code>. Ensuite lancez la commande <code>adb devices</code> afin d'être sûr que votre appareil est bien dans la liste. Si l'appareil apparait en tant que "no permission", vous avez besoin de redémarrer adb server (e.g. <code>adb kill-server;adb start-server</code>).</p> + </li> + <li> + <p>Si vous utilisez le package <code>android-tools-adb</code> de Debian, ADB Helper force peut être tout serveur ADB existant à se fermer. Ce package désactive les connections TCP au serveur, ce dont ADB Helper a besoin.</p> + </li> + </ul> + </li> + <li> + <p>Si vous utilisez Mac OS X :</p> + + <ul> + <li> + <p>Si vous êtes un utilisateur de EasyTether, vous avez besoin de désinstaller ou de désactiver EasyTether : <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></p> + </li> + </ul> + </li> + <li> + <p>Si vous utilisez Windows, vérifiez que votre appareil Android est correctement reconnu qu'il utilise le driver Google USB Driver qui est inclus dans le SDK Android.</p> + </li> +</ul> + +<h2 id="Connecter_Firefox_pour_Android_via_Wi-Fi">Connecter Firefox pour Android via Wi-Fi</h2> + +<ul> + <li> + <p>Vérifiez vos versions de Firefox : Le débogage Wi-Fi nécessite Firefox 42 ou plus, et Firefox pour Android 42 ou plus sur le téléphone.</p> + </li> + <li> + <p>Les deux versions de Firefox (Android et ordinateur) doivent être connectés au même réseau Wi-Fi.</p> + + <ul> + <li> + <p>De plus, l'ordinateur ne peut <strong>pas </strong>utiliser une connexion filaire qui redirige vers le réseau Wi-Fi. Les deux Firefox doivent être réellement connectés au Wi-Fi.</p> + </li> + </ul> + </li> + <li> + <p>Vérifiez que vous avez une application de scan de code barres. Nous recommandons <a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android">celle-ci</a>.</p> + </li> + <li> + <p>Certains réseaux Wi-Fi peuvent bloquer les paquets utilisés pour la découverte d'appareils réseau. Vérifiez avec votre administrateur réseau que ces actions sont autorisées :</p> + + <ul> + <li> + <p>L'ordinateur et l'appareil Android doivent pouvoir envoyer des paquets UDP multicast sur les ports 50624-50625 à l'adresse multicast 224.0.0.115</p> + </li> + <li> + <p>Le modem réseau doit supporter les paquets UDP multicast</p> + </li> + <li> + <p>Les modems ne retransmettent pas ces paquets UDP multicast, il est donc nécessaire que les deux appareils communiquent directement avec le modem sans aucune bidouille entre.</p> + </li> + </ul> + </li> +</ul> + +<h2 id="Impossible_de_charger_la_liste_des_projets">Impossible de charger la liste des projets</h2> + +<p>Si vous ouvrez WebIDE dans une version de Firefox puis passez à une version antérieure de Firefox avec le même profil, il est possible que vous ayez l'erreur "Unable to load project list" en ouvrant WebIDE dans la version antérieure de Firefox.</p> + +<p>Cela peut se produire quand le système de stockage que WebIDE utilise (<a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB</a>) a besoin de déplacer ou restructurer ses fichiers internes pour une version de Firefox plus récente. La liste du projet devient alors inaccessible à la version antérieure de Firefox.</p> + +<p>Aucune donnée n'a été perdue, mais vous devez cependant continuez d'utiliser la version récente de Firefox qui a été utilisée avec votre profil pour avoir la liste.</p> + +<p>Si vous voulez vraiment utiliser la version antérieure de Firefox, vous pouvez essayez de supprimer uniquement la liste de la façon décrite ci-dessous mais cette façon n'est pas recommandée et il peut en résulter des problèmes additionnels de pertes de données :</p> + +<ol> + <li> + <p>Fermer Firefox</p> + </li> + <li> + <p>Trouver le dossier contenant votre profil Firefox</p> + </li> + <li> + <p>Trouver le dossier <code>storage</code> à l'intérieur du dossier du profil.</p> + </li> + <li> + <p>Dans une partie de cet arbre de fichiers, il devrait y avoir des fichiers et/ou des dossiers qui commencent par <code>4268914080AsptpcPerjo</code> (un nom haché de la base de données)</p> + </li> + <li> + <p>Supprimer les fichiers/dossiers sus-mentionnés</p> + </li> + <li> + <p>Relancer Firefox et WebIDE</p> + </li> +</ol> + +<h2 id="Activer_le_logging">Activer le logging</h2> + +<p>Vous pouvez activer les messages verbeux (verbose logging) pour obtenir des diagnostiques :</p> + +<ol start="1" style="list-style-type: decimal;"> + <li> + <p>Ourvrez <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, et ajoutez une nouvelle préférence nommée<code> extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, avec pour valeur de chaine de caractères <code>all</code>, et passez <code>extensions.adbhelper@mozilla.org.debug</code> à <code>true</code>.</p> + </li> + <li> + <p>Dans le <a class="external external-icon" href="/fr/kb/disable-or-remove-add-ons">Manageur des modules complémentaires</a>, désactivez pour réactivez le module complémentaire ADB Helper.</p> + </li> + <li> + <p>Ouvrez la <a href="/fr/docs/Tools/Browser_Console">Console du navigateur </a>et vous verrez que les messages de la console sont préfixés par <code>adb</code>.Si les messages sont du chinois pour vous, <a href="/fr/docs/Tools/WebIDE/Troubleshooting#Get_help">demandez de l'aide</a>.</p> + </li> +</ol> + +<h2 id="Obtenir_de_l'aide">Obtenir de l'aide</h2> + +<p>Allez dans la salle <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools sur IRC </a> et nous essayerons de vous aider.</p> diff --git a/files/fr/outils/webide/index.html b/files/fr/outils/webide/index.html new file mode 100644 index 0000000000..e16ada5740 --- /dev/null +++ b/files/fr/outils/webide/index.html @@ -0,0 +1,40 @@ +--- +title: WebIDE +slug: Outils/WebIDE +tags: + - Apps + - Debugging + - Firefox OS + - Tools + - WebIDE +translation_of: Archive/WebIDE +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"> +<p>WebIDE permet de connecter les outils de <a href="/fr/docs/Tools">développement de Firefox</a> à certains navigateurs, par exemple Firefox pour Android. Voir la page sur le <a href="/fr/docs/Tools/Remote_Debugging">Débogage distant </a>pour obtenir les instructions sur comment se connecter à un navigateur spécifique.</p> +</div> + +<p>Avec WebIDE, il est possible de <a href="/fr/docs/Tools/WebIDE/Setting_up_runtimes">configurer un ou plusieurs environnements</a>. Un environnement sert à lancer et déboguer une application. Un environnement peut être un appareil Firefox OS connecté à un ordinateur par USB (ou par Wi-Fi depuis Firefox 39), ou bien un Simulateur Firefox OS installé sur l'ordinateur même.</p> + +<p>Il est également possible de <a href="/fr/docs/Tools/WebIDE/Creating_and_editing_apps">créer une application, ou d'ouvrir une application existante</a>. Lors de la création d'une nouvelle application, il est possible de partir d'un modèle basique qui inclut la structure des dossiers et un minimum de code pour commencer dans de bonnes conditions. Il existe également des modèles plus complexes qui montrent le fonctionnement des API privilégiés. WebIDE affiche les fichiers d'une application sous forme d'arbre et, vous pouvez éditer et sauvegarder ces fichiers en utilisant l'éditeur de texte inclut (<a href="http://codemirror.net/" title="http://codemirror.net/">CodeMiror</a>). Bien entendu, vous n'êtes pas obligé d'utiliser l'éditeur fournit, vous pouvez très bien développer votre application dans votre éditeur préféré en dehors de WebIDE, et utiliser celui-ci uniquement pour le débug.</p> + +<p>Enfin, il est possible <a href="/fr/docs/Tools/WebIDE/Running_and_debugging_apps">d'installer une application dans un des environnements et de la lancer</a>. Il est alors possible d'utiliser les outils de développement classiques (<a href="/fr/docs/Tools/Page_Inspector">l'Inspecteur</a>, <a href="/fr/docs/Tools/Web_Console">la Console Web</a>, <a href="/fr/docs/Tools/Debugger">le Débogueur</a> etc...) pour examiner et modifier l'application lancée.</p> + +<hr> +<dl> + <dt><a href="/fr/docs/Tools/WebIDE/Opening_WebIDE">Ouvrir WebIDE</a></dt> + <dd>Comment ouvrir WebIDE depuis Firefox.</dd> + <dt><a href="/fr/docs/Tools/WebIDE/Setting_up_runtimes">Créer et configurer des environnements</a></dt> + <dd>Comment se connecter à un environnement dans lequel il est possible d'installer des applications. Dans les environnements on trouve : les appareils Firefox OS, Le Simulateur Firefox OS et Firefox pour Android.</dd> + <dt><a href="/fr/docs/Tools/WebIDE/Creating_and_editing_apps">Créer et éditer des applications</a></dt> + <dd>Comment créer, ouvrir et développer des applications en utilisant WebIDE.</dd> + <dt><a href="/fr/docs/Tools/WebIDE/Running_and_debugging_apps">Le menu environement</a></dt> + <dd>Une fois qu'un environement, il est possible d'utiliser ces informations pour obtenir des informations sur sur l'envrionement et ses applications, modifier des paramètres, et prendre une capture d'écran.</dd> + <dt><a href="/fr/docs/Tools/WebIDE/Running_and_debugging_apps">Lancer et déboguer des applications</a></dt> + <dd>Comment installer des applications dans un environnement et les déboguer en utilisant les outils de développement de Firefox.</dd> + <dt><a href="/fr/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Travailler avec des applications Cordova dans WebIDE</a></dt> + <dd>Depuis Firefox 39, il est possible d'éditer et de déboguer des applications Cordova en utilisant WebIDE.</dd> + <dt><a href="/fr/docs/Tools/WebIDE/Troubleshooting">Dépannage</a></dt> + <dd>Aide pour les problèmes avec WebIDE, notamment les problèmes de connection aux environnements.</dd> +</dl> diff --git a/files/fr/outils/webide/mise_en_place_des_environnements/index.html b/files/fr/outils/webide/mise_en_place_des_environnements/index.html new file mode 100644 index 0000000000..1777202efb --- /dev/null +++ b/files/fr/outils/webide/mise_en_place_des_environnements/index.html @@ -0,0 +1,131 @@ +--- +title: Mise en place des environnements +slug: Outils/WebIDE/Mise_en_place_des_environnements +translation_of: Archive/WebIDE/Setting_up_runtimes +--- +<div>{{ToolsSidebar}}</div><p>Un environnement vous permet d'exécuter et de déboguer des applications. Un environnement peut être :</p> + +<ul> + <li>Une autre instance de Firefox (Bureau ou Android).</li> + <li>Un appareil ou un simulateur Firefox OS.</li> + <li>Un autre navigateur (Google Chrome ou Safari par exemple), sur ordinateur ou téléphone.</li> +</ul> + +<p>Dans WebIDE, le panneau latéral permet de gérer les environnements :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12149/webide-right-sidebar.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p>Dans ce panneau, les environnements sont groupés en quatre types :</p> + +<dl> + <dt><a href="#usb">PÉRIPHÉRIQUES USB</a></dt> + <dd>Les périphériques Firefox OS connectés via USB. À partir de Firefox 36, cela permet aussi de se connecter à <a href="/fr/docs/Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebIDE">Firefox pour Android via USB</a>.</dd> + <dt><a href="#wifi">PÉRIPHÉRIQUES WI-FI</a></dt> + <dd>Les périphériques Firefox OS connectés en Wi-Fi. <em>À partir de Firefox 39.</em></dd> + <dt><a href="#simu">SIMULATEURS</a></dt> + <dd>Les instances de simulateur Firefox OS que vous avez installé.</dd> + <dt><a href="#autres">AUTRES</a></dt> + <dd>Des environnements distants qui peuvent se connecter à WebIDE à partir d'un hôte et port arbitraire. Si vous avez l'extension <a href="/fr/docs/Outils/Firefox_Tools_Adapter">Valence</a> installée, cette section listera aussi les <a href="#valence">environnements additionnels activés.</a></dd> +</dl> + +<p>Le reste de cette section décrit comment ajouter des environnements.</p> + +<h2 id="Connecter_un_périphérique_Firefox_OS">Connecter un périphérique Firefox OS</h2> + +<p>Si vous possédez une version assez récente de Firefox et de Firefox OS, vous pouvez <a href="#wifi">connecter le périphérique Firefox OS en Wi-Fi</a>. Sinon, vous pouvez vous connecter en USB.</p> + +<ul> + <li id="Connecting_over_USB"><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">Comment se connecter via USB</a></li> + <li><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">Comment se connecter via WiFi</a></li> +</ul> + +<h2 id="Se_connecter_à_Firefox_pour_Android">Se connecter à Firefox pour Android</h2> + +<p>Les appareils Android, connectés par USB et qui utilisent Firefox pour Android apparaissent comme environnements sous « Périphériques USB ». Depuis Firefox 42, il est possible de connecter Firefox Android via WiFi.</p> + +<ul> + <li id="Connecting_over_USB"><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Comment se connecter via USB</a></li> + <li><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Comment se connecter via WiFi</a></li> +</ul> + +<h2 id="Ajouter_un_simulateur"><a id="simu" name="simu">Ajouter un simulateur</a></h2> + +<p>Le <a href="/fr/docs/Outils/Simulateur_Firefox_OS">simulateur Firefox OS</a> est une version des couches supérieures de Firefox OS qui simule un appareil Firefox OS mais qui fonctionne sur un ordinateur de bureau. Il est lancé dans une fenêtre de la même taille qu'un appareil Firefox OS et contient les éléments d'interface utilisateur et les applications natives. Il permet également de simuler certaines API utilisées par les appareils Firefox OS.</p> + +<p>Cela signifie que, dans la plupart des cas, il n'est pas nécessaire d'avoir un appareil physique pour déboguer une application.</p> + +<p>Le simulateur ne fait pas partie intégrante de Firefox mais peut être téléchargé comme <a href="/fr/Modules_complémentaires">module complémentaire</a>. Si vous cliquez sur « Installer le simulateur » dans la liste déroulante pour les environnements, vous serez envoyés vers une page qui vous permet d'installer les simulateurs correspondants aux différentes versions de Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12151/webide-extra-components.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p>Vous pouvez installer autant de simulateurs que vous le souhaitez. Cependant, il faudra parfois être armé de patience car le téléchargement peut durer quelques minutes.</p> + +<div class="note"> +<p>Attention, pour lancer un simulateur Firefox OS 2.6 ou plus, il faut avoir Firefox 45 ou plus.</p> +</div> + +<p>Une fois que le(s) simulateur(s) est installé, vous pouvez fermer cette fenêtre et les simulateurs apparaîtront dans la liste des environnements disponibles :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12153/webide-installed-simulators.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p> </p> + +<p>Pour plus d'informations sur le simulateur, voir <a href="/fr/docs/Outils/Simulateur_Firefox_OS">l'article détaillé sur cet outil</a>.</p> + +<h3 id="Configurer_les_simulateurs">Configurer les simulateurs</h3> + +<div class="note"> +<p>Nouveau dans Firefox 42</p> +</div> + +<p>Depuis Firefox 42, à côté de chaque simulateur listé dans el panneau latéral, il y a une icône en forme d'engrenage :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11321/webide-settings.png" style="display: block; height: 50px; margin-left: auto; margin-right: auto; width: 364px;"></p> + +<p>Cliquer dessus ouvrir un écran permettant de configurer le simulateur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12155/webide-simulator-options.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">Il est possible de :</p> + +<ul> + <li>Le renommer</li> + <li>Pointer vers un <a href="https://developer.mozilla.org/en-US/Firefox_OS/Building_the_Firefox_OS_simulator">build Desktop B2G custom</a></li> + <li>Pointer vers un profil Gaia custom</li> + <li>Simuler un appareil spécifique avec une taille d'écran spécifique.</li> +</ul> + +<h2 id="Autres_environnements"><a id="autres" name="autres">Autres environnements</a></h2> + +<h3 id="Environnement_distant"><a id="remote run" name="remote run">Environnement distant</a></h3> + +<p>Avec un environnement distant, il est possible d'utiliser un nom d'hôte et un port arbitraires pour se connecter à l'appareil.</p> + +<p>En réalité, les appareils Firefox OS et Android se connectent à l'ordinateur grâce à un programme appelé Android Debug Bridge (<a href="http://developer.android.com/tools/help/adb.html">ADB</a>). Par défaut, WebIDE utilise un module complémentaire appelé ADB Helper, cela simplifie le processus d'installation et de redirection des ports pour que l'appareil puisse dialoguer avec l'ordinateur..</p> + +<p>Dans la plupart des cas, cette solution est la plus pratique. Cependant, on peut parfois vouloir utiliser ADB en dehors de WebIDE. Par exemple, on peut vouloir utiliser ADB directement depuis la ligne de commandes. Dans ce cas, on connectera l'appareil en définissant un nom et un port et en utilisant la commande <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> (par exemple <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + Si, ensuite, vous souhaitez connecter WebIDE avec cet appareil, il faut : <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">désactiver le module complémentaire ADB Helper</a> et effectuer la connexion WebIDE en utilisant l'option « Environnement distant » puis en saisissant l'hôte et le port utilisés avant avec <code>adb forward</code> (par exemple : <code>localhost:6000</code>).</p> + +<p>Avant Firefox 36, ADB Helper ne permettait pas de connecter Firefox pour Android, aussi, si vous souhaitez utiliser WebIDE pour vous connecter à Firefox pour Android, vous aurez besoin de paramétrer une redirection de port et d'utiliser un environnement sur mesure. <a href="/fr/docs/Outils/Débogage_distant/Firefox_for_Android">En savoir plus sur la connexion de Firefox pour Android via ADB avec une version antérieure à Firefox 36</a>.</p> + +<h3 id="Environnements_disponibles_avec_Valence"><a id="valence" name="valence">Environnements disponibles avec Valence</a></h3> + +<p>Si vous avez installé le module complémentaire <a href="/fr/docs/Outils/Firefox_Tools_Adapter">Valence</a>, vous verrez trois environnements supplémentaires :</p> + +<ul> + <li>Chrome sur Android</li> + <li>Safari sur iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>Pour les instructions relatives à ses environnements, voir les éléments respectifs sur la page sur <a href="/fr/docs/Outils/Débogage_distant">le débogage à distance</a>.</p> + +<h2 id="Sélectionner_un_environnement">Sélectionner un environnement</h2> + +<p>Une fois que vous avez paramétré un environnement, vous pouvez le sélectionner grâce au menu « Sélectionner l'environnement ».</p> + +<ul> + <li>Si vous sélectionnez un simulateur, WebIDE démarrera le simulateur</li> + <li>Si vous sélectionnez un appareil Firefox OS, WebIDE se connectera à l'appareil. Sur l'appareil, vous aurez une boîte de dialogues pour demander confirmation, validez pour accepter la connexion avec « OK ».</li> +</ul> + +<p>Cliquez sur le bouton « Lancer » au milieu de la barre d'outils de WebIDE, cela permettra d'<a href="/fr/docs/Tools/WebIDE/Running_and_debugging_apps">installer de lancer l'application</a> dans l'environnement sélectionné.</p> diff --git a/files/fr/outils/webide/monitor/index.html b/files/fr/outils/webide/monitor/index.html new file mode 100644 index 0000000000..0059e01205 --- /dev/null +++ b/files/fr/outils/webide/monitor/index.html @@ -0,0 +1,162 @@ +--- +title: Monitor +slug: Outils/WebIDE/Monitor +translation_of: Archive/WebIDE/Monitor +--- +<div>{{ToolsSidebar}}</div><div class="warning"> +<p><span style="color: #000000;">Le Moniteur WebIDE a été supprimé dans panel Firefox 60+. Ce panneau n'était utilisé que pour feu Firefox OS (puisses-tu reposer en paix).</span></p> +</div> + +<div class="summary"> +<p>Le Moniteur WebIDE est un outil de visualisation de données génériques fait pour aider à vérifier les performances des applications et appareils<a href="/fr/Firefox_OS"> Firefox OS</a>.</p> +</div> + +<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p> + +<p>Le Moniteur peut afficher des graphiques interactifs en temps réel.</p> + +<h2 id="Graphiques_disponibles">Graphiques disponibles</h2> + +<p>Le Moniteur dispose de plusieurs types de graphiques différents, ceux-ci s'affichent dès que le WebIDE est connecté à un runtime Firefox OS.</p> + +<h3 id="Unique_Set_Size">Unique Set Size</h3> + +<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p> + +<p>Ce graphique affiche l'impact de l'utilisation mémoire de tous les processus Firefox OS. Si vous êtes intéressés par la consommation mémoire d'une application Firefox OS, lancez celle-ci et la mémoire privée utilisée par ses processus sera affiché ici.</p> + +<h2 id="Afficher_vos_propres_données">Afficher vos propres données</h2> + +<p>Il est relativement simple d'afficher n'importe quel type de données dans le Moniteur, car il accepte des mises à jour peu structurées depuis un grand nombre de sources différentes.</p> + +<h3 id="Depuis_un_appareil_Firefox_OS">Depuis un appareil Firefox OS</h3> + +<p>Il est possible d'envoyer des données depuis un appareil connecté en envoyant des notifications d'observation (observer notifications).</p> + +<p>Note: Si vous voulez faire ceci sur une <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">application certifiée</a>, suivez <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">ces instructions.</a></p> + +<pre><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></pre> + +<p>Il est passible d'envoyer des données depuis n'importe quel code JS ayant les privilèges chrome. Voici un exemple concret qui mesure le temps d'exécution de code JavaScript :</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const Services = require('Services'); + +var start = Date.now(); +// code to benchmark +var stop = Date.now(); + +var data = { graph: 'Performance', myFeature: stop-start, time: stop }; +Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</pre> + +<h4 id="C">C++</h4> + +<pre class="brush: cpp">observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</pre> + +<p>Il est possible d'envoyer des données depuis n'importe ou dans Gecko. Voici un exemple concret mesurant le temps d'exécution d'un code :</p> + +<pre class="brush: cpp">#include <time.h> +#include "nsPrintfCString.h" +#include "nsIObserverService.h" + +clock_t start = clock(); +// code to benchmark +clock_t stop = clock(); +double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000); + +nsCOMPtr<nsIObserverService> observerService = services::GetObserverService(); +if (observerService) { + nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time); + nsAutoString data = NS_ConvertUTF8toUTF16(str); + observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get()); +}</pre> + +<h3 id="Depuis_votre_ordinateur">Depuis votre ordinateur</h3> + +<p>Il est facile d'envoyer des données au Moniteur en passant par un serveur WebSockets. Cela peut être utile si vous concevez une extension de Firefox, comme un outil de ligne de commande ou un service web.</p> + +<p>Par défaut, le Moniteur écoute les serveurs tournant sur le port 9000 de votre ordinateur. Il est possible de changer ce port en mettant à jour la préférence <code>devtools.webide.monitorWebSocketURL</code>.</p> + +<p>Il est même possible de lui faire accepter des données depuis votre réseau local ou depuis n'importe ou sur internet.</p> + +<h4 id="Node.js">Node.js</h4> + +<pre class="brush: js">TODO</pre> + +<h4 id="Python">Python</h4> + +<pre class="brush: python">TODO</pre> + +<h3 id="Formats_supportés">Formats supportés</h3> + +<p>Le Moniteur accepte des données sous la forme d'objets JSON qui ressemblent généralement à ceci :</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "curve": "myCurve", + "value": 42, + "time": 1234567890 +}</pre> + +<p>Ce format est fait pour être très flexible. Si un graphique ou une courbe n'est pas défini, elle sera créée automatiquement.</p> + +<h4 id="Noms_arbitraires">Noms arbitraires</h4> + +<p>Les données non reconnues seront considérées comme un nom de courbe et sa valeur.</p> + +<p>Le plus petit paquet de données que vous pouvez envoyer ressemble à ceci :</p> + +<pre class="brush: json">{ "myCurve": 42 }</pre> + +<p>Cela ajoutera un point de donnée à "myCurve" dans le graph sans nom. Le paramètre <code>time</code> manquant sera automatiquement celui du moment ou le paquet est reçu.</p> + +<p>Pour plus de précession, il est recommandé de toujours spécifier un a <code>timestamp</code> pour vos données :</p> + +<pre class="brush: json">{ + "current": 60, + "voltage": 500, + "time": 1234567890 +}</pre> + +<h4 id="Valeurs_Multiples">Valeurs Multiples</h4> + +<p>Dans une seule mise à jour, il est possible d'envoyer des données pour plusieurs courbes :</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "myCurve1": 50, + "myCurve2": 300, + "myCurve3": 9000, + "time": 1234567890 +}</pre> + +<p>Ou plusieurs points pour une même courbe :</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "curve": "myCurve", + "values": [ + { "time": 1234567890, "value": 42 }, + { "time": 1234567981, "value": 51 } + ] +}</pre> + +<h4 id="Mises_à_jour_multiples">Mises à jour multiples</h4> + +<p>Il est également possible d'envoyer plusieurs mises a jour de données dans un tableau :</p> + +<pre class="brush: json">[ + { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 }, + { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 } +]</pre> + +<h4 id="Évènements_ponctuels">Évènements ponctuels</h4> + +<p>Pour marquer des évènements spéciaux dans un graph avec une barre verticale, il faut ajouter une clé <code>event</code> dans la mise à jour :</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "event": "myEvent", + "time": 1234567980 +}</pre> diff --git a/files/fr/outils/webide/opening_webide/index.html b/files/fr/outils/webide/opening_webide/index.html new file mode 100644 index 0000000000..c73e890c30 --- /dev/null +++ b/files/fr/outils/webide/opening_webide/index.html @@ -0,0 +1,32 @@ +--- +title: Ouvrir WebIDE +slug: Outils/WebIDE/Opening_WebIDE +tags: + - WebIDE + - opening +translation_of: Archive/WebIDE/Opening_WebIDE +--- +<div>{{ToolsSidebar}}</div><p>Il y a trois moyens d'ouvrir WebIDE :</p> + +<ul> + <li>Dans le menu "Développement" <em>(qui est un sous menu du menu "Outils" sous OS X)</em>, cliquer sur <em>"</em>WebIDE".</li> + <li>Utiliser le raccourci clavier <kbd>Maj</kbd>+<kbd>F8</kbd>.</li> + <li>Cliquer sur l’icône dédié à cet outils dans la barre d'outils de Firefox. Cette icône est présente par défaut dans<a href="/fr/Firefox/Developer_Edition"> Firefox Developer Edition</a>. Pour les autres versions de Firefox supérieures à la <a href="/fr/Firefox/Releases/36">version 36</a>, l'icone est présente après avoir ouvert WebIDE pour la première fois :</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p>Voici à quoi ressemble WebIDE :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12147/webide.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">La liste déroulante à gauche nommée "Ouvrir une application" permet d'ouvrir des applications existantes ou d'en créer des nouvelles.<br> + La liste déroulante sur la droite nommée "Sélectionner l’environnement" permet de sélectionner un environnement ou d'un ajouter un nouveau.</p> + +<p>Les boutons au milieu servent (de gauche à droite) à : lancer, arrêter et déboguer l'application. Ils sont activés uniquement lorsqu'une application est ouvert et qu'un environnement est sélectionné.</p> + +<p>Il est possible de changer la taille de la police dans WebIDE avec les raccourcis claviers standard (sous OS X, remplacez <kbd>ctrl</kbd> par <kbd>cmd</kbd>):</p> + +<ul> + <li><kbd>Ctrl</kbd> + <kbd>+</kbd> augmente la taille de la police.</li> + <li><kbd>Ctrl</kbd> + <kbd>-</kbd> diminue la taille de la police.</li> + <li><kbd>Ctrl</kbd> + <kbd>0</kbd> restaure la taille par défaut de la police.</li> +</ul> diff --git a/files/fr/outils/webide/the_runtime_menu/index.html b/files/fr/outils/webide/the_runtime_menu/index.html new file mode 100644 index 0000000000..5f6067761e --- /dev/null +++ b/files/fr/outils/webide/the_runtime_menu/index.html @@ -0,0 +1,53 @@ +--- +title: Le menu environements +slug: Outils/WebIDE/The_runtime_menu +translation_of: Archive/WebIDE/The_runtime_menu +--- +<div>{{ToolsSidebar}}</div><p>Une fois qu'un environnement est sélectionné, il est possible d'accéder aux options de l'environnement :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12161/webide-runtime-settings.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">Cela sert à :</p> + +<ul> + <li><a href="/fr/docs/Tools/WebIDE/The_runtime_menu#Runtime_info">voir les informations sur l'environnement</a></li> + <li><a href="/fr/docs/Tools/WebIDE/The_runtime_menu#Permissions_table">voir un tableau des permissions de l'application</a></li> + <li><a href="/fr/docs/Tools/WebIDE/The_runtime_menu#Device_preferences">voir et éditer les préférences de l'appareil</a></li> + <li><a href="/fr/docs/Tools/WebIDE/The_runtime_menu#Device_settings">voit et éditer les paramètres de l'appareil</a></li> + <li><a href="/fr/docs/Tools/WebIDE/The_runtime_menu#Screenshot">prendre une capture d'écran</a></li> + <li>déconnecter depuis l'environnement</li> +</ul> + +<h2 id="Informations_de_l'environnement">Informations de l'environnement</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12163/webide-runtime-info.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<h2 id="Tableau_des_permissions">Tableau des permissions</h2> + +<p>Un tableau résumant les <a href="/fr/Apps/Build/App_permissions">permissions de l'application</a> pour l'environnement sélectionné, indiquant pour chaque API et chaque <a href="/fr/Marketplace/Options/Packaged_apps#Types_of_packaged_apps"> type d'application</a> laquelle est autorisée (✓), refusée (✗) ou bien si l'avis de l'utilisateur est demandé (!).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12165/webide-permissions-table.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 1013px;"></p> + +<h2 id="Preferences_de_l'appareil">Preferences de l'appareil</h2> + +<p>Un tableau listant les préférences qui peuvent être éditées et sont disponibles dans dans l'environnement via le <a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService">service Preferences</a>. Il s'agit de valeurs de configurations de plateforme qui exposent le même jeu de donée que la page about:config de Firefox, mais pour l'appareil.</p> + +<p>Parce que ces préférences sont très sensibles en terme de sécurité, il est nécessaire de désactiver l'option de <a href="/fr/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_(including_certified_apps.2C_main_process.2C_etc.)">restrictions des privilèges des outils de développements</a> avant de pouvoir les modifier.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12167/webide-device-preferences.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 1013px;"></p> + +<h2 id="Paramètres_de_l'appareil">Paramètres de l'appareil</h2> + +<div class="note"> +<p>Nouveau dans Firefox OS 2.5.</p> +</div> + +<p>Un tableau listant et permettant l'édition des paramètres qui peuvent être contrôlés dans l'application de paramétrage de Firefox OS. La plupart des choses sur l'appareil ont une interface pour changer le paramètre, telles que le volume et l'alarme qui se trouvent dans les paramètres de l'appareil.</p> + +<p>Ces paramètres sont moins sensibles et peuvent être modifiés sans avoir besoin de privilèges spéciaux.</p> + +<p>Pour pouvoir utiliser cette fonctionnalité, vous devez avoir Firefox 38 ou plus récent, et vous connecter à un Firefox OS 2.5 ou plus récent.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12169/webide-device-settings.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 1013px;"></p> + +<h2 id="Screenshot"><strong>Screenshot</strong></h2> + +<p>Une commande pour prendre une capture d'écran de l'environnement.</p> diff --git a/files/fr/outils/webide/working_with_cordova_apps_in_webide/index.html b/files/fr/outils/webide/working_with_cordova_apps_in_webide/index.html new file mode 100644 index 0000000000..bd444b8959 --- /dev/null +++ b/files/fr/outils/webide/working_with_cordova_apps_in_webide/index.html @@ -0,0 +1,46 @@ +--- +title: Travailler avec des applications Cordova dans WebIDE +slug: Outils/WebIDE/Working_with_Cordova_apps_in_WebIDE +translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Nouveau dans Firefox 39.</p> +</div> + +<p><a href="http://cordova.apache.org/">Apache Cordova</a> permet d'écrire des application en utilisant HTML, JavaScript, et CSS, et ensuite de générer des applications natives pour les plate-formes mobiles tels que iOS ou Android. Avec Cordova, <a href="/fr/Apps/Tools_and_frameworks/Cordova_support_for_Firefox_OS">vous pouvez également générer une version de votre application pour Firefox OS.</a></p> + +<p>Depuis Firefox 39, WebIDE supporte directement les applications Cordova : Cela signifie que vous pouvez éditer des applications Cordova dans WebIDE, et WebIDE s'occupe de générer la version Firefox OS tout seul.</p> + +<p>Pour commencer, il faut créer une application Cordova de façon classique :</p> + +<ul> + <li>Installer Cordova : + <pre class="brush: bash"><code>npm install -g cordova</code></pre> + </li> +</ul> + +<ul> + <li>Créer une application Cordova : + <pre class="brush: bash"><code>cordova create my-app</code></pre> + </li> +</ul> + +<ul> + <li>Ajouter Firefox OS comme plate-forme cible pour votre application : + <pre class="brush: bash">cd my-app +cordova platform add firefoxos</pre> + </li> +</ul> + +<div class="note"> +<p>Sur Windows, il est possible d'ouvrir une invite de commande directement dans un dossier en faisant <kbd>Maj</kbd> + <kbd>clic droit</kbd> sur le dossier voulu puis sélectionner "Ouvrir une fenêtre commandes ici"</p> +</div> + +<p>Il faut ensuite :</p> + +<ul> + <li><a href="/fr/docs/Tools/WebIDE/Opening_WebIDE">Ouvrir WebIDE.</a></li> + <li>Sélectionner <a href="/fr/docs/Tools/WebIDE/Creating_and_editing_apps#Open_a_packaged_app">"Ouvrir une application empaquetée"</a>, puis sélectionner le dossier contenant le fichier <code>config.xml</code> de l'application.</li> +</ul> + +<p>Il est maintenant possible d'éditer l'application en tant qu'application Cordova, et lorsque <a href="/fr/docs/Tools/WebIDE/Running_and_debugging_apps#Running_apps">l'application est lancée</a>, WebIDE se charge tout seul de générer la version Firefox OS. WebIDE régénère également l’application lorsque des changements qui affectent le <a href="/fr/Apps/Build/Manifest">manifeste</a> de l'application, afin de pouvoir effecteur la <a href="/fr/docs/Tools/WebIDE/Creating_and_editing_apps#Manifest_validation">validation de manifeste</a>.</p> diff --git a/files/fr/outils/éditeur_de_style/index.html b/files/fr/outils/éditeur_de_style/index.html new file mode 100644 index 0000000000..dfbd8fb61f --- /dev/null +++ b/files/fr/outils/éditeur_de_style/index.html @@ -0,0 +1,113 @@ +--- +title: Éditeur de Style +slug: Outils/Éditeur_de_style +tags: + - CSS + - Stylesheets + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Style_Editor +--- +<div>{{ToolsSidebar}}</div> + +<p>L'Éditeur de Style permet de :</p> + +<ul> + <li>Voir et éditer les feuilles de style associées à une page.</li> + <li>Créer de nouvelles feuilles de style de zéro et les appliquer à la page.</li> + <li>Importer des feuilles de styles existantes et les appliquer à la page.</li> +</ul> + +<p>{{EmbedYouTube("7839qc55r7o")}}</p> + +<p>Pour ouvrir l'Éditeur de Style, choisissez l'option "Éditeur de Style" du menu "Développement Web" (qui lui-même est un sous-menu du menu "Outils"). La <a href="/fr/docs/Tools/DevTools_Window" title="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra alors en bas de la fenêtre du navigateur, avec l'Éditeur de Style activé :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; height: 238px; margin-left: auto; margin-right: auto; width: 816px;"></p> + +<p>L'Éditeur de Style est divisé en trois grandes parties :</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">Le panneau des feuilles de style à gauche</a></li> + <li><a href="/fr/docs/Tools/Style_Editor#The_editor_pane">Le panneau d'édition à droite</a></li> + <li><a href="/fr/docs/Tools/Style_Editor#The_media_sidebar">Le volet média</a></li> +</ul> + +<h2 id="Le_panneau_des_feuilles_de_style">Le panneau des feuilles de style</h2> + +<p>Le panneau des feuilles de style sur la gauche, liste toutes les feuilles de style utilisées par le document actuel. Vous pouvez Activer/Désactiver rapidement l'affichage d'une feuille en cliquant sur l’icône en forme d'œil à gauche de son nom. Vous pouvez sauvegarder toutes les modifications de la feuille de style sur votre ordinateur en cliquant sur le bouton "Enregistrer" situé en bas à droite de chaque feuille dans la liste.</p> + +<p>Depuis Firefox 40, le panneau des feuilles de styles inclut également un menu contextuel qui permet d'ouvrir la feuille de style sélectionnée dans un nouvel onglet.</p> + +<h2 id="Le_panneau_d'édition">Le panneau d'édition</h2> + +<p>Le panneau d'édition est au centre. C'est là que le code source de la feuille de style sélectionnée peut être lu et édité. Toutes les modifications sont automatiquement appliquées à la page. Ceci rend facile l'expérimentation, les corrections et les tests. Quand vous êtes satisfait(e) de vos modifications, vous pouvez sauvegarder une copie locale en cliquant sur le bouton sauvegarder de la feuille dans le panneau des feuilles de style.</p> + +<p>L'éditeur affiche les numéros de ligne et la coloration syntaxique pour vous aider et rendre la lecture de vos CSS plus facile. Il supporte aussi une partie des <a href="#Raccourcis_clavier">raccourcis clavier</a>.</p> + +<p>L'Éditeur de Style dé-minimifie automatiquement les feuilles de style qu'il détecte, sans altérer le fichier original. Ce qui rend le travail sur des pages optimisées beaucoup plus facile.</p> + +<p>L'Éditeur de Style supporte l’autocomplétion. Commencez simplement à taper et il vous affichera une liste de suggestions :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Vous pouvez désactiver cette fonctionnalité dans les <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Paramètres de l'Éditeur de Style</a>.</p> + +<h2 id="Le_volet_média">Le volet média</h2> + +<p>L'éditeur de Style affiche un volet sur la partie droite dès que la feuille de style sélectionnée contient des <a href="/fr/docs/Web/CSS/Media_queries">règles <code>@media</code></a>. Le volet liste les règles et fournit un lien vers la ligne de la feuille de style définissant la règle. Cliquez sur une des entrées pour basculer sur la règle. La règle est affichée grisée, si la média query n'est pas actuellement appliquée.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8649/editeur-style-media.png" style="height: 320px; width: 900px;"></p> + +<p>Le volet média est très utile quand associé à la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> pour créer et déboguer des mises en pages responsive :</p> + +<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p> + +<p>Depuis Firefox 46, si une règle <code>@media</code> contient une taille d'écran dans une condition, alors il est possible de cliquer dessus. Cela redimensionne l'écran à la taille en question en utilisant la Vue Adaptative :</p> + +<p>{{EmbedYouTube("XeocxoW2NYY")}}</p> + +<h2 id="Créer_et_importer_des_feuilles_de_style.">Créer et importer des feuilles de style.</h2> + +<p>Vous pouvez créer une nouvelle feuille de style en cliquant sur le bouton "Nouveau" dans la barre d'outils. Puis vous pouvez commencer à écrire du CSS dans le nouvel éditeur et observer comment les nouveaux styles s'appliquent en temps réel de la même manière que les modifications sur les autres feuilles.</p> + +<p>Vous pouvez charger une feuille de style depuis votre ordinateur et l’appliquer à la page en cliquant sur le bouton "Importer"</p> + +<h2 id="Support_de_Source_map">Support de "Source map"</h2> + +<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> + +<p>Les développeurs web cré<span class="vert">ent </span>souvent des fichiers CSS en utilisant un préprocesseur comme <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, ou <a href="http://learnboost.github.io/stylus/">Stylus</a>. Ces outils génèrent des fichiers CSS depuis une syntaxe plus riche et plus déclarative. Ainsi, être capable de modifier le CSS généré n'est pas très utile, car le code maintenu est le code écrit dans la syntaxe du préprocesseur, pas le CSS généré. Il faudrait alors éditer le CSS généré puis se débrouiller pour réappliquer manuellement les changements au code source d'origine.</p> + +<p>Les "Source maps" permettent aux outils de remonter depuis le CSS généré jusqu’à la syntaxe d'origine, pour pouvoir afficher et donner la possibilité d'éditer les fichiers dans la syntaxe d'origine. Depuis Firefox 29, l'Éditeur de style peut comprendre les "CSS source maps".</p> + +<p>Cela veut dire que si vous utilisez par exemple Sass, l'éditeur affichera et permettra d'éditer les fichiers Sass plutôt que le CSS généré grâce à eux.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">Pour que cela fonctionne, il est nécessaire de :</p> + +<ul> + <li>Utiliser un préprocesseur de CSS qui respecte la <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">proposition de "Source Map" Revision 3</a>. Aujourd’hui cela signifie utiliser la version 3.3.0 de <a href="http://sass-lang.com/">Sass</a>, ou la <a href="http://roots.io/using-less-source-maps/">version 1.5.0 de Less</a>. D'autres préprocesseurs sont actuellement en train de travailler pour devenir compatible ou considèrent le faire.</li> + <li>Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre <code>--sourcemap</code> à l’outil de ligne de commande Sass.</li> +</ul> + +<h3 id="Voir_les_sources_d'origine">Voir les sources d'origine</h3> + +<p>Si vous activez "Montrer les sources d'origine" dans les <a href="/en-US/docs/Tools_Toolbox#Style_Editor">options de l'Éditeur de Style</a>, les liens dans volet des règles CSS de l'outil Inspecteur Web pointeront sur le fichier d'origine, dans l'Éditeur de style.</p> + +<p>Depuis Firefox 35, les sources originales sont affichées par défaut.</p> + +<h3 id="Éditer_les_sources_d'origine">Éditer les sources d'origine</h3> + +<p>Il est également possible d'éditer les sources d'origine dans l'Éditeur de style et voir les résultats appliqués à la page immédiatement. Pour que cela fonctionne, il y a deux étapes supplémentaires.</p> + +<p>Premièrement, configurer le préprocesseur pour qu'il surveille les sources d'origine et régénère automatiquement le CSS. Quand les sources changent. Avec Sass c'est possible simplement en passant <code>le paramètre --watch</code> :</p> + +<pre>sass index.scss:index.css --sourcemap --watch</pre> + +<p>Deuxièmement, il faut sauvegarder les sources d'origine dans l'Éditeur de Style. en cliquant sur le bouton "Enregistrer" à côté du fichier CSS.</p> + +<p>Il est alors possible de faire des modifications du fichier source dans l'Éditeur de Style, le CSS est régénéré automatiquement et les changements sont visibles immédiatement.</p> + +<h2 id="Raccourcis_clavier">Raccourcis clavier</h2> + +<h3 id="Éditeur_de_source">Éditeur de source</h3> + +<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> |