Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 938477 of Browser Toolbox

  • Revision slug: Tools/Browser_Toolbox
  • Revision title: PHP (CMS VS FRAMEWORKS)
  • Revision id: 938477
  • Created:
  • Creator: alok111444
  • Is current revision? No
  • Comment
Tags: 

Revision Content

The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal Toolbox.  The Browser Toolbox's context is the whole browser rather than just single page on a single tab.

Note:  If you want to debug a specific add-on that is restartless or SDK-based then try the Add-on Debugger.  Use the Browser Toolbox for add-ons that are neither.

Enabling the Browser Toolbox 

The Browser Toolbox is not enabled by default.  To enable it you need to check the settings "Enable chrome and addon debugging" and "Enable remote debugging".

To do this, open the Developer Tools Toolbox's Settings, go to the section "Advanced Settings", and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".

Developer Tools Settings

Opening the Browser Toolbox

Open the Browser Toolbox through the menu button new fx menu and the menu items "Developer" then "Browser Toolbox". 

From Firefox 39, you can also open it with the Ctrl + Alt +Shift + I  key combination ( Cmd + Opt +Shift + I on a Mac).

You'll then be presented with a dialog like this (this can be removed by setting the devtools.debugger.prompt-connection property to false):

Click OK, and the Browser Toolbox will open in its own window:

You'll be able to inspect the browser's XUL windows and see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running. Altogether you will have access to the following developer tools:

Debugging chrome: and about: pages

From Firefox 37 onwards, you can debug chrome: and about: pages using the normal Debugger, just as if they were ordinary content pages.

Targeting a document

In the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the document. From Firefox 40 onwards the same button appears in the browser toolbox as well, but this lists all the top-level chrome and content windows as well as any iframes they contain. This enables you to inspect documents in individual chrome windows and popups, as well as in content tabs.

For example, here's what the frame selection popup lists when there are two browser windows open, one with one content tab, and one with two:

 

 

 

Revision Source

 
<p>The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal <a href="/en-US/docs/Tools_Toolbox">Toolbox</a>. &nbsp;The Browser Toolbox's context is the whole browser rather than just&nbsp;single page on a single tab.</p>

<div class="note">
<p><em>Note: &nbsp;If you want to debug a specific add-on that is restartless or SDK-based then try the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>. &nbsp;Use the Browser Toolbox for add-ons that are neither.</em></p>
</div>

<h2 id="Enabling_the_Browser_Toolbox" style="line-height: 30px; font-size: 2.14285714285714rem;">Enabling the Browser Toolbox&nbsp;</h2>

<div>
<p>The Browser Toolbox is not enabled by default. &nbsp;To enable it you need to check the settings "Enable chrome and addon debugging" and "Enable remote debugging".</p>

<p>To do this, open the Developer Tools&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>'s&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Settings">Settings</a>, go to the section "<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Advanced Settings</a>", and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".</p>

<p><img alt="Developer Tools Settings" src="https://mdn.mozillademos.org/files/11125/enable-browser-toolbox.png" style="display:block; height:923px; margin-left:auto; margin-right:auto; width:900px" /></p>
</div>

<h2 id="Opening_the_Browser_Toolbox"><span style="font-size:2.14285714285714rem">Opening</span>&nbsp;the Browser Toolbox</h2>

<p><span style="line-height:1.5">Open the Browser Toolbox through the&nbsp;</span><span style="line-height:1.5">menu button&nbsp;</span><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" style="line-height:1.5" title="" /><span style="line-height:1.5">&nbsp;and the menu items "Developer" then "Browser Toolbox".</span><span style="line-height:1.5">&nbsp;</span></p>

<p><span style="line-height:1.5">From Firefox 39, you can also open it with the </span><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd>&nbsp; key combination ( <kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd> on a Mac).</p>

<p><span style="line-height:1.5">You'll then be presented with a dialog like this (this can be removed by setting the </span><code style="font-style: normal; line-height: 1.5;">devtools.debugger.prompt-connection</code><span style="line-height:1.5"> property to false):</span></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" />Click OK, and the Browser Toolbox will open in its own window:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11121/browser-toolbox.png" style="display:block; height:649px; margin-left:auto; margin-right:auto; width:900px" />You'll be able to inspect the browser's XUL windows and see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running. Altogether you will have access to the following developer tools:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Debugger">Debugger</a>&nbsp; (<em>Note: &nbsp;If you want to debug a specific add-on that is restartless or SDK-based then try the&nbsp;<a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>.)</em></li>
 <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li>
 <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
 <li><a href="/en-US/docs/Tools/Profiler">Performance</a></li>
 <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
 <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
</ul>

<h2 id="Debugging_chrome_and_about_pages">Debugging chrome: and about: pages</h2>

<p>From Firefox 37 onwards, you can debug chrome: and about: pages using the normal <a href="/en-US/docs/Tools/Debugger">Debugger</a>, just as if they were ordinary content pages.</p>

<h2 id="Targeting_a_document">Targeting a document</h2>

<p>In the normal toolbox, there's a <a href="/en-US/docs/Tools/Working_with_iframes">button in the toolbar enabling you to target specific iframes in the document</a>. From Firefox 40 onwards the same button appears in the browser toolbox as well, but this lists all the top-level chrome and content windows as well as any iframes they contain. This enables you to inspect documents in individual chrome windows and popups, as well as in content tabs.</p>

<p>For example, here's what the frame selection popup lists when there are two browser windows open, one with one content tab, and one with two:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11117/browser-toolbox-iframes.png" style="display:block; height:652px; margin-left:auto; margin-right:auto; width:900px" /></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>
Revert to this revision