path: root/files/ru/orphaned/mozilla/add-ons/webextensions/debugging/index.html

---
title: Отладка
slug: Mozilla/Add-ons/WebExtensions/Перевод
tags:
  - Firefox
  - Mozilla
  - Отладка
  - Пособие
  - Предоставление Веб-страниц
translation_of: Mozilla/Add-ons/WebExtensions/Debugging
---
<div>{{AddonSidebar}}</div>

<div>This article explains how you can use the Firefox developer tools to debug extensions built with WebExtension APIs.</div>

<p>An extension can consist of various different pieces — background scripts, popups, options pages, content scripts, sidebars — and you'll need to use a slightly different workflow to debug each piece. So each piece gets a top-level section in this article, and the intention is that these sections can be read in isolation. We'll begin by introducing the Add-on Debugger, which you'll use to debug most of the pieces of your extension.</p>

<ul>
</ul>

<h2 id="The_Add-on_Debugger">The Add-on Debugger</h2>

<p>For most of this article we'll use the Add-on Debugger. To open the Add-on Debugger:</p>

<ul>
 <li>open Firefox</li>
 <li>enter "about:debugging" in the URL bar</li>
 <li>check the box labelled "Enable add-on debugging"</li>
 <li>click the "Debug" button next to your extension</li>
 <li>click "OK" in the warning dialog.</li>
</ul>

<p>You'll then see a new window open. The main Firefox window will be switched into the foreground, so you'll have to click on the new window to bring it in front.</p>

<p>{{EmbedYouTube("G2a65ewjfj0")}}</p>

<p>This new window is sometimes called a "toolbox" and contains the debugging tools we'll use. It has a tabbed interface: the row of tabs along the top lets you switch between the different tools:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16309/add-on-debugger.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>In this article we'll use three debugging tools:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Web_Console">The Console</a>: this displays messages logged by the extension as well as error messages logged by the browser as it runs the extension. It also provides a command line enabling you to execute JavaScript in the extension's context.</li>
 <li><a href="/en-US/docs/Tools/Debugger">The Debugger</a>: this enables you to set breakpoints and watchpoints in your extension's JavaScript, and examine and modify its internal state.</li>
 <li><a href="/en-US/docs/Tools/Page_Inspector">The Inspector</a>: this enables you to examine and modify the HTML and CSS used to build your extension's pages.</li>
</ul>

<h2 id="Debugging_background_scripts">Debugging background scripts</h2>

<div class="note">
<p>The examples in this section use the "notify-link-clicks-l10n" example extension. If you'd like to play along, you can find this example in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p>
</div>

<p><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background scripts</a> stay loaded for the lifetime of the extension. They're loaded inside an invisible "background page": by default this is an empty HTML document, but you can specify your own HTML content using the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">"background" key in "manifest.json"</a>.</p>

<p>You can debug background scripts using the <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Add-on Debugger</a>.</p>

<p>In the Add-on Debugger's Console you'll see logged output, including calls to <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> from your own background scripts and any errors the browser raises as it executes them. Note that at the moment, the console shows all errors raised by the browser, not just errors related to your extensions code.</p>

<p>For example, the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example extension logs a message from its background script when it receives a message from one of its content scripts:</p>

<p>{{EmbedYouTube("WDQsBU-rpN0")}}</p>

<p>Using the Console's command line, you can access and modify the objects created by your background scripts.</p>

<p>For example, here we call the <code>notify()</code> function defined in the extension's background script:</p>

<p>{{EmbedYouTube("g-Qgf8Mc2wg")}}</p>

<p>If you switch to the Debugger, you'll see all your extension's background scripts. You can set breakpoints, step through code, and do <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>.</p>

<p>{{EmbedYouTube("MNeaz2jdmzY")}}</p>

<p>If you press the Escape key while you're in the Debugger, the toolbox will be split, with the bottom half now occupied by the Console. While you're at a breakpoint, you can now modify the program's state using the console. See <a href="/en-US/docs/Tools/Web_Console/Split_console">Split console</a> for more on this.</p>

<h2 id="Debugging_options_pages">Debugging options pages</h2>

<p><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages">Options pages</a> are HTML pages that the extension developer can supply, that contain options for the extension. They are typically displayed in an iframe in the Add-ons Manager (to see the Add-ons Manager, visit the "about:addons" page).</p>

<p>To debug options pages:</p>

<ul>
 <li>open the <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Add-on Debugger</a> for your extension</li>
 <li>open your extension's option page.</li>
</ul>

<p>Any JavaScript sources it includes are then listed in the Debugger:</p>

<p>{{EmbedYouTube("BUMG-M8tFF4")}}</p>

<div class="note">
<p>This video uses the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colourbeastify">favourite-colour</a> example extension.</p>
</div>

<p>You'll also see any messages logged by your code in the Add-on Debugger's Console.</p>

<p>You can also use the Add-on Debugger to debug the page's HTML and CSS. First, though, you need to point the tools at the iframe that hosts the options page. To do this: open the options page, click the icon highlighted in the screenshot below, and select the options page from the drop-down list:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>

<p>Now switch to the Inspector tab, and you'll be able to examine and edit HTML and CSS for the page:</p>

<p>{{EmbedYouTube("-2m3ubFAU94")}}</p>

<h2 id="Debugging_popups">Debugging popups</h2>

<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Popups">Popups</a> are dialogs that are attached to browser actions or page actions. They are specified using an HTML document that can include CSS and JavaScript sources for styling and behavior. Whenever the popup is visible, you can use the <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Add-on Debugger</a> to debug its code.</p>

