1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
===============
Browser Toolbox
===============
The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal :doc:`Toolbox <../tools_toolbox/index>`. The Browser Toolbox's context is the whole browser rather than justsingle page on a single tab.
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 :doc:`Settings <../settings/index>`, go to the section :ref:`Advanced Settings <settings_advanced_settings>`, and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
.. image:: settings_for_browser_debugger.png
:alt: Developer Tools Settings
:class: border
Opening the Browser Toolbox
***************************
.. |image1| image:: 2014-01-10-13-08-08-f52b8c.png
:alt: new fx menu
Open the Browser Toolbox through the menu button |image1| and the menu items "Developer" then "Browser Toolbox".
You can also open it with the :kbd:`Ctrl` + :kbd:`Alt` + :kbd:`Shift` + :kbd:`I` key combination (:kbd:`Cmd` + :kbd:`Opt` + :kbd:`Shift` + :kbd:`I` on a Mac).
You will be presented with a dialog like this (it can be removed by setting the ``devtools.debugger.prompt-connection`` property to false):
.. image:: browser-toolbox-warning.png
Click OK, and the Browser Toolbox will open in its own window:
.. image:: browser-toolbox.png
You'll be able to inspect the browser's chrome 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:
- :doc:`Debugger <../debugger/index>`
- :doc:`Console <../browser_console/index>`
- :doc:`Style Editor <../style_editor/index>`
- :doc:`Performance <../performance/index>`
- :doc:`Network Monitor <../network_monitor/index>`
- :doc:`Page Inspector <../page_inspector/index>`
- :doc:`Accessibility Inspector <../accessibility_inspector/index>`
You can debug chrome: and about: pages using the normal :doc:`Debugger <../debugger/index>`, just as if they were ordinary content pages.
Targeting a document
********************
In the normal toolbox, there's a :doc:`button in the toolbar enabling you to target specific iframes in the document <../working_with_iframes/index>`. The same button appears in the browser toolbox where it 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:
.. image:: browser-toolbox-iframes.png
Debugging popups
****************
It's hard to debug popups, because the browser hides them as soon as you click outside them. There is a way to disable this behavior. Click the toolbox menu and select **Disable popup auto-hide**.
.. image:: popup_auto-hide.png
:class: center
Now when you open any popup, it will stay open until you press the :kbd:`Esc` key. You can use the Inspector's node picker to select that panel, and examine and modify its content.
You can use the same technique to debug `popups created by add-ons <https://extensionworkshop.com/documentation/develop/debugging/#debugging_popups>`_.
.. note::
This change is not persistent across browser restarts. When you close the browser toolbox, the setting will be cleared.
|
