initial commit

2 files changed, 422 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 &gt; 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 &gt; 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>