<p>One problem with popups is that if a popup is open and you click outside the popup, the popup is closed and its code is unloaded. This obviously makes them impossible to debug. To suppress this behavior, select Disable Popup Auto-Hide from the Elipsis menu as shown below:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16301/add-on-debugger.png" style="display: block; height: 612px; margin-left: auto; margin-right: auto; width: 876px;"></p>

<p>Now, when you open a popup it will stay open until you press Escape.</p>

<div class="note">
<p><strong>Note:</strong> This change applies to built-in browser popups, like the Elipsis menu (<code>...</code>), as well as extension popups.</p>

<p>The setting does not persist across sessions. When you close the window, the setting reverts to auto-hide popups.</p>
Internally, this button just toggles the <code>ui.popup.disable_autohide</code> preference, which you can toggle manually using about:config.</div>

<p>When the popup is open, its JavaScript sources will be listed in the Debugger. You can set breakpoints and modify the program's internal state:</p>

<p>{{EmbedYouTube("hzwnR8qoz2I")}}</p>

<div class="note">
<p>This video uses the <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> example extension.</p>
</div>

<p>You can also use the Add-on Debugger to debug the popup's HTML and CSS. First, though, you need to point the tools at the popup's document. To do this: open the popup, then click the icon highlighted in the screenshot below and select the popup's page from the drop-down list:<img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>

<p>Now switch to the Inspector, and you'll be able to examine and edit the popup's HTML and CSS:</p>

<p>{{EmbedYouTube("6lvdm7jaq7Y")}}</p>

<h2 id="Debugging_content_scripts">Debugging content scripts</h2>

<p>You can use the Add-on Debugger to debug background pages, options pages, and popups. However, you can't use it to debug content scripts. This is because, in <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>, content scripts run in a different process from the other parts of your extension. The browser console has similar limitations.</p>

<p>To debug content scripts attached to a web page, use the normal web developer tools for that page:</p>

<ul>
 <li>either select "Toggle Tools" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)</li>
 <li>or press the <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>I</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>I</kbd> on OS X) keyboard shortcut.</li>
</ul>

<p>{{EmbedYouTube("f46hMLELyaI")}}</p>

<p>By default, the tools are shown attached to the bottom of browser tab, to reflect the fact that they are attached to this tab. You'll see any output from <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> statements in your content scripts. You will also see your content scripts listed in the Debugger, where you'll be able to set breakpoints, step through the code, and so on.</p>

<p>{{EmbedYouTube("Hx3GU_fEPeo")}}</p>

<div class="note">
<p>This video uses the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example extension.</p>
</div>

<div class="note">
<p>If the developer tools tab was not already open when the content script was injected, sometimes the content script is not listed in the debugger panel. If you experience this, reloading the page with the developer tools tab open should fix the problem.</p>
</div>

<h2 id="Debugging_sidebars">Debugging sidebars</h2>

<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebars</a> are HTML pages opened as a sidebar in the browser UI that the extension developer can supply.</p>

<p>To debug sidebars:</p>

<ul>
 <li>open the <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Add-on Debugger</a> for your extension</li>
 <li>open your extension's sidebar.</li>
</ul>

<p>Any JavaScript sources it includes are then listed in the Debugger.</p>

<p>You'll also see any messages logged by your code in the Add-on Debugger's Console.</p>

<p>You can also use the Add-on Debugger to debug the page's HTML and CSS. First, though, you need to point the tools at the iframe that hosts the options page. To do this: open the sidebar, click the icon highlighted in the screenshot below, and select the sidebar from the drop-down list:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>

<h2 id="Debug_runtime_permission_requests">Debug runtime permission requests</h2>

<p> </p>

<p>Runtime permissions granted in your extension are persistent. Therefore, if you want to test cases where the permission has not been granted you will need to add a feature to programmatically remove the permission, use the <a class="external external-icon" href="https://github.com/rpl/dev-webext-permissions-manager" rel="noopener">Extensions Permission Manager,</a> or give your extension a new ID. For more information, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Test_permission_requests#Retest_runtime_permission_grants">Retest runtime permission grants</a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Test_permission_requests">Test permission requests</a>.</p>

<p> </p>

<h2 id="Debugging_developer_tools_pages_panels">Debugging developer tools pages &amp; panels</h2>

<p><a href="/en-US/Add-ons/WebExtensions/Extending_the_developer_tools">Developer tools</a> are extended by loading a hidden HTML page when devtools are opened and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/create">developer tools panels</a> are HTML pages displayed as a developer tool in the browser UI that the extension developer can supply.</p>

<p>To debug the developer tools page:</p>

<ul>
 <li>open the <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Add-on Debugger</a> for your extension</li>
 <li>open the Web Developer Tools</li>
</ul>

<p>To debug developer tools panels:</p>

<ul>
 <li>Follow the steps for the developer tools page above</li>
 <li>Select your developer tools panel</li>
</ul>

<p>Any JavaScript sources it includes are then listed in the Debugger.</p>

<p>You'll also see any messages logged by your code in the Add-on Debugger's Console.</p>

<p>You can also use the Add-on Debugger to debug the page's HTML and CSS. First, though, you need to point the tools at the iframe that hosts the options page. To do this: open the sidebar, click the icon highlighted in the screenshot below, and select the sidebar from the drop-down list:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>

<h2 id="Debugging_Browser_Restarts">Debugging Browser Restarts</h2>

<p>If your extension is active in ways that might be affected by the browser restarting, such as a session being restored, then you may want to do extra testing to ensure your code works as expected in those conditions.</p>

<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">Testing persistent and restart features</a> for more details.</p>