From Firefox 47 onwards, 3D view is no longer available.
-When you click on the 3D view button, the page goes into 3D view mode; in this mode, you can see your page presented in a 3D view in which nested blocks of HTML are increasingly "tall," projecting outward from the bottom of the page. This view makes it easy to visualize the nesting of your content.
- -
By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the HTML panel or the Style panel. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.
- -If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.
- -There are keyboard shortcuts and mouse controls available for the 3D view.
- -| Function | -Keyboard | -Mouse | -
| Zoom in/out | -+ / - | -Scroll wheel up/down | -
| Rotate left/right | -a / d | -Mouse left/right | -
| Rotate up/down | -w / s | -Mouse up/down | -
| Pan left/right | -← / → | -Mouse left/right | -
| Pan up/down | -↑ / ↓ | -Mouse up/down | -
| Reset zoom level | -0 | -Resets the zoom level to the default | -
| Focus on selected node | -f | -Makes sure the currently selected node is visible | -
| Reset view | -r | -Resets zoom, rotation, and panning to the default | -
| Hide current node | -x | -Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured | -
There are a variety of ways the 3D view is useful:
- -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.
- -There are several different ways to open about:debugging:
- -
), then select "Service Workers".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.
- -Whether or not system add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showSystemAddons preference. If you need to see system add-ons, navigate to about:config and make sure that this value is set to true.
The Add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, Add-on SDK add-ons, and WebExtensions.
-This page enables you to do two things:
- -
Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.
-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".
- -If the "Debug" button is disabled, check the "Enable add-on debugging" box.
- -If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the Add-on Debugger will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.
- -{{EmbedYouTube("tGGcA3bT3VA")}}
- -See the page on the Add-on Debugger for all the things you can do with this tool.
- -The "Enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to true, and unchecking it sets them both to false.
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 Developer Tools Settings.
-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.
- -You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.
- -{{EmbedYouTube("sAM78GU4P34")}}
- -The big advantages of this method, compared with installing an add-on from an XPI, are:
- -If you install the add-on in this way, what happens when you update the add-on's files?
- -Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.
-From Firefox 48 onwards:
- -permissions, content_scripts, browser_action or any other keys will take effect.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.
-In Firefox 49 onwards, a Tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current Firefox instance.
Each tab entry has a Debug button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.
- -
Note: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 about:debugging 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.
The Workers page shows your workers, categorized as follows:
- -You can connect the developer tools to each worker, and send push notifications to service workers.
- -
From Firefox 52, the list of service workers shows the state of the service worker in its lifecycle. Three states are distinguished:
- -
This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.
-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.
- -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:
- -{{EmbedYouTube("Z8ax79sHWDU")}}
- -At first, you won't see any workers listed under Service Workers or Shared Workers. As soon as a worker is registered, the listing is updated:
- -{{EmbedYouTube("wy4kyWFhFF4")}}
- -Before Firefox 47, service workers were only shown when they were actually running.
-New in Firefox 48.
-Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:
- -
Click the link to unregister the service worker.
- -Sending push events in about:debugging is new in Firefox 47.
-To debug push notifications, you can set a breakpoint in the push event 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:
- -{{EmbedYouTube("62SkLyA-Zno")}}
- -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.
- -
Service workers can be unavailable for several reasons:
- -dom.serviceWorkers.enable preference is set to false in about:config.{{ToolsSidebar}}
- -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.
There are two ways to open about:debugging:
about:debugging in the Firefox URL bar.When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:
- -
If your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.
Firefox supports debugging over USB with Android devices, using the about:debugging page.
- -Before you connect:
- -If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.
- -If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the Refresh devices button again. The device should appear.
- -Note: You do not need to install the full Android Studio SDK. Only adb is needed.
-To start a debugging session, first open the page that you wish to debug and then click Connect next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.
- -
The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.
- -Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:
- -
In Firefox 76 and above, the message can look like the following:
- -
See Connection for Firefox for Android 68 for more information.
- -In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.
- -
Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.
- -Starting in Firefox 78, the URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking the Reload button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the Back and Forward buttons.
- -You can connect to a Firefox Debug server on your network, or on your debugging machine using the Network Location settings of the about:debugging page.
- -
Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:
- -
The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:
- -
Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.
With the Load Temporary Add-on button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the Temporary Extensions header.
- -You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.
- -The major advantages of this method, compared with installing an add-on from an XPI, are:
- -Once you have loaded a temporary extension, you can see information about it and perform operations on it.
- -
You can use the following buttons:
- -Other information about the extension is displayed:
- -If you install an extension in this way, what happens when you update the extension?
- -manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys take effectThe permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:
- -
The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.
- -Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.
- -Note: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.
-The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.
- -Note: This list may include add-ons that came preinstalled with Firefox.
-If you click Inspect, the Add-on Debugger will start in a new tab.
- -{{EmbedYouTube("efCpDNuNg_c")}}
- -See the page on the Add-on Debugger for all the things you can do with this tool.
- -The Workers section shows all the workers you've got registered on your Firefox, categorized as follows:
- -You can connect the developer tools to each worker, and send push notifications to service workers.
- -
The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:
- -
This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.
- -Note: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools Application panel.
-Click the Unregister button to unregister the service worker.
- -To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.
- -A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.
- -
Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.
Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:
- -If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop Firefox Extended Support Release (ESR), which is also based on version 68.
- -Note that about:debugging is not enabled by default in Firefox ESR. To enable it, open the Configuration Editor (about:config) and set devtools.aboutdebugging.new-enabled to true.
If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see What happens to my profile if I downgrade to a previous version of Firefox?
diff --git a/files/en-us/tools/about_colon_debugging/installed_extension.png b/files/en-us/tools/about_colon_debugging/installed_extension.png deleted file mode 100644 index f2c5b068c1aad72..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/installed_extension.png and /dev/null differ diff --git a/files/en-us/tools/about_colon_debugging/network_location.png b/files/en-us/tools/about_colon_debugging/network_location.png deleted file mode 100644 index a80abb4d692a9c0..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/network_location.png and /dev/null differ diff --git a/files/en-us/tools/about_colon_debugging/remote-debugger-w-url-buttons.png b/files/en-us/tools/about_colon_debugging/remote-debugger-w-url-buttons.png deleted file mode 100644 index 6cc3ce1a1513e3a..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/remote-debugger-w-url-buttons.png and /dev/null differ diff --git a/files/en-us/tools/about_colon_debugging/sample_service_worker.png b/files/en-us/tools/about_colon_debugging/sample_service_worker.png deleted file mode 100644 index cda75521b18a67c..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/sample_service_worker.png and /dev/null differ diff --git a/files/en-us/tools/about_colon_debugging/temporary_extension.png b/files/en-us/tools/about_colon_debugging/temporary_extension.png deleted file mode 100644 index 218f33f4a3763fc..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/temporary_extension.png and /dev/null differ diff --git a/files/en-us/tools/about_colon_debugging/version_warning.png b/files/en-us/tools/about_colon_debugging/version_warning.png deleted file mode 100644 index 6602624fe6b0838..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/version_warning.png and /dev/null differ diff --git a/files/en-us/tools/about_colon_debugging/worker_warning.png b/files/en-us/tools/about_colon_debugging/worker_warning.png deleted file mode 100644 index c85a3a9d311253d..000000000000000 Binary files a/files/en-us/tools/about_colon_debugging/worker_warning.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-check_for_issues.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-check_for_issues.png deleted file mode 100644 index 5ab84fa847723bc..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-check_for_issues.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-hidden_item_revealed.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-hidden_item_revealed.png deleted file mode 100644 index 799406052bd4f59..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-hidden_item_revealed.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-hidden_items.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-hidden_items.png deleted file mode 100644 index 41d88d9552067df..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-hidden_items.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-picker.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-picker.png deleted file mode 100644 index 18ddda6078d2376..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-picker.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-print_tree_to_json.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-print_tree_to_json.png deleted file mode 100644 index 58c557a9f8373a1..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-print_tree_to_json.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-show_tab_order.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-show_tab_order.png deleted file mode 100644 index 7cf96d8cb78c40d..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-show_tab_order.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility-inspector-tabbing_order.png b/files/en-us/tools/accessibility_inspector/accessibility-inspector-tabbing_order.png deleted file mode 100644 index 147eaa1b6c2d1cd..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility-inspector-tabbing_order.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/accessibility_json.png b/files/en-us/tools/accessibility_inspector/accessibility_json.png deleted file mode 100644 index 3115c47ce8b04a1..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/accessibility_json.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/dom-inspector-context-menu.png b/files/en-us/tools/accessibility_inspector/dom-inspector-context-menu.png deleted file mode 100644 index 54806b806f12561..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/dom-inspector-context-menu.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/dom-inspector-picker.png b/files/en-us/tools/accessibility_inspector/dom-inspector-picker.png deleted file mode 100644 index dab01116af1265a..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/dom-inspector-picker.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/dom-node-target-icon.png b/files/en-us/tools/accessibility_inspector/dom-node-target-icon.png deleted file mode 100644 index 0079299ff294054..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/dom-node-target-icon.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/image_accessibility.png b/files/en-us/tools/accessibility_inspector/image_accessibility.png deleted file mode 100644 index ecb96113933b83b..000000000000000 Binary files a/files/en-us/tools/accessibility_inspector/image_accessibility.png and /dev/null differ diff --git a/files/en-us/tools/accessibility_inspector/index.html b/files/en-us/tools/accessibility_inspector/index.html deleted file mode 100644 index 92bdb6b360ec3fd..000000000000000 --- a/files/en-us/tools/accessibility_inspector/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Accessibility Inspector -slug: Tools/Accessibility_inspector -tags: - - Accessibility - - Accessibility inspector - - DevTools - - Guide - - Tools ---- -The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. This article takes you through the main features of the Accessibility Inspector and how to use it.
- -Accessibility is the practice of making your websites usable by as many people as possible. This means trying your best to not lock anyone out of accessing information because of any disability they may have, or any other personal circumstances such as the device they are using, the speed of their network connection, or their geographic location or locale. You can find more extensive information in the Accessibility section of MDN Web Docs.
- -Here we are mainly talking about exposing information to people with visual disabilities — this is done via the accessibility APIs available inside web browsers, which expose information on what roles the different elements on your page play (e.g., are they just text, or are they buttons, links, form elements, etc.?).
- -Semantic DOM elements have roles assigned to them by default that hint at what their purpose is. Sometimes, however, you need to use some non-semantic markup (e.g., {{htmlelement("div")}}s) to build a complex custom control, and the control won't have a default role that reflects its purpose. In such a situation, you can use WAI-ARIA role attributes to provide your own roles.
- -Roles and other information exposed by browser accessibility APIs are presented in a hierarchical structure called the accessibility tree. This is a bit like the DOM tree, except that it contains a more limited set of elements and slightly different information about them.
- -Assistive technologies like screenreaders use this information to find out what's on a web page, tell their users what's there, and enable them to interact with the page. The Accessibility Inspector also uses this information to provide valuable accessibility debugging capabilities in the DevTools.
- -When you first open any of the other Developer Tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester).
- -The accessibility inspector is automatically enabled when you do one of the following (before Firefox 79, it had to be explicitly enabled):
- -Once activated, the accessibility engine remains running until you close the Developer Tools toolbox.
- -Note: The accessibility engine runs in the background when the accessibility features are turned on. When enabled it may affect the metrics from other panels such as Memory and Performance, and have some impact on overall browser performance.
-If you don't wish to allow the accessibility features to be automatically enabled, you can use the Configuration Editor (also known as about:config) to define the preference devtools.accessibility.auto-init.enabled, and set it to False.
If you don't wish to use the accessibility features at all, you can use the Configuration Editor to set the preference devtools.accessibility.enabled to False. If you do this, the methods listed above for activating the Accessibility Inspector do nothing.
The enabled accessibility panel looks like so:
- -
On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:
- -pushbutton, or footer). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA role attribute.textContent, whereas form elements' names are the contents of their associated {{htmlelement("label")}}.On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:
- -<a> element's href.
accessKey attribute. Note that this works correctly as of Firefox 62 ({{bug("1467381")}}).Note: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.
-The Accessibility tab is fully keyboard-accessible:
- -You can print the contents of the accessibility tree to JSON by right-clicking on an entry in the Accessibility tab and selecting Print to JSON:
- -
When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:
- -
Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw JSON data on a separate tab in the viewer.
- -People who are unable to navigate a page with the mouse or a trackpad can use the tab key to toggle through focusable items on the page (i.e. buttons, links, form controls). The order that items are focussed is one of the most important aspects of web accessibility, as it allows keyboard users to properly navigate a web page — if the tab order is incorrect, the page may be confusing!
- -Firefox 84 and later can enable a visual overlay showing the tabbing order. This provides a high-level overview of how the page will be navigated using the tab key, which may highlight problems more effectively than tabbing through the elements. The overlay is toggled on/off using the Show Tabbing Order checkbox.
- -
All focusable items have a numbered marker and the currently focussed item is highlighted in a different color. In some cases the marker may be hidden by other elements, as is true for items 1 and 2 in the page below.
- 
- These become visible in the overlay when the item is the current item.
Note: The overlay reflects the tab order at the time that the checkbox is selected (i.e. it is not dynamic). If a user does anything that adds items to the tab order (e.g. opens a visual element that contains more links), these new items will not be reflected in the overlay until the Accessibility Inspector is re-launched.
-You can check for accessibility issues by clicking the drop-down menu next to: Check for issues. The available menu items include:
- -When you select one of the menu items, Firefox scans your document for the type of issues you selected. Depending on the size and complexity of your document, this may take a few seconds. When the scan is complete, the left side of the Accessibility Inspector panel displays only the items that have that type of issue. In the right side of the panel, the Checks subpanel lists the specific issue with the selected node. For each type of issue, there is a Learn more link to further information on MDN Web Docs about the issue.
- -
- 
The menu items act as toggles. Select the item to view that type of issue; select the item again to clear the display of issues of that type.
- -Issues with a particular item are always displayed in the Checks subpanel as you browse the tree. The Check for issues menuitems are a quick way to view all and only those items that have issues.
- -The Accessibility Inspector offers (as of Firefox 70), a simulator that lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
- -When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:
- -An extra context menu option is added, both for the general context menu on the web page when right-clicking a UI feature, and the HTML pane of the page inspector when right-clicking a DOM element:
- -
When you choose the Inspect Accessibility Properties/Show Accessibility Properties context menu options, the Accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.
- -Note: Some DOM elements do not have accessibility properties — in that case, the Inspect Accessibility Properties/Show Accessibility Properties context menu item is grayed out.
-In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar along with color contrast information if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.
- -In the following example, you can see that the image has been highlighted and its role, graphic, name, "Road, Asphalt, Sky, Clouds, Fall", and the color contrast ratio, 3.46, appears in the information bar above it.
- -
Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text. See Color contrast for details about recommended contrast ratios.
- -For example:
- -
The color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio.
- -As of Firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. For example:
- -
In this example, the contrast ranges from 4.72 to 5.98. The numbers are followed by AAA and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or Level AAA.
- -See Color contrast for more information on color contrast.
- -Like the element picker button on the Page Inspector, the Accessibility tab's element picker button allows you to hover and select UI items on the current page to highlight objects in the accessibility tree.
- -The accessibility tab element picker looks slightly different from the Page Inspector HTML pane picker, as shown below:
- -
When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the Shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the Shift key.
- -When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the Esc key.
- -The Accessibility Inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.
It is also very handy for verifying semantics — you can use the Inspect Accessibility Properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or a link is really a link).
- -
The simulator in the Accessibility Inspector in Firefox Developer Tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
- -"Color blindness" is a bit of a misnomer, since most people with these disorders can see colors, but do not see all of the distinctions that people with normal color vision can see; color vision deficiencies affect perception across the color spectrum, not only of specific colors like red or green. Color vision deficiencies affect about 8% of men, and 0.5% of women. The most common forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the X chromosome, which men usually have only one copy of.
- -Contrast sensitivity loss can be caused by cataracts, glaucoma, diabetic retinopathy, and other disorders of the retina; it can be age-related, congenital, or due to an injury.
- -This feature depends on webrender, an experimental feature that is not enabled by default on all platforms. You can force-enable webrender by setting the preference gfx.webrender.all to true using the Firefox Configuration Editor (note that if webrender is enabled by default on your platform, the setting has no effect.
The current color simulation option may be selected from the Simulate menu as shown.
- 
The following table shows a colorful image of a cat's face, and what it looks like in the each of the simulations.
- -| Simulation | -Image displayed | -
|---|---|
| None - (Choose this to return to normal display) |
-  |
-
| Protanopia (no red) | - |
-
| Deuteranopia (no green) | - |
-
| Tritanopia (no blue) | - |
-
| Achromatopsia (no color) | - |
-
| Contrast loss | -
-
|
-
The simulation transformation matrices are based on the paper: A Physiologically-based Model for Simulation of Color Vision Deficiency, Gustavo M. Machado, Manuel M. Oliveira Leandro A. F. Fernandes, IEEE Transactions on Visualization and Computer Graphics, Volume 15 (2009).
-Firefox 81 removed unnecessary simulations for protanomaly, deuteranomaly, and tritanomaly, and added a simulation for achromatopsia (no color).
-The Web Developer menu is the main way to access the developer tools that are built into Firefox. On OS X and Linux, it's under the "Tools" menu:
- - -
On Windows 7, it's under the "Firefox" menu:
- -
You'll see that the menu is split into three sections:
- -The Application panel provides tools for inspecting and debugging modern web apps (also known as Progressive Web Apps). This includes inspection of service workers and web app manifests.
- -
The Application panel is available on the standard DevTools tab menu under Application, in Firefox 79+. If you can't see it there, you can enable it by going to the "three dot" menu and selecting Settings (also accessible by pressing F1), then checking the Application checkbox under Default Developer Tools.
- -If you want to test this functionality and you don't have a handy PWA available, you can grab one of our simple examples to use:
- -In this article we will look at inspecting app manifests using the Firefox DevTools Application panel.
- -When you open the Application panel's Manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown:
- -
To get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file:
<link rel="manifest" href="/manifest.webmanifest">- -
The .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
You also need to make sure the JSON inside the file is of the correct format. You can test this using the Web Manifest Validator.
- -If your manifest is deployed successfully, you should end up with a display like the following on the Manifest view:
- -
From here, you can inspect all the information in the manifest in an easy-to-digest way, making sure that it is all correct. It provides a link to the manifest file at the top which when clicked on brings up the JSON in a new tab.
- -It also loads all the icon files into the view, so you can see the relative size of them all, and any other information associated with them.
- -We won't provide an exhaustive list of all the members that can appear in a web manifest here; you can already find that in our web manifest documentation.
diff --git a/files/en-us/tools/application/manifests/manifest-deployed.jpg b/files/en-us/tools/application/manifests/manifest-deployed.jpg deleted file mode 100644 index 382160b1211c983..000000000000000 Binary files a/files/en-us/tools/application/manifests/manifest-deployed.jpg and /dev/null differ diff --git a/files/en-us/tools/application/manifests/no-manifest.jpg b/files/en-us/tools/application/manifests/no-manifest.jpg deleted file mode 100644 index 36426b94c6731a6..000000000000000 Binary files a/files/en-us/tools/application/manifests/no-manifest.jpg and /dev/null differ diff --git a/files/en-us/tools/application/service_workers/cache-network.jpg b/files/en-us/tools/application/service_workers/cache-network.jpg deleted file mode 100644 index 049833515581db6..000000000000000 Binary files a/files/en-us/tools/application/service_workers/cache-network.jpg and /dev/null differ diff --git a/files/en-us/tools/application/service_workers/index.html b/files/en-us/tools/application/service_workers/index.html deleted file mode 100644 index 9306fc9e929a091..000000000000000 --- a/files/en-us/tools/application/service_workers/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Debugging service workers -slug: Tools/Application/Service_workers -tags: - - Application - - DevTools - - Firefox - - Guide - - Service Workers ---- -In this article we will look at debugging service workers using the Firefox DevTools Application Panel.
- -When you open the Application panel's Service Workers view on a page that doesn't have a service worker registered, you'll get the following output shown:
- -
This gives you some advice on what to do if you don't have a service worker registered, and were perhaps expecting there to be one registered! Let's start by troubleshooting this.
- -Before you can look at your service worker in action in the Applications panel, you need to successfully register it. Registration is done with a block of code along these lines, using the register() method:
if('serviceWorker' in navigator) {
- navigator.serviceWorker
- .register('sw.js')
- .then(function() { console.log('Service Worker Registered'); });
-}
-
-If you get the path wrong, for example, you'll get an error in the Web Console giving you a hint as to what's wrong, which depends on what exactly is wrong with the code. If this is not enough to help you figure out the problem, you could also try going to the JavaScript Debugger and stepping through your code to pinpoint exactly where it is going wrong.
- -In any case, when the service worker is successfully registered, you'll see information about it displayed in the Application > Service Workers view (along with any other service workers registered on the same domain):
- -
This gives you a variety of information about your service worker:
- -There are a couple of other useful controls on this view, too.
- -On the right-hand side of the Service Workers view there is an Unregister button, which when pressed unregisters the service worker. This is very useful because, once registered, the service worker will not necessarily update to the new version immediately, which can make debugging a pain. From Updating your service worker:
- --- -If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.
-
Important: The Debug button is currently enabled only in Firefox Nightly.
-When your service worker is running, a Debug button is available next to the Source information (it is disabled when the service worker is stopped). When pressed, this takes you straight to the JavaScript debugger view of your service worker code, and you can use the full power of the debugger to debug it — stepping through code, etc.
- -
If you are using your service worker to store your site assets in Cache Storage (using the Cache API), which is essential for creating offline apps, it can be annoying to test the cache. When you fill up the cache with assets, but then want to alter the behavior slightly, you previously had to manually write code to empty the cache, and then fill it again.
- -The Firefox DevTools' Storage tab has a Cache Storage section that lists all the different Caches you have stored under each different origin.
- -
Right/Ctrl clicking on one of the caches gives you two options:
- -You can also click on one of the individual items stored in the cache, then Right/Ctrl click on it to get options for deleting just that item, or every item in the cache.
- -These options make it much easier to remove a cache if it is required for testing a code update.
- -It is also worth knowing that if you are testing an app's offline capabilities, you'll be able to see whether requests are being retrieved from a service worker-initiated cache rather than from the network by looking at Network Monitor.
- -
Resources retrieved from the cache are indicated with service worker in the Transferred column.
- -Note: There is currently a bug whereby the Network Monitor cannot show network requests from a service worker running in a different process to the application ({{bug(1432311)}}).
-As mentioned above, the Service Worker view of the Application panel shows all the service workers registered on the current domain. If you want to see a list of information concerning all the service workers registered on your browser, you can visit about:debugging#/runtime/this-firefox. Below the list of installed extensions you'll find a list of all the service workers you have registered.
The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.
- -So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.
- -If you also want to use the other web developer tools in the regular Web Toolbox with add-on or browser code, consider using the Browser Toolbox.
- -Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.
NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later) option in the developer tool settings.
You can open the Browser Console in one of two ways:
- -You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole- -
The Browser Console looks like this:
- -
You can see that the Browser Console looks and behaves very much like the Web Console:
- -Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled Show Content Messages. The following image shows the browser console focused on the same page as above after clicking on the Show Content Messages checkbox.
- -
The Browser console logs the same sorts of messages as the Web Console:
- -However, it displays such messages from:
- -The Browser Console displays messages logged by all Firefox add-ons.
- -Console.jsmTo use the console API from a traditional or bootstrapped add-on, get it from the Console module.
- -One exported symbol from Console.jsm is console. Below is an example of how to access it, which adds a message to the Browser Console.
Components.utils.import("resource://gre/modules/Console.jsm");
-console.log("Hello from Firefox code"); //output messages to the console
-
-Learn more:
- - - -There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.
- -Here is an example on how to clear the contents of the Browser console:
- -Components.utils.import("resource://devtools/shared/Loader.jsm");
-var HUDService = devtools.require("devtools/client/webconsole/hudservice");
-
-var hud = HUDService.getBrowserConsole();
-hud.jsterm.clearOutput(true);
-
-If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:
- -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);
-
-For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:
- -widget = require("sdk/widget").Widget({
- id: "an-error-happened",
- label: "Error!",
- width: 40,
- content: "Error!",
- onClick: logError
-});
-
-function logError() {
- console.error("something went wrong!");
-}
-
-If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:
- -
Click the icon. You'll see output like this in the Browser Console:
For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.
- -The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.
Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:
Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.
But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:
This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.
- -The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):
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/";
-
-It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.
Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.
-Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:
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);
-
-
On macOS, this similar code will add a new item to the Tools menu:
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);
-
-
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.
-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 Settings, go to the section "Advanced Settings", and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
- -
Open the Browser Toolbox through the menu button 
and the menu items "Developer" then "Browser Toolbox".
You can also open it with the Ctrl + Alt +Shift + I key combination ( Cmd + Opt +Shift + 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):
Click OK, and the Browser Toolbox will open in its own window:
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:
You can debug chrome: and about: pages using the normal Debugger, just as if they were ordinary content pages.
- -In the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the document. 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:
- -
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.
- -
Now, when you open a popup, it stays open until you press the Esc key. Use the Inspector's node picker to select that panel and examine and modify its content. Use the same technique to debug popups created by add-ons.
- - 
Note: This change is not persistent across browser restarts. When you close the browser toolbox, the setting is cleared.
-A Debugger.Environment instance represents a lexical environment, associating names with variables. Each Debugger.Frame instance representing a debuggee frame has an associated environment object describing the variables in scope in that frame; and each Debugger.Object instance representing a debuggee function has an environment object representing the environment the function has closed over.
ECMAScript environments form a tree, in which each local environment is parented by its enclosing environment (in ECMAScript terms, its 'outer' environment). We say an environmentbinds an identifier if that environment itself associates the identifier with a variable, independently of its outer environments. We say an identifier isin scope in an environment if the identifier is bound in that environment or any enclosing environment.
- -SpiderMonkey creates Debugger.Environment instances as needed as the debugger inspects stack frames and function objects; calling Debugger.Environment as a function or constructor raises a TypeError exception.
SpiderMonkey creates exactly one Debugger.Environment instance for each environment it presents via a given Debugger instance: if the debugger encounters the same environment through two different routes (perhaps two functions have closed over the same environment), SpiderMonkey presents the same Debugger.Environment instance to the debugger each time. This means that the debugger can use the == operator to recognize when two Debugger.Environment instances refer to the same environment in the debuggee, and place its own properties on a Debugger.Environment instance to store metadata about particular environments.
(If more than one Debugger instance is debugging the same code, each Debugger gets a separate Debugger.Environment instance for a given environment. This allows the code using each Debugger instance to place whatever properties it likes on its own Debugger.Object instances, without worrying about interfering with other debuggers.)
If a Debugger.Environment instance's referent is not a debuggee environment, then attempting to access its properties (other than inspectable) or call any of its methods throws an instance of Error.
Debugger.Environment instances protect their referents from the garbage collector; as long as the Debugger.Environment instance is live, the referent remains live. Garbage collection has no visible effect on Debugger.Environment instances.
A Debugger.Environment instance inherits the following accessor properties from its prototype:
inspectableDebugger.Environment instances throw if applied to a non-inspectable environment.typeThe type of this environment object, one of the following values:
- -"declarative", indicating that the environment is a declarative environment record. Function calls, calls to eval, let blocks, catch blocks, and the like create declarative environment records.
"object", indicating that the environment's bindings are the properties of an object. The global object and DOM elements appear in the chain of environments via object environments. (Note that with statements have their own environment type.)
"with", indicating that the environment was introduced by a with statement.
parentnull if this is the outermost environment.objectDebugger.Object instance referring to the object whose properties this environment reflects. If this is a declarative environment record, this accessor throws a TypeError (since declarative environment records have no such object). Both "object" and "with" environments have object properties that provide the object whose properties they reflect as variable bindings.calleevar definitions) for a call to a functionf, then this property's value is a Debugger.Object instance referring tof. Otherwise, this property's value is null.optimizedOutgetVariable returns an ordinary JavaScript object whose optimizedOut property is true on all bindings, and setVariable throws a ReferenceError.The methods described below may only be called with a this value referring to a Debugger.Environment instance; they may not be used as methods of other kinds of objects.
names()getVariable(name)Return the value of the variable bound toname in this environment, or undefined if this environment does not bindname.Name must be a string that is a valid ECMAScript identifier name. The result is a debuggee value.
JavaScript engines often omit variables from environments, to save space and reduce execution time. If the given variable should be in scope, but getVariable is unable to produce its value, it returns an ordinary JavaScript object (not a Debugger.Object instance) whose optimizedOut property is true.
This is not an invocation function; if this call would cause debuggee code to run (say, because the environment is a "with" environment, andname refers to an accessor property of the with statement's operand), this call throws a Debugger.DebuggeeWouldRun exception.
setVariable(name,value)Storevalue as the value of the variable bound toname in this environment.Name must be a string that is a valid ECMAScript identifier name;value must be a debuggee value.
- -If this environment binds no variable namedname, throw a ReferenceError.
This is not an invocation function; if this call would cause debuggee code to run, this call throws a Debugger.DebuggeeWouldRun exception.
find(name)null.Name must be a string whose value is a valid ECMAScript identifier name.A Debugger.Frame instance represents a visible stack frame. Given a Debugger.Frame instance, you can find the script the frame is executing, walk the stack to older frames, find the lexical environment in which the execution is taking place, and so on.
For a given Debugger instance, SpiderMonkey creates only one Debugger.Frame instance for a given visible frame. Every handler method called while the debuggee is running in a given frame is given the same frame object. Similarly, walking the stack back to a previously accessed frame yields the same frame object as before. Debugger code can add its own properties to a frame object and expect to find them later, use == to decide whether two expressions refer to the same frame, and so on.
(If more than one Debugger instance is debugging the same code, each Debugger gets a separate Debugger.Frame instance for a given frame. This allows the code using each Debugger instance to place whatever properties it likes on its Debugger.Frame instances, without worrying about interfering with other debuggers.)
When the debuggee pops a stack frame (say, because a function call has returned or an exception has been thrown from it), the Debugger.Frame instance referring to that frame becomes inactive: its live property becomes false, and accessing its other properties or calling its methods throws an exception. Note that frames only become inactive at times that are predictable for the debugger: when the debuggee runs, or when the debugger removes frames from the stack itself.
When inspecting the call stack, Debugger does not reveal all the frames that are actually present on the stack: while it does reveal all frames running debuggee code, it omits frames running the debugger's own code, and omits most frames running non-debuggee code. We call those stack frames a Debugger does reveal visible frames.
A frame is a visible frame if any of the following are true:
- -it is running debuggee code;
-its immediate caller is a frame running debuggee code; or
-it is a "debugger" frame, representing the continuation of debuggee code invoked by the debugger.
The "immediate caller" rule means that, when debuggee code calls a non-debuggee function, it looks like a call to a primitive: you see a frame for the non-debuggee function that was accessible to the debuggee, but any further calls that function makes are treated as internal details, and omitted from the stack trace. If the non-debuggee function eventually calls back into debuggee code, then those frames are visible.
- -(Note that the debuggee is not considered an "immediate caller" of handler methods it triggers. Even though the debuggee and debugger share the same JavaScript stack, frames pushed for SpiderMonkey's calls to handler methods to report events in the debuggee are never considered visible frames.)
- -Aninvocation function is any function in this interface that allows the debugger to invoke code in the debuggee: Debugger.Object.prototype.call, Debugger.Frame.prototype.eval, and so on.
While invocation functions differ in the code to be run and how to pass values to it, they all follow this general procedure:
- -Letolder be the youngest visible frame on the stack, or null if there is no such frame. (This is never one of the debugger's own frames; those never appear as Debugger.Frame instances.)
Push a "debugger" frame on the stack, witholder as its older property.
Invoke the debuggee code as appropriate for the given invocation function, with the "debugger" frame as its continuation. For example, Debugger.Frame.prototype.eval pushes an "eval" frame for code it runs, whereas Debugger.Object.prototype.call pushes a "call" frame.
When the debuggee code completes, whether by returning, throwing an exception or being terminated, pop the "debugger" frame, and return an appropriate completion value from the invocation function to the debugger.
When a debugger calls an invocation function to run debuggee code, that code's continuation is the debugger, not the next debuggee code frame. Pushing a "debugger" frame makes this continuation explicit, and makes it easier to find the extent of the stack created for the invocation.
A Debugger.Frame instance inherits the following accessor properties from its prototype:
typeA string describing what sort of frame this is:
- -"call": a frame running a function call. (We may not be able to obtain frames for calls to host functions.)
"eval": a frame running code passed to eval.
"global": a frame running global code (JavaScript that is neither of the above).
"module": a frame running code at the top level of a module.
"wasmcall": a frame running a WebAssembly function call.
"debugger": a frame for a call to user code invoked by the debugger (see the eval method below).
implementationA string describing which tier of the JavaScript engine this frame is executing in:
- -"interpreter": a frame running in the interpreter.
"baseline": a frame running in the unoptimizing, baseline JIT.
"ion": a frame running in the optimizing JIT.
"wasm": a frame running in WebAssembly baseline JIT.
thisthis for this frame (a debuggee value). For a wasmcall frame, this property throws a TypeError.oldernull.depthliveDebugger.Frame instance refers to is still on the stack; false if it has completed execution or been popped in some other way.scriptDebugger.Script instance), or null on frames that do not represent calls to debuggee code. On frames whose callee property is not null, this is equal to callee.script.offsetscript, or undefined if the frame's script property is null. For a wasmcall frame, this property throws a TypeError.environmentDebugger.Environment instance), or null on frames that do not represent the evaluation of debuggee code, like calls non-debuggee functions, host functions or "debugger" frames.calleenull if this is not a "call" frame.generatorconstructingargumentsnull if this is not a "call" frame. When non-null, this is an object, allocated in the same global as the debugger, with Array.prototype on its prototype chain, a non-writable length property, and properties whose names are array indices. Each property is a read-only accessor property whose getter returns the current value of the corresponding parameter. When the referent frame is popped, the argument value's properties' getters throw an error.Each Debugger.Frame instance inherits accessor properties holding handler functions for SpiderMonkey to call when given events occur in the frame.
Calls to frames' handler methods are cross-compartment, intra-thread calls: the call takes place in the thread to which the frame belongs, and runs in the compartment to which the handler method belongs.
- -Debugger.Frame instances inherit the following handler method properties:
onStepThis property must be either undefined or a function. If it is a function, SpiderMonkey calls it when execution in this frame makes a small amount of progress, passing no arguments and providing this Debugger.Frame instance as the thisvalue. The function should return a resumption value specifying how the debuggee's execution should proceed.
What constitutes "a small amount of progress" varies depending on the implementation, but it is fine-grained enough to implement useful "step" and "next" behavior.
- -If multiple Debugger instances each have Debugger.Frame instances for a given stack frame with onStep handlers set, their handlers are run in an unspecified order. If any onStep handler forces the frame to return early (by returning a resumption value other than undefined), any remaining debuggers' onStep handlers do not run.
This property is ignored on frames that are not executing debuggee code, like "call" frames for calls to host functions and "debugger" frames.
onPopThis property must be either undefined or a function. If it is a function, SpiderMonkey calls it just before this frame is popped, passing a completion value indicating how this frame's execution completed, and providing this Debugger.Frame instance as the this value. The function should return a resumption value indicating how execution should proceed. On newly created frames, this property's value is undefined.
When this handler is called, this frame's current execution location, as reflected in its offset and environment properties, is the operation which caused it to be unwound. In frames returning or throwing an exception, the location is often a return or a throw statement. In frames propagating exceptions, the location is a call.
When an onPop call reports the completion of a construction call (that is, a function called via the new operator), the completion value passed to the handler describes the value returned by the function body. If this value is not an object, it may be different from the value produced by the new expression, which will be the value of the frame's this property. (In ECMAScript terms, the onPop handler receives the value returned by the [[Call]] method, not the value returned by the [[Construct]] method.)
When a debugger handler function forces a frame to complete early, by returning a { return:... }, { throw:... }, or null resumption value, SpiderMonkey calls the frame's onPop handler, if any. The completion value passed in this case reflects the resumption value that caused the frame to complete.
When SpiderMonkey calls an onPop handler for a frame that is throwing an exception or being terminated, and the handler returns undefined, then SpiderMonkey proceeds with the exception or termination. That is, an undefined resumption value leaves the frame's throwing and termination process undisturbed.
If multiple Debugger instances each have Debugger.Frame instances for a given stack frame with onPop handlers set, their handlers are run in an unspecified order. The resumption value each handler returns establishes the completion value reported to the next handler.
This handler is not called on "debugger" frames. It is also not called when unwinding a frame due to an over-recursion or out-of-memory exception.
The functions described below may only be called with a this value referring to a Debugger.Frame instance; they may not be used as methods of other kinds of objects.
eval(code, [options])Evaluatecode in the execution context of this frame, and return a completion value describing how it completed.Code is a string. If this frame's environment property is null or type property is wasmcall, throw a TypeError. All extant handler methods, breakpoints, and so on remain active during the call. This function follows the invocation function conventions.
Codeis interpreted as strict mode code when it contains a Use Strict Directive, or the code executing in this frame is strict mode code.
- -Ifcode is not strict mode code, then variable declarations incode affect the environment of this frame. (In the terms used by the ECMAScript specification, the VariableEnvironment of the execution context for the eval code is the VariableEnvironment of the execution context that this frame represents.) If implementation restrictions prevent SpiderMonkey from extending this frame's environment as requested, this call throws an Error exception.
If given,options should be an object whose properties specify details of how the evaluation should occur. The eval method recognizes the following properties:
url"debugger eval code".lineNumberevalWithBindings(code,bindings, [options])Like eval, but evaluatecode in the environment of this frame, extended with bindings from the objectbindings. For each own enumerable property ofbindings namedname whose value isvalue, include a variable in the environment in whichcode is evaluated namedname, whose value isvalue. Eachvalue must be a debuggee value. (This is not like a with statement:code may access, assign to, and delete the introduced bindings without having any effect on thebindings object.)
This method allows debugger code to introduce temporary bindings that are visible to the given debuggee code and which refer to debugger-held debuggee values, and do so without mutating any existing debuggee environment.
- -Note that, like eval, declarations in thecode passed to evalWithBindings affect the environment of this frame, even as that environment is extended by bindings visible withincode. (In the terms used by the ECMAScript specification, the VariableEnvironment of the execution context for the eval code is the VariableEnvironment of the execution context that this frame represents, and thebindings appear in a new declarative environment, which is the eval code's LexicalEnvironment.) If implementation restrictions prevent SpiderMonkey from extending this frame's environment as requested, this call throws an Error exception.
Theoptions argument is as for Debugger.Frame.prototype.eval, described above. Also like eval, if this frame's environment property is null or type property is wasmcall, throw a TypeError.
The Debugger API can help tools observe the debuggee's memory use in various ways:
It can mark each new object with the JavaScript call stack at which it was allocated.
-It can log all object allocations, yielding a stream of JavaScript call stacks at which allocations have occurred.
-It can compute a census of items belonging to the debuggee, categorizing items in various ways, and yielding item counts.
-Ifdbg is a Debugger instance, then the methods and accessor properties of dbg.memory control howdbg observes its debuggees' memory use. The dbg.memory object is an instance of Debugger.Memory; its inherited accesors and methods are described below.
The JavaScript engine marks each new object with the call stack at which it was allocated, if:
- -the object is allocated in the scope of a global object that is a debuggee of some Debugger instancedbg; and
dbg.memory.trackingAllocationSites is set to true.
A Bernoulli trial succeeds, with probability equal to the maximum of d.memory.allocationSamplingProbability of all Debugger instances d that are observing the global that this object is allocated within the scope of.
Given a Debugger.Object instancedobj referring to some object, dobj.allocationSite returns a saved call stack indicating wheredobj's referent was allocated.
Ifdbg is a Debugger instance, and dbg.memory.trackingAllocationSites is set to true, then the JavaScript engine logs each object allocated bydbg's debuggee code. You can retrieve the current log by calling dbg.memory.drainAllocationsLog. You can control the limit on the log's size by setting dbg.memory.maxAllocationsLogLength.
A census is a complete traversal of the graph of all reachable memory items belonging to a particular Debugger's debuggees. It produces a count of those items, broken down by various criteria. Ifdbg is a Debugger instance, you can call dbg.memory.takeCensus to conduct a census of its debuggees' possessions.
Debugger.Memory.prototype ObjectIfdbg is a Debugger instance, then <i>dbg</i>.memory is a Debugger.Memory instance, which inherits the following accessor properties from its prototype:
trackingAllocationSitesA boolean value indicating whether this Debugger.Memory instance is capturing the JavaScript execution stack when each Object is allocated. This accessor property has both a getter and setter: assigning to it enables or disables the allocation site tracking. Reading the accessor produces true if the Debugger is capturing stacks for Object allocations, and false otherwise. Allocation site tracking is initially disabled in a new Debugger.
Assignment is fallible: if the Debugger cannot track allocation sites, it throws an Error instance.
You can retrieve the allocation site for a given object with the Debugger.Object.prototype.allocationSite accessor property.
allocationSamplingProbabilityA number between 0 and 1 that indicates the probability with which each new allocation should be entered into the allocations log. 0 is equivalent to "never", 1 is "always", and .05 would be "one out of twenty".
- -The default is 1, or logging every allocation.
- -Note that in the presence of multiple Debugger instances observing the same allocations within a global's scope, the maximum allocationSamplingProbability of all the Debuggers is used.
maxAllocationsLogLength5000.allocationsLogOverflowedtrue if there have been more than [maxAllocationsLogLength][#max-alloc-log] allocations since the last time [drainAllocationsLog][#drain-alloc-log] was called and some data has been lost. Returns false otherwise.Similar to Debugger's handler functions, Debugger.Memory inherits accessor properties that store handler functions for SpiderMonkey to call when given events occur in debuggee code.
Unlike Debugger's hooks, Debugger.Memory's handlers' return values are not significant, and are ignored. The handler functions receive the Debugger.Memory's owning Debugger instance as their this value. The owning Debugger's uncaughtExceptionHandler is still fired for errors thrown in Debugger.Memory hooks.
On a new Debugger.Memory instance, each of these properties is initially undefined. Any value assigned to a debugging handler must be either a function or undefined; otherwise a TypeError is thrown.
Handler functions run in the same thread in which the event occurred. They run in the compartment to which they belong, not in a debuggee compartment.
- -onGarbageCollection(statistics)A garbage collection cycle spanning one or more debuggees has just been completed.
- -The statistics parameter is an object containing information about the GC cycle. It has the following properties:
- -collectionsThe collections property's value is an array. Because SpiderMonkey's collector is incremental, a full collection cycle may consist of multiple discrete collection slices with the JS mutator running interleaved. For each collection slice that occurred, there is an entry in the collections array with the following form:
-{
- "startTimestamp":timestamp,
- "endTimestamp":timestamp,
-}
-Here the timestamp values are timestamps of the GC slice's start and end events.
-reasonA very short string describing the reason why the collection was triggered. Known values include the following:
- -nonincrementalReasonIf SpiderMonkey's collector determined it could not incrementally collect garbage, and had to do a full GC all at once, this is a short string describing the reason it determined the full GC was necessary. Otherwise, null is returned. Known values include the following:
gcCycleNumberDebugger.Memory.prototype ObjectMemory analysis may yield surprising results, because browser implementation details that are transparent to content JavaScript often have visible effects on memory consumption. Web developers need to know their pages' actual memory consumption on real browsers, so it is correct for the tool to expose these behaviors, as long as it is done in a way that helps developers make decisions about their own code.
- -This section covers some areas where Firefox's actual behavior deviates from what one might expect from the specified behavior of the web platform.
- -SpiderMonkey objects usually use less memory than the naïve "table of properties with attributes" model would suggest. For example, it is typical for many objects to have identical sets of properties, with only the properties' values varying from one object to the next. To take advantage of this regularity, SpiderMonkey objects with identical sets of properties may share their property metadata; only property values are stored directly in the object.
- -Array objects may also be optimized, if the set of live indices is dense.
- -SpiderMonkey has three representations of strings:
- -Normal: the string's text is counted in its size.
-Substring: the string is a substring of some other string, and points to that string for its storage. This representation may result in a small string retaining a very large string. However, the memory consumed by the string itself is a small constant independent of its size, since it is a reference to the larger string, a start position, and a length.
-Concatenations: When asked to concatenate two strings, SpiderMonkey may elect to delay copying the strings' data, and represent the result as a pointer to the two original strings. Again, such a string retains other strings, but the memory consumed by the string itself is a small constant independent of its size, since it is a pair of pointers.
-SpiderMonkey converts strings from the more complex representations to the simpler ones when it pleases. Such conversions usually increase memory consumption.
- -SpiderMonkey shares some strings amongst all web pages and browser JS. These shared strings, called atoms, are not included in censuses' string counts.
- -SpiderMonkey has a complex, hybrid representation of JavaScript code. There are four representations kept in memory:
- -Source code. SpiderMonkey retains a copy of most JavaScript source code.
-Compressed source code. SpiderMonkey compresses JavaScript source code, and de-compresses it on demand. Heuristics determine how long to retain the uncompressed code.
-Bytecode. This is SpiderMonkey's parsed representation of JavaScript. Bytecode can be interpreted directly, or used as input to a just-in-time compiler. Source is parsed into bytecode on demand; functions that are never called are never parsed.
-Machine code. SpiderMonkey includes several just-in-time compilers, each of which translates JavaScript source or bytecode to machine code. Heuristics determine which code to compile, and which compiler to use. Machine code may be dropped in response to memory pressure, and regenerated as needed.
-Furthermore, SpiderMonkey tracks which types of values have appeared in variables and object properties. This type information can be large.
- -In a census, all the various forms of JavaScript code are placed in the "script" category. Type information is accounted to the "types" category.
A Debugger.Object instance represents an object in the debuggee, providing reflection-oriented methods to inspect and modify its referent. The referent's properties do not appear directly as properties of the Debugger.Object instance; the debugger can access them only through methods like Debugger.Object.prototype.getOwnPropertyDescriptor and Debugger.Object.prototype.defineProperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters.
SpiderMonkey creates exactly one Debugger.Object instance for each debuggee object it presents to a given Debugger instance: if the debugger encounters the same object through two different routes (perhaps two functions are called on the same object), SpiderMonkey presents the same Debugger.Object instance to the debugger each time. This means that the debugger can use the == operator to recognize when two Debugger.Object instances refer to the same debuggee object, and place its own properties on a Debugger.Object instance to store metadata about particular debuggee objects.
JavaScript code in different compartments can have different views of the same object. For example, in Firefox, code in privileged compartments sees content DOM element objects without redefinitions or extensions made to that object's properties by content code. (In Firefox terminology, privileged code sees the element through an "xray wrapper".) To ensure that debugger code sees each object just as the debuggee would, each Debugger.Object instance presents its referent as it would be seen from a particular compartment. This "viewing compartment" is chosen to match the way the debugger came across the referent. As a consequence, a single Debugger instance may actually have several Debugger.Object instances: one for each compartment from which the referent is viewed.
If more than one Debugger instance is debugging the same code, each Debugger gets a separate Debugger.Object instance for a given object. This allows the code using each Debugger instance to place whatever properties it likes on its own Debugger.Object instances, without worrying about interfering with other debuggers.
While most Debugger.Object instances are created by SpiderMonkey in the process of exposing debuggee's behavior and state to the debugger, the debugger can use Debugger.Object.prototype.makeDebuggeeValue to create Debugger.Object instances for given debuggee objects, or use Debugger.Object.prototype.copy and Debugger.Object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals.
Debugger.Object instances protect their referents from the garbage collector; as long as the Debugger.Object instance is live, the referent remains live. This means that garbage collection has no visible effect on Debugger.Object instances.
A Debugger.Object instance inherits the following accessor properties from its prototype:
protoDebugger.Object instance), or null if it has no prototype. This accessor may throw if the referent is a scripted proxy or some other sort of exotic object (an opaque wrapper, for example).class[[Class]] of the referent.callabletrue if the referent is a callable object (such as a function or a function proxy); false otherwise.nameThe name of the referent, if it is a named function. If the referent is an anonymous function, or not a function at all, this is undefined.
This accessor returns whatever name appeared after the function keyword in the source code, regardless of whether the function is the result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function's body).
displayNameThe referent's display name, if the referent is a function with a display name. If the referent is not a function, or if it has no display name, this is undefined.
If a function has a given name, its display name is the same as its given name. In this case, the displayName and name properties are equal.
If a function has no name, SpiderMonkey attempts to infer an appropriate name for it given its context. For example:
- -function f() {} // display name: f (the given name)
-var g = function () {}; // display name: g
-o.p = function () {}; // display name: o.p
-var q = {
- r: function () {} // display name: q.r
-};Note that the display name may not be a proper JavaScript identifier, or even a proper expression: we attempt to find helpful names even when the function is not immediately assigned as the value of some variable or property. Thus, we use a/b to refer to theb defined withina, and a< to refer to a function that occurs somewhere within an expression that is assigned toa. For example:
function h() {
- var i = function() {}; // display name: h/i
- f(function () {}); // display name: h/<
-}
-var s = f(function () {}); // display name: s<parameterNamesIf the referent is a debuggee function, return the names of its parameters, as an array of strings. If the referent is not a debuggee function, or not a function at all, this is undefined.
If the referent is a host function for which parameter names are not available, return an array with one element per parameter, each of which is undefined.
If the referent is a function proxy, return an empty array.
- -If the referent uses destructuring parameters, then the array's elements reflect the structure of the parameters. For example, if the referent is a function declared in this way:
- -function f(a, [b, c], {d, e:f}) { ... }then this Debugger.Object instance's parameterNames property would have the value:
["a", ["b", "c"], {d:"d", e:"f"}]scriptDebugger.Script instance. If the referent is a function proxy or not debuggee code, this is undefined.environmentDebugger.Environment instance representing the lexical environment enclosing the function when it was created. If the referent is a function proxy or not debuggee code, this is undefined.errorMessageNameundefined otherwise.errorLineNumberundefined otherwise.errorColumnNumberundefined otherwise.isBoundFunctiontrue if the referent is a bound function; false otherwise. If the referent is not a debuggee function, or not a function at all, returns undefined instead.isArrowFunctiontrue if the referent is an arrow function; false otherwise. If the referent is not a debuggee function, or not a function at all, returns undefined instead.isGeneratorFunctiontrue if the referent was created with a function* expression or statement, or false if it is some other sort of function. If the referent is not a debuggee function, or not a function at all, this is undefined. (This is always equal to obj.script.isGeneratorFunction, assuming obj.script is a Debugger.Script.)isAsyncFunctiontrue if the referent is an async function, defined with an async function expression or statement, or false if it is some other sort of function. If the referent is not a debuggee function, or not a function at all, this is undefined. (This is always equal to obj.script.isAsyncFunction, assuming obj.script is a Debugger.Script.)isPromisetrue if the referent is a Promise; false otherwise.boundTargetFunctionthis object. If the referent is either not a bound function, not a debuggee function, or not a function at all, this is undefined.boundThisthis value it was bound to. If the referent is either not a bound function, not a debuggee function, or not a function at all, this is undefined.boundArgumentsarguments object it was bound to. If the referent is either not a bound function, not a debuggee function, or not a function at all, this is undefined.isProxytrue. If the referent is not a (scripted) proxy, return false.proxyTargetDebugger.Object instance referring to the ECMAScript [[ProxyTarget]] of the referent. If the referent is a revoked (scripted) proxy, return null. If the referent is not a (scripted) proxy, return undefined.proxyHandlerDebugger.Object instance referring to the ECMAScript [[ProxyHandler]] of the referent. If the referent is a revoked (scripted) proxy, return null. If the referent is not a (scripted) proxy, return undefined.promiseStateIf the referent is a Promise, return a string indicating whether the Promise is pending, or has been fulfilled or rejected. This string takes one of the following values:
"pending", if the Promise is pending.
"fulfilled", if the Promise has been fulfilled.
"rejected", if the Promise has been rejected.
If the referent is not a Promise, throw a TypeError.
promiseValueReturn a debuggee value representing the value the Promise has been fulfilled with.
If the referent is not a Promise, or the Promise has not been fulfilled, throw a TypeError.
promiseReasonReturn a debuggee value representing the value the Promise has been rejected with.
If the referent is not a Promise, or the Promise has not been rejected, throw a TypeError.
promiseAllocationSitePromise, this is the JavaScript execution stack captured at the time of the promise's allocation. This can return null if the promise was not created from script. If the referent is not a Promise, throw a TypeError exception.promiseResolutionSitePromise, this is the JavaScript execution stack captured at the time of the promise's resolution. This can return null if the promise was not resolved by calling its resolve or reject resolving functions from script. If the referent is not a Promise, throw a TypeError exception.promiseIDPromise, this is a process-unique identifier for the Promise. With e10s, the same id can potentially be assigned to multiple Promise instances, if those instances were created in different processes. If the referent is not a Promise, throw a TypeError exception.promiseDependentPromisesPromise, this is an Array of Debugger.Objects referring to the promises directly depending on the referent Promise. These are:then() calls on the promise.Promise.all() if the referent Promise was passed in as one of the arguments.Promise.race() if the referent Promise was passed in as one of the arguments.Once a Promise is settled, it will generally notify its dependent promises and forget about them, so this is most useful on pending promises.
Note that the Array only contains the promises that directly depend on the referent Promise. It does not contain promises that depend on promises that depend on the referent Promise.
If the referent is not a Promise, throw a TypeError exception.
promiseLifetimePromise, this is the number of milliseconds elapsed since the Promise was created. If the referent is not a Promise, throw a TypeError exception.promiseTimeToResolutionPromise, this is the number of milliseconds elapsed between when the Promise was created and when it was resolved. If the referent hasn't been resolved or is not a Promise, throw a TypeError exception.globalDebugger.Object instance referring to the global object in whose scope the referent was allocated. This does not unwrap cross-compartment wrappers: if the referent is a wrapper, the result refers to the wrapper's global, not the wrapped object's global. The result refers to the global directly, not via a wrapper.allocationSiteDebugger.Object's referent was allocated, return the JavaScript execution stack captured at the time of the allocation. Otherwise, return null.The functions described below may only be called with a this value referring to a Debugger.Object instance; they may not be used as methods of other kinds of objects. The descriptions use "referent" to mean "the referent of this Debugger.Object instance".
Unless otherwise specified, these methods are not invocation functions; if a call would cause debuggee code to run (say, because it gets or sets an accessor property whose handler is debuggee code, or because the referent is a proxy whose traps are debuggee code), the call throws a Debugger.DebuggeeWouldRun exception.
These methods may throw if the referent is not a native object. Even simple accessors like isExtensible may throw if the referent is a proxy or some sort of exotic object like an opaque wrapper.
getProperty(key, [receiver])undefined if it has no such property. key must be a string or symbol; receiver must be a debuggee value. If the property is a getter, it will be evaluated with receiver as the receiver, defaulting to the Debugger.Object if omitted.setProperty(key, value, [receiver])Debugger.Object if omitted.getOwnPropertyDescriptor(name)undefined. (This function behaves like the standard Object.getOwnPropertyDescriptor function, except that the object being inspected is implicit; the property descriptor returned is allocated as if by code scoped to the debugger's global object (and is thus in the debugger's compartment); and its value, get, and set properties, if present, are debuggee values.)getOwnPropertyNames()Object.getOwnPropertyNames(referent) had been called in the debuggee, and the result copied in the scope of the debugger's global object.getOwnPropertySymbols()Object.getOwnPropertySymbols(referent) had been called in the debuggee, and the result copied in the scope of the debugger's global object.defineProperty(name,attributes)value, get, and set properties ofattributes must be debuggee values. (This function behaves like Object.defineProperty, except that the target object is implicit, and in a different compartment from the function and descriptor.)defineProperties(properties)Object.defineProperties, except that the target object is implicit, and in a different compartment from theproperties argument.)deleteProperty(name)seal()Debugger.Object instance. (This function behaves like the standard Object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.)freeze()Debugger.Object instance. (This function behaves like the standard Object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.)preventExtensions()Object.preventExtensions function, except that the object to operate on is implicit and in a different compartment from the caller.)isSealed()Object.isSealed function, except that the object inspected is implicit and in a different compartment from the caller.)isFrozen()Object.isFrozen function, except that the object inspected is implicit and in a different compartment from the caller.)isExtensible()Object.isExtensible function, except that the object inspected is implicit and in a different compartment from the caller.)copy(value)Apply the HTML5 "structured cloning" algorithm to create a copy ofvalue in the referent's global object (and thus in the referent's compartment), and return a Debugger.Object instance referring to the copy.
Note that this returns primitive values unchanged. This means you can use Debugger.Object.prototype.copy as a generic "debugger value to debuggee value" conversion function—within the limitations of the "structured cloning" algorithm.
create(prototype, [properties])Debugger.Object referring to it. The new object's prototype isprototype, which must be an Debugger.Object instance. The new object's properties are as given byproperties, as ifproperties were passed to Debugger.Object.prototype.defineProperties, with the new Debugger.Object instance as the this value.makeDebuggeeValue(value)Return the debuggee value that representsvalue in the debuggee. Ifvalue is a primitive, we return it unchanged; ifvalue is an object, we return the Debugger.Object instance representing that object, wrapped appropriately for use in this Debugger.Object's referent's compartment.
Note that, ifvalue is an object, it need not be one allocated in a debuggee global, nor even a debuggee compartment; it can be any object the debugger wishes to use as a debuggee value.
- -As described above, each Debugger.Object instance presents its referent as viewed from a particular compartment. Given a Debugger.Object instanced and an objecto, the call d.makeDebuggeeValue(o) returns a Debugger.Object instance that presentso as it would be seen by code ind's compartment.
decompile([pretty])undefined.call(this,argument, …){ asConstructor: true } to invoke the referent as a constructor, in which case SpiderMonkey provides an appropriate this value itself. Eachargument must be a debuggee value. All extant handler methods, breakpoints, and so on remain active during the call. If the referent is not callable, throw a TypeError. This function follows the invocation function conventions.apply(this,arguments){ asConstructor: true } to invokefunction as a constructor, in which case SpiderMonkey provides an appropriate this value itself.Arguments must either be an array (in the debugger) of debuggee values, or null or undefined, which are treated as an empty array. All extant handler methods, breakpoints, and so on remain active during the call. If the referent is not callable, throw a TypeError. This function follows the invocation function conventions.executeInGlobal(code, [options])If the referent is a global object, evaluatecode in that global environment, and return a completion value describing how it completed.Code is a string. All extant handler methods, breakpoints, and so on remain active during the call. This function follows the invocation function conventions. If the referent is not a global object, throw a TypeError exception.
Codeis interpreted as strict mode code when it contains a Use Strict Directive.
- -This evaluation is semantically equivalent to executing statements at the global level, not an indirect eval. Regardless ofcode being strict mode code, variable declarations incode affect the referent global object.
- -Theoptions argument is as for Debugger.Frame.prototype.eval.
executeInGlobalWithBindings(code,bindings, [options])Like executeInGlobal, but evaluatecode using the referent as the variable object, but with a lexical environment extended with bindings from the objectbindings. For each own enumerable property ofbindings namedname whose value isvalue, include a variable in the lexical environment in whichcode is evaluated namedname, whose value isvalue. Eachvalue must be a debuggee value. (This is not like a with statement:code may access, assign to, and delete the introduced bindings without having any effect on thebindings object.)
This method allows debugger code to introduce temporary bindings that are visible to the given debuggee code and which refer to debugger-held debuggee values, and do so without mutating any existing debuggee environment.
- -Note that, like executeInGlobal, any declarations it contains affect the referent global object, even ascode is evaluated in an environment extended according tobindings. (In the terms used by the ECMAScript specification, the VariableEnvironment of the execution context forcode is the referent, and thebindings appear in a new declarative environment, which is the eval code's LexicalEnvironment.)
Theoptions argument is as for Debugger.Frame.prototype.eval.
asEnvironment()Debugger.Environment instance representing the referent's global lexical scope. The global lexical scope's enclosing scope is the global object. If the referent is not a global object, throw a TypeError.unwrap()Debugger.Object's compartment is permitted to unwrap, return a Debugger.Object instance referring to the wrapped object. If we are not permitted to unwrap the referent, return null. If the referent is not a wrapper, return this Debugger.Object instance unchanged.unsafeDereference()Return the referent of this Debugger.Object instance.
If the referent is an inner object (say, an HTML5 Window object), return the corresponding outer object (say, the HTML5 WindowProxy object). This makes unsafeDereference more useful in producing values appropriate for direct use by debuggee code, without using invocation functions.
This method pierces the membrane of Debugger.Object instances meant to protect debugger code from debuggee code, and allows debugger code to access debuggee objects through the standard cross-compartment wrappers, rather than via Debugger.Object's reflection-oriented interfaces. This method makes it easier to gradually adapt large code bases to this Debugger API: adapted portions of the code can use Debugger.Object instances, but use this method to pass direct object references to code that has not yet been updated.
forceLexicalInitializationByName(binding)A Debugger.Script instance may refer to a sequence of bytecode in the debuggee or to a block of WebAssembly code. For the former, it is the Debugger API's presentation of a JSAPI JSScript object. The two cases are distinguished by their format property being "js" or "wasm".
For Debugger.Script instances referring to a JSScript, they are distinguished by their format property being "js".
Each of the following is represented by a single JSScript object:
The body of a function—that is, all the code in the function that is not contained within some nested function.
-The code passed to a single call to eval, excluding the bodies of any functions that code defines.
The contents of a <script> element.
A DOM event handler, whether embedded in HTML or attached to the element by other JavaScript code.
-Code appearing in a javascript: URL.
The Debugger interface constructs Debugger.Script objects as scripts of debuggee code are uncovered by the debugger: via the onNewScript handler method; via Debugger.Frame's script properties; via the functionScript method of Debugger.Object instances; and so on. For a given Debugger instance, SpiderMonkey constructs exactly one Debugger.Script instance for each underlying script object; debugger code can add its own properties to a script object and expect to find them later, use == to decide whether two expressions refer to the same script, and so on.
(If more than one Debugger instance is debugging the same code, each Debugger gets a separate Debugger.Script instance for a given script. This allows the code using each Debugger instance to place whatever properties it likes on its Debugger.Script instances, without worrying about interfering with other debuggers.)
A Debugger.Script instance is a strong reference to a JSScript object; it protects the script it refers to from being garbage collected.
Note that SpiderMonkey may use the same Debugger.Script instances for equivalent functions or evaluated code—that is, scripts representing the same source code, at the same position in the same source file, evaluated in the same lexical environment.
For Debugger.Script instances referring to a block of WebAssembly code, they are distinguished by their format property being "wasm".
Currently only entire modules evaluated via new WebAssembly.Module are represented.
Debugger.Script objects for WebAssembly are uncovered via onNewScript when a new WebAssembly module is instantiated and via the findScripts method on Debugger instances. SpiderMonkey constructs exactly one Debugger.Script for each underlying WebAssembly module per Debugger instance.
A Debugger.Script instance is a strong reference to the underlying WebAssembly module; it protects the module it refers to from being garbage collected.
Please note at the time of this writing, support for WebAssembly is very preliminary. Many properties and methods below throw.
- -For descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to a JSScript or to a block of WebAssembly code, the text will be split into two sections, headed by "if the instance refers to a JSScript" and "if the instance refers to WebAssembly code", respectively. If the behavior does not differ, no such emphasized headings will appear.
A Debugger.Script instance inherits the following accessor properties from its prototype:
isGeneratorFunctionJSScript for a function defined with a function* expression or statement. False otherwise.isAsyncFunctionJSScript for an async function, defined with an async function expression or statement. False otherwise.displayNameIf the instance refers to a JSScript, this is the script's display name, if it has one. If the script has no display name — for example, if it is a top-level eval script — this is undefined.
If the script's function has a given name, its display name is the same as its function's given name.
- -If the script's function has no name, SpiderMonkey attempts to infer an appropriate name for it given its context. For example:
- -function f() {} // display name: f (the given name)
-var g = function () {}; // display name: g
-o.p = function () {}; // display name: o.p
-var q = {
- r: function () {} // display name: q.r
-};Note that the display name may not be a proper JavaScript identifier, or even a proper expression: we attempt to find helpful names even when the function is not immediately assigned as the value of some variable or property. Thus, we use a/b to refer to theb defined withina, and a< to refer to a function that occurs somewhere within an expression that is assigned toa. For example:
function h() {
- var i = function() {}; // display name: h/i
- f(function () {}); // display name: h/<
-}
-var s = f(function () {}); // display name: s<If the instance refers to WebAssembly code, throw a TypeError.
urlIf the instance refers to a JSScript, the filename or URL from which this script's code was loaded. For scripts created by eval or the Function constructor, this may be a synthesized filename, starting with a valid URL and followed by information tracking how the code was introduced into the system; the entire string is not a valid URL. For Function.prototype's script, this is null. If this Debugger.Script's source property is non-null, then this is equal to source.url.
If the instance refers to WebAssembly code, throw a TypeError.
startLineJSScript, the number of the line at which this script's code starts, within the file or document named by url.lineCountJSScript, the number of lines this script's code occupies, within the file or document named by url.sourceIf the instance refers to a JSScript, the Debugger.Source instance representing the source code from which this script was produced. This is null if the source code was not retained.
If the instance refers to WebAssembly code, the Debugger.Source instance representing the serialized text format of the WebAssembly code.
sourceStartIf the instance refers to a JSScript, the character within the Debugger.Source instance given by source at which this script's code starts; zero-based. If this is a function's script, this is the index of the start of the function token in the source code.
If the instance refers to WebAssembly code, throw a TypeError.
sourceLengthIf the instance refers to a JSScript, the length, in characters, of this script's code within the Debugger.Source instance given by source.
If the instance refers to WebAssembly code, throw a TypeError.
globalIf the instance refers to a JSScript, a Debugger.Object instance referring to the global object in whose scope this script runs. The result refers to the global directly, not via a wrapper or a WindowProxy ("outer window", in Firefox).
If the instance refers to WebAssembly code, throw a TypeError.
formatIf the instance refers to a JSScript, "js".
If the instance refers to WebAssembly code, "wasm".
The functions described below may only be called with a this value referring to a Debugger.Script instance; they may not be used as methods of other kinds of objects.
getAllOffsets()If the instance refers to a JSScript, return an arrayL describing the relationship between bytecode instruction offsets and source code positions in this script.L is sparse, and indexed by source line number. If a source line numberline has no code, thenL has noline property. If there is code forline, then L[line] is an array of offsets of byte code instructions that are entry points to that line.
For example, suppose we have a script for the following source code:
- -a=[]
-for (i=1; i < 10; i++)
- // It's hip to be square.
- a[i] = i*i;Calling getAllOffsets() on that code might yield an array like this:
[[0], [5, 20], , [10]]This array indicates that:
- -the first line's code starts at offset 0 in the script;
-the for statement head has two entry points at offsets 5 and 20 (for the initialization, which is performed only once, and the loop test, which is performed at the start of each iteration);
the third line has no code;
-and the fourth line begins at offset 10.
-If the instance refers to WebAssembly code, throw a TypeError.
getAllColumnOffsets():If the instance refers to a JSScript, return an array describing the relationship between bytecode instruction offsets and source code positions in this script. Unlike getAllOffsets(), which returns all offsets that are entry points for each line, getAllColumnOffsets() returns all offsets that are entry points for each (line, column) pair.
The elements of the array are objects, each of which describes a single entry point, and contains the following properties:
- -lineNumber: the line number for which offset is an entry point
-columnNumber: the column number for which offset is an entry point
-offset: the bytecode instruction offset of the entry point
-For example, suppose we have a script for the following source code:
- -a=[]
-for (i=1; i < 10; i++)
- // It's hip to be square.
- a[i] = i*i;Calling getAllColumnOffsets() on that code might yield an array like this:
[{ lineNumber: 0, columnNumber: 0, offset: 0 },
- { lineNumber: 1, columnNumber: 5, offset: 5 },
- { lineNumber: 1, columnNumber: 10, offset: 20 },
- { lineNumber: 3, columnNumber: 4, offset: 10 }]If the instance refers to WebAssembly code, throw a TypeError.
getLineOffsets(line)JSScript, return an array of bytecode instruction offsets representing the entry points to source lineline. If the script contains no executable code at that line, the array returned is empty.getOffsetLocation(offset)If the instance refers to a JSScript, return an object describing the source code location responsible for the bytecode atoffset in this script. The object has the following properties:
lineNumber: the line number for which offset is an entry point
-columnNumber: the column number for which offset is an entry point
-isEntryPoint: true if the offset is a column entry point, as would be reported by getAllColumnOffsets(); otherwise false.
-getOffsetsCoverage():If the instance refers to a JSScript, return null or an array which contains information about the coverage of all opcodes. The elements of the array are objects, each of which describes a single opcode, and contains the following properties:
lineNumber: the line number of the current opcode.
-columnNumber: the column number of the current opcode.
-offset: the bytecode instruction offset of the current opcode.
-count: the number of times the current opcode got executed.
-If this script has no coverage, or if it is not instrumented, then this function will return null. To ensure that the debuggee is instrumented, the flag Debugger.collectCoverageInfo should be set to true.
If the instance refers to WebAssembly code, throw a TypeError.
getChildScripts()If the instance refers to a JSScript, return a new array whose elements are Debugger.Script objects for each function in this script. Only direct children are included; nested children can be reached by walking the tree.
If the instance refers to WebAssembly code, throw a TypeError.
setBreakpoint(offset,handler)If the instance refers to a JSScript, set a breakpoint at the bytecode instruction atoffset in this script, reporting hits to the hit method ofhandler. Ifoffset is not a valid offset in this script, throw an error.
When execution reaches the given instruction, SpiderMonkey calls the hit method ofhandler, passing a Debugger.Frame instance representing the currently executing stack frame. The hit method's return value should be a resumption value, determining how execution should continue.
Any number of breakpoints may be set at a single location; when control reaches that point, SpiderMonkey calls their handlers in an unspecified order.
- -Any number of breakpoints may use the samehandler object.
- -Breakpoint handler method calls are cross-compartment, intra-thread calls: the call takes place in the same thread that hit the breakpoint, and in the compartment containing the handler function (typically the debugger's compartment).
- -The new breakpoint belongs to the Debugger instance to which this script belongs. Disabling the Debugger instance disables this breakpoint; and removing a global from the Debugger instance's set of debuggees clears all the breakpoints belonging to that Debugger instance in that global's scripts.
getBreakpoints([offset])If the instance refers to a JSScript, return an array containing the handler objects for all the breakpoints set atoffset in this script. Ifoffset is omitted, return the handlers of all breakpoints set anywhere in this script. Ifoffset is present, but not a valid offset in this script, throw an error.
If the instance refers to WebAssembly code, throw a TypeError.
clearBreakpoint(handler, [offset])If the instance refers to a JSScript, remove all breakpoints set in this Debugger instance that usehandler as their handler. Ifoffset is given, remove only those breakpoints set atoffset that usehandler; ifoffset is not a valid offset in this script, throw an error.
Note that, if breakpoints using other handler objects are set at the same location(s) ashandler, they remain in place.
-clearAllBreakpoints([offset])JSScript, remove all breakpoints set in this script. Ifoffset is present, remove all breakpoints set at that offset in this script; ifoffset is not a valid bytecode offset in this script, throw an error.isInCatchScope([offset])If the instance refers to a JSScript, this is true if this offset falls within the scope of a try block, and false otherwise.
If the instance refers to WebAssembly code, throw a TypeError.
A Debugger.Source instance represents either a piece of JavaScript source code or the serialized text of a block of WebAssembly code. The two cases are distinguished by the latter having its introductionType property always being "wasm" and the former having its introductionType property never being "wasm".
Each Debugger instance has a separate collection of Debugger.Source instances representing the source code that has been presented to the system.
A debugger may place its own properties on Debugger.Source instances, to store metadata about particular pieces of source code.
For a Debugger.Source instance representing a piece of JavaScript source code, its properties provide the source code itself as a string, and describe where it came from. Each Debugger.Script instance refers to the Debugger.Source instance holding the source code from which it was produced.
If a single piece of source code contains both top-level code and function definitions, perhaps with nested functions, then the Debugger.Script instances for those all refer to the same Debugger.Source instance. Each script indicates the substring of the overall source to which it corresponds.
A Debugger.Source instance may represent only a portion of a larger source document. For example, an HTML document can contain JavaScript in multiple <script> elements and event handler content attributes. In this case, there may be either a single Debugger.Source instance for the entire HTML document, with each Debugger.Script referring to its substring of the document; or there may be a separate Debugger.Source instance for each <script> element and attribute. The choice is left up to the implementation.
If a given piece of source code is presented to the JavaScript implementation more than once, with the same origin metadata, the JavaScript implementation may generate a fresh Debugger.Source instance to represent each presentation, or it may use a single Debugger.Source instance to represent them all.
For a Debugger.Source instance representing the serialized text of a block of WebAssembly code, its properties provide the serialized text as a string.
Currently only entire modules evaluated via new WebAssembly.Module are represented. SpiderMonkey constructs exactly one Debugger.Source for each underlying WebAssembly module per Debugger instance.
Please note at the time of this writing, support for WebAssembly is very preliminary. Many properties below return placeholder values.
- -For descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to JavaScript source or to a block of WebAssembly code, the text will be split into two sections, headed by "if the instance refers to JavaScript source" and "if the instance refers to WebAssembly code", respectively. If the behavior does not differ, no such emphasized headings will appear.
- -A Debugger.Source instance inherits the following accessor properties from its prototype:
textIf the instance refers to JavaScript source, the JavaScript source code, as a string. The value satisfies the Program, FunctionDeclaration, or FunctionExpression productions in the ECMAScript standard.
If the instance refers to WebAssembly code, the serialized text representation. The format is yet to be specified in the WebAssembly standard. Currently, the text is an s-expression based syntax. The text generation is disabled if the Debugger has the allowWasmBinarySource property set, the "[wasm]" value will be returned in this case.
binaryallowWasmBinarySource property set, a Uint8Array that contains the WebAssembly bytecode.urlIf the instance refers to JavaScript source, the filename or URL from which this script's code was loaded. For scripts created by eval or the Function constructor, this may be a synthesized filename, starting with a valid URL and followed by information tracking how the code was introduced into the system; the entire string is not a valid URL. For Function.prototype's script, this is null. Source may be loaded from a URL in the following ways:
The URL may appear as the src attribute of a <script> element in markup text.
The URL may be passed to the Worker web worker constructor, or the web worker importScripts function.
The URL may be the name of a XPCOM JavaScript module or subscript.
-(Note that code passed to eval, the Function constructor, or a similar function isnot considered to be loaded from a URL; the url accessor on Debugger.Source instances for such sources should return undefined.)
If the instance refers to WebAssembly code, the URL of the script that called new WebAssembly.Module with the string "> wasm" appended.
sourceMapURLIf the instance refers to JavaScript source, if this source was produced by a minimizer or translated from some other language, and we know the URL of a source map document relating the source positions in this source to the corresponding source positions in the original source, then this property's value is that URL. Otherwise, this is null.
(On the web, the translator may provide the source map URL in a specially formatted comment in the JavaScript source code, or via a header in the HTTP reply that carried the generated JavaScript.)
- -This property is writable, so you can change the source map URL by setting it. All Debugger.Source objects referencing the same source will see the change. Setting an empty string has no effect and will not change existing value.
- -If the instance refers to WebAssembly code, null. Attempts to write to this property throw a TypeError.
displayURL//# sourceURL comment, as described in the source maps specification, then this property's value holds the string that was given. Otherwise, this is null.elementThe Debugger.Object instance referring to the DOM element to which this source code belongs, if any, or undefined if it belongs to no DOM element. Source belongs to a DOM element in the following cases:
Source belongs to a <script> element if it is the element's text content (that is, it is written out as the body of the <script> element in the markup text), or is the source document referenced by its src attribute.
Source belongs to a DOM element if it is an event handler content attribute (that is, if it is written out in the markup text as an attribute value).
-Source belongs to a DOM element if it was assigned to one of the element's event handler IDL attributes as a string. (Note that one may assign both strings and functions to DOM elements' event handler IDL attributes. If one assigns a function, that function's script's source doesnot belong to the DOM element; the function's definition must appear elsewhere.)
-(If the sources attached to a DOM element change, the Debugger.Source instances representing superseded code still refer to the DOM element; this accessor only reflects origins, not current relationships.)
elementAttributeNameundefined.introductionTypeIf the instance refers to JavaScript source, a string indicating how this source code was introduced into the system. This accessor returns one of the following values:
- -"eval", for code passed to eval.
"Function", for code passed to the Function constructor.
"Function.prototype", for Function.prototype internally generated code.
"Worker", for code loaded by calling the Web worker constructor—the worker's main script.
"importScripts", for code by calling importScripts in a web worker.
"eventHandler", for code assigned to DOM elements' event handler IDL attributes as a string.
"scriptElement", for code belonging to <script> elements.
"javascriptURL", for code presented in javascript: URLs.
"setTimeout", for code passed to setTimeout as a string.
"setInterval", for code passed to setInterval as a string.
undefined, if the implementation doesn't know how the code was introduced.
If the instance refers to WebAssembly code, "wasm".
introductionScript, introductionOffsetIf the instance refers to JavaScript source, and if this source was introduced by calling a function from debuggee code, then introductionScript is the Debugger.Script instance referring to the script containing that call, and introductionOffset is the call's bytecode offset within that script. Otherwise, these are both undefined. Taken together, these properties indicate the location of the introducing call.
For the purposes of these accessors, assignments to accessor properties are treated as function calls. Thus, setting a DOM element's event handler IDL attribute by assigning to the corresponding JavaScript property creates a source whose introductionScript and introductionOffset refer to the property assignment.
Since a <script> element parsed from a web page's original HTML was not introduced by any scripted call, its source's introductionScript and introductionOffset accessors both return undefined.
If a <script> element was dynamically inserted into a document, then these accessors refer to the call that actually caused the script to run—usually the call that made the element part of the document. Thus, they donot refer to the call that created the element; stored the source as the element's text child; made the element a child of some uninserted parent node that was later inserted; or the like.
Although the main script of a worker thread is introduced by a call to Worker or SharedWorker, these accessors always return undefined on such script's sources. A worker's main script source and the call that created the worker are always in separate threads, but Debugger is an inherently single-threaded facility: its debuggees must all run in the same thread. Since the global that created the worker is in a different thread, it is guaranteed not to be a debuggee of the Debugger instance that owns this source; and thus the creating call is never "in debuggee code". Relating a worker to its creator, and other multi-threaded debugging concerns, are out of scope for Debugger.
If the instance refers to WebAssembly code, introductionScript is the Debugger.Script instance referring to the same underlying WebAssembly module. introductionOffset is undefined.
When called as a constructor, the Debugger object creates a new Debugger instance.
new Debugger([global, …])addDebuggee method to each of the givenglobal objects to add them as the initial debuggees.A Debugger instance inherits the following accessor properties from its prototype:
enabledA boolean value indicating whether this Debugger instance's handlers, breakpoints, and the like are currently enabled. It is an accessor property with a getter and setter: assigning to it enables or disables this Debugger instance; reading it produces true if the instance is enabled, or false otherwise. This property is initially true in a freshly created Debugger instance.
This property gives debugger code a single point of control for disentangling itself from the debuggee, regardless of what sort of events or handlers or "points" we add to the interface.
-allowUnobservedAsmJSA boolean value indicating whether asm.js code running inside this Debugger instance's debuggee globals is invisible to Debugger API handlers and breakpoints. Setting this to false inhibits the ahead-of-time asm.js compiler and forces asm.js code to run as normal JavaScript. This is an accessor property with a getter and setter. It is initially false in a freshly created Debugger instance.
Setting this flag to true is intended for uses of subsystems of the Debugger API (e.g, Debugger.Source) for purposes other than step debugging a target JavaScript program.
allowWasmBinarySourcecollectCoverageInfoA boolean value indicating whether code coverage should be enabled inside each debuggee of this Debugger instance. Changing this flag value will recompile all JIT code to add or remove code coverage instrumentation. Changing this flag when any frame of the debuggee is currently active on the stack will produce an exception.
Setting this to true enables code coverage instrumentation, which can be accessed via the Debugger.Script getOffsetsCoverage function. In some cases, the code coverage might expose information which pre-date the modification of this flag. Code coverage reports are monotone, thus one can take a snapshot when the Debugger is enabled, and output the difference.
Setting this to false prevents this Debugger instance from requiring any code coverage instrumentation, but it does not guarantee that the instrumentation is not present.
uncaughtExceptionHookEither null or a function that SpiderMonkey calls when a call to a debug event handler, breakpoint handler, or similar function throws some exception, which we refer to asdebugger-exception here. Exceptions thrown in the debugger are not propagated to debuggee code; instead, SpiderMonkey calls this function, passingdebugger-exception as its sole argument and the Debugger instance as the this value. This function should return a resumption value, which determines how the debuggee should continue.
If the uncaught exception hook itself throws an exception,uncaught-hook-exception, SpiderMonkey throws a new error object,confess-to-debuggee-exception, to the debuggee whose message blames the debugger, and includes textual descriptions ofuncaught-hook-exception and the originaldebugger-exception.
- -If uncaughtExceptionHook's value is null, SpiderMonkey throws an exception to the debuggee whose message blames the debugger, and includes a textual description ofdebugger-exception.
Assigning anything other than a callable value or null to this property throws a TypeError exception.
(This is not an ideal way to handle debugger bugs, but the hope here is that some sort of backstop, even if imperfect, will make life easier for debugger developers. For example, an uncaught exception hook may have access to browser-level features like the alert function, which this API's implementation does not, making it possible to present debugger errors to the developer in a way suited to the context.)
Each Debugger instance inherits accessor properties with which you can store handler functions for SpiderMonkey to call when given events occur in debuggee code.
When one of the events described below occurs in debuggee code, the engine pauses the debuggee and calls the corresponding debugging handler on each Debugger instance that is observing the debuggee. The handler functions receive the Debugger instance as their this value. Most handler functions can return a resumption value indicating how the debuggee's execution should proceed.
On a new Debugger instance, each of these properties is initially undefined. Any value assigned to a debugging handler must be either a function or undefined; otherwise a TypeError is thrown.
Handler functions run in the same thread in which the event occurred. They run in the compartment to which they belong, not in a debuggee compartment.
- -onNewScript(script,global)New code, represented by the Debugger.Script instancescript, has been loaded in the scope of the debuggees.
This method's return value is ignored.
-onNewPromise(promise)A new Promise object, referenced by the Debugger.Object instance promise, has been allocated in the scope of the debuggees. The Promise's allocation stack can be obtained using the promiseAllocationStack accessor property of the Debugger.Object instance promise.
This handler method should return a resumption value specifying how the debuggee's execution should proceed. However, note that a { return:value } resumption value is treated like undefined ("continue normally");value is ignored.
onPromiseSettled(promise)A Promise object, referenced by the Debugger.Object instance promise that was allocated within a debuggee scope, has settled (either fulfilled or rejected). The Promise's state, fulfillment or rejection value, and the allocation and resolution stacks can be obtained using the Promise-related accessor properties of the Debugger.Object instance promise.
This handler method should return a resumption value specifying how the debuggee's execution should proceed. However, note that a { return:value } resumption value is treated like undefined ("continue normally");value is ignored.
onDebuggerStatement(frame)onEnterFrame(frame)The stack frame is about to begin executing code. (Naturally,frame is currently the youngest visible frame.) This method should return a resumption value specifying how the debuggee's execution should proceed.
- -SpiderMonkey only calls onEnterFrame to report visible, non-"debugger" frames.
onExceptionUnwind(frame,value)The exceptionvalue has been thrown, and has propagated toframe;frame is the youngest remaining stack frame, and is a debuggee frame. This method should return a resumption value specifying how the debuggee's execution should proceed. If it returns undefined, the exception continues to propagate as normal: if control in frame is in a try block, control jumps to the corresponding catch or finally block; otherwise,frame is popped, and the exception propagates toframe's caller.
When an exception's propagation causes control to enter a finally block, the exception is temporarily set aside. If the finally block finishes normally, the exception resumes propagation, and the debugger's onExceptionUnwind handler is called again, in the same frame. (The other possibility is for the finally block to exit due to a return, continue, or break statement, or a new exception. In those cases the old exception does not continue to propagate; it is discarded.)
This handler is not called when unwinding a frame due to an over-recursion or out-of-memory exception.
-sourceHandler(ASuffusionOfYellow)onError(frame,report)SpiderMonkey is about to report an error inframe.Report is an object describing the error, with the following properties:
- -messagefilelinelineTextoffsetwarningstrictexceptionargumentsThis method's return value is ignored.
-onNewGlobalObject(global)A new global object,global, has been created.
- -This handler method should return a resumption value specifying how the debuggee's execution should proceed. However, note that a { return:value } resumption value is treated like undefined ("continue normally");value is ignored. (Allowing the handler to substitute its own value for the new global object doesn't seem useful.)
This handler method is only available to debuggers running in privileged code ("chrome", in Firefox). Most functions provided by this Debugger API observe activity in only those globals that are reachable by the API's user, thus imposing capability-based restrictions on a Debugger's reach. However, the onNewGlobalObject method allows the API user to monitor all global object creation that occurs anywhere within the JavaScript system (the "JSRuntime", in SpiderMonkey terms), thereby escaping the capability-based limits. For this reason, onNewGlobalObject is only available to privileged code.
The functions described below may only be called with a this value referring to a Debugger instance; they may not be used as methods of other kinds of objects.
addDebuggee(global)Add the global object designated byglobal to the set of global objects this Debugger instance is debugging. If the designated global is already a debuggee, this has no effect. Return this Debugger's Debugger.Object instance referring to the designated global.
The valueglobal may be any of the following:
- -A global object.
-An HTML5 WindowProxy object (an "outer window", in Firefox terminology), which is treated as if the Window object of the browsing context's active document (the "inner window") were passed.
A cross-compartment wrapper of an object; we apply the prior rules to the wrapped object.
-A Debugger.Object instance belonging to this Debugger instance; we apply the prior rules to the referent.
Any other sort of value is treated as a TypeError. (Note that each rule is only applied once in the process of resolving a givenglobal argument. Thus, for example, a Debugger.Object referring to a second Debugger.Object which refers to a global does not designate that global for the purposes of this function.)
The global designated byglobal must be in a different compartment than this Debugger instance itself. If adding the designated global's compartment would create a cycle of debugger and debuggee compartments, this method throws an error.
This method returns the Debugger.Object instance whose referent is the designated global object.
The Debugger instance does not hold a strong reference to its debuggee globals: if a debuggee global is not otherwise reachable, then it is dropped from the Debugger's set of debuggees. (Naturally, the Debugger.Object instance this method returns does hold a strong reference to the added global.)
If this debugger is tracking allocation sites and cannot track allocation sites forglobal, this method throws an Error.
addAllGlobalsAsDebuggees()This method is like addDebuggee, but adds all the global objects from all compartments to this Debugger instance's set of debuggees. Note that it skips this debugger's compartment.
If this debugger is tracking allocation sites and cannot track allocation sites for some global, this method throws an Error. Otherwise this method returns undefined.
This method is only available to debuggers running in privileged code ("chrome", in Firefox). Most functions provided by this Debugger API observe activity in only those globals that are reachable by the API's user, thus imposing capability-based restrictions on a Debugger's reach. However, the addAllGlobalsAsDebuggees method allows the API user to monitor all global object creation that occurs anywhere within the JavaScript system (the "JSRuntime", in SpiderMonkey terms), thereby escaping the capability-based limits. For this reason, addAllGlobalsAsDebuggees is only available to privileged code.
removeDebuggee(global)Remove the global object designated byglobal from this Debugger instance's set of debuggees. Return undefined.
This method interpretsglobal using the same rules that addDebuggee does.
Removing a global as a debuggee from this Debugger clears all breakpoints that belong to that Debugger in that global.
removeAllDebuggees()Debugger instance's set of debuggees. Return undefined.hasDebuggee(global)Return true if the global object designated byglobal is a debuggee of this Debugger instance.
This method interpretsglobal using the same rules that addDebuggee does.
getDebuggees()Return an array of distinct Debugger.Object instances whose referents are all the global objects this Debugger instance is debugging.
Since Debugger instances don't hold strong references to their debuggee globals, if a debuggee global is otherwise unreachable, it may be dropped at any moment from the array this method returns.
getNewestFrame()Debugger.Frame instance referring to the youngest visible frame currently on the calling thread's stack, or null if there are no visible frames on the stack.findSources([query])(not yet implemented)Return an array of all Debugger.Source instances matchingquery. Each source appears only once in the array.Query is an object whose properties restrict which sources are returned; a source must meet all the criteria given byquery to be returned. Ifquery is omitted, we return all sources of all debuggee scripts.
Querymay have the following properties:
- -urlurl property must be equal to this value.globalDebugger.Object instance belonging to this Debugger instance, then its referent is used. If the object is not a global object, then the global in whose scope it was allocated is used.Note that the result may include sources that can no longer ever be used by the debuggee: say, eval code that has finished running, or source for unreachable functions. Whether such sources appear can be affected by the garbage collector's behavior, so this function's result is not entirely deterministic.
-findScripts([query])Return an array of Debugger.Script instances for all debuggee scripts matchingquery. Each instance appears only once in the array.Query is an object whose properties restrict which scripts are returned; a script must meet all the criteria given byquery to be returned. Ifquery is omitted, we return the Debugger.Script instances for all debuggee scripts.
Querymay have the following properties:
- -urlurl property must be equal to this value.sourcesource property must be equal to this value.lineurl property must be present as well.columnline property. If this property is present, the url and line properties must both be present as well.innermostglobalDebugger.Object instance belonging to this Debugger instance, then its referent is used. If the object is not a global object, then the global in whose scope it was allocated is used.All properties ofquery are optional. Passing an empty object returns all debuggee code scripts.
- -Note that the result may include Debugger.Script instances for scripts that can no longer ever be used by the debuggee, say, those for eval code that has finished running, or unreachable functions. Whether such scripts appear can be affected by the garbage collector's behavior, so this function's behavior is not entirely deterministic.
findObjects([query])Return an array of Debugger.Object instances referring to each live object allocated in the scope of the debuggee globals that matches query. Each instance appears only once in the array. Query is an object whose properties restrict which objects are returned; an object must meet all the criteria given by query to be returned. If query is omitted, we return the Debugger.Object instances for all objects allocated in the scope of debuggee globals.
The query object may have the following properties:
- -class[[Class]]'s name matches the given string. Note that in some cases, the prototype object for a given constructor has the same [[Class]] as the instances that refer to it, but cannot itself be used as a valid instance of the class. Code gathering objects by class name may need to examine them further before trying to use them.All properties of query are optional. Passing an empty object returns all objects in debuggee globals.
- -Unlike findScripts, this function is deterministic and will never return Debugger.Objects referring to previously unreachable objects that had not been collected yet.
clearBreakpoint(handler)Debugger instance that usehandler as their handler. Note that, if breakpoints using other handler objects are set at the same location(s) ashandler, they remain in place.clearAllBreakpoints()Debugger instance.findAllGlobals()Return an array of Debugger.Object instances referring to all the global objects present in this JavaScript instance.
The results of this call can be affected in non-deterministic ways by the details of the JavaScript implementation. The array may include Debugger.Object instances referring to global objects that are not actually reachable by the debuggee or any other code in the system. (Naturally, once the function has returned, the array's Debugger.Object instances strongly reference the globals they refer to.)
This handler method is only available to debuggers running in privileged code ("chrome", in Firefox). Most functions provided by this Debugger API observe activity in only those globals that are reachable by the API's user, thus imposing capability-based restrictions on a Debugger's reach. However, findAllGlobals allows the API user to find all global objects anywhere within the JavaScript system (the "JSRuntime", in SpiderMonkey terms), thereby escaping the capability-based limits. For this reason, findAllGlobals is only available to privileged code.
makeGlobalObjectReference(global)Debugger.Object whose referent is the global object designated byglobal, without adding the designated global as a debuggee. Ifglobal does not designate a global object, throw a TypeError. Determine which global is designated byglobal using the same rules as Debugger.prototype.addDebuggee.adoptDebuggeeValue(value)Given a debuggee value value owned by an arbitrary Debugger, return an equivalent debuggee value owned by this Debugger.
If value is a primitive value, return it unchanged. If value is a Debugger.Object owned by an arbitrary Debugger, return an equivalent Debugger.Object owned by this Debugger. Otherwise, if value is some other kind of object, and hence not a proper debuggee value, throw a TypeError instead.
The functions described below are not called with a this value.
isCompilableUnit(source)Debugger InterfaceMozilla's JavaScript engine, SpiderMonkey, provides a debugging interface named Debugger which lets JavaScript code observe and manipulate the execution of other JavaScript code. Both Firefox's built-in developer tools and the Firebug add-on use Debugger to implement their JavaScript debuggers. However, Debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, patch-and-continue, and so on.
Debugger has three essential qualities:
It is a source level interface: it operates in terms of the JavaScript language, not machine language. It operates on JavaScript objects, stack frames, environments, and code, and presents a consistent interface regardless of whether the debuggee is interpreted, compiled, or optimized. If you have a strong command of the JavaScript language, you should have all the background you need to use Debugger successfully, even if you have never looked into the language's implementation.
It is for use by JavaScript code. JavaScript is both the debuggee language and the tool implementation language, so the qualities that make JavaScript effective on the web can be brought to bear in crafting tools for developers. As is expected of JavaScript APIs, Debugger is a sound interface: using (or even misusing) Debugger should never cause Gecko to crash. Errors throw proper JavaScript exceptions.
It is an intra-thread debugging API. Both the debuggee and the code using Debugger to observe it must run in the same thread. Cross-thread, cross-process, and cross-device tools must use Debugger to observe the debuggee from within the same thread, and then handle any needed communication themselves. (Firefox's builtin tools have a protocol defined for this purpose.)
In Gecko, the Debugger API is available to chrome code only. By design, it ought not to introduce security holes, so in principle it could be made available to content as well; but it is hard to justify the security risks of the additional attack surface.
The Debugger API cannot currently observe self-hosted JavaScript. This is not inherent in the API's design, but that the self-hosting infrastructure isn't prepared for the kind of invasions the Debugger API can perform.
Debugger reflects every aspect of the debuggee's state as a JavaScript value—not just actual JavaScript values like objects and primitives, but also stack frames, environments, scripts, and compilation units, which are not normally accessible as objects in their own right.
Here is a JavaScript program in the process of running a timer callback function:
- -
-A running JavaScript program and its Debugger shadows
-This diagram shows the various types of shadow objects that make up the Debugger API (which all follow some general conventions):
- -A Debugger.Object represents a debuggee object, offering a reflection-oriented API that protects the debugger from accidentally invoking getters, setters, proxy traps, and so on.
A Debugger.Script represents a block of JavaScript code—either a function body or a top-level script. Given a Debugger.Script, one can set breakpoints, translate between source positions and bytecode offsets (a deviation from the "source level" design principle), and find other static characteristics of the code.
A Debugger.Frame represents a running stack frame. You can use these to walk the stack and find each frame's script and environment. You can also set onStep and onPop handlers on frames.
A Debugger.Environment represents an environment, associating variable names with storage locations. Environments may belong to a running stack frame, captured by a function closure, or reflect some global object's properties as variables.
The Debugger instance itself is not really a shadow of anything in the debuggee; rather, it maintains the set of global objects which are to be considered debuggees. A Debugger observes only execution taking place in the scope of these global objects. You can set functions to be called when new stack frames are pushed; when new code is loaded; and so on.
Omitted from this picture are Debugger.Source instances, which represent JavaScript compilation units. A Debugger.Source can furnish a full copy of its source code, and explain how the code entered the system, whether via a call to eval, a <script> element, or otherwise. A Debugger.Script points to the Debugger.Source from which it is derived.
Also omitted is the Debugger's Debugger.Memory instance, which holds methods and accessors for observing the debuggee's memory use.
All these types follow some general conventions, which you should look through before drilling down into any particular type's specification.
- -All shadow objects are unique per Debugger and per referent. For a given Debugger, there is exactly one Debugger.Object that refers to a particular debuggee object; exactly one Debugger.Frame for a particular stack frame; and so on. Thus, a tool can store metadata about a shadow's referent as a property on the shadow itself, and count on finding that metadata again if it comes across the same referent. And since shadows are per-Debugger, tools can do so without worrying about interfering with other tools that use their own Debugger instances.
Here are some things you can try out yourself that show off some of Debugger's features:
Setting a breakpoint in a page, running a handler function when it is hit that evaluates an expression in the page's context.
-While the Debugger core API deals only with concepts common to any JavaScript implementation, it also includes some Gecko-specific features:
This page shows how to use the Debugger API to show how many objects a web page allocates, sorted by the function call path that allocated them.
Visit the URL about:config, and set the devtools.chrome.enabled preference to true:
- Setting the 'devtools.chrome.enabled' preference
-Open a developer Scratchpad (Menu button > Developer > Scratchpad), and select "Browser" from the "Environment" menu. (This menu will not be present unless you have changed the preference as explained above.)
- -
- Selecting the 'browser' context in the Scratchpad
-Enter the following code in the Scratchpad:
- -// This defines the 'Debugger' constructor in this
-// Scratchpad; it doesn't actually start debugging anything.
-Components.utils.import('resource://gre/modules/jsdebugger.jsm');
-addDebuggerToGlobal(window);
-
-(function () {
- // The debugger we'll use to observe a tab's allocation.
- var dbg;
-
- // Start measuring the selected tab's main window's memory
- // consumption. This function is available in the browser
- // console.
- window.demoTrackAllocations = function() {
- dbg = new Debugger;
-
- // This makes hacking on the demo *much* more
- // pleasant.
- dbg.uncaughtExceptionHook = handleUncaughtException;
-
- // Find the current tab's main content window.
- var w = gBrowser.selectedBrowser.contentWindow;
- console.log("Tracking allocations in page: " +
- w.location.href);
-
- // Make that window a debuggee of our Debugger.
- dbg.addDebuggee(w.wrappedJSObject);
-
- // Enable allocation tracking in dbg's debuggees.
- dbg.memory.trackingAllocationSites = true;
- }
-
- window.demoPlotAllocations = function() {
- // Grab the allocation log.
- var log = dbg.memory.drainAllocationsLog();
-
- // Neutralize the Debugger, and drop it on the floor
- // for the GC to collect.
- console.log("Stopping allocation tracking.");
- dbg.removeAllDebuggees();
- dbg = undefined;
-
- // Analyze and display the allocation log.
- plot(log);
- }
-
- function handleUncaughtException(ex) {
- console.log('Debugger hook threw:');
- console.log(ex.toString());
- console.log('Stack:');
- console.log(ex.stack);
- };
-
- function plot(log) {
- // Given the log, compute a map from allocation sites to
- // allocation counts. Note that stack entries are '===' if
- // they represent the same site with the same callers.
- var counts = new Map;
- for (let site of log) {
- // This is a kludge, necessary for now. The saved stacks
- // are new, and Firefox doesn't yet understand that they
- // are safe for chrome code to use, so we must tell it
- // so explicitly.
- site = Components.utils.waiveXrays(site.frame);
-
- if (!counts.has(site))
- counts.set(site, 0);
- counts.set(site, counts.get(site) + 1);
- }
-
- // Walk from each site that allocated something up to the
- // root, computing allocation totals that include
- // children. Remember that 'null' is a valid site,
- // representing the root.
- var totals = new Map;
- for (let [site, count] of counts) {
- for(;;) {
- if (!totals.has(site))
- totals.set(site, 0);
- totals.set(site, totals.get(site) + count);
- if (!site)
- break;
- site = site.parent;
- }
- }
-
- // Compute parent-to-child links, since saved stack frames
- // have only parent links.
- var rootChildren = new Map;
- function childMapFor(site) {
- if (!site)
- return rootChildren;
-
- let parentMap = childMapFor(site.parent);
- if (parentMap.has(site))
- return parentMap.get(site);
-
- var m = new Map;
- parentMap.set(site, m);
- return m;
- }
- for (let [site, total] of totals) {
- childMapFor(site);
- }
-
- // Print the allocation count for |site|. Print
- // |children|'s entries as |site|'s child nodes. Indent
- // the whole thing by |indent|.
- function walk(site, children, indent) {
- var name, place;
- if (site) {
- name = site.functionDisplayName;
- place = ' ' + site.source + ':' + site.line + ':' + site.column;
- } else {
- name = '(root)';
- place = '';
- }
- console.log(indent + totals.get(site) + ': ' + name + place);
- for (let [child, grandchildren] of children)
- walk(child, grandchildren, indent + ' ');
- }
- walk(null, rootChildren, '');
- }
-})();In the Scratchpad, ensure that no text is selected, and press the "Run" button. (If you get an error complaining that Components.utils is not defined, be sure you've selected Browser from the scratchpad's Environment menu, as described in step 2.)
Save the following HTML text to a file, and visit the file in your browser. Make sure the current browser tab is displaying this page.
- -<div onclick="doDivsAndSpans()">
- Click here to make the page do some allocations.
-</div>
-
-<script>
- function makeFactory(type) {
- return function factory(content) {
- var elt = document.createElement(type);
- elt.textContent = content;
- return elt;
- };
- }
-
- var divFactory = makeFactory('div');
- var spanFactory = makeFactory('span');
-
- function divsAndSpans() {
- for (i = 0; i < 10; i++) {
- var div = divFactory('div #' + i);
- div.appendChild(spanFactory('span #' + i));
- document.body.appendChild(div);
- }
- }
-
- function doDivsAndSpans() { divsAndSpans(); }
-</script>Open the browser console (Menu Button > Developer > Browser Console), and then evaluate the expression demoTrackAllocations() in the browser console. This begins logging allocations in the current browser tab.
In the browser tab, click on the text that says "Click here…". The event handler should add some text to the end of the page.
-Back in the browser console, evaluate the expression demoPlotAllocations(). This stops logging allocations, and displays a tree of allocations:
- An allocation plot, displayed in the console
-The numbers at the left edge of each line show the total number of objects allocated at that site or at sites called from there. After the count, we see the function name, and the source code location of the call site or allocation.
- -The (root) node's count includes objects allocated in the content page by the web browser, like DOM events. Indeed, this display shows that popup.xml and content.js, which are internal components of Firefox, allocated more objects in the page's compartment than the page itself. (We will probably revise the allocation log to present such allocations in a way that is more informative, and that exposes less of Firefox's internal structure.)
As expected, the onclick handler is responsible for all allocation done by the page's own code. (The line number for the onclick handler is 1, indicating that the allocating call is located on line one of the handler text itself. We will probably change this to be the line number within page.html, not the line number within the handler code.)
The onclick handler calls doDivsAndSpans, which calls divsAndSpans, which invokes closures of factory to do all the actual allocation. (It is unclear why spanFactory allocated thirteen objects, despite being called only ten times.)
This page shows how you can try out the Debugger API yourself using Firefox's Scratchpad. We use Debugger to set a breakpoint in a function, and then evaluate an expression whenever it is hit.
This tutorial was tested against Firefox 58 Beta and Nightly. It does not work in Firefox 57.
- -Since the Debugger API is only available to privileged JavaScript code, you'll need to use the Browser Content Toolbox to try it out. To do this, open the Firefox developer tools, click on the options gear at the upper right of the toolbox, and make sure that both "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" are checked. These are located at the bottom right of the options panel; you may need to scroll to see them. Once they're checked, you can close the developer tools.
Save the following text to an HTML file:
- -<div onclick="report('the best div');">Click me!</div>
-<div onclick="report('another great div');">Or me!</div>
-<script>
-function report(what) {
- console.log('clicked: ' + what);
-}
-</script>Visit the HTML file in your browser, and open the Browser Content Toolbox by opening the Firefox menu, choosing "Web Developer", and then "Browser Content Toolbox". If that item doesn't appear in the "Web Developer" menu, make sure you checked both boxes to enable the Browser Content Toolbox as explained in Step 1.
-Our example code is long enough that the best way to run it is to use the Scratchpad panel, which is not enabled by default. To enable it, click on the options gear at the upper right of the Browser Content Toolbox, and make sure the "Scratchpad" box in the "Default Developer Tools" section the left is checked. The Scratchpad panel should appear at the top of the Toolbox alongside the Console, Debugger, and Memory panels.
-Click on the Scratchpad panel and enter the following code:
- -Components.utils.import("resource://gre/modules/jsdebugger.jsm");
-Components.utils.import("resource://gre/modules/Console.jsm");
-
-// This defines 'Debugger' in this Scratchpad;
-// it doesn't actually start debugging anything.
-addDebuggerToGlobal(this);
-
-// Create a 'Debugger' instance.
-var dbg = new Debugger;
-
-// Make the tab's top window a debuggee, and get a
-// Debugger.Object referring to the window.
-var windowDO = dbg.addDebuggee(tabs[0].content);
-
-// Get a Debugger.Object referring to the window's `report`
-// function.
-var reportDO = windowDO.getOwnPropertyDescriptor('report').value;
-
-// Set a breakpoint at the entry point of `report`.
-reportDO.script.setBreakpoint(0, {
- hit: function (frame) {
- console.log('hit breakpoint in ' + frame.callee.name);
- console.log('what = ' + frame.eval('what').return);
- }
-});
-
-console.log('Finished setting breakpoint!');In the Scratchpad, ensure that no text is selected, and press the "Run" button.
- -Now, click on the text that says "Click me!" in the web page. This runs the div element's onclick handler. When control reaches the start of the report function, Debugger calls the breakpoint handler's hit method, passing a Debugger.Frame instance. The hit method logs the breakpoint hit to the browser content toolbox's console. Then it evaluates the expression what in the given stack frame, and logs its result. The toolbox's console now looks like this:
You can also click on the text that says "Or me!", to see report called from a different handler.
If Debugger is unable to find the report function, or the console output does not appear, evaluate the expression tabs[0].content.document.location in the console to make sure that tabs[0] indeed refers to the HTML file you visited. If you have more than one tab visiting a file: URL, they all share a single content process, so you may need to use a different element of the array as the debuggee.
Press "Run" in the Scratchpad again. Now, clicking on "Click me!" causes the breakpoint hit to be logged twice—one for each Debugger instance.
Multiple Debugger instances can observe the same debuggee. Re-running the code in the Scratchpad creates a fresh Debugger instance, adds the same web page as its debuggee, and then sets a new breakpoint. When you click on the div element, both Debuggers' breakpoints are hit, and both handlers run.
This shows how any number of Debugger-based tools can observe a single web page simultaneously. In fact, you can use the Browser Content Toolbox's Debugger panel to set its own breakpoint in report, and it will trigger along with the first two. Keep in mind, however, that when multiple Debuggers share a debuggee, the order in which their handlers run is not specified. If more than one tool tries to influence the debuggee's behavior, their combined behavior could be unpredictable.
Close the web page and the Browser Content Toolbox.
- -Since both the Scratchpad's global object and the debuggee window are now gone, the Debugger instances will be garbage collected, since they can no longer have any visible effect on Firefox's behavior. The Debugger API tries to interact with garbage collection as transparently as possible; for example, if both a Debugger.Object instance and its referent are not reachable, they will both be collected, even while the Debugger instance to which the shadow belonged continues to exist.
A Debugger.Object instance represents an object in the debuggee, providing reflection-oriented methods to inspect and modify its referent. The referent's properties do not appear directly as properties of the Debugger.Object instance; the debugger can access them only through methods like Debugger.Object.prototype.getOwnPropertyDescriptor and Debugger.Object.prototype.defineProperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters.
SpiderMonkey creates exactly one Debugger.Object instance for each debuggee object it presents to a given Debugger instance: if the debugger encounters the same object through two different routes (perhaps two functions are called on the same object), SpiderMonkey presents the same Debugger.Object instance to the debugger each time. This means that the debugger can use the == operator to recognize when two Debugger.Object instances refer to the same debuggee object, and place its own properties on a Debugger.Object instance to store metadata about particular debuggee objects.
JavaScript code in different compartments can have different views of the same object. For example, in Firefox, code in privileged compartments sees content DOM element objects without redefinitions or extensions made to that object's properties by content code. (In Firefox terminology, privileged code sees the element through an "xray wrapper".) To ensure that debugger code sees each object just as the debuggee would, each Debugger.Object instance presents its referent as it would be seen from a particular compartment. This "viewing compartment" is chosen to match the way the debugger came across the referent. As a consequence, a single Debugger instance may actually have several Debugger.Object instances: one for each compartment from which the referent is viewed.
If more than one Debugger instance is debugging the same code, each Debugger gets a separate Debugger.Object instance for a given object. This allows the code using each Debugger instance to place whatever properties it likes on its own Debugger.Object instances, without worrying about interfering with other debuggers.
While most Debugger.Object instances are created by SpiderMonkey in the process of exposing debuggee's behavior and state to the debugger, the debugger can use Debugger.Object.prototype.makeDebuggeeValue to create Debugger.Object instances for given debuggee objects, or use Debugger.Object.prototype.copy and Debugger.Object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals.
Debugger.Object instances protect their referents from the garbage collector; as long as the Debugger.Object instance is live, the referent remains live. This means that garbage collection has no visible effect on Debugger.Object instances.
A Debugger.Object instance inherits the following accessor properties from its prototype:
protoThe referent's prototype (as a new Debugger.Object instance), or null if it has no prototype.
classA string naming the ECMAScript [[Class]] of the referent.
callabletrue if the referent is a callable object (such as a function or a function proxy); false otherwise.
nameThe name of the referent, if it is a named function. If the referent is an anonymous function, or not a function at all, this is undefined.
This accessor returns whatever name appeared after the function keyword in the source code, regardless of whether the function is the result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function's body).
displayNameThe referent's display name, if the referent is a function with a display name. If the referent is not a function, or if it has no display name, this is undefined.
If a function has a given name, its display name is the same as its given name. In this case, the displayName and name properties are equal.
If a function has no name, SpiderMonkey attempts to infer an appropriate name for it given its context. For example:
- -function f() {} // display name: f (the given name)
-var g = function () {}; // display name: g
-o.p = function () {}; // display name: o.p
-var q = {
- r: function () {} // display name: q.r
-};Note that the display name may not be a proper JavaScript identifier, or even a proper expression: we attempt to find helpful names even when the function is not immediately assigned as the value of some variable or property. Thus, we use a/b to refer to the b defined within a, and a< to refer to a function that occurs somewhere within an expression that is assigned to a. For example:
function h() {
- var i = function() {}; // display name: h/i
- f(function () {}); // display name: h/<
-}
-
-var s = f(function () {}); // display name: s<parameterNamesIf the referent is a debuggee function, the names of the its parameters, as an array of strings. If the referent is not a debuggee function, or not a function at all, this is undefined.
If the referent is a host function for which parameter names are not available, return an array with one element per parameter, each of which is undefined.
If the referent is a function proxy, return an empty array.
- -If the referent uses destructuring parameters, then the array's elements reflect the structure of the parameters. For example, if the referent is a function declared in this way:
- -function f(a, [b, c], {d, e:f}) { ... }then this Debugger.Object instance's parameterNames property would have the value:
["a", ["b", "c"], {d:"d", e:"f"}]scriptIf the referent is a function that is debuggee code, this is that function's script, as a Debugger.Script instance. If the referent is a function proxy or not debuggee code, this is undefined.
environmentIf the referent is a function that is debuggee code, a Debugger.Environment instance representing the lexical environment enclosing the function when it was created. If the referent is a function proxy or not debuggee code, this is undefined.
proxyHandlerIf the referent is a proxy whose handler object was allocated by debuggee code, this is its handler object—the object whose methods are invoked to implement accesses of the proxy's properties. If the referent is not a proxy whose handler object was allocated by debuggee code, this is null.
proxyCallTrapIf the referent is a function proxy whose handler object was allocated by debuggee code, this is its call trap function—the function called when the function proxy is called. If the referent is not a function proxy whose handler object was allocated by debuggee code, this is null.
proxyConstructTrapIf the referent is a function proxy whose handler object was allocated by debuggee code, its construction trap function—the function called when the function proxy is called via a new expression. If the referent is not a function proxy whose handler object was allocated by debuggee code, this is null.
globalA Debugger.Object instance referring to the global object in whose scope the referent was allocated. This does not unwrap cross-compartment wrappers: if the referent is a wrapper, the result refers to the wrapper's global, not the wrapped object's global. The result refers to the global directly, not via a wrapper.
hostAnnotationsA JavaScript object providing further metadata about the referent, or null if none is available. The metadata object is in the same compartment as this Debugger.Object instance. The same metadata object is returned each time for a given Debugger.Object instance.
A typical JavaScript embedding provides "host objects" to expose application-specific functionality to scripts. The hostAnnotations accessor consults the embedding for additional information about the referent that might be of interest to the debugger. The returned object's properties' meanings are up to the embedding. For example, a web browser might provide host annotations for global objects to distinguish top-level windows, iframes, and internal JavaScript scopes.
By convention, host annotation objects have a string-valued "type" property that, taken together with the object's class, indicate what sort of thing the referent is. The host annotation object's other properties provide further details, as appropriate for the type. For example, in Firefox, a metadata object for a JavaScript Module's global object might look like this:
{ "type":"jsm", "uri":"resource:://gre/modules/XPCOMUtils.jsm" }Firefox provides [DebuggerHostAnnotationsForFirefox annotations] for its host objects.
-The functions described below may only be called with a this value referring to a Debugger.Object instance; they may not be used as methods of other kinds of objects. The descriptions use "referent" to mean "the referent of this Debugger.Object instance".
Unless otherwise specified, these methods are not invocation functions; if a call would cause debuggee code to run (say, because it gets or sets an accessor property whose handler is debuggee code, or because the referent is a proxy whose traps are debuggee code), the call throws a Debugger.DebuggeeWouldRun exception.
getProperty(name)Return the value of the referent's property namedname, or undefined if it has no such property.Name must be a string. The result is a debuggee value.
setProperty(name,value)Storevalue as the value of the referent's property namedname, creating the property if it does not exist.Name must be a string;value must be a debuggee value.
-getOwnPropertyDescriptor(name)Return a property descriptor for the property namedname of the referent. If the referent has no such property, return undefined. (This function behaves like the standard Object.getOwnPropertyDescriptor function, except that the object being inspected is implicit; the property descriptor returned is allocated as if by code scoped to the debugger's global object (and is thus in the debugger's compartment); and its value, get, and set properties, if present, are debuggee values.)
getOwnPropertyNames()Return an array of strings naming all the referent's own properties, as if Object.getOwnPropertyNames(referent) had been called in the debuggee, and the result copied in the scope of the debugger's global object.
defineProperty(name,attributes)Define a property on the referent namedname, as described by the property descriptordescriptor. Any value, get, and set properties ofattributes must be debuggee values. (This function behaves like Object.defineProperty, except that the target object is implicit, and in a different compartment from the function and descriptor.)
defineProperties(properties)Add the properties given byproperties to the referent. (This function behaves like Object.defineProperties, except that the target object is implicit, and in a different compartment from theproperties argument.)
deleteProperty(name)Remove the referent's property namedname. Return true if the property was successfully removed, or if the referent has no such property. Return false if the property is non-configurable.
-seal()Prevent properties from being added to or deleted from the referent. Return this Debugger.Object instance. (This function behaves like the standard Object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.)
freeze()Prevent properties from being added to or deleted from the referent, and mark each property as non-writable. Return this Debugger.Object instance. (This function behaves like the standard Object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.)
preventExtensions()Prevent properties from being added to the referent. (This function behaves like the standard Object.preventExtensions function, except that the object to operate on is implicit and in a different compartment from the caller.)
isSealed()Return true if the referent is sealed—that is, if it is not extensible, and all its properties have been marked as non-configurable. (This function behaves like the standard Object.isSealed function, except that the object inspected is implicit and in a different compartment from the caller.)
isFrozen()Return true if the referent is frozen—that is, if it is not extensible, and all its properties have been marked as non-configurable and read-only. (This function behaves like the standard Object.isFrozen function, except that the object inspected is implicit and in a different compartment from the caller.)
isExtensible()Return true if the referent is extensible—that is, if it can have new properties defined on it. (This function behaves like the standard Object.isExtensible function, except that the object inspected is implicit and in a different compartment from the caller.)
copy(value)Apply the HTML5 "structured cloning" algorithm to create a copy ofvalue in the referent's global object (and thus in the referent's compartment), and return a Debugger.Object instance referring to the copy.
Note that this returns primitive values unchanged. This means you can use Debugger.Object.prototype.copy as a generic "debugger value to debuggee value" conversion function—within the limitations of the "structured cloning" algorithm.
create(prototype, [properties])Create a new object in the referent's global (and thus in the referent's compartment), and return a Debugger.Object referring to it. The new object's prototype isprototype, which must be an Debugger.Object instance. The new object's properties are as given byproperties, as ifproperties were passed to Debugger.Object.prototype.defineProperties, with the new Debugger.Object instance as the this value.
makeDebuggeeValue(value)Return the debuggee value that representsvalue in the debuggee. Ifvalue is a primitive, we return it unchanged; ifvalue is an object, we return the Debugger.Object instance representing that object, wrapped appropriately for use in this Debugger.Object's referent's compartment.
Note that, ifvalue is an object, it need not be one allocated in a debuggee global, nor even a debuggee compartment; it can be any object the debugger wishes to use as a debuggee value.
- -As described above, each Debugger.Object instance presents its referent as viewed from a particular compartment. Given a Debugger.Object instanced and an objecto, the call d.makeDebuggeeValue(o) returns a Debugger.Object instance that presentso as it would be seen by code ind's compartment.
decompile([pretty])If the referent is a function that is debuggee code, return the JavaScript source code for a function definition equivalent to the referent function in its effect and result, as a string. Ifpretty is present and true, produce indented code with line breaks. If the referent is not a function that is debuggee code, return undefined.
call(this,argument, ...)If the referent is callable, call it with the giventhis value andargument values, and return a completion value describing how the call completed.This should be a debuggee value, or { asConstructor: true } to invoke the referent as a constructor, in which case SpiderMonkey provides an appropriate this value itself. Eachargument must be a debuggee value. All extant handler methods, breakpoints, watchpoints, and so on remain active during the call. If the referent is not callable, throw a TypeError. This function follows the invocation function conventions.
apply(this,arguments)If the referent is callable, call it with the giventhis value and the argument values inarguments, and return a completion value describing how the call completed.This should be a debuggee value, or { asConstructor: true } to invokefunction as a constructor, in which case SpiderMonkey provides an appropriate this value itself.Arguments must either be an array (in the debugger) of debuggee values, or null or undefined, which are treated as an empty array. All extant handler methods, breakpoints, watchpoints, and so on remain active during the call. If the referent is not callable, throw a TypeError. This function follows the invocation function conventions.
evalInGlobal(code, [options])If the referent is a global object, evaluatecode in that global environment, and return a completion value describing how it completed.Code is a string. All extant handler methods, breakpoints, watchpoints, and so on remain active during the call. This function follows the invocation function conventions. If the referent is not a global object, throw a TypeError exception.
Codeis interpreted as strict mode code when it contains a Use Strict Directive.
- -Ifcode is not strict mode code, then variable declarations incode affect the referent global object. (In the terms used by the ECMAScript specification, the VariableEnvironment of the execution context for the eval code is the referent.)
Theoptions argument is as for Debugger.Frame.prototype.eval.
evalInGlobalWithBindings(code,bindings, [options])Like evalInGlobal, but evaluatecode using the referent as the variable object, but with a lexical environment extended with bindings from the objectbindings. For each own enumerable property ofbindings namedname whose value isvalue, include a variable in the lexical environment in whichcode is evaluated namedname, whose value isvalue. Eachvalue must be a debuggee value. (This is not like a with statement:code may access, assign to, and delete the introduced bindings without having any effect on thebindings object.)
This method allows debugger code to introduce temporary bindings that are visible to the given debuggee code and which refer to debugger-held debuggee values, and do so without mutating any existing debuggee environment.
- -Note that, like evalInGlobal, if the code passed to evalInGlobalWithBindings is not strict mode code, then any declarations it contains affect the referent global object, even ascode is evaluated in an environment extended according tobindings. (In the terms used by the ECMAScript specification, the VariableEnvironment of the execution context for non-strict eval code is the referent, and thebindings appear in a new declarative environment, which is the eval code's LexicalEnvironment.)
Theoptions argument is as for Debugger.Frame.prototype.eval.
asEnvironment()If the referent is a global object, return the Debugger.Environment instance representing the referent as a variable environment for evaluating code. If the referent is not a global object, throw a TypeError.
setObjectWatchpoint(handler)(future plan)Set a watchpoint on all the referent's own properties, reporting events by callinghandler's methods. Any previous watchpoint handler on this Debugger.Object instance is replaced. Ifhandler is null, the referent is no longer watched.Handler may have the following methods, called under the given circumstances:
add(frame,name,descriptor)A property namedname has been added to the referent.Descriptor is a property descriptor of the sort accepted by Debugger.Object.prototype.defineProperty, giving the newly added property's attributes.
delete(frame,name)The property namedname is about to be deleted from the referent.
-change(frame,name,oldDescriptor,newDescriptor)The existing property namedname on the referent is being changed from those given byoldDescriptor to those given bynewDescriptor. This handler method is only called when attributes of the property other than its value are being changed; if only the value is changing, SpiderMonkey calls the handler's set method.
set(frame,oldValue,newValue)The data property namedname of the referent is about to have its value changed fromoldValue tonewValue.
- -SpiderMonkey only calls this method on assignments to data properties that will succeed; assignments to un-writable data properties fail without notifying the debugger.
-extensionsPrevented(frame)The referent has been made non-extensible, as if by a call to Object.preventExtensions.
For all watchpoint handler methods:
- -Handler calls receive the handler object itself as the this value.
Theframe argument is the current stack frame, whose code is about to perform the operation on the object being reported.
-If the method returns undefined, then SpiderMonkey makes the announced change to the object, and continues execution normally. If the method returns an object:
If the object has a superseded property whose value is a true value, then SpiderMonkey does not make the announced change.
If the object has a resume property, its value is taken as a resumption value, indicating how execution should proceed. (However, return resumption values are not supported.)
If a given method is absent fromhandler, then events of that sort are ignored. The watchpoint consultshandler's properties each time an event occurs, so adding methods to or removing methods fromhandler after setting the watchpoint enables or disables reporting of the corresponding events.
-Values passed tohandler's methods are debuggee values. Descriptors passed tohandler's methods are ordinary objects in the debugger's compartment, except for value, get, and set properties in descriptors, which are debuggee values; they are the sort of value expected by Debugger.Object.prototype.defineProperty.
Watchpoint handler calls are cross-compartment, intra-thread calls: the call takes place in the same thread that changed the property, and inhandler's method's compartment (typically the same as the debugger's compartment).
-The new watchpoint belongs to the Debugger instance to which this Debugger.Object instance belongs; disabling the Debugger instance disables this watchpoint.
clearObjectWatchpoint()(future plan)Remove any object watchpoint set on the referent.
-setPropertyWatchpoint(name,handler)(future plan)Set a watchpoint on the referent's property namedname, reporting events by callinghandler's methods. Any previous watchpoint handler on this property for this Debugger.Object instance is replaced. Ifhandler is null, the property is no longer watched.Handler is as described for Debugger.Object.prototype.setObjectWatchpoint, except that it does not receive extensionsPrevented events.
clearPropertyWatchpoint(name)(future plan)Remove any watchpoint set on the referent's property namedname.
-unwrap()If the referent is a wrapper that this Debugger.Object's compartment is permitted to unwrap, return a Debugger.Object instance referring to the wrapped object. If we are not permitted to unwrap the referent, return null. If the referent is not a wrapper, return this Debugger.Object instance unchanged.
unsafeDereference()Return the referent of this Debugger.Object instance.
If the referent is an inner object (say, an HTML5 Window object), return the corresponding outer object (say, the HTML5 WindowProxy object). This makes unsafeDereference more useful in producing values appropriate for direct use by debuggee code, without using invocation functions.
This method pierces the membrane of Debugger.Object instances meant to protect debugger code from debuggee code, and allows debugger code to access debuggee objects through the standard cross-compartment wrappers, rather than via Debugger.Object's reflection-oriented interfaces. This method makes it easier to gradually adapt large code bases to this Debugger API: adapted portions of the code can use Debugger.Object instances, but use this method to pass direct object references to code that has not yet been updated.
{{ToolsSidebar}}
- -A DOM Mutation Breakpoint pauses the code when the DOM node on which you have set the breakpoint is modified.
- -You set a DOM Mutation Breakpoint in the Page Inspector. Navigate to the DOM node in which you are interested and use the context menu to set the breakpoint.
- -
There are three choices:
- -Element.classList.add(), or setting {{domxref("Element.id")}}.Once you set the breakpoint, go to the Debugger. You can see the breakpoint listed in the right-most panel under DOM Mutation Breakpoints.
- -
Click on the icon following the node name to go back to the Page Inspector with the node selected.
- -When you execute the code, the debugger will pause execution when the DOM mutation occurs. In the following example, the selected node (the unordered list) is modified by adding a new child node.
- -
The panel on the right shows that execution is "Paused on DOM mutation" and you, as with any other breakpoint, you can see the call stack and view any Watch expressions you may have set up.
- -New in Firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through. See Set a breakpoint > Inline variable preview for more information.
diff --git a/files/en-us/tools/debugger/how_to/access_debugging_in_add-ons/index.html b/files/en-us/tools/debugger/how_to/access_debugging_in_add-ons/index.html deleted file mode 100644 index 9b5fcf463dcdd84..000000000000000 --- a/files/en-us/tools/debugger/how_to/access_debugging_in_add-ons/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Access debugging in add-ons -slug: Tools/Debugger/How_to/Access_debugging_in_add-ons ---- -We are planning to deprecate the use by Firefox add-ons of the techniques described in this document. Don't write new add-ons that use these techniques.
-The following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):
- -Relevant files:
- -Unfortunately there is not yet any API to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope. (currently a work in progress, see bug 653545.)
diff --git a/files/en-us/tools/debugger/how_to/breaking_on_exceptions/exception-tooltip-stacktrace.png b/files/en-us/tools/debugger/how_to/breaking_on_exceptions/exception-tooltip-stacktrace.png deleted file mode 100644 index 9aabff2c97c76dd..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/breaking_on_exceptions/exception-tooltip-stacktrace.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/breaking_on_exceptions/index.html b/files/en-us/tools/debugger/how_to/breaking_on_exceptions/index.html deleted file mode 100644 index 8a5e022244b88db..000000000000000 --- a/files/en-us/tools/debugger/how_to/breaking_on_exceptions/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Breaking on exceptions -slug: Tools/Debugger/How_to/Breaking_on_exceptions ---- -
When an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code. A tooltip describes the exception. Starting in Firefox 80, a disclosure triangle within the tooltip reveals a stack trace.
- -
You can debug JavaScript code that is evaluated dynamically, either as a string passed to eval() or as a string passed to the Function constructor.
In the video below, we load a page containing a source like this:
- -var script = `function foo() {
- console.log('called foo');
- }
- //# sourceURL=my-foo.js`;
-
-eval(script);
-
-var button = document.getElementById("foo");
-button.addEventListener("click", foo, false);
-
-
-The evaluated string is given the name "my-foo.js" using the //# sourceURL directive. This source is then listed in the source list pane, and can be opened and debugged like any other source.
{{EmbedYouTube("AkvN40-y1NE")}}
- -The name of the source will also appear in stack traces appearing in the Web Console.
- -The debugger will also stop at debugger; statements in unnamed eval sources.
To disable a breakpoint, uncheck the checkbox next to it in the breakpoints list or click "Disable breakpoint" in its context menu.
- -To disable all breakpoints, click the "Deactivate breakpoints" icon in the toolbar.
- -
The appearance of the breakpoints changes to a lighter color with a dark-colored border. For example:
- -
If you hover over a DOM node in the Watch Expressions, it will be highlighted in the page.
- -When you are working with DOM notes in the debugger, you can easily highlight the node on the page or view it in the Page Inspector. A DOM object in the Watch Expressions area, for example, includes a target. Hover over the target to highlight the item on the page, Click on the target to switch to the Page Inspector with the item highlighted.
- -{{EmbedYouTube("G8KUW87zkK8")}}
- -Also, when you view the details of a DOM node in the code panel, objects that you can highlight in the list will also have a target next to them. You can click any one of these targets to switch to the Page Inspector with this item highlighted.
- -
In modern web development, we often rely on libraries like jQuery, Ember, or Angular, and 99% of the time we can safely assume that they "just work". We don't care about the internal implementation of these libraries. However, a library's abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. However, you can tell the debugger to ignore the details of selected sources.
- -You can enable or disable ignoring a source file in a couple of ways:
- -
When a source file is ignored:
- -These articles describe how to use the debugger.
- -{{ ListSubpages () }}
diff --git a/files/en-us/tools/debugger/how_to/open_the_debugger/hamburger.png b/files/en-us/tools/debugger/how_to/open_the_debugger/hamburger.png deleted file mode 100644 index 0a86806250319b1..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/open_the_debugger/hamburger.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/open_the_debugger/index.html b/files/en-us/tools/debugger/how_to/open_the_debugger/index.html deleted file mode 100644 index ddbe0cf7c2ff599..000000000000000 --- a/files/en-us/tools/debugger/how_to/open_the_debugger/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Open the debugger -slug: Tools/Debugger/How_to/Open_the_debugger ---- -There are three ways to open the debugger:
- -Press Ctrl + Shift + Z on Windows and Linux, or Cmd + Opt + Z on macOS (starting in Firefox 71; prior to Firefox 66, the letter in this shortcut was S).
- ), select "Developer", then "Debugger".{{EmbedYouTube("yI5SlVQiZtI")}}
diff --git a/files/en-us/tools/debugger/how_to/pretty-print_a_minified_file/index.html b/files/en-us/tools/debugger/how_to/pretty-print_a_minified_file/index.html deleted file mode 100644 index 93507747875a9e2..000000000000000 --- a/files/en-us/tools/debugger/how_to/pretty-print_a_minified_file/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Pretty-print a minified file -slug: Tools/Debugger/How_to/Pretty-print_a_minified_file -tags: - - JavaScript ---- -To prettify a minified file, click the Pretty print source icon (
) at the bottom of the source pane. The debugger formats the source and displays it as a new file with a name like: "{ } [original-name]".
After you click the icon, the source code looks like this:
- -
The Pretty print source icon is available only if the source file is minified (i.e., not an original file), and is not already "prettified".
- -Note: Currently Firefox does not support pretty printing inline Javascript.
-To search for a particular file, press Control + P (or Command + P on a Mac) and type the search term. The source pane will display a list of all matching files as you type. You can use the up and down arrows to move through the list, and Return to open the file you want:
- -{{EmbedYouTube("xXsfYx0THWg")}}
- -To search for a particular substring in the file currently loaded into the source pane, press Control + F (or Command + F on a Mac) while the source pane is focused. Press Return to search. The debugger will display the number of matches in the code and highlight each result:
- -
If you are searching for a specific function within the current JavaScript file, you can use the Outline tab in the debugger to find it quickly. The Outline tab lists the functions in the current file. The default sort order is by the order in the file but you can simplify the search by click on "Sort by name" at the bottom of the tab.
- -
You can further simplify the search by filtering the list. Enter text into the text input above the list to limit the results in the Outline. For example, if I enter "load" when viewing the above list, I get the following:
- -
Only the functions with load in their name are shown.
- -This feature may not seem terribly useful when searching a file with a handful of functions in it but when you are searching through a file with dozens of functions, it comes in handy.
- -You can also search for a string in all of the files included in the currently opened project. Press Shift + Ctrl + F (Windows and Linux) or Shift + Cmd + F (macOS) and then enter the string you are trying to find.
- -
If the string exists in any of the files in the project, the search will return a list showing a list by file and line number.
- -
Click on any entry in the list to go directly to the line in the file where the string occurs.
diff --git a/files/en-us/tools/debugger/how_to/search/outline_filtered.png b/files/en-us/tools/debugger/how_to/search/outline_filtered.png deleted file mode 100644 index 598c1446a24a10a..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/search/outline_filtered.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/search/outline_sorted.png b/files/en-us/tools/debugger/how_to/search/outline_sorted.png deleted file mode 100644 index bee1b25e9f9c4b3..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/search/outline_sorted.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/search/search_code.png b/files/en-us/tools/debugger/how_to/search/search_code.png deleted file mode 100644 index 2ff118890e31fe6..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/search/search_code.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/search/searchinallfiles.png b/files/en-us/tools/debugger/how_to/search/searchinallfiles.png deleted file mode 100644 index 7b9954d0c9475e4..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/search/searchinallfiles.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_a_breakpoint/add-breakpoint-context.png b/files/en-us/tools/debugger/how_to/set_a_breakpoint/add-breakpoint-context.png deleted file mode 100644 index 3ca54d699591eaa..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/set_a_breakpoint/add-breakpoint-context.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_a_breakpoint/breakpoints-list.png b/files/en-us/tools/debugger/how_to/set_a_breakpoint/breakpoints-list.png deleted file mode 100644 index 6f4eaca3cf45c55..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/set_a_breakpoint/breakpoints-list.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_a_breakpoint/breakpoints-on-line.png b/files/en-us/tools/debugger/how_to/set_a_breakpoint/breakpoints-on-line.png deleted file mode 100644 index 17a929eb63efced..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/set_a_breakpoint/breakpoints-on-line.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_a_breakpoint/conditional-set.png b/files/en-us/tools/debugger/how_to/set_a_breakpoint/conditional-set.png deleted file mode 100644 index 5abc6a258ecdbb9..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/set_a_breakpoint/conditional-set.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_a_breakpoint/index.html b/files/en-us/tools/debugger/how_to/set_a_breakpoint/index.html deleted file mode 100644 index 36e7fe317af3c74..000000000000000 --- a/files/en-us/tools/debugger/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Set a breakpoint -slug: Tools/Debugger/How_to/Set_a_breakpoint -tags: - - JavaScript - - Tools - - breakpoint - - column breakpoint - - conditional breakpoint ---- -There are many different types of breakpoint that can be set in the debugger; this article covers standard (unconditional) breakpoints and conditional breakpoints.
- -Breakpoints are very useful when debugging JavaScript — you basically set a point in your code where you would like execution of the code to pause. At this point you can do useful things like studying the value of different variables at that point, allowing you to work out why a problem is occurring.
- -In the source pane, you can handle setting breakpoints by bringing up the context menu over a line number.
- -
There are a few options available here:
- -An unconditional breakpoint is one where the code will always pause execution when it is reached. You can set an unconditional breakpoint using the context menu (see above), or by:
- -The line number is highlighted in blue:
- -
In addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. These are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each relevant one.
- -A conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value at the time. You can set a conditional breakpoint using the context menu (see above), or by highlighting the line you want to break at in the source pane and pressing Ctrl + Shift + B (Windows/Linux) or Cmd + Shift + B (macOS).
- -When you first choose to set a conditional breakpoint, a text entry line will appear into which you add the condition you want it to break on:
- -
Once you've entered your condition and pressed Enter/Return, the line number will be highlighted in orange:
- -
Once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one:
- -
Once a breakpoint has been set, you can unset it again in various ways:
- -
Other context menu options worth mentioning are:
- -New in Firefox 71, the source pane now gives you an inline preview of the variables on each line of code you've stepped through:
- -
This is a very useful timesaver when stepping through your code. Previously you'd have to scroll through the Scopes panel to find variable values, or hover over a variable in the source pane. Now when execution pauses, you can view relevant variables immediately.
- -Note: There is also a new option in the context menu for the actual code in the source pane — Hide inline preview/Show inline preview — which allows you to turn the inline variables on/off.
-A normal breakpoint is just associated with a line: when the program reaches that line, the debugger pauses. A conditional breakpoint also has a condition associated with it, which is represented as an expression. When the program reaches the line, the debugger pauses only if the breakpoint's specified expression evaluates to true.
This makes it possible to debug specific scenarios, such as bugs that only happen on odd entries in a list, or errors that occur the last time through a loop, for example.
- -To set a conditional breakpoint, activate the context menu in the source pane, on the line where you want the breakpoint, and select "Add Conditional Breakpoint". You'll then see a textbox where you can enter the expression. Press Return to finish.
- -Conditional breakpoints are shown as orange arrows laid over the line number.
- -If you context-click on any breakpoint, you'll see a menu item "Edit Breakpoint". You can use this to modify an existing condition or to add a condition to a normal breakpoint.
diff --git a/files/en-us/tools/debugger/how_to/set_watch_expressions/ff_watch_expressions_add.png b/files/en-us/tools/debugger/how_to/set_watch_expressions/ff_watch_expressions_add.png deleted file mode 100644 index 77b918e50b8633a..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/set_watch_expressions/ff_watch_expressions_add.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_watch_expressions/ff_watch_expressions_remove.png b/files/en-us/tools/debugger/how_to/set_watch_expressions/ff_watch_expressions_remove.png deleted file mode 100644 index 36a2ce6204b3ba4..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/set_watch_expressions/ff_watch_expressions_remove.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/set_watch_expressions/index.html b/files/en-us/tools/debugger/how_to/set_watch_expressions/index.html deleted file mode 100644 index 0b84cd052845647..000000000000000 --- a/files/en-us/tools/debugger/how_to/set_watch_expressions/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Set watch expressions -slug: Tools/Debugger/How_to/Set_Watch_Expressions -tags: - - Firefox - - Tools - - watch expressions ---- -The Debugger Watch expressions pane allows you to specify JavaScript expressions that will be reevaluated and displayed every time the debugger pauses. As you step through code, the debugger will watch the expression and return any results. Watches are most commonly used to group individual variables of interest for easier observation. Watching more complicated expressions can sometimes also be useful: for example, to check that variables are within certain limits or values.
- -The screenshot below shows the Watch expressions panel with a number of expressions already defined. Each line shows the expression and its value at the current step, separated by a colon. Expressions that evaluate to an object can be expanded using the caret symbol to the left.
- -
To add a watch expression click the + button in the top right corner of the panel. Then type the expression into the text entry field that appears at the bottom of the panel, and press Enter to save it. The expression will be evaluated when you save, when you step through the code, or when you select the Refresh icon (next to +).
- -You can enter any valid expression into the watch, and even declare new "watch" variables and re-use them. For example, mywatchvar1 = 3 and mywatchvar2 = mywatchvar1 + 2 will evaluate mywatchvar2 as 5. You can also declare an expression that modifies a variable value in the code, and this will be re-evaluated whenever you step through the code or refresh the watch expression.
Important: Changing values in the code using a watch expression may affect normal code execution.
-To remove a watch expression, select the X button that appears when you hover over a line.
- -
When the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar:
- -
In order, the buttons are:
- -When paused, you can press the Esc key to open and close the split console to gain more insight into errors and variables:
- -
Since Firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging.
- -
This lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. The thinking here is that if you've got your DevTools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result.
- -If you want to turn this feature off, since Firefox 71 you can do so by going to about:config in a new tab, setting the devtools.debugger.features.overlay pref to false, and restarting the browser.
New in Firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through. See Set a breakpoint > Inline variable preview for more information.
diff --git a/files/en-us/tools/debugger/how_to/step_through_code/split_console.png b/files/en-us/tools/debugger/how_to/step_through_code/split_console.png deleted file mode 100644 index 46a5ecd141c377d..000000000000000 Binary files a/files/en-us/tools/debugger/how_to/step_through_code/split_console.png and /dev/null differ diff --git a/files/en-us/tools/debugger/how_to/use_a_source_map/index.html b/files/en-us/tools/debugger/how_to/use_a_source_map/index.html deleted file mode 100644 index fbb89055f04c657..000000000000000 --- a/files/en-us/tools/debugger/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Use a source map -slug: Tools/Debugger/How_to/Use_a_source_map ---- -The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:
- -In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
- -To enable the debugger to work with a source map, you must:
- -The comment pointing to the source map may have a different syntax depending on the language itself.
-For JavaScript files:
-//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map-
For CSS files, /*...*/ is the only valid syntax for comments:
/*# sourceMappingURL=http://example.com/path/to/your/sourcemap.map */-
{{EmbedYouTube("Fqd15gHC4Pg")}}
- -In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:
- -//# sourceMappingURL=main.js.map- -
In the Debugger's source list pane, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.
- -When debugging JavaScript code, it can be useful to know when properties on objects are read or modified. In a large, complex codebase, it's not always easy to know where in the code a given property is accessed. In the Firefox Debugger, this information can be provided by watchpoints. By setting a watchpoint on the property, rather than a breakpoint at a particular line, you can discover where that access occurs.
- -There are three types of watchpoints: get, set, and get or set. A get watchpoint pauses whenever a property is read; a set watchpoint pauses whenever a property value changes; a get or set watchpoint pauses whenever a property value is accessed in either way.
- -
When the watched property is accessed in the way specified by the watchpoint type (get or set), the debugger pauses, enabling you to see line of code responsible, and to inspect anything else you wish at that time.
- -In the following screenshot, the debugger pauses at line 7, where obj.a is set. The message panel in the upper right corner indicates that the debugger is "Paused on property set".
The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.
- -{{EmbedYouTube("QK4hKWmJVLo")}}
- -You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See remote debugging to learn how to connect the debugger to a remote target.
- -To find your way around the debugger, here's a quick tour of the UI.
- -To find out what you can do with the debugger, refer to the following how-to guides.
- -You probably want to pause the execution of your code, in order to see what is going on at various points. There are multiple ways to tell the Debugger how and when to pause:
- -What can you do after execution pauses?
- - - -You probably want to see the value of variables or expressions, either during execution or when it is paused.
- - - -{{ToolsSidebar}}
- -Sometimes you want to view a value in your code but you don't want to pause execution. Rather than sprinkle console.log() statements throughout your code, you can use a special type of breakpoint, the logpoint. Logpoints print a message to the Console panel instead of pausing code execution.
The logpoint is especially useful in cases where breaking the execution breaks testing procedures, such as when you are debugging popup windows, or executing focus-related logic.
- -To create a logpoint:
- -
When you set a logpoint, the indicator is purple, rather than the blue of an unconditional breakpoint or the orange of a conditional breakpoint.
- -You can view the list of logpoints in the Breakpoints side panel.
- -
When execution hits a logpoint, the message you have defined is logged to the console. You can make it easier to see the message by opening a split console under the debugger. (Either press Esc or select the ellipsis menu (...) and then click Show Split Console.)
- -
console.log method.{{ToolsSidebar}}
- -An XHR (XMLHttpRequest) breakpoint breaks code execution when an XHR request is dispatched so that you can examine the current state of the program. You can break on all requests or on those that include a specific URL. To turn on the feature:
- -Note: If you enter a key word instead of a URL, code execution will pause on any call to a URL that contains that keyword.
-
When your code breaks on an XHR request, the righthand pane will have two additional sections:
- -
New in Firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through. See Set a breakpoint > Inline variable preview for more information.
diff --git a/files/en-us/tools/debugger/set_an_xhr_breakpoint/xhr_break.png b/files/en-us/tools/debugger/set_an_xhr_breakpoint/xhr_break.png deleted file mode 100644 index 3da3ad0a829a77e..000000000000000 Binary files a/files/en-us/tools/debugger/set_an_xhr_breakpoint/xhr_break.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_an_xhr_breakpoint/xhr_breakpoint.png b/files/en-us/tools/debugger/set_an_xhr_breakpoint/xhr_breakpoint.png deleted file mode 100644 index ebdd338d393c3f8..000000000000000 Binary files a/files/en-us/tools/debugger/set_an_xhr_breakpoint/xhr_breakpoint.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/event-listener-breakpoints.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/event-listener-breakpoints.png deleted file mode 100644 index 31775c92e044291..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/event-listener-breakpoints.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/filter-event-breakpoints.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/filter-event-breakpoints.png deleted file mode 100644 index 5a0a14a33221f0f..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/filter-event-breakpoints.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/index.html b/files/en-us/tools/debugger/set_event_listener_breakpoints/index.html deleted file mode 100644 index ffc65b11d0b932c..000000000000000 --- a/files/en-us/tools/debugger/set_event_listener_breakpoints/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Set event listener breakpoints -slug: Tools/Debugger/Set_event_listener_breakpoints -tags: - - Debugger - - Dev Tools - - Event Debugging - - Event Handler - - Event Listener - - JavaScript debugging - - Tools - - breakpoint - - events ---- -{{ToolsSidebar}}
- -Starting with Firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler. This article explains how to use it.
- -To use an event breakpoint, you open up the JavaScript debugger, and find and expand the Event Listener Breakpoints section in the right hand column.
- -
To break when event listeners are hit, check the boxes next the events you are interested in. All of the standard events supported in your version of Firefox are listed, arranged by which API or API area they're part of.
- -Now when a keydown, keyup, keypress, or input event occurs, execution will pause as soon as it enters the listener code.
When execution pauses, the source pane displays the highlighted line of the JavaScript code that is next to be executed, along with the surrounding code for context. In addition, you get a box overlaid on the viewport saying "Paused on event breakpoint", with buttons to step over that line of code or resume execution.
- -You could add regular breakpoints at the entry point of the listener to achieve the same effect. If however you have multiple elements, all of which have event listeners attached that you want to break on, this becomes an enormous time saver.
- -This is also useful when debugging code that you're unfamiliar with, to save time over hunting down your event handler within your code, or when trying to understand why a web site isn't working as expected in your browser. Use event breakpoints to stop execution at the triggering event for the action that fails, then step through the code or watch the console to see what happens.
- -In Firefox 71 onwards, the "Log" checkbox is available in the Event Listener Breakpoints list. Selecting this and then choosing some events to break on will mean that when you step through code, information about events fired will be logged to the console instead of the DevTools breaking on each one.
- -So if we choose to log keyboard events, for example, the code no longer pauses as each event is fired:
- -
Instead, we can then switch to the console, and whenever we press a key we are given a log of where related events were fired.
- -
There's an issue here — the console is showing that the keypress event is being fired somewhere inside jQuery. Instead, it'd be far more useful if we showed where in our own app code is calling the jQuery that fired the event. This can be done by finding jquery.js in the Sources panel, and choosing the Ignore source option from its context menu.
Now the logs will show where in your app jQuery was called, rather than where in jQuery the event was fired:
- -
Also added to Firefox 71 is a new Filter by event type... text input, which can also be found at the top of the Event Listener Breakpoints list. When you click in this input and type a search term, the list of event listener types will filter by that term allowing you to find the events you want to break on more easily.
- -
New in Firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through. See Set a breakpoint > Inline variable preview for more information.
diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-1.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-1.png deleted file mode 100644 index 60cf92cd785acd1..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-1.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-2.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-2.png deleted file mode 100644 index 323847b74031345..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-2.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-3.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-3.png deleted file mode 100644 index de94a8d9eeb0416..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-3.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-4.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-4.png deleted file mode 100644 index 26c69aa3e477678..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/log-events-4.png and /dev/null differ diff --git a/files/en-us/tools/debugger/set_event_listener_breakpoints/paused-on-breakpoint.png b/files/en-us/tools/debugger/set_event_listener_breakpoints/paused-on-breakpoint.png deleted file mode 100644 index ea42ec5dbe1438f..000000000000000 Binary files a/files/en-us/tools/debugger/set_event_listener_breakpoints/paused-on-breakpoint.png and /dev/null differ diff --git a/files/en-us/tools/debugger/source_map_errors/debugger-tab.png b/files/en-us/tools/debugger/source_map_errors/debugger-tab.png deleted file mode 100644 index 869db51aac80953..000000000000000 Binary files a/files/en-us/tools/debugger/source_map_errors/debugger-tab.png and /dev/null differ diff --git a/files/en-us/tools/debugger/source_map_errors/index.html b/files/en-us/tools/debugger/source_map_errors/index.html deleted file mode 100644 index 0b9043bc594ad65..000000000000000 --- a/files/en-us/tools/debugger/source_map_errors/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Source map errors -slug: Tools/Debugger/Source_map_errors -tags: - - Debugger - - Debugging - - Dev Tools - - Reference - - Source maps - - Tools ---- -Source maps are JSON files providing a way to associate transformed sources, as seen by the browser, with their original sources, as written by the developer. You can sometimes encounter problems working with source maps. This page explains the most common problems and how to fix them.
- -Note: If you're new to source maps, you can learn more about them in How to use a source map.
-If you do see a problem, a message will appear in the webconsole. This message will show an error message, the resource URL, and the source map URL:
- -
Here, the resource URL tells us that bundle.js mentions a source map, and the source map URL tells us where to find the source map data (in this case, relative to the resource). The error tells us that the source map is not JSON data — so we're serving the wrong file.
There are a few common ways that source maps can go wrong; they are detailed in the following sections.
- -The source map resource can be missing or inaccessible.
- -
The fix here is to make sure the file is being served and is accessible to the browser
- -The source map data can be invalid — either not a JSON file at all, or with an incorrect structure. Typical error messages here are:
- -SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON dataError: "version" is a required argument
An original source may be missing. You may encounter this when trying to open one of the original sources in the debugger. The message looks a little different in this case:
- -
In this case, the error will also be displayed in the source tab in the debugger:
- -
A bug in Firefox prevents it from loading source maps for web extensions.
- -See Bug 1437937: WebExtensions Doesn't Find Source Maps for details.
- -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- -
The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
diff --git a/files/en-us/tools/debugger/source_map_errors/invalid-json.png b/files/en-us/tools/debugger/source_map_errors/invalid-json.png deleted file mode 100644 index 6d47d353254bdbc..000000000000000 Binary files a/files/en-us/tools/debugger/source_map_errors/invalid-json.png and /dev/null differ diff --git a/files/en-us/tools/debugger/source_map_errors/missing-field.png b/files/en-us/tools/debugger/source_map_errors/missing-field.png deleted file mode 100644 index bece5fd7ca1f268..000000000000000 Binary files a/files/en-us/tools/debugger/source_map_errors/missing-field.png and /dev/null differ diff --git a/files/en-us/tools/debugger/source_map_errors/missing-map.png b/files/en-us/tools/debugger/source_map_errors/missing-map.png deleted file mode 100644 index 8d8ad7db4b81b8f..000000000000000 Binary files a/files/en-us/tools/debugger/source_map_errors/missing-map.png and /dev/null differ diff --git a/files/en-us/tools/debugger/source_map_errors/screenshot_from_2017-09-15_14-32-02.png b/files/en-us/tools/debugger/source_map_errors/screenshot_from_2017-09-15_14-32-02.png deleted file mode 100644 index f71030fd7a8a0b8..000000000000000 Binary files a/files/en-us/tools/debugger/source_map_errors/screenshot_from_2017-09-15_14-32-02.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger-source-folder-cxt-menu.png b/files/en-us/tools/debugger/ui_tour/debugger-source-folder-cxt-menu.png deleted file mode 100644 index 8e49ffe00f2e09a..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger-source-folder-cxt-menu.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger-source-list-cxt-menu.png b/files/en-us/tools/debugger/ui_tour/debugger-source-list-cxt-menu.png deleted file mode 100644 index df837ac5ba586c0..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger-source-list-cxt-menu.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_scopes_fx78.png b/files/en-us/tools/debugger/ui_tour/debugger_scopes_fx78.png deleted file mode 100644 index bf99b6c010bee07..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_scopes_fx78.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_toolbar_with_settings_menu_four_items.jpg b/files/en-us/tools/debugger/ui_tour/debugger_toolbar_with_settings_menu_four_items.jpg deleted file mode 100644 index 9c4c7ff5b84b066..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_toolbar_with_settings_menu_four_items.jpg and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_uitour_01.png b/files/en-us/tools/debugger/ui_tour/debugger_uitour_01.png deleted file mode 100644 index 2c2e57c25668a0e..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_uitour_01.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_uitour_02.5.png b/files/en-us/tools/debugger/ui_tour/debugger_uitour_02.5.png deleted file mode 100644 index becf3b72213ef89..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_uitour_02.5.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_uitour_02.png b/files/en-us/tools/debugger/ui_tour/debugger_uitour_02.png deleted file mode 100644 index bdede32e7132005..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_uitour_02.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_uitour_03.png b/files/en-us/tools/debugger/ui_tour/debugger_uitour_03.png deleted file mode 100644 index ddb14442e3ec74a..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_uitour_03.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_uitour_breakpoints.png b/files/en-us/tools/debugger/ui_tour/debugger_uitour_breakpoints.png deleted file mode 100644 index 5f44a76ccf20ae8..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_uitour_breakpoints.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/debugger_uitour_call_stack.png b/files/en-us/tools/debugger/ui_tour/debugger_uitour_call_stack.png deleted file mode 100644 index 084b4c3bbfb4fcf..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/debugger_uitour_call_stack.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/ff_debugger_callstack_ignore_source.png b/files/en-us/tools/debugger/ui_tour/ff_debugger_callstack_ignore_source.png deleted file mode 100644 index 839eb35f3180b40..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/ff_debugger_callstack_ignore_source.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/firefox_source_pane_context_menu.jpg b/files/en-us/tools/debugger/ui_tour/firefox_source_pane_context_menu.jpg deleted file mode 100644 index 9a6f2c6a09c96dd..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/firefox_source_pane_context_menu.jpg and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/index.html b/files/en-us/tools/debugger/ui_tour/index.html deleted file mode 100644 index 78b58a378c925ee..000000000000000 --- a/files/en-us/tools/debugger/ui_tour/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: UI Tour -slug: Tools/Debugger/UI_Tour -tags: - - Debugger - - JavaScript - - Tools ---- -This article is a quick tour of the main sections of the JavaScript Debugger's user interface. The UI is split vertically into three panels
- -
The source list pane lists all the JavaScript source files loaded into the page (including scripts for active web workers), and enables you to select one to debug. At the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served.
- -
You can search for a file using Ctrl + P (Cmd + P on a Mac).
- -Web Extensions are listed in the Source List pane using the extension's name.
- -
There are several context menu options available for individual files and folders or groups; typically viewed by right-clicking on the item.
- -For files, the following context menu options are available:
- -
For folders and groups, the following context menu options are available:
- -
The Outline view shows a tree for navigating the currently open file. Use it to jump directly to a function, class or method definition.
- -This shows the JavaScript file currently loaded.
- -
When the source pane is focused you can search for a string in the file using Ctrl + F (Cmd + F on a Mac).
Breakpoints have a blue arrow overlaid on the line number. Conditional breakpoints have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:
- -
The third column shows more information about the breakpoints. For example, the logpoint at line 85 logs the value of the tableRow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todoList is undefined.
- -The source pane provides the following context menu options:
- -
At the top of the right-hand pane, there's a toolbar:
- -
The toolbar consists of:
- -Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to enable/disable it:
- -
You can add watch expressions in the right pane. They will be evaluated when code execution is paused:
- -
Hover on a variable show a tooltip with its value inside:
- -
The call stack becomes visible when the debugger is paused.
- -
The stack lists the chain of functions that are waiting to complete, with the frame for the function that was called last at the top (i.e. the most deeply nested function). Selecting a line opens the associated file in the source pane, at the specified location. It also updates the Scopes section with the variables for that frame/scope.
- -Note: The call stack is a useful tool for tracking execution flow through your application! It allows you to confirm that functions are called in the order you expect, and with sensible variable values.
-Call stack lines for frames in your own code show the function name and the file location in which it was called.
- -Note: If you click Step over (F10) after changing the selected line in the source pane, the debugger executes until reaching the line following the newly-selected line (disregarding whatever line the debugger originally stopped at).
-Lines for JavaScript frameworks/libraries used by your code (React, jQuery, Angular, Webpack, Backbone etc.) are grouped by default, and represented by a framework-specific icon (see the jQuery frame in the screenshot above). Generally you won't want to debug into the code of frameworks or libraries, so grouping these reduces the complexity of the call stack list. You can still expand and inspect the grouped frames if needed, or disable framework grouping using a context menu option: Disable framework grouping.
-
- You can also use the context menu to Ignore source for a particular line. This will remove the line from the call stack, and the debugger will subsequently skip through any calls into that file. Note that you'll have to use the source pane "eye icon" or source list if you want to Unignore the source later!
Right-/Ctrl- clicking in the call stack pane opens a context menu with the following items:
- -In the right-hand pane you'll see a label "Scopes" with a disclosure arrow next to it. When the debugger's paused, you'll be able to expand this section to see all objects that are in scope at this point in the program:
- -
Objects are organized by scope: the most local appears first, and the global scope (Window, in the case of page scripts) appears last.
Within the Scopes pane, you can create watchpoints that pause the debugger when a value is read or assigned.
diff --git a/files/en-us/tools/debugger/ui_tour/source_list_pane.png b/files/en-us/tools/debugger/ui_tour/source_list_pane.png deleted file mode 100644 index 8d31cbc3a245205..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/source_list_pane.png and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/tooltip-1.gif b/files/en-us/tools/debugger/ui_tour/tooltip-1.gif deleted file mode 100644 index c3f24431b7dd077..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/tooltip-1.gif and /dev/null differ diff --git a/files/en-us/tools/debugger/ui_tour/watch-expressions.png b/files/en-us/tools/debugger/ui_tour/watch-expressions.png deleted file mode 100644 index eabace508857af2..000000000000000 Binary files a/files/en-us/tools/debugger/ui_tour/watch-expressions.png and /dev/null differ diff --git a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png b/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png deleted file mode 100644 index ab769339e497195..000000000000000 Binary files a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png and /dev/null differ diff --git a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/index.html b/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/index.html deleted file mode 100644 index 674bbcd5dae2eff..000000000000000 --- a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Using the Debugger map scopes feature -slug: Tools/Debugger/Using_the_Debugger_map_scopes_feature ---- -{{ToolsSidebar}}
- -This feature is useful when debugging source-mapped code. It enables you to see the variables from the original source. It's also possible to inspect variables from the generated scopes (e.g., a bundle file with all concatenated module files).
- -Let's take a look at how this works. If you want to follow along, use this example.
- -increment function.
Using this feature is expensive in terms of resources, but it certainly makes your life easier when you have to debug source code that has been packaged webpack or a similar tool.
diff --git a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png b/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png deleted file mode 100644 index ee235f7e008caa3..000000000000000 Binary files a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png and /dev/null differ diff --git a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png b/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png deleted file mode 100644 index 2dc8e558fab053b..000000000000000 Binary files a/files/en-us/tools/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/canvas_tool.png b/files/en-us/tools/deprecated_tools/canvas_tool.png deleted file mode 100644 index 8a6f567f3e5ed34..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/canvas_tool.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/deprecated_tool_notice.png b/files/en-us/tools/deprecated_tools/deprecated_tool_notice.png deleted file mode 100644 index b137dc3086aa289..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/deprecated_tool_notice.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/devtool_settings_deprecated_notice.png b/files/en-us/tools/deprecated_tools/devtool_settings_deprecated_notice.png deleted file mode 100644 index dfa6dd4a7437293..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/devtool_settings_deprecated_notice.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/editor_mode_toggle_icon.png b/files/en-us/tools/deprecated_tools/editor_mode_toggle_icon.png deleted file mode 100644 index d7be24cf05d5a64..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/editor_mode_toggle_icon.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/index.html b/files/en-us/tools/deprecated_tools/index.html deleted file mode 100644 index 4db01e55ca25105..000000000000000 --- a/files/en-us/tools/deprecated_tools/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Deprecated tools -slug: Tools/Deprecated_tools -tags: - - Deprecated - - Tools ---- -{{ToolsSidebar}}
- -Over the course of DevTools development, we have added several experimental panels to try out new ideas. Not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are eventually removed.
- -We have created this list of deprecated or removed panels. This page documents the deprecated panels and the bugs that track their removal. Although these panels have been removed, you still have access to the old code, and there are alternative webextensions that you can try to get similar functionality.
- -When we deprecate a panel, we begin by getting feedback from the community to determine the impact of removing that panel. Once we have decided to remove the panel, we will provide a warning message, and finally, we will remove the panel from the codebase.
- -You may see a warning message, as in the following image, when trying to activate a deprecated panel:
- -
In addition, if you open the panel for one of these tools, you will also see a warning message about its removal.
- -
Scratchpad is deprecated as of Firefox 70 ({{bug(1565380)}}), and will be removed as of Firefox 72 ({{bug(1519103)}}).
- -Scratchpad provided an environment for experimenting with JavaScript code. You can write, run, and examine the result of code that interacts with the web page.
- -
In Firefox 71+, you can write multi-line JavaScript code in the Web Console Editor Mode, making it similar to the Scratchpad. The Editor Mode can be triggered clicking on the icon on the right of the console input, or with Ctrl + B (Cmd + B on macOS)
- -
When in Editor Mode, the Enter key adds a new line in the input, and you can evaluate the expression using Ctrl + Enter (Cmd + Enter on macOS).
When evaluating, the input isn't cleared, which makes it possible to quickly iterate over a snippet of code.
- -The results are displayed in the console output, to the right of the input, providing immediate feedback. Unlike in Scratchpad, errors are properly displayed in the output with an expandable stacktrace, making it easier to debug the code you're currently writing.
- -Starting Firefox 72, you can import a Javascript file content in the console input with Ctrl + O (Cmd + O on macOS), as well as saving the console input content to a file using Ctrl + S (Cmd + S on macOS).
- -WebIDE was deprecated as of Firefox 69
- -Disabled as of Firefox 70 ({{bug(1539451)}}).
- -Removed as of Firefox 71 ({{bug(1539462)}}).
- -WebIDE allowed you to connect the Firefox Developer Tools to remote browsers, such as Firefox for Android. It was also intended to support application development for Firefox OS.
- -
Remote debugging is available in about:debugging as of Firefox 68. Features not ported to about:debugging are: WiFi debugging for Firefox for Android, application development. Features that are planned but not ported yet: remote browser screenshots and edit remote browser configuration. More details on the mailing-list thread.
- -Bugzilla issue: {{bug(1403938)}}
- -Removed as of Firefox 67
- -Canvas Debugger allowed users to inspect the canvas element and see how frequently a given function is called. It was deprecated due to lack of use.
- -We do not have dedicated documentation for the Canvas Debugger.
- -
Spector.js is a WebExtension that can provide these features with 3D contexts.
- -Bugzilla issue: {{bug(1403944)}}
- -Removed as of Firefox 67
- -The Web Audio Editor allowed you to examine an audio context constructed in the page and provided a visualization of its graph. This gave a high-level view of its operation, and enabled you to ensure that all the nodes are connected in the way you expect. It was possible to edit the AudioParam properties for each node in the graph. Some non-AudioParam properties, like an OscillatorNode's type property, were displayed and editable as well. It was deprecated due to lack of use.
- -More details about the Web Audio Editor
- -
Alternatives include AudioN and https://github.com/spite/WebAudioExtension web extensions.
- -Bugzilla issue: {{bug(1342237)}}
- -Removed as of Firefox 67
- -The Shader Editor allowed users to examine and edit the source of the WebGL vertex and fragment shaders. It was deprecated due to low usage and maintenance costs.
- -More details about the Shader Editor
- -
An alternative to this panel is this extension: https://github.com/spite/ShaderEditorExtension, or Spector.js also supports a Shader Editor that requires a library to use a shader reloader hook. Currently only the Babylon library does.
diff --git a/files/en-us/tools/deprecated_tools/screen_shot_2019-08-26_at_08.08.11.png b/files/en-us/tools/deprecated_tools/screen_shot_2019-08-26_at_08.08.11.png deleted file mode 100644 index 4f9e6d461886ce5..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/screen_shot_2019-08-26_at_08.08.11.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/screen_shot_2019-08-26_at_08.18.26.png b/files/en-us/tools/deprecated_tools/screen_shot_2019-08-26_at_08.18.26.png deleted file mode 100644 index ebdce97f2ac00b9..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/screen_shot_2019-08-26_at_08.18.26.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/shadereditor_tool.png b/files/en-us/tools/deprecated_tools/shadereditor_tool.png deleted file mode 100644 index bdc24e2c57bcec5..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/shadereditor_tool.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/webaudio_tool.png b/files/en-us/tools/deprecated_tools/webaudio_tool.png deleted file mode 100644 index 95efede30e2b86e..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/webaudio_tool.png and /dev/null differ diff --git a/files/en-us/tools/deprecated_tools/webide_68.png b/files/en-us/tools/deprecated_tools/webide_68.png deleted file mode 100644 index 798b4bffeaea3ed..000000000000000 Binary files a/files/en-us/tools/deprecated_tools/webide_68.png and /dev/null differ diff --git a/files/en-us/tools/devtools_layoutmenu.png b/files/en-us/tools/devtools_layoutmenu.png deleted file mode 100644 index bc235c7a159d64c..000000000000000 Binary files a/files/en-us/tools/devtools_layoutmenu.png and /dev/null differ diff --git a/files/en-us/tools/devtoolsapi/index.html b/files/en-us/tools/devtoolsapi/index.html deleted file mode 100644 index 5e50110f5aa5cd3..000000000000000 --- a/files/en-us/tools/devtoolsapi/index.html +++ /dev/null @@ -1,649 +0,0 @@ ---- -title: DevTools API -slug: Tools/DevToolsAPI -tags: - - DevTools ---- -{{ToolsSidebar}}{{deprecated_header}}
- -Warning: The DevTools API is still WIP. If you notice any inconsistency, please let The Firefox Developer Tools Team know.
-While this api is currently a work-in-progress, there are usable portions of page inspector and debugger that may be used currently.
- -The DevTools API provides a way to register and access developer tools in Firefox.
- -In terms of User Interface, each registered tool lives in its own tab (we call one tab a panel). These tabs are located in a box we call a Toolbox. A toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked). A Toolbox (and all the tools it contains) is linked to a Target, which is the object the tools are debugging. A target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…).
- -In terms of code, each tool has to provide a ToolDefinition object. A definition is a JS light object that exposes different information about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of this tool. The gDevTools global object provides methods to register a tool definition and to access tool instances. An instance of a tool is called a ToolPanel. The ToolPanel is built only when the tool is selected (not when the toolbox is opened). There is no way to "close/destroy" a ToolPanel. The only way to close a toolPanel is to close its containing toolbox. All these objects implement the EventEmitter interface.
- -The gDevTools API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the gDevTools API from an add-on, it can be imported with following snippet
const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");
-
-registerTool(toolDefinition)toolDefinition {ToolDefinition} - An object that contains information about the tool. See ToolDefinition for details.unregisterTool(tool)tool {ToolDefinition|String} - The tool definition object or the id of the tool to unregister.registerTheme(themeDefinition)themeDefinition {ThemeDefinition} - An object that contains information about the theme.unregisterTheme(theme)theme {ThemeDefinition|String} - The theme definition object or the theme identifier.showToolbox(target [, toolId [, hostType [, hostOptions]]])target {Target} - The target the toolbox will debug.toolId {String} - The tool that should be activated. If unspecified the previously active tool is shown.hostType {String} - The position the toolbox will be placed. One of bottom, side, window, custom. See HostType for details.hostOptions {Object} - An options object passed to the selected host. See HostType for details.getToolbox(target)target {Target} - The target the toolbox is debugging.closeToolbox(target)target {Target} - The target of the toolbox that should be closed.getDefaultTools()getAdditionalTools()getToolDefinition(toolId)toolId {String} - The ID of the tool.getToolDefinitionMap()getToolDefinitionArray()getThemeDefinition(themeId)ThemeDefinition object for the theme with the given id.themeId {String} - The ID of the theme.ThemeDefinition object if the theme exists, null otherwise.getThemeDefinitionMap()ThemeDefinition map for available themes.getThemeDefinitionArray()ThemeDefinition objects for available themes.Following events are emitted by the gDevTools object via the EventEmitter interface.
tool-registered(toolId)tool-unregistered(tool)theme-registered(themeId)theme-unregistered(theme)ThemeDefinition object.toolbox-ready(toolbox)toolbox-destroy(target)toolbox-destroyed(target){toolId}-init(toolbox, iframe){toolId}-build(toolbox, panel)ToolDefinition.build() method.{toolId}-ready(toolbox, panel)ToolDefinition.build() method.{toolId}-destroy(toolbox, panel)ToolDefinition.build() method.A Toolbox is a frame for the ToolPanels that is debugging a specific target.
- -targethostTypeToolbox.HostType constants.zoomValueThe Toolbox constructor contains following constant properties.
- -Toolbox.HostType.BOTTOMToolbox.HostType.SIDEToolbox.HostType.WINDOWToolbox.HostType.CUSTOMgetCurrentPanel()getPanel(toolId)toolId {String} - The tool identifier.toolId is active, otherwise undefined.getPanelWhenReady(toolId)getPanel() but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{jsxref("Promise")}} won't be fulfilled until something triggers the tool to load.toolId {String} - The tool identifier.getToolPanels()toolId → ToolPanel {{jsxref("Map")}} for currently loaded tools.getNotificationBox()loadTool(toolId)toolId in the background but does not activate it.toolId {String} - The tool identifier.selectTool(toolId)toolId.toolId {String} - The tool identifier.selectNextTool()Toolbox.selectPreviousTool()Toolbox.highlightTool(toolId)toolId {String} - The tool to highlight.unhighlightTool(toolId)toolId {String} - The tool to unhighlight.openSplitConsole()closeSplitConsole()toggleSplitConsole()switchHost(hostType)hostType {Toolbox.HostType} - The type of the new host.reloadTarget(force)force {Boolean} - If true the target is shift-reloaded i.e. the cache is bypassed during the reload.zoomIn()Toolbox document.zoomOut()Toolbox document.zoomReset()Toolbox document.setZoom(value)value {Number} - The zoom level such as 1.2.destroy()Toolbox is destroyed.The Toolbox object emits following events via the EventEmitter interface.
- -host-changedreadyToolbox is ready to use.select(toolId){toolId}-selected event.{toolId}-init(frame){toolId}-build(panel){toolId}-ready(panel){toolId}-selected(panel){toolId}-destroy(panel)destroyToolbox is about to be destroyed.destroyedToolbox has been destroyed.A ToolDefinition object contains all the required information for a tool to be shown in the toolbox.
isTargetSupported(target)target {Target} - The target to check.build(window, toolbox)window {Window} - The {{domxref("Window")}} object for frame the tool is being built into.toolbox {Toolbox} - The Toolbox the tool is being built for.onKey(panel, toolbox)panel {ToolPanel} - The ToolPanel for the tool.toolbox {Toolbox} - The toolbox for the shortcut was triggered for.The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presence of the tool in the Browser and the Toolbox.
- -idurllabelicon should be specified.tooltippanelLabelordinalvisibilityswitchdevtools.{id}.enablediconhighlightedicon{icon}iconOnlyinvertIconForLightThemekeymodifierspreventClosingOnKeyinMenu{label}accesskeyHere's a minimal definition for a tool.
- -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)
-};
-
-// Register it.
-gDevTools.registerTool(def);
-
-
-FIXME:
- -FIXME
- -The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that ToolDefinition.build() returns should implement the methods described below.
open()toolbox.selectTool()) and events (e.g. toolbox-ready) are delayed until the promise has been fulfilled.ToolPanel object once it's ready to be used.destroy()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 {{jsxref("Promise")}} that is resolved once the process is complete.
- -Return value:
- A {{jsxref("Promise")}} if the function performs asynchronous operations, otherwise undefined.
Here's a basic template for a ToolPanel implementation.
- -// In the ToolDefinition 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.destroySomethingAsynchronously()
- .then(() => console.log("destroyed"));
- },
-
- handleClick: function(event) {
- console.log("Clicked", event.originalTarget);
- },
-};
-
-
-EventEmitter is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.
When an event is emitted on the EventEmitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.
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 once method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.
The following methods are available on objects that have been decorated with the EventEmitter interface.
emit(eventName, ...extraArguments)eventName {String} - The name of the event.extraArguments {...Any} - Extra arguments that are passed to the listeners.on(eventName, listener)off(eventName, listener)once(eventName, listener)Here's a few examples using the gDevTools object.
- -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);
-});
-
-
-To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:
- -<splitter class="devtools-side-splitter"/> - <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true"> - <tabs/> - <tabpanels flex="1"/> - </tabbox>- -
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 they want to see.
- -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.
- -If the loaded document exposes a window.setPanel(ToolPanel) function, the sidebar will call it once the document is loaded.
| Method | -Description | -
|---|---|
new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true) |
- ToolSidebar constructor | -
void addTab(tabId, url, selected=false) |
- Add a tab in the sidebar | -
void select(tabId) |
- Select a tab | -
void hide() |
- Hide the sidebar | -
void show() |
- Show the sidebar | -
void toggle() |
- Toggle the sidebar | -
void getWindowForTab(tabId) |
- Get the iframe containing the tab content | -
tabId getCurrentTabID() |
- Return the id of tabId of the current tab | -
tabbox getTab(tabId) |
- Return a tab given its id | -
destroy() |
- Destroy the ToolSidebar object | -
| Events | -Description | -
new-tab-registered |
- A new tab has been added | -
{tabId}-ready |
- Tab is loaded and can be used | -
{tabId}-selected |
- Tab has been selected and is visible | -
{tabId}-unselected |
- Tab has been unselected and is not visible | -
show |
- The sidebar has been opened. | -
hide |
- The sidebar has been closed. | -
Register a tool
- -gDevTools.registerTool({
- // FIXME: missing key related properties.
- id: "inspector",
- icon: "chrome://browser/skin/devtools/inspector-icon.png",
- url: "chrome://browser/content/devtools/inspector/inspector.xul",
- get label() {
- let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties");
- return strings.GetStringFromName("inspector.label");
- },
-
- isTargetSupported: function(target) {
- return !target.isRemote;
- },
-
- build: function(iframeWindow, toolbox, node) {
- return new InspectorPanel(iframeWindow, toolbox, node);
- }
-});
-
-
-Open a tool, or select it if the toolbox is already open:
- -let target = TargetFactory.forTab(gBrowser.selectedTab);
-let toolbox = gDevTools.openToolbox(target, null, "inspector");
-
-toolbox.once("inspector-ready", function(event, panel) {
- let inspector = toolbox.getToolPanels().get("inspector");
- inspector.selection.setNode(target, "browser-context-menu");
-});
-
-
-Add a sidebar to an existing tool:
- -let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
-sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
-sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
-sidebar.show();
-
diff --git a/files/en-us/tools/devtoolscolors/index.html b/files/en-us/tools/devtoolscolors/index.html
deleted file mode 100644
index 2d88f95fa2fec63..000000000000000
--- a/files/en-us/tools/devtoolscolors/index.html
+++ /dev/null
@@ -1,338 +0,0 @@
----
-title: DevToolsColors
-slug: Tools/DevToolsColors
-tags:
- - CSS
----
-Firefox developers: Don't change any of these values without UX approval. If any of these values need to be changed, you will need to change some CSS code in /browser/themes/*/devtools/. File a DevTools bug accordingly.
This chart lists colors and CSS variables as implemented in the dark theme and light theme for developer tools.
- -| - | Dark Theme | -Light Theme | -CSS Variable | -
|---|---|---|---|
| Chrome Colors - | -- | ||
| Tab Toolbar | -
-
-
- #252c33 |
-
-
- #ebeced - rgba(235, 236, 237, 1) |
- --theme-tab-toolbar-background | -
| Toolbars | -
-
- #343c45 - rgba(52, 60, 69, 1) |
-
-
- #f0f1f2 - rgba(240, 241, 242, 1) |
- --theme-toolbar-background | -
| Selection Background | -
-
- #1d4f73 - rgba(29, 79, 115, 1) |
-
-
- #4c9ed9 - rgba(76, 158, 217, 1) |
- --theme-selection-background | -
| Selection Text Color | -
-
- #f5f7fa - rgba(245, 247, 250, 1) |
-
-
- #f5f7fa - rgba(245, 247, 250, 1) |
- --theme-selection-color | -
| Splitters | -
-
- #000000 - rgba(0, 0, 0, 1) |
-
-
- #aaaaaa - rgba(170, 170, 170, 1) |
- --theme-splitter-color | -
| Comment | -
-
-
- #5c6773 |
-
-
-
- #747573 |
- --theme-comment | -
| Content Colors - | -- | ||
| Background - Body | -
-
- #14171a - rgba(17, 19, 21, 1) |
-
-
- #fcfcfc - rgba(252, 252, 252, 1) |
- --theme-body-background | -
| Background - Sidebar | -
-
- #181d20 - rgba(24, 29, 32, 1) |
-
-
- #f7f7f7 - rgba(247, 247, 247, 1) |
- --theme-sidebar-background | -
| Background - Attention | -
-
- #b28025 - rgba(178, 128, 37, 1) |
-
-
- #e6b064 - rgba(230, 176, 100, 1) |
- --theme-contrast-background | -
| Text Colors - | -- | ||
| Body Text | -
-
- #8fa1b2 - rgba(143, 161, 178, 1) |
-
-
- #18191a - rgba(24, 25, 26, 1) |
- --theme-body-color | -
| Foreground (Text) - Grey | -
-
- #b6babf - rgba(182, 186, 191, 1) |
-
-
- #585959 - rgba(88, 89, 89, 1) |
- --theme-body-color-alt | -
| Content (Text) - High Contrast | -
-
- #a9bacb - rgba(169, 186, 203, 1) |
-
-
- #292e33 - rgba(41, 46, 51, 1) |
- --theme-content-color1 | -
| Content (Text) - Grey | -
-
- #8fa1b2 - rgba(143, 161, 178, 1) |
-
-
- #8fa1b2 - rgba(143, 161, 178, 1) |
- --theme-content-color2 | -
| Content (Text) - Dark Grey | -
-
- #667380 - rgba(102, 115, 128, 1) |
-
-
- #667380 - rgba(102, 115, 128, 1) |
- --theme-content-color3 | -
| Highlight Colors - | -- | ||
| Blue | -
-
- #46afe3 - rgba(70, 175, 227, 1) |
-
-
- #0088cc - rgba(0, 136, 204, 1) |
- --theme-highlight-blue | -
| Purple | -
-
- #6b7abb - rgba(107, 122, 187, 1) |
-
-
- #5b5fff - rgba(91, 95, 255, 1) |
- --theme-highlight-purple | -
| Pink | -
-
- #df80ff - rgba(223, 128, 255, 1) |
-
-
- #b82ee5 - rgba(184, 46, 229, 1) |
- --theme-highlight-pink | -
| Red | -
-
- #eb5368 - rgba(235, 83, 104, 1) |
-
-
- #ed2655 - rgba(237, 38, 85, 1) |
- --theme-highlight-red | -
| Orange | -
-
- #d96629 - rgba(217, 102, 41, 1) |
-
-
- #f13c00 - rgba(241, 60, 0, 1) |
- --theme-highlight-orange | -
| Light Orange | -
-
- #d99b28 - rgba(217, 155, 40, 1) |
-
-
- #d97e00 - rgba(217, 126, 0, 1) |
- --theme-highlight-lightorange | -
| Green | -
-
- #70bf53 - rgba(112, 191, 83, 1) |
-
-
- #2cbb0f - rgba(44, 187, 15, 1) |
- --theme-highlight-green | -
| Blue-Grey | -
-
- #5e88b0 - rgba(94, 136, 176, 1) |
-
-
- #0072ab - rgba(0, 114, 171, 1) |
- --theme-highlight-bluegrey | -
| Yellow | -
-
- #ffffb4 - rgba(255, 255, 180, 1) |
-
-
- #ffffb4 - rgba(255, 255, 180, 1) |
- --theme-highlight-yellow | -
Not yet finalized. See bug 916766 for progress.
-The DOM Property Viewer lets you inspect the properties of the {{Glossary("DOM")}} as an expandable tree structure, starting from the {{domxref("window")}} object of the current page or the selected iframe.
- -
The DOM Property Viewer is not enabled by default. - To enable it, open the developer tool settings and check the "DOM" box under "Default Firefox Developer Tools".
- -Once enabled, you can open the DOM Property Viewer by selecting "DOM" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS).
- -
The Toolbox will appear at the bottom of the browser window, with the DOM Property Viewer activated. - It's just called "DOM" in the Toolbox.
- -The different properties of the DOM are displayed as an expandable tree. The left-hand side shows the property's name, and the right-hand side shows its value. Up to three properties of an object and items of an array are displayed. If a property has more elements than this, you'll see a "more..." annotation, and will need to click the property to see all elements. A lock icon indicates that a property is not writable.
- -If the DOM changes you can hit the Refresh button to update the display:
- -
There is a search box within the toolbar:
- -
This filters the list to show only items which match the search term. Items match the search term if their name contains the search term. Matching is case-sensitive.
diff --git a/files/en-us/tools/eyedropper/eyedropper.png b/files/en-us/tools/eyedropper/eyedropper.png deleted file mode 100644 index cad092141b21e00..000000000000000 Binary files a/files/en-us/tools/eyedropper/eyedropper.png and /dev/null differ diff --git a/files/en-us/tools/eyedropper/index.html b/files/en-us/tools/eyedropper/index.html deleted file mode 100644 index 862bb44fdd0ebd1..000000000000000 --- a/files/en-us/tools/eyedropper/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Eyedropper -slug: Tools/Eyedropper -tags: - - Firefox - - Tools - - Web Development:Tools ---- -The Eyedropper tool enables you to select colors in the current page. It works like a magnifying glass over the page, enabling you to select with pixel precision. Underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in Settings > Inspector > Default color unit:
- -
You can use it in one of two ways:
Open the Eyedropper in one of these two ways:
- -As you move the mouse around the page you'll see the current color value in the Eyedropper change. Clicking copies the current color value to the clipboard.
- -{{EmbedYouTube("xf2uk6UyRB8")}}
- -Color values appearing in the Inspector's Rules view have color samples next to them: clicking the sample shows a color picker popup. From Firefox 31, the popup contains an eyedropper icon: click this icon to activate the Eyedropper.
- -Now, when you click the Eyedropper, the color in the Rules view is set to the color you selected.
- -{{EmbedYouTube("0Zx1TN21QOo")}}
- -See All keyboard shortcuts > Eyedropper.
diff --git a/files/en-us/tools/iframe_button.png b/files/en-us/tools/iframe_button.png deleted file mode 100644 index 43f497e136254c9..000000000000000 Binary files a/files/en-us/tools/iframe_button.png and /dev/null differ diff --git a/files/en-us/tools/index.html b/files/en-us/tools/index.html deleted file mode 100644 index 0e38266e5f32ae1..000000000000000 --- a/files/en-us/tools/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Firefox Developer Tools -slug: Tools -tags: - - DevTools - - Developing Mozilla - - Guide - - Tools - - Web Development - - Web Development:Tools - - l10n:priority ---- -Firefox Developer Tools is a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
- -This section contains detailed guides to all of the tools as well as information on how to debug Firefox for Android, how to extend DevTools, and how to debug the browser as a whole.
- -If you have any feedback on DevTools or want to contribute to the project, you can join the DevTools community.
- -Note: If you are just getting started with web development and using developer tools, our learning docs will help you — see Getting started with the Web and What are browser developer tools? for good starting points.
-You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Web Developer Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.
- -The ellipsis menu on the right-hand side of Developer Tools contains several commands that let you perform actions or change tool settings.
- -
 |
- This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work. | -
 |
- Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.) | -
 |
- Toggles Responsive Design Mode. | -
 |
- Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community. | -
 |
- Closes the Developer Tools | -
View and edit page content and layout. Visualize many aspects of the page including the box model, animations, and grid layouts.
-
See messages logged by a web page and interact with the page using JavaScript.
-
Stop, step through, and examine the JavaScript running on a page.
-
See the network requests made when a page is loaded.
-
Analyze your site's general responsiveness, JavaScript, and layout performance.
-
See how your website or app will look and behave on different devices and network types.
-
Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.
-
Provides tools for inspecting and debugging modern web apps (also known as Progressive Web Apps). This includes inspection of service workers and web app manifests.
-
Note: The collective term for the UI inside which the DevTools all live is the Toolbox.
-These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.
- -
For the latest developer tools and features, try Firefox Developer Edition.
- - -If you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.
- -By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.
- -For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.
- -Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.
- -If you want to help improve the developer tools, these resources will get you started.
- -The JSON viewer is new in Firefox 44.
- -Before Firefox 53, the JSON viewer is enabled by default only in Firefox Developer Edition and Firefox Nightly. To enable this feature in other release channels, set the devtools.jsonview.enabled preference to true.
From Firefox 53 onwards, the JSON viewer is also enabled by default in Beta and the normal release version of Firefox.
-Firefox includes a JSON viewer. If you open a JSON file in the browser, or view a remote URL with the Content-Type set to application/json, it is parsed and given syntax highlighting. Arrays and objects are shown collapsed, and you can expand them using the "+" icons.
- -{{EmbedYouTube("ktFcevMwYXw")}}
- -The JSON viewer provides a search box that you can use to filter the JSON.
- -You can also view the raw JSON and pretty-print it.
- -Finally, if the document was the result of a network request, the viewer displays the request and response headers.
diff --git a/files/en-us/tools/just-application-panel.png b/files/en-us/tools/just-application-panel.png deleted file mode 100644 index 12fadfb81f80677..000000000000000 Binary files a/files/en-us/tools/just-application-panel.png and /dev/null differ diff --git a/files/en-us/tools/keyboard_shortcuts/index.html b/files/en-us/tools/keyboard_shortcuts/index.html deleted file mode 100644 index ba196a12108a35b..000000000000000 --- a/files/en-us/tools/keyboard_shortcuts/index.html +++ /dev/null @@ -1,1123 +0,0 @@ ---- -title: All keyboard shortcuts -slug: Tools/Keyboard_shortcuts -tags: - - Tools - - l10n:priority ---- -This page lists all keyboard shortcuts used by the developer tools built into Firefox.
- -The first section lists the shortcut for opening each tool and the second section lists shortcuts that are applicable to the Toolbox itself. After that there's one section for each tool, which lists the shortcuts that you can use within that tool.
- -Because access keys are locale-dependent, they're not documented in this page.
- -These shortcuts work in the main browser window to open the specified tool. The same shortcuts will work to close tools hosted in the Toolbox, if the tool is active. For tools like the Browser Console that open in a new window, you have to close the window to close the tool.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Open Toolbox (with the most recent tool activated) | -Ctrl + Shift + I | -Cmd + Opt + I | -Ctrl + Shift + I | -
| Bring Toolbox to foreground (if the Toolbox is in a separate window and not in foreground) | -Ctrl + Shift + I or F12 | -Cmd + Opt + I or F12 | -Ctrl + Shift + I or F12 | -
| Close Toolbox (if the Toolbox is in a separate window and in foreground) | -Ctrl + Shift + I or F12 | -Cmd + Opt + I or F12 | -Ctrl + Shift + I or F12 | -
| Open Web Console 1 | -Ctrl + Shift + K | -Cmd + Opt + K | -Ctrl + Shift + K | -
| Toggle "Pick an element from the page" (opens the Toolbox and/or focus the Inspector tab) | -Ctrl + Shift + C | -Cmd + Opt + C | -Ctrl + Shift + C | -
| Open Style Editor | -Shift + F7 | -Shift + F7 * | -Shift + F7 | -
| Open Profiler | -Shift + F5 | -Shift + F5 * | -Shift + F5 | -
| Open Network Monitor 2 | -Ctrl + Shift + E | -Cmd + Opt + E | -Ctrl + Shift + E | -
| Toggle Responsive Design Mode | -Ctrl + Shift + M | -Cmd + Opt + M | -Ctrl + Shift + M | -
| Open Browser Console | -Ctrl + Shift + J | -Cmd + Shift + J | -Ctrl + Shift + J | -
| Open Browser Toolbox | -Ctrl + Alt + Shift + I | -Cmd + Opt + Shift + I | -Ctrl + Alt + Shift + I | -
| Open Scratchpad | -Shift + F4 | -Shift + F4 * | -Shift + F4 | -
| Open WebIDE | -Shift + F8 | -Shift + F8 * | -Shift + F8 | -
| Storage Inspector | -Shift + F9 | -Shift + F9 * | -Shift + F9 | -
| Open Debugger 3 | -Ctrl + Shift + Z | -Cmd + Opt + Z | -Ctrl + Shift + Z | -
1. Unlike the other toolbox-hosted tools, this shortcut does not also close the Web Console. Instead, it focuses on the Web Console's command line. To close the Web Console, use the global toolbox shortcut of Ctrl + Shift + I (Cmd + Opt + I on a Mac).
- -2. Before Firefox 55, the keyboard shortcut was Ctrl + Shift + Q (Cmd + Opt + Q on a Mac).
- -3. Starting in Firefox 71. Before Firefox 66, the letter in this shortcut was S.
- -Keyboard shortcuts for the Toolbox.
- -These shortcuts work whenever the toolbox is open, no matter which tool is active.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Cycle through tools left to right | -Ctrl + ] | -Cmd + ] | -Ctrl + ] | -
| Cycle through tools right to left | -Ctrl + [ | -Cmd + [ | -Ctrl + [ | -
| Toggle between active tool and settings. | -F1 | -F1 | -F1 | -
|
- Toggle toolbox between the last 2 docking modes - |
- Ctrl + Shift + D | -Cmd + Shift + D | -Ctrl + Shift + D | -
| Toggle split console (except if console is the currently selected tool) | -Esc | -Esc | -Esc | -
These shortcuts work in all tools that are hosted in the toolbox.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Increase font size | -Ctrl + + | -Cmd + + | -Ctrl + + | -
| Decrease font size | -Ctrl + - | -Cmd + - | -Ctrl + - | -
| Reset font size | -Ctrl + 0 | -Cmd + 0 | -Ctrl + 0 | -
This table lists the default shortcuts for the source editor.
- -In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.
- -To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.
From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.
| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Go to line | -Ctrl + J, Ctrl + G | -Cmd + J, Cmd + G | -Ctrl + J, Ctrl + G | -
| Find in file | -Ctrl + F | -Cmd + F | -Ctrl + F | -
| Select all | -Ctrl + A | -Cmd + A | -Ctrl + A | -
| Cut | -Ctrl + X | -Cmd + X | -Ctrl + X | -
| Copy | -Ctrl + C | -Cmd + C | -Ctrl + C | -
| Paste | -Ctrl + V | -Cmd + V | -Ctrl + V | -
| Undo | -Ctrl + Z | -Cmd + Z | -Ctrl + Z | -
| Redo | -Ctrl + Shift + Z / Ctrl + Y | -Cmd + Shift + Z / Cmd + Y | -Ctrl + Shift + Z / Ctrl + Y | -
| Indent | -Tab | -Tab | -Tab | -
| Unindent | -Shift + Tab | -Shift + Tab | -Shift + Tab | -
| Move line(s) up | -Alt + Up | -Alt + Up | -Alt + Up | -
| Move line(s) down | -Alt + Down | -Alt + Down | -Alt + Down | -
| Comment/uncomment line(s) | -Ctrl + / | -Cmd + / | -Ctrl + / | -
Keyboard shortcuts for the Page inspector.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Inspect Element | -Ctrl + Shift + C | -Cmd + Shift + C | -Ctrl + Shift + C | -
These shortcuts work while the node picker is active.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Select the element under the mouse and cancel picker mode | -Click | -Click | -Click | -
| Select the element under the mouse and stay in picker mode | -Shift+Click | -Shift+Click | -Shift+Click | -
These shortcuts work while you're in the Inspector's HTML pane.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Delete the selected node | -Delete | -Delete | -Delete | -
| Undo delete of a node | -Ctrl + Z | -Cmd + Z | -Ctrl + Z | -
| Redo delete of a node | -Ctrl + Shift + Z / Ctrl + Y | -Cmd + Shift + Z / Cmd + Y | -Ctrl + Shift + Z / Ctrl + Y | -
| Move to next node (expanded nodes only) | -Down arrow | -Down arrow | -Down arrow | -
| Move to previous node | -Up arrow | -Up arrow | -Up arrow | -
| Move to first node in the tree. | -Home | -Home | -Home | -
| Move to last node in the tree. | -End | -End | -End | -
| Expand currently selected node | -Right arrow | -Right arrow | -Right arrow | -
| Collapse currently selected node | -Left arrow | -Left arrow | -Left arrow | -
| (When a node is selected) move inside the node so you can start stepping through attributes. | -Enter | -Return | -Enter | -
| Step forward through the attributes of a node | -Tab | -Tab | -Tab | -
| Step backward through the attributes of a node | -Shift + Tab | -Shift + Tab | -Shift + Tab | -
| (When an attribute is selected) start editing the attribute | -Enter | -Return | -Enter | -
| Hide/show the selected node | -H | -H | -H | -
| Focus on the search box in the HTML pane | -Ctrl + F | -Cmd + F | -Ctrl + F | -
| Edit as HTML | -F2 | -F2 | -F2 | -
| Stop editing HTML | -F2 / Ctrl +Enter | -F2 / Cmd + Return | -F2 / Ctrl + Enter | -
| Copy the selected node's outer HTML | -Ctrl + C | -Cmd + C | -Ctrl + C | -
| Scroll the selected node into view | -S | -S | -S | -
| Find the next match in the markup, when searching is active | -Enter | -Return | -Enter | -
| Find the previous match in the markup, when searching is active | -Shift + Enter | -Shift + Return | -Shift + Enter | -
These shortcuts work when the breadcrumbs bar is focused.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Move to the previous element in the breadcrumbs bar | -Left arrow | -Left arrow | -Left arrow | -
| Move to the next element in the breadcrumbs bar | -Right arrow | -Right arrow | -Right arrow | -
| Focus the HTML pane | -Shift + Tab | -Shift + Tab | -Shift + Tab | -
| Focus the CSS pane | -Tab | -Tab | -Tab | -
These shortcuts work when you're in the Inspector's CSS pane.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Focus on the search box in the CSS pane | -Ctrl + F | -Cmd + F | -Ctrl + F | -
| Clear search box content (only when the search box is focused, and content has been entered) | -Esc | -Esc | -Esc | -
| Step forward through properties and values | -Tab | -Tab | -Tab | -
| Step backward through properties and values | -Shift + Tab | -Shift + Tab | -Shift + Tab | -
| Start editing property or value (Rules view only, when a property or value is selected, but not already being edited) | -Enter or Space | -Return or Space | -Enter or Space | -
| Cycle up and down through auto-complete suggestions (Rules view only, when a property or value is being edited) | -Up arrow , Down arrow | -Up arrow , Down arrow | -Up arrow , Down arrow | -
| Choose current auto-complete suggestion (Rules view only, when a property or value is being edited) | -Enter or Tab | -Return or Tab | -Enter or Tab | -
| Increment selected value by 1 | -Up arrow | -Up arrow | -Up arrow | -
| Decrement selected value by 1 | -Down arrow | -Down arrow | -Down arrow | -
| Increment selected value by 100 | -Shift + Page Up | -Shift + Page Up | -Shift + Page Up | -
| Decrement selected value by 100 | -Shift + Page Down | -Shift + Page Down | -Shift + Page Down | -
| Increment selected value by 10 | -Shift + Up arrow | -Shift + Up arrow | -Shift + Up arrow | -
| Decrement selected value by 10 | -Shift + Down arrow | -Shift + Down arrow | -Shift + Down arrow | -
| Increment selected value by 0.1 | -Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.) | -Alt + Up arrow | -Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.) | -
| Decrement selected value by 0.1 | -Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards). | -Alt + Down arrow | -Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards). | -
| Show/hide more information about current property (Computed view only, when a property is selected) | -Enter or Space | -Return or Space | -Enter or Space | -
| Open MDN reference page about current property (Computed view only, when a property is selected) | -F1 | -F1 | -F1 | -
| Open current CSS file in Style Editor (Computed view only, when more information is shown for a property and a CSS file reference is focused). | -Enter | -Return | -Enter | -
Keyboard shortcuts for the Firefox JavaScript Debugger.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Close current file | -Ctrl + W | -Cmd + W | -Ctrl + W | -
| Search for a string in the current file | -Ctrl + F | -Cmd + F | -Ctrl + F | -
| Search for a string in all files | -Ctrl + Shift + F | -Cmd + Shift + F | -Ctrl + Shift + F | -
| Find next in the current file | -Ctrl + G | -Cmd + G | -Ctrl + G | -
| Search for scripts by name | -Ctrl + P | -Cmd + P | -Ctrl + P | -
| Resume execution when at a breakpoint | -F8 | -F8 1 | -F8 | -
| Step over | -F10 | -F10 1 | -F10 | -
| Step into | -F11 | -F11 1 | -F11 | -
| Step out | -Shift + F11 | -Shift + F11 1 | -Shift + F11 | -
| Toggle breakpoint on the currently selected line | -Ctrl + B | -Cmd + B | -Ctrl + B | -
| Toggle conditional breakpoint on the currently selected line | -Ctrl + Shift + B | -Cmd + Shift + B | -Ctrl + Shift + B | -
1. By default, on some Macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. See this guide to using these keys as standard function keys. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use Shift + Function + F5).
- -Before Firefox 66, the combination Ctrl + Shift + S on Windows and Linux or Cmd + Opt + S on macOS would open/close the Debugger. From Firefox 66 and later, this is no longer the case.
-Keyboard shortcuts for the Web Console.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Open the Web Console | -Ctrl + Shift + K | -Cmd + Opt + K | -Ctrl + Shift + K | -
| Search in the message display pane | -Ctrl + F | -Cmd + F | -Ctrl + F | -
| Open the object inspector pane | -Ctrl + Click | -Ctrl + Click | -Ctrl + Click | -
| Clear the object inspector pane | -Esc | -Esc | -Esc | -
| Focus on the command line | -Ctrl + Shift + K | -Cmd + Opt + K | -Ctrl + Shift + K | -
| Clear output | -
- Ctrl + Shift + L - |
-
- Ctrl + L - -From Firefox 67: - -Cmd + K - |
-
- Ctrl + Shift + L - |
-
These shortcuts apply when you're in the command line interpreter.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Scroll to start of console output (only if the command line is empty) | -Home | -Home | -Home | -
| Scroll to end of console output (only if the command line is empty) | -End | -End | -End | -
| Page up through console output | -Page up | -Page up | -Page up | -
| Page down through console output | -Page down | -Page down | -Page down | -
| Go backward through command history | -Up arrow | -Up arrow | -Up arrow | -
| Go forward through command history | -Down arrow | -Down arrow | -Down arrow | -
| Initiate reverse search through command history/step backwards through matching commands | -F9 | -Ctrl + R | -F9 | -
| Step forward through matching command history (after initiating reverse search) | -Shift + F9 | -Ctrl + S | -Shift + F9 | -
| Move to the beginning of the line | -Home | -Ctrl + A | -Ctrl + A | -
| Move to the end of the line | -End | -Ctrl + E | -Ctrl + E | -
| Execute the current expression | -Enter | -Return | -Enter | -
| Add a new line, for entering multiline expressions | -Shift + Enter | -Shift + Return | -Shift + Enter | -
These shortcuts apply while the autocomplete popup is open:
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Choose the current autocomplete suggestion | -Tab | -Tab | -Tab | -
| Cancel the autocomplete popup | -Esc | -Esc | -Esc | -
| Move to the previous autocomplete suggestion | -Up arrow | -Up arrow | -Up arrow | -
| Move to the next autocomplete suggestion | -Down arrow | -Down arrow | -Down arrow | -
| Page up through autocomplete suggestions | -Page up | -Page up | -Page up | -
| Page down through autocomplete suggestions | -Page down | -Page down | -Page down | -
| Scroll to start of autocomplete suggestions | -Home | -Home | -Home | -
| Scroll to end of autocomplete suggestions | -End | -End | -End | -
Keyboard shortcuts for the Style editor.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Open the Style Editor | -Shift + F7 | -Shift + F7 | -Shift + F7 | -
| Open autocomplete popup | -Ctrl + Space | -Cmd + Space | -Ctrl + Space | -
| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Open the Scratchpad | -Shift + F4 | -Shift + F4 | -Shift + F4 | -
| Run Scratchpad code | -Ctrl + R | -Cmd + R | -Ctrl + R | -
| Run Scratchpad code, display the result in the object inspector | -Ctrl + I | -Cmd + I | -Ctrl + I | -
| Run Scratchpad code, insert the result as a comment | -Ctrl + L | -Cmd + L | -Ctrl + L | -
| Re-evaluate current function | -Ctrl + E | -Cmd + E | -Ctrl + E | -
| Reload the current page, then run Scratchpad code | -Ctrl + Shift + R | -Cmd + Shift + R | -Ctrl + Shift + R | -
| Save the pad | -Ctrl + S | -Cmd + S | -Ctrl + S | -
| Open an existing pad | -Ctrl + O | -Cmd + O | -Ctrl + O | -
| Create a new pad | -Ctrl + N | -Cmd + N | -Ctrl + N | -
| Close Scratchpad | -Ctrl + W | -Cmd + W | -Ctrl + W | -
| Pretty print the code in Scratchpad | -Ctrl + P | -Cmd + P | -Ctrl + P | -
| Show autocomplete suggestions | -Ctrl + Space | -Ctrl + Space | -Ctrl + Space | -
| Show inline documentation | -Ctrl + Shift + Space | -Ctrl + Shift + Space | -Ctrl + Shift + Space | -
Keyboard shortcuts for the Eyedropper.
- -| Command | -Windows | -macOS | -Linux | -
|---|---|---|---|
| Select the current color | -Enter | -Return | -Enter | -
| Dismiss the Eyedropper | -Esc | -Esc | -Esc | -
| Move by 1 pixel | -Arrow keys | -Arrow keys | -Arrow keys | -
| Move by 10 pixels | -Shift + arrow keys | -Shift + arrow keys | -Shift + arrow keys | -
Using the Measuring Tool you can measure a specific area of a web page.
- -This tool is hidden by default. To enable its button:
- -You will now see the Measure a portion of the page button at the top right of the Toolbox, in the same place as the Settings/Options button.
- -
When you want to use the tool, click this button. Now when you mouse over the viewport, you'll see the mouse has a crosshair cursor with its current coordinates displayed beside it.
- -
When you hold the mouse button down and then drag, you'll start to draw a rectangle, with its x, y, and diagonal dimensions displayed. The units are in pixels.
- -When you stop holding the mouse down, the rectangle that was displayed on screen when you released the button will stay there until you click again, allowing you time to take screenshots, note the information down, etc. The rectangle can also be resized later on by clicking one of the handles around it.
- -
Before Firefox 48, this was the default view of a heap snapshot. After Firefox 48, the default view is the Tree map view, and you can switch to the Aggregate view using the dropdown labeled "View:":
- -
The Aggregate view looks something like this:
- -
It presents a breakdown of the heap's contents, as a table. There are three main ways to group the data:
- -You can switch between them using the dropdown menu labeled "Group by:" located at the top of the panel:
- -There's also a box labeled "Filter" at the top-right of the pane. You can use this to filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated.
- -This is the default view, which looks something like this:
- -
It groups the things on the heap into types, including:
- -Function or ArrayHTMLSpanElement or Window"strings"JSScript"js::Shape". These are prefixed with "js::".Each type gets a row in the table, and rows are ordered by the amount of memory occupied by objects of that type. For example, in the screenshot above you can see that JavaScript Objects account for most memory, followed by strings.
For example, in the screenshot above, you can see that:
- -Array objectsNext to the type's name, there's an icon that contains three stars arranged in a triangle:
- -
Click this to see every instance of that type. For example, the entry for Array tells us that there are four Array objects in the snapshot. If we click the star-triangle, we'll see all four Array instances:
For each instance, you can see the retained size and shallow size of that instance. In this case, you can see that the first three arrays have a fairly large shallow size (5% of the total heap usage) and a much larger retained size (26% of the total).
- -On the right-hand side is a pane that just says "Select an item to view its retaining paths". If you select an item, you'll see the Retaining paths panel for that item:
- -
The Call Stack shows you exactly where in your code you are making heap allocations.
- -Because tracing allocations has a runtime cost, it must be explicitly enabled by checking "Record call stacks" before you allocate the memory in the snapshot.
- -You'll then see a list of all the functions that allocated objects, ordered by the size of the allocations they made:
- -
-
- The structure of this view is very much like the structure of the Call Tree, only it shows allocations rather than processor samples. So, for example, the first entry says that:
We can use the disclosure triangle to drill down the call tree, to find the exact place your code made those allocations.
- -It's easier to explain this with reference to a simple example. For this we'll use the DOM allocation example. This page runs a script that creates a large number of DOM nodes (200 HTMLDivElement objects and 4000 HTMLSpanElement objects).
Let's get an allocation trace:
- -{{EmbedYouTube("DyLulu9eoKY")}}
- -You should see something like this:
- -
This is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial createToolbars() call).
We can use the disclosure arrow to expand the tree to find out exactly where we're allocating memory:
- -
This is where the "Bytes" and "Count" columns are useful: they show allocation size and number of allocations at that exact point.
- -So in the example above, we can see that we made 4002 allocations, accounting for 89% of the total heap, in createToolbarButton(), at alloc.js line 9, position 23: that is, the exact point where we create the {{HTMLElement("span")}} elements.
The file name and line number is a link: if we click it, we go directly to that line in the debugger:
- -{{EmbedYouTube("zlnJcr1IFyY")}}
- -The Call Stack view is top-down: it shows allocations that happen at that point or points deeper in the call tree. So it's good for getting an overview of where your program is memory-hungry. However, this view means you have to drill a long way down to find the exact place where the allocations are happening.
- -The "Inverted Call Stack" view helps with that. It gives you the bottom-up view of the program showing the exact places where allocations are happening, ranked by the size of allocation at each place. The disclosure arrow then walks you back up the call tree towards the top level.
- -Let's see what the example looks like when we select "Inverted Call Stack":
- -
Now at the top we can immediately see the createToolbarButton() call accounting for 89% of the heap usage in our page.
In the example above you'll note that 7% of the heap is marked "(no stack available)". This is because not all heap usage results from your JavaScript.
- -For example:
- -Many real-world pages will have a much higher "(no stack available)" share than 7%.
diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-aggregate-view.png b/files/en-us/tools/memory/aggregate_view/memory-tool-aggregate-view.png deleted file mode 100644 index 653710979f0be82..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-aggregate-view.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-call-stack-expanded.png b/files/en-us/tools/memory/aggregate_view/memory-tool-call-stack-expanded.png deleted file mode 100644 index fe2364da5850507..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-call-stack-expanded.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-call-stack.png b/files/en-us/tools/memory/aggregate_view/memory-tool-call-stack.png deleted file mode 100644 index 52a96015da2c021..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-call-stack.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-in-group-icon.png b/files/en-us/tools/memory/aggregate_view/memory-tool-in-group-icon.png deleted file mode 100644 index 6354a3d3779e752..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-in-group-icon.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-in-group-retaining-paths.png b/files/en-us/tools/memory/aggregate_view/memory-tool-in-group-retaining-paths.png deleted file mode 100644 index 191115f041902a3..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-in-group-retaining-paths.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-in-group.png b/files/en-us/tools/memory/aggregate_view/memory-tool-in-group.png deleted file mode 100644 index 88aac55e9e6f285..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-in-group.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-inverted-call-stack.png b/files/en-us/tools/memory/aggregate_view/memory-tool-inverted-call-stack.png deleted file mode 100644 index 5a951c2e8c255ee..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-inverted-call-stack.png and /dev/null differ diff --git a/files/en-us/tools/memory/aggregate_view/memory-tool-switch-view.png b/files/en-us/tools/memory/aggregate_view/memory-tool-switch-view.png deleted file mode 100644 index bb3cb0cdb3827c0..000000000000000 Binary files a/files/en-us/tools/memory/aggregate_view/memory-tool-switch-view.png and /dev/null differ diff --git a/files/en-us/tools/memory/basic_operations/index.html b/files/en-us/tools/memory/basic_operations/index.html deleted file mode 100644 index e2ae5060d40c6e7..000000000000000 --- a/files/en-us/tools/memory/basic_operations/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Basic operations -slug: Tools/Memory/Basic_operations ---- -To open the Memory tool, click the "Memory" tab in the developer tools. The Memory tool is enabled by default. It's availability is controlled by the "Memory" option under "Default Firefox Developer Tools" in the developer tool settings.
- -To take a snapshot of the heap, click the "Take snapshot" button, or the camera icon on the left:
- -
The snapshot will occupy the large pane on the right-hand side. On the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot:
- -
To remove a snapshot, click the "X" icon:
- -
If you close the Memory tool, all unsaved snapshots will be discarded. To save a snapshot click "Save":
- -
You'll be prompted for a name and location, and the file will be saved with an .fxsnapshot extension.
To load a snapshot from an existing .fxsnapshot file, click the import button, which looks like a rectangle with an arrow rising from it (before Firefox 49, this button was labeled with the text "Import..."):
You'll be prompted to find a snapshot file on disk.
- -Starting in Firefox 45, you can diff two heap snapshots. The diff shows you where memory was allocated or freed between the two snapshots.
- -To create a diff, click the button that looks like a Venn diagram next to the camera icon (before Firefox 47, this looked like a "+/-" icon):
- -
You'll be prompted to select the snapshot to use as a baseline, then the snapshot to compare. The tool then shows you the differences between the two snapshots:
- -{{EmbedYouTube("3Ow-mdK6b2M")}}
- -When you're looking at a comparison, you can't use the Dominators view or the Tree Map view.
-The Memory tool can tell you exactly where in your code you are allocating memory. However, recording this information has a run-time cost, so you must ask the tool to record memory calls before the memory is allocated, if you want to see memory call sites in the snapshot. To do this, check "Record call stacks" (before Firefox 49 this was labeled "Record allocation stacks"):
- -
This article describes a very simple web page that we'll use to illustrate some features of the Memory tool.
- -You can try out the site at https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html.
- -It just contains a script that creates a large number of DOM nodes:
- -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");
- // stop Spidermonkey from sharing instances
- toolbarButton[getRandomInt(0,5000)] = "foo";
- return toolbarButton;
-}
-
-function createToolbar() {
- var toolbar = document.createElement("div");
- // stop Spidermonkey from sharing 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();
-
-A simple pseudocode representation of how this code operates looks like this:
- -createToolbars() - -> createToolbar() // called 200 times, creates 1 DIV element each time - -> createToolbarButton() // called 20 times per toolbar, creates 1 SPAN element each time- -
In total, then, it creates 200 HTMLDivElement objects, and 4000 HTMLSpanElement objects.
This article provides an introduction to the concepts of Reachability, Shallow versus Retained size, and Dominators, as they apply in garbage-collected languages like JavaScript.
- -These concepts matter in memory analysis, because often an object may itself be small, but may hold references to other much larger objects, and by doing this will prevent the garbage collector from freeing that extra memory.
- -You can see the dominators in a page using the Dominators view in the Memory tool.
-With a garbage-collected language, like JavaScript, the programmer doesn't generally have to worry about deallocating memory. They can just create and use objects, and when the objects are no longer needed, the runtime takes care of cleaning up, and frees the memory the objects occupied.
- -In modern JavaScript implementations, the runtime decides whether an object is no longer needed based on reachability. In this system the heap is represented as one or more graphs. Each node in the graph represents an object, and each connection between nodes (edge) represents a reference from one object to another. The graph starts at a root node, indicated in these diagrams with "R".
- -
During garbage collection, the runtime traverses the graph, starting at the root, and marks every object it finds. Any objects it doesn't find are unreachable, and can be deallocated.
- -So when an object becomes unreachable (for example, because it is only referenced by a single local variable which goes out of scope) then any objects it references also become unreachable, as long as no other objects reference them:
- -
Conversely, this means that objects are kept alive as long as some other reachable object is holding a reference to them.
- -This gives rise to a distinction between two ways to look at the size of an object:
- -Often, objects will have a small shallow size but a much larger retained size, through the references they contain to other objects. Retained size is an important concept in analyzing memory usage, because it answers the question "if this object ceases to exist, what's the total amount of memory freed?".
- -A related concept is that of the dominator. Node B is said to dominate node A if every path from the root to A passes through B:
- -
If any of node A's dominators are freed, then node A itself becomes eligible for garbage collection.
- - - -
One slight subtlety here is that if an object A is referenced by two other unrelated objects B and C, then neither object is its dominator, because you could remove either B or C from the graph, and A would still be retained by its other referrer. Instead, the immediate dominator of A would be its first common ancestor:
- 
The Dominators view is new in Firefox 46.
-Starting in Firefox 46, the Memory tool includes a new view called the Dominators view. This is useful for understanding the "retained size" of objects allocated by your site: that is, the size of the objects themselves plus the size of the objects that they keep alive through references.
- -If you already know what shallow size, retained size, and dominators are, skip to the Dominators UI section. Otherwise, you might want to review the article on Dominators concepts.
- -To see the Dominators view for a snapshot, select "Dominators" in the "View" drop-down list. It looks something like this:
- -
The Dominators view consists of two panels:
- -
The Dominators Tree tells you which objects in the snapshot are retaining the most memory.
- -In the main part of the UI, the first row is labeled "GC Roots". Immediately underneath that is an entry for:
- -Each entry displays:
- -Entries are ordered by the amount of memory that they retain. For example:
- -
In this screenshot we can see five entries under "GC Roots". The first two are Call and Window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. You can also see that these objects have a relatively tiny "Shallow Size", so almost all of the retained size is in the objects that they dominate.
- -Immediately under each GC root, you'll see all the nodes for which this root is the immediate dominator. These nodes are also ordered by their retained size.
- -For example, if we click on the first Window object:
- -
We can see that this Window dominates a CSS2Properties object, whose retained size is 2% of the total snapshot size. Again the shallow size is very small: almost all of its retained size is in the nodes that it dominates. By clicking on the disclosure arrow next to the Function, we can see those nodes.
- -In this way you can quickly get a sense of which objects retain the most memory in the snapshot.
- -You can use Alt + click to expand the whole graph under a node.
- -In the toolbar at the top of the tool is a dropdown called "Label by":
- -
By default, this is set to "Type". However, you can set it instead to "Call Stack" to see exactly where in your code the objects are being allocated.
- -This option is called "Allocation Stack" in Firefox 46.
-To enable this, you must check the box labeled "Record call stacks" before you run the code that allocates the objects. Then take a snapshot, then select "Call Stack" in the "Label by" drop-down.
- -Now the node's name will contain the name of the function that allocated it, and the file, line number and character position of the exact spot where the function allocated it. Clicking the file name will take you to that spot in the Debugger.
- -{{EmbedYouTube("qTF5wCSD124")}}
- -Sometimes you'll see "(no stack available)" here. In particular, allocation stacks are currently only recorded for objects, not for arrays, strings, or internal structures.
-The Retaining Paths panel shows you, for a given node, the 5 shortest paths back from this node to a GC root. This enables you to see all the nodes that are keeping the given node from being garbage-collected. If you suspect that an object is being leaked, this will show you exactly which objects are holding a reference to it.
- -To see the retaining paths for a node, you have to select the node in the Dominators Tree panel:
- -
Here, we've selected an object, and can see a single path back to a GC root.
- -The Window GC root holds a reference to an HTMLDivElement object, and that holds a reference to an Object, and so on. If you look in the Dominators Tree panel, you can trace the same path there. If either of these references were removed, the items below them could be garbage-collected.
Each connection in the graph is labeled with the variable name for the referenced object.
- -Sometimes there's more than one retaining path back from a node:
- -
Here there are three paths back from the DocumentPrototype node to a GC root. If one were removed, then the DocumentPrototype would still not be garbage-collected, because it's still retained by the other two path.
Let's see how some simple code is reflected in the Dominators view.
- -We'll use the monster allocation example, which creates three arrays, each containing 5000 monsters, each monster having a randomly-generated name.
- -To see what it looks like in the Dominators view:
- -{{EmbedYouTube("HiWnfMoMs2c")}}
- -You'll see the three arrays as the top three GC roots, each retaining about 23% of the total memory usage:
- -
If you expand an array, you'll see the objects (monsters) it contains. Each monster has a relatively small shallow size of 160 bytes. This includes the integer eye- and tentacle-counts. Each monster has a bigger retained size, which is accounted for by the string used for the monster's name:
- -
All this maps closely to the memory graph we were expecting to see. One thing you might be wondering, though, is: where's the top-level object that retains all three arrays? If we look at the Retaining Paths panel for one of the arrays, we'll see it:
- -
Here we can see the retaining object, and even that this particular array is the array of fierce monsters. But the array is also rooted directly, so if the object were to stop referencing the array, it would still not be eligible for garbage collection.
This means that the object does not dominate the array, and is therefore not shown in the Dominators Tree view. See the relevant section of the Dominators concepts article.
- -Finally, you can switch to the Call Stack view, see where the objects are being allocated, and jump to that point in the Debugger:
- -{{EmbedYouTube("qTF5wCSD124")}}
diff --git a/files/en-us/tools/memory/index.html b/files/en-us/tools/memory/index.html deleted file mode 100644 index 777e22c4a862853..000000000000000 --- a/files/en-us/tools/memory/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Memory -slug: Tools/Memory -tags: - - DevTools - - Firefox - - Mozilla - - Tools ---- -The Memory tool lets you take a snapshot of the current tab's memory heap. It then provides a number of views of the heap that can show you which objects account for memory usage and exactly where in your code you are allocating memory.
- -{{EmbedYouTube("DJLoq5E5ww0")}}
- -The Tree map view is new in Firefox 48, and the Dominators view is new in Firefox 46.
-Once you've taken a snapshot, there are three main views the Memory tool provides:
- -If you've opted to record allocation stacks for the snapshot, the Aggregate and Dominators views can show you exactly where in your code allocations are happening.
- -Examples used in the Memory tool documentation.
- -This article describes a very simple web page that we'll use to illustrate some features of the Memory tool.
- -You can try the site at https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. Here's the code:
- -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 < 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 < MONSTER_COUNT; i++) {
- monsters.friendly.push(new Monster());
- }
-
- for (var i = 0; i < MONSTER_COUNT; i++) {
- monsters.fierce.push(new Monster());
- }
-
- for (var i = 0; i < MONSTER_COUNT; i++) {
- monsters.undecided.push(new Monster());
- }
-
- console.log(monsters);
-}
-
-var makeMonstersButton = document.getElementById("make-monsters");
-makeMonstersButton.addEventListener("click", makeMonsters);
-
-The page contains a button: when you push the button, the code creates some monsters. Specifically:
- -So the structure of the memory allocated on the JavaScript heap is an object containing three arrays, each containing 5000 objects (monsters), each object containing a string and two integers:
- -
The Tree map view is new in Firefox 48.
-The Tree map view provides a visual representation of the snapshot, that helps you quickly get an idea of which objects are using the most memory.
- -A treemap displays "hierarchical (tree-structured) data as a set of nested rectangles". The size of the rectangles corresponds to some quantitative aspect of the data.
- -For the treemaps shown in the Memory tool, things on the heap are divided at the top level into four categories:
- -Function, Object, or Array, and DOM types like Window and HTMLDivElement.Each category is represented with a rectangle, and the size of the rectangle corresponds to the proportion of the heap occupied by items in that category. This means you can quickly get an idea of roughly what sorts of things allocated by your site are using the most memory.
- -Within top-level categories:
- -Here are some example snapshots, as they appear in the Tree map view:
- -
This treemap is from the DOM allocation example, which runs a script that creates a large number of DOM nodes (200 HTMLDivElement objects and 4000 HTMLSpanElement objects). You can see how almost all the heap usage is from the HTMLSpanElement objects that it creates.
This treemap is from the monster allocation example, which creates three arrays, each containing 5000 monsters, each monster having a randomly-generated name. You can see that most of the heap is occupied by the strings used for the monsters' names, and the objects used to contain the monsters' other attributes.
- -
This treemap is from http://www.bbc.com/, and is probably more representative of real life than the examples. You can see the much larger proportion of the heap occupied by scripts, that are loaded from a large number of origins.
diff --git a/files/en-us/tools/memory/tree_map_view/treemap-bbc.png b/files/en-us/tools/memory/tree_map_view/treemap-bbc.png deleted file mode 100644 index 55552b8382a63cf..000000000000000 Binary files a/files/en-us/tools/memory/tree_map_view/treemap-bbc.png and /dev/null differ diff --git a/files/en-us/tools/memory/tree_map_view/treemap-domnodes.png b/files/en-us/tools/memory/tree_map_view/treemap-domnodes.png deleted file mode 100644 index 1192e390dabf56e..000000000000000 Binary files a/files/en-us/tools/memory/tree_map_view/treemap-domnodes.png and /dev/null differ diff --git a/files/en-us/tools/memory/tree_map_view/treemap-monsters.png b/files/en-us/tools/memory/tree_map_view/treemap-monsters.png deleted file mode 100644 index 513adab9239c7a9..000000000000000 Binary files a/files/en-us/tools/memory/tree_map_view/treemap-monsters.png and /dev/null differ diff --git a/files/en-us/tools/menu_button.png b/files/en-us/tools/menu_button.png deleted file mode 100644 index d8a58075dca5bcf..000000000000000 Binary files a/files/en-us/tools/menu_button.png and /dev/null differ diff --git a/files/en-us/tools/migrating_from_firebug/index.html b/files/en-us/tools/migrating_from_firebug/index.html deleted file mode 100644 index afc16a7812428b7..000000000000000 --- a/files/en-us/tools/migrating_from_firebug/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Migrating from Firebug -slug: Tools/Migrating_from_Firebug -tags: - - Firebug - - Migration ---- -When migrating from Firebug to the Firefox Developer Tools, you may wonder where the features you loved in Firebug are available in the Developer Tools. The following list aims to help Firebug users to find their way into the Developer Tools.
- -
For the latest developer tools and features, try Firefox Developer Edition.
- - -Firebug's activation is URL based respecting the same origin policy. That means that when you open a page on the same origin in a different tab, Firebug gets opened automatically. And when you open a page of a different origin in the same tab, it closes automatically. The DevTools' activation on the other hand is tab based. That means, that when you open the DevTools in a tab, they stay open even when you switch between different websites. When you switch to another tab, though, they're closed.
- -Firebug can be opened by pressing F12. To open it to inspect an element it is possible to press Ctrl+Shift+C / Cmd+Opt+C. The DevTools share the same shortcuts, but also provide shortcuts for the different panels. E.g. the Network Monitor can be opened via Ctrl+Shift+Q / Cmd+Opt+Q, the Web Console via Ctrl+Shift+K / Cmd+Opt+K and the Debugger via Ctrl+Shift+S / Cmd+Opt+S.
- -The Web Console is the equivalent of Firebug's Console panel. It shows log information associated with a web page and allows you to execute JavaScript expressions via its command line. The display between both is somewhat different. This may be changed in {{bug(1269730)}}.
- -Firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the toolbar. The Developer Tools console offers similar functionality via the filter buttons inside its toolbar — centralized at one place.
- -The Command Line API in Firebug provides some special functions for your convenience. The Developer Tools command line has some functions in common, but also has some other functions and misses others.
- -To log things to the console from within the web page Firebug makes a Console API available within the page. The Developer Tools share the same API, so your console.* statements will continue to work.
In Firebug you can click the Persist button within the toolbar to keep the logged messages between page navigations and reloads. In the DevTools this option is called Enable persistent logs and is available within the Toolbox Options panel.
- -Firebug extensions like FirePHP allow to log server-side messages to the Firebug console. This functionality is already integrated into the DevTools using the ChromeLogger protocol and doesn't require any extensions to be installed.
- -The command history available through a button in Firebug's command line, is available by pressing ↑/↓ within the DevTools command line.
- -By clicking on an object logged within the console you can inspect the object's properties and methods within the DOM panel. In the Firefox DevTools you can also inspect the objects. The difference is that they show the properties and methods within a side panel inside the Web Console.
- -The Console panel in Firebug allows to log {{Glossary("AJAX")}} requests (aka {{Glossary("XMLHttpRequest", "XMLHttpRequests")}}). This option is also available within the DevTools Web Console via the Net > XHR. Furthermore, the Web Console even allows to display all other network requests via Net > Log.
- -To view JSON and XML responses of {{Glossary("AJAX")}} requests, Firebug has special tabs when expanding the request within the Console panel. The DevTools Web Console shows those structures directly under the "Response" tab.
- -Firebug's console has a multi-line command line called Command Editor. The DevTools do not have a side panel like the Command Editor (which is requested in {{bug(1133849)}}), but therefore has a separate tool called Scratchpad, which can be added as panel to the toolbox or opened in a separate window via Firefox menu > Developer > Scratchpad or Shift + F4. Also, the normal command line smartly enters a line break when it recognizes an unfinished command like document. and you hit Enter. You can also manually enter a line break by pressing Shift + Enter.
There is a Preview tab when a network request logged to the console is expanded in Firebug. The Web Console displays a preview within the Response tab. It is currently missing the preview for HTML, XML and SVG, though, which is tracked in {{bug(1247392)}} and {{bug(1262796)}}, but when you click on the URL of the request you switch to the Network Monitor, which has a Preview tab.
- -Firebug has an HTML panel, which allows to edit HTML/XML/SVG and the CSS related to it. Within the DevTools this functionality is served by the Page Inspector.
- -Within the Page Inspector the tag attributes and the contents can be edited inline just like in Firebug. Beyond that it allows to edit the tag names inline.
- -You can also edit the HTML directly. In Firebug you do this by right-clicking a node and clicking Edit HTML... in the context menu. In the DevTools this option is also available via the context menu. There the option is called Edit As HTML. Only the live preview of changes is currently missing, which is tracked in {{bug(1067318)}} and {{bug(815464)}}.
- -Firebug's HTML panel allows to copy the inner and outer HTML of an element as well as the CSS and XPath to it via the context menu of an element. The Page Inspector provides the same functionality except copying XPaths. This is covered by {{bug(987877)}}.
- -Both tools allow to view and edit the CSS rules related to the element selected within the node view in a similar way. Firebug has a Style side panel for this, the DevTools have a Rules side panel.
- -In Firebug you add new rules by right-clicking and choosing Add Rule... from the context menu. The DevTools also have a context menu option for that named Add New Rule and additionally have a + button within the Rules panel's toolbar to create new rules.
- -To edit element styles, i.e. the CSS properties of the {{htmlattrxref("style")}} attribute of an element, in Firebug you have to right-click into the Style side panel and choose Edit Element Style... from the context menu. The DevTools display an element {} rule for this purpose, which requires a single click into it to start editing the properties.
- -As in Firebug, the Rules view provides an auto-completion for the CSS property names and their values. A few property values are not auto-completed yet, which is tracked in {{bug(1337918)}}.
- -Firebug's Style side panel as well as the DevTools' Rules side panel provide options within their context menus to copy the CSS rule or the style declarations. The DevTools additionally provide an option to copy the selector of a rule and copy disabled property declarations as commented out. They are missing the option to copy the whole style declaration, though this can be achieved by selecting them within the panel and copying the selection by pressing Ctrl+C or via the context menu.
- -The Rules side panel of the DevTools is smarter when it comes to pasting CSS into it. You can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled.
- -Firebug lets you toggle the CSS pseudo-classes {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}} for an element via the options menu of the Style side panel. In the DevTools there are two ways to do the same. The first one is to toggle them via the pseudo-class panel within the Rules side panel. The second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu.
- -CSS shorthand properties can be split into their related longhand properties by setting the option Expand Shorthand Properties within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them.
- -The Style side panel in Firebug has an option to display only the properties of a CSS rule that are applied to the selected element and hide all overwritten styles. There is no such feature in the Rules side panel of the DevTools, but it is requested in {{bug(1335327)}}.
- -In Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. 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.
- -The computed values of CSS properties are displayed within the DevTools' Computed side panel like within Firebug's Computed side panel. The difference is that in the DevTools the properties are always listed alphabetically and not grouped (see {{bug(977128)}}) and there is no option to hide the Mozilla specific styles, therefore there is an input field allowing to filter the properties.
- -Events assigned to an element are displayed in the Events side panel in Firebug. In the DevTools they are shown when clicking the small 'ev' icon besides an element within the node view. Both tools allow to display wrapped event listeners (e.g. listeners wrapped in jQuery functions). To improve the UI of the DevTools, there is also a request to add an Events side panel to them like the one in Firebug (see {{bug(1226640)}}).
- -In Firebug you can break on DOM mutations, that means that when an element is changed, the script execution is stopped at the related line within the JavaScript file, which caused the change. This feature can globally be enabled via the Break On Mutate button, or individually for each element and for different types of changes like attribute changes, content changes or element removal. Unfortunately, the DevTools do not have this feature yet (see {{bug(1004678)}}). To stop the script execution there, you need to set a breakpoint on the line with the modification within the Debugger panel.
- -Firebug allows to search for elements within the HTML panel via CSS selectors or XPaths. Also the DevTools' Inspector panel allows to search for CSS selectors. It even displays a list with matching IDs or classes. Searching by XPaths is not supported though (see {{bug(963933)}}.
- -What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.
- -Firebug has a Script Location Menu 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, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.
In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. 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 Pause on Exceptions within the Debugger panel options.
- -Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.
- -When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.
- -The Watch side panel 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 Variables side panel, 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 window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.
The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel 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.
- -The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.
- -Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, 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.
- -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)}}.
- -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)}}.
- -Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree 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.
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.
- -What comes nearest to Firebug's profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.
- -Note: 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.
-Like in Firebug's profiler output the Call Tree view 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 Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.
- -To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.
- -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.
- -In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn't provide information about the cached data yet (see {{bug(859051)}}), but provides a Security tab in addition to Firebug's information and a Timings tab showing detailed information about the network timings.
- -Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a Timings side panel when you select a request.
- -The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.
- -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.
- -Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. 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 filter by different request properties.
- -The Cookies panel 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 Storage Inspector. 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 IndexedDB databases.
- -All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. 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.
- -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 Secure 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.
- -To edit a cookie in Firebug you have to right-click the cookie and choose Edit 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.
- -Firebug's Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete "<cookie name>". Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From "<domain name>". It currently does not allow to only delete session cookies (see {{bug(1336934)}}).
- -When there are JavaScript errors on a page, the Firebug Start Button shows a badge with their number. The DevTools show the number of errors in the Developer Toolbar.
- -Firebug offers a great variety of commands, which can be executed within its command line. The Developer Toolbar also provides an API with a lot of different commands to control the DevTools and execute different tasks.
- -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 DevTools Discourse Forum.
diff --git a/files/en-us/tools/migrating_from_firebug/logo-developer-quantum.png b/files/en-us/tools/migrating_from_firebug/logo-developer-quantum.png deleted file mode 100644 index 778bc9e2d3ff80b..000000000000000 Binary files a/files/en-us/tools/migrating_from_firebug/logo-developer-quantum.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/hamburger.png b/files/en-us/tools/network_monitor/hamburger.png deleted file mode 100644 index 0a86806250319b1..000000000000000 Binary files a/files/en-us/tools/network_monitor/hamburger.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/index.html b/files/en-us/tools/network_monitor/index.html deleted file mode 100644 index b03c00306b929fb..000000000000000 --- a/files/en-us/tools/network_monitor/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Network Monitor -slug: Tools/Network_Monitor -tags: - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools - - l10n:priority ---- -The Network Monitor shows you all the HTTP requests Firefox makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, and details of each request.
- -There are a few different ways to open the Network Monitor:
- -
), which is in the main toolbar or under the Hamburger menu (), then select "Network".The Network Monitor will appear at the bottom of the browser window. When it first opens, the Network Monitor does not show request information. The just opened tool looks like this:
- -
Either action causes the Network Monitor to begin monitoring network activity. Once the tool is monitoring network requests, the display looks like this:
- -
When it is actively monitoring activity, the Network Monitor records network requests any time the Toolbox is open, even if the Network Monitor itself is not selected. This means you can start debugging a page in, for example, the Web Console, then switch to the Network Monitor to see network activity without having to reload the page.
- -The UI is divided into four main pieces:
- -
The following articles cover different aspects of using the network monitor:
- -{{ToolsSidebar}}
- -Server-sent events allow for an inversion of the traditional client-initiated web request model, with a server sending new data to a web page at any time by pushing messages. From Firefox 82 onwards, you can inspect server-sent events and their message contents using the Network Monitor. This article shows you how.
- -When you are viewing a document that is receiving server-sent events, you can go to the Network Monitor, select the file that is sending the server-sent events, and view the received messages in the Response tab on the right-hand panel.
- -
At the top of the panel there is a trash can icon, which allows you to trash the messages sent so far, and a filter field in which you can enter a text string to filter the displayed messages by.
- -Select one of the messages listed in the Response tab, and you'll see the message contents displayed at the bottom of that same tab.
- -
In the above example, you can see that JSON and raw data representations of the content are shown. For a plain text message, you'd just see a raw data section.
- -The supported data formats are as follows:
- -For each message, you'll see Data and Time columns by default, but you can right-click on the table header to bring up a context menu in which you can toggle columns on and off, and reset it back to its original state.
- -
The available columns are as follows:
- - message or ping).{{ToolsSidebar}}
- -Since Firefox 71, the Network Monitor has had the ability to inspect web socket connections. This article explores what functionality the Web Socket Inspector makes available.
- -When you are inspecting a web app that utilizes a web socket connection, the web socket requests are listed in the list of requests in the Network Monitor along with all other requests.
- -
You can use the WS button to filter the list for just web socket connections. Only requests with the 101 status code (WebSocket Protocol Handshake) are visible, which indicates that the server is switching to a web socket connection.
- -Clicking on a web socket request opens the usual sidebar to reveal additional details. Choose the Response tab to inspect web socket frames sent and received through the selected connection.
- -
The live-updated table shows data for sent (green arrow) and received (red arrow) frames. Each frame expands on click, so you can inspect the formatted data.
- -You can use the pause/resume button in the Network Monitor toolbar to stop intercepting web socket traffic. This allows you to capture only the frames that you are interested in.
- -
To focus on specific messages, frames can be filtered using the filter at the top of the Response panel.
- -
There are also predefined filters, available in the tool bar of the Response pane, grouped into a selection list.
- -
The following filters are available:
- -Ping, Pong, or Close). This filter can be combined with the others, to display, for example, only messages for control frames sent by the browser.In the Response pane, you can choose to show the following information about each frame:
- -The Data and Time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the table header.
- -
Selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the Response pane.
- -
The inspector currently supports the following web socket protocols:
- -The payload based on those protocols is parsed and displayed as an expandable tree for easy inspection, although you can of course still see the raw data (as sent over the wire) as well.
diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/new-web-sockets.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/new-web-sockets.png deleted file mode 100644 index 1d9c8f34509d608..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/new-web-sockets.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws-pause.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/ws-pause.png deleted file mode 100644 index 606c40ebcdc7a28..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws-pause.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_expand_message.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_expand_message.png deleted file mode 100644 index d7dbc3f0b36cb26..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_expand_message.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_filter_menu.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_filter_menu.png deleted file mode 100644 index 8d284f29db46185..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_filter_menu.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_message_columns.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_message_columns.png deleted file mode 100644 index 93972466a69ad80..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_message_columns.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_response_text_filter.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_response_text_filter.png deleted file mode 100644 index f82692f22c5b772..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/ws_response_text_filter.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/inspecting_web_sockets/wsi-filiter.png b/files/en-us/tools/network_monitor/inspecting_web_sockets/wsi-filiter.png deleted file mode 100644 index bef54d39ca012ed..000000000000000 Binary files a/files/en-us/tools/network_monitor/inspecting_web_sockets/wsi-filiter.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/network_monitor.png b/files/en-us/tools/network_monitor/network_monitor.png deleted file mode 100644 index 000bd945f9ac1bf..000000000000000 Binary files a/files/en-us/tools/network_monitor/network_monitor.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/network_monitor_closeup.png b/files/en-us/tools/network_monitor/network_monitor_closeup.png deleted file mode 100644 index 7037eb090aa4bb4..000000000000000 Binary files a/files/en-us/tools/network_monitor/network_monitor_closeup.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/network_monitor_new.png b/files/en-us/tools/network_monitor/network_monitor_new.png deleted file mode 100644 index 24fba42a1297823..000000000000000 Binary files a/files/en-us/tools/network_monitor/network_monitor_new.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/network_performance.png b/files/en-us/tools/network_monitor/network_performance.png deleted file mode 100644 index 44453cac8cea1ab..000000000000000 Binary files a/files/en-us/tools/network_monitor/network_performance.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/performance_analysis/index.html b/files/en-us/tools/network_monitor/performance_analysis/index.html deleted file mode 100644 index bb63c47ac8dcbdd..000000000000000 --- a/files/en-us/tools/network_monitor/performance_analysis/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Performance Analysis -slug: Tools/Network_Monitor/Performance_Analysis -tags: - - 110n:priority - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools ---- -{{ToolsSidebar}}
- -The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.
- -To run the performance analysis tool click the stopwatch icon in the toolbar.
- -(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)
- -The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:
- -
The results for each run are summarized in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.
- -To get back to the Network Monitor's list of network requests click the "Back" button on the left.
- -Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see only that resource type.
- -The following articles cover different aspects of using the network monitor:
- -{{ToolsSidebar}}
- -You can pause and resume the monitoring of network traffic using the pause button.
- -The Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot.
- -The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — 
.
You can see it here in context:
- -
Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.
- -The following articles cover different aspects of using the network monitor:
- - diff --git a/files/en-us/tools/network_monitor/recording/pause-icon.png b/files/en-us/tools/network_monitor/recording/pause-icon.png deleted file mode 100644 index d8aa4d5c77498ec..000000000000000 Binary files a/files/en-us/tools/network_monitor/recording/pause-icon.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/recording/play-pause-network-traffic.png b/files/en-us/tools/network_monitor/recording/play-pause-network-traffic.png deleted file mode 100644 index fa36656e2fe5ccf..000000000000000 Binary files a/files/en-us/tools/network_monitor/recording/play-pause-network-traffic.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/copy-response-headers-fx78.png b/files/en-us/tools/network_monitor/request_details/copy-response-headers-fx78.png deleted file mode 100644 index 8a43bce10af71de..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/copy-response-headers-fx78.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/highlight-samesite-attribute.png b/files/en-us/tools/network_monitor/request_details/highlight-samesite-attribute.png deleted file mode 100644 index 244ffabfa082f21..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/highlight-samesite-attribute.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/html_formatted_response.png b/files/en-us/tools/network_monitor/request_details/html_formatted_response.png deleted file mode 100644 index b40149f02b82a15..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/html_formatted_response.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/html_raw_response.png b/files/en-us/tools/network_monitor/request_details/html_raw_response.png deleted file mode 100644 index 7f9b399b3163316..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/html_raw_response.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/index.html b/files/en-us/tools/network_monitor/request_details/index.html deleted file mode 100644 index 382a9db8ee15bac..000000000000000 --- a/files/en-us/tools/network_monitor/request_details/index.html +++ /dev/null @@ -1,459 +0,0 @@ ---- -title: Network request details -slug: Tools/Network_Monitor/request_details -tags: - - 110n:priority - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools ---- -{{ToolsSidebar}}
- -The request details pane appears when you click on a network request in the request list. This pane provides more detailed information about the request.
- -Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.
- -
The screenshots and descriptions in this section reflect Firefox 78. Earlier versions appeared similarly, but might not include some functionality.
-The tabs at the top of this pane enable you to switch between the following pages:
- -Clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view.
- -The Headers tab has a toolbar, followed by three main sections.
- -This includes:
- -Each section has a disclosure triangle to expand the section to show more information.
- -Using the Headers toolbar, you can:
- -The following information is shown only when the section is expanded:
- -The following information is shown in both the collapsed and the expanded states:
- -Referer header, should be included with requests. (See Referrer-Policy for a description of possible values)The response headers section shows details about the response. For each line in the response headers section, a question mark links to the documentation for that response header, if one is available.
- -A Raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text.
- -Note that the keys in the response header are all in lowercase, while the request headers keys are not. HTTP/2 requires that all headers be lowercase; response headers are shown as they are received from the server. (There may be some exceptions, such as X-Firefox-Spdy, which is added by Firefox.)
You can copy some or all of the response header in JSON format by using the context menu:
- -
If you select Copy, a single key word, value pair is copied. If you select Copy All, the entire header is copied in JSON format, giving you something like this (after running the results through a JSON validator):
{
- "Response headers (1.113 KB)": {
- "headers": [
- {
- "name": "accept-ranges",
- "value": "bytes"
- },
- {
- "name": "age",
- "value": "0"
- },
- {
- "name": "backend-timing",
- "value": "D=74716 t=1560258099074460"
- },
- {
- "name": "cache-control",
- "value": "private, must-revalidate, max-age=0"
- },
- {
- "name": "content-disposition",
- "value": "inline; filename=api-result.js"
- },
- {
- "name": "content-encoding",
- "value": "gzip"
- },
- {
- "name": "content-length",
- "value": "673"
- },
- {
- "name": "content-type",
- "value": "text/javascript; charset=utf-8"
- },
- {
- "name": "date",
- "value": "Tue, 11 Jun 2019 13:01:39 GMT"
- },
- {
- "name": "mediawiki-login-suppressed",
- "value": "true"
- },
- {
- "name": "p3p",
- "value": "CP=\"This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info.\""
- },
- {
- "name": "server",
- "value": "mw1316.eqiad.wmnet"
- },
- {
- "name": "server-timing",
- "value": "cache;desc=\"pass\""
- },
- {
- "name": "strict-transport-security",
- "value": "max-age=106384710; includeSubDomains; preload"
- },
- {
- "name": "vary",
- "value": "Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization,X-Seven"
- },
- {
- "name": "via",
- "value": "1.1 varnish (Varnish/5.1), 1.1 varnish (Varnish/5.1)"
- },
- {
- "name": "x-analytics",
- "value": "ns=-1;special=Badtitle;WMF-Last-Access=11-Jun-2019;WMF-Last-Access-Global=11-Jun-2019;https=1"
- },
- {
- "name": "x-cache",
- "value": "cp1075 pass, cp1075 pass"
- },
- {
- "name": "x-cache-status",
- "value": "pass"
- },
- {
- "name": "x-client-ip",
- "value": "204.210.158.136"
- },
- {
- "name": "x-content-type-options",
- "value": "nosniff"
- },
- {
- "name": "X-Firefox-Spdy",
- "value": "h2"
- },
- {
- "name": "x-frame-options",
- "value": "SAMEORIGIN"
- },
- {
- "name": "x-powered-by",
- "value": "HHVM/3.18.6-dev"
- },
- {
- "name": "x-search-id",
- "value": "esvan0r5bnnwscyk2wq09i1im"
- },
- {
- "name": "x-varnish",
- "value": "766019457, 417549316"
- }
- ]
- },
- "Request headers (665 B)": {
- "headers": [
- {
- "name": "Accept",
- "value": "*/*"
- },
- {
- "name": "Accept-Encoding",
- "value": "gzip, deflate, br"
- },
- {
- "name": "Accept-Language",
- "value": "en-US,en;q=0.5"
- },
- {
- "name": "Connection",
- "value": "keep-alive"
- },
- {
- "name": "Cookie",
- "value": "WMF-Last-Access=11-Jun-2019; WMF-Last-Access-Global=11-Jun-2019; mwPhp7Seed=5c9; GeoIP=US:NY:Port_Jervis:41.38:-74.67:v4"
- },
- {
- "name": "DNT",
- "value": "1"
- },
- {
- "name": "Host",
- "value": "en.wikipedia.org"
- },
- {
- "name": "Referer",
- "value": "https://www.wikipedia.org/"
- },
- {
- "name": "TE",
- "value": "Trailers"
- },
- {
- "name": "User-Agent",
- "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0"
- }
- ]
- }
-}
-
-The Request headers section shows details about the request headers. For each line in the request headers section, a question mark links to the documentation for that request header, if one is available.
- -A Raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text.
- -
This tab lists full details of any cookies sent with the request or response:
- -
As with headers, you can filter the list of cookies displayed. The full list of cookie attributes is shown—see the following screenshot showing Response cookies with further attributes shown.
- -
The samesite attribute has been shown since Firefox 62 ({{bug("1452715")}}).
Request shows the complete request parameters, by default, in a formatted view:
- -
Switch the toggle button to have the raw view presented:
- -
The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:
- -
The toggle button for switching between raw and formatted response view has been implemented ({{bug(1693147)}}). The previous HTML example makes use of the formatted view. When the toggle button is turned on, the raw response view will be enabled:
- -
If the response is JSON, it will be shown as an inspectable object:
- -
In the raw response view the response will be shown as a string:
- -
If the response is an image, the tab displays a preview:
- -
If the response is a web font, the tab also displays a preview:
- -
For network responses that are initiated by a WebSocket connection, the details pane shows any associated messages. For more information, see Inspecting web sockets.
- -If the response is cached (i.e. a 304), the Cache tab displays details about that cached resource.
- -
These details include:
- -If the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.
- -The Timings tab provides information about how long each stage of a network request took, with a more detailed, annotated, view of the timeline bar, so it is easy to locate performance bottlenecks.
- -
This tab can include the following sections.
- -New in Firefox 72, we now show the following timings at the top of the Timings tab, making dependency analysis a lot easier:
- -Note: Future versions will also show this information when entries in the network monitor timeline graph are moused over (see {{bug(1580493)}}).
-The Request Timing section breaks a network request down into the following subset of the stages defined in the HTTP Archive specification:
- -| Name | -Description | -
|---|---|
| Blocked | -
- Time spent in a queue waiting for a network connection. - -The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the |
-
| DNS resolution | -Time taken to resolve a host name. | -
| Connecting | -Time taken to create a TCP connection. | -
| TLS Setup | -Encrypting the data. | -
| Sending | -Time taken to send the HTTP request to the server. | -
| Waiting | -Waiting for a response from the server. | -
| Receiving | -Time taken to read the entire response from the server (or cache). | -
Note: Connections that are secured by TLS will indicate their secure status by displaying HTTPS (Hypertext Transfer Protocol Secure) in the address bar of web browsers, as opposed to just HTTP.
-New in Firefox 71, the Server Timing section lists any information provided in the {{httpheader("Server-Timing")}} header — this is used to surface any backend server timing metrics you've recorded (e.g. database read/write, CPU time, file system access, etc.).
- -The header takes a series of descriptions and durations, which can be anything you like. In the above screenshot for example, the highlighted request's Server-Timing header contains 4 items — data, markup, total, and miss.
If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:
- -
The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:
- -
Stack traces are shown in the Stack Trace tab, for responses that have a stack trace of course.
- -
The following articles cover different aspects of using the network monitor:
- - diff --git a/files/en-us/tools/network_monitor/request_details/json_formatted_request.png b/files/en-us/tools/network_monitor/request_details/json_formatted_request.png deleted file mode 100644 index 88c544bd9a0524b..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/json_formatted_request.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/json_formatted_response.png b/files/en-us/tools/network_monitor/request_details/json_formatted_response.png deleted file mode 100644 index 500d3597f4e5afc..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/json_formatted_response.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/json_raw_request.png b/files/en-us/tools/network_monitor/request_details/json_raw_request.png deleted file mode 100644 index de12a3d284c268e..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/json_raw_request.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/json_raw_response.png b/files/en-us/tools/network_monitor/request_details/json_raw_response.png deleted file mode 100644 index d02e896d0306e4f..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/json_raw_response.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/network-details-fx78.png b/files/en-us/tools/network_monitor/request_details/network-details-fx78.png deleted file mode 100644 index c97f52c3504db7f..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/network-details-fx78.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/network-timings-tab.png b/files/en-us/tools/network_monitor/request_details/network-timings-tab.png deleted file mode 100644 index e5cbfa443273eb7..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/network-timings-tab.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/network_cookies.png b/files/en-us/tools/network_monitor/request_details/network_cookies.png deleted file mode 100644 index c20a83539fbb088..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/network_cookies.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/network_response.png b/files/en-us/tools/network_monitor/request_details/network_response.png deleted file mode 100644 index 080c8c573094d75..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/network_response.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/network_security.png b/files/en-us/tools/network_monitor/request_details/network_security.png deleted file mode 100644 index 5ca146c615ef294..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/network_security.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/network_stack_trace.png b/files/en-us/tools/network_monitor/request_details/network_stack_trace.png deleted file mode 100644 index 29ee5f91b6ea580..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/network_stack_trace.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/params.png b/files/en-us/tools/network_monitor/request_details/params.png deleted file mode 100644 index 9f5ceb0cccb4ac8..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/params.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/request-headers-fx78.png b/files/en-us/tools/network_monitor/request_details/request-headers-fx78.png deleted file mode 100644 index 581c4e820093bd7..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/request-headers-fx78.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/response-headers-fx78.png b/files/en-us/tools/network_monitor/request_details/response-headers-fx78.png deleted file mode 100644 index 9e9f4a114c4bd8b..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/response-headers-fx78.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/response_cache.png b/files/en-us/tools/network_monitor/request_details/response_cache.png deleted file mode 100644 index 6b69e7990c251be..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/response_cache.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/response_font.png b/files/en-us/tools/network_monitor/request_details/response_font.png deleted file mode 100644 index 28aa8500268fb15..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/response_font.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/response_json.png b/files/en-us/tools/network_monitor/request_details/response_json.png deleted file mode 100644 index a3e74c747212069..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/response_json.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/response_pane_image.png b/files/en-us/tools/network_monitor/request_details/response_pane_image.png deleted file mode 100644 index 4dc1e7485f54cd9..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/response_pane_image.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_details/security-warning.png b/files/en-us/tools/network_monitor/request_details/security-warning.png deleted file mode 100644 index 1685395c869756c..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_details/security-warning.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/404_filter.png b/files/en-us/tools/network_monitor/request_list/404_filter.png deleted file mode 100644 index a70e1ce9feb8e7d..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_list/404_filter.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/afterblocking.png b/files/en-us/tools/network_monitor/request_list/afterblocking.png deleted file mode 100644 index 71f62ecced49d7e..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_list/afterblocking.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/beforeblocking.png b/files/en-us/tools/network_monitor/request_list/beforeblocking.png deleted file mode 100644 index 044d4b11bd02b10..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_list/beforeblocking.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/blocked_nw_icon.png b/files/en-us/tools/network_monitor/request_list/blocked_nw_icon.png deleted file mode 100644 index c2ed85b941fdf5a..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_list/blocked_nw_icon.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/har-dropdown.png b/files/en-us/tools/network_monitor/request_list/har-dropdown.png deleted file mode 100644 index 93e309e2479c356..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_list/har-dropdown.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/http.svg b/files/en-us/tools/network_monitor/request_list/http.svg deleted file mode 100644 index 63cc48dfa3ca0c6..000000000000000 --- a/files/en-us/tools/network_monitor/request_list/http.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/files/en-us/tools/network_monitor/request_list/https-failed.svg b/files/en-us/tools/network_monitor/request_list/https-failed.svg deleted file mode 100644 index f45a13353b01054..000000000000000 --- a/files/en-us/tools/network_monitor/request_list/https-failed.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/files/en-us/tools/network_monitor/request_list/https-weak.svg b/files/en-us/tools/network_monitor/request_list/https-weak.svg deleted file mode 100644 index 18d61df357a7550..000000000000000 --- a/files/en-us/tools/network_monitor/request_list/https-weak.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/files/en-us/tools/network_monitor/request_list/https.svg b/files/en-us/tools/network_monitor/request_list/https.svg deleted file mode 100644 index fc118dc899586a9..000000000000000 --- a/files/en-us/tools/network_monitor/request_list/https.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/files/en-us/tools/network_monitor/request_list/image_preview.png b/files/en-us/tools/network_monitor/request_list/image_preview.png deleted file mode 100644 index fda8e08cf2a45f7..000000000000000 Binary files a/files/en-us/tools/network_monitor/request_list/image_preview.png and /dev/null differ diff --git a/files/en-us/tools/network_monitor/request_list/index.html b/files/en-us/tools/network_monitor/request_list/index.html deleted file mode 100644 index b0b4361dedde48c..000000000000000 --- a/files/en-us/tools/network_monitor/request_list/index.html +++ /dev/null @@ -1,495 +0,0 @@ ---- -title: Network request list -slug: Tools/Network_Monitor/request_list -tags: - - 110n:priority - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools ---- -{{ToolsSidebar}}
- -The request list of the Network Monitor shows a list of all the network requests made in the course of loading the page.
- -By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:
- -
By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the Settings.
You can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. A Reset Columns command is available on the context menu to reset the columns to their initial configuration.
- -You can also change the width of the columns to help make the information you are looking for easier to view. The mouse pointer changes to a resize icon when you move it over the border of a column. You can drag to manually set the size of column. Starting in Firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents.
- -The Reset Columns command on the context menu also resets the width of the columns to the default values.
- -{{EmbedYouTube("5fbuDO2s9Pk")}}
- -Clicking the column header label sorts the request list by that column. You can reset the sort to the default by selecting "Reset Sorting" from the context menu.
- -
Here is a list of all available columns:
- -
red circle with a diagonal slash for responses that were blocked by the browser or the server.devtools.netmonitor.audits.slow setting.
Content-type of the response.If the request is for an Image, hovering over its filename shows a preview of the image in a tooltip:
- -
The Network Monitor displays an icon in the Domain column:
- -
This gives you extra information about the security status of the request:
- -| Icon | -Meaning | -
|---|---|
 |
- HTTPS | -
 |
- Weak HTTPS (for example, a weak cipher was used) | -
 |
- Failed HTTPS (for example, a certificate was invalid) | -
 |
- HTTP | -
 |
- Localhost | -
 |
- Indicates that the URL belongs to a known tracker that would be blocked with content blocking enabled. | -
The request list also displays a timeline for the different parts of each request.
- -
Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the Timings page.
- -Starting in Firefox 45, the timeline also contains two vertical lines:
- -DOMContentLoaded event is triggered.load event is triggered.If you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching patterns you specify.
- -
Other actions you can take with Request Blocking:
- -You can also block a URL from the request list:
- -
Note: (Starting in Firefox 80) You can also block and unblock URLs from the Web Console, using the :block and :unblock helper commands. These accept any string, and affect any URL containing the string.
You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, or by request properties.
- -| Filter type | -How to apply | -
|---|---|
| Content type | -Use the buttons in the toolbar (HTML, CSS, JS). | -
| {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests | -Use the XHR button in the toolbar. | -
| WebSocket connections | -Use the WS button in the toolbar. You can filter by plain text (in which case the text is used to find partial matches; entering "for" will match any message that contains the word "for") or—as of Firefox 75—using regular expressions (by writing the regexp bracketed within slashes; "/.+Corp.*/" will look for any occurrence of "Corp" which has at least one character before it and may or may not have any characters after it, for example).
- The third-party add-on WebSocket Sniffer may be helpful as well. - |
-
| URL | -
- Use the Filter URLs box in the toolbar. You can focus it by clicking in the filter box, or by pressing Ctrl + F (or Cmd + F on a Mac); then start typing. The list of network requests is filtered to include only requests that contain your filter string, in either the Domain or the File portions. - -You can filter requests that don't contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in the URL. - |
-
| Request properties | -Use the search box in the toolbar. See next section. | -
The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (-) negates the filter. You can combine different filters together by separating them with a space.
| Keyword | -Meaning | -Examples | -
|---|---|---|
status-code |
- Shows resources that have the specific HTTP status code. | -status-code:304 |
-
method |
- Shows resources that have were requested via the specific HTTP request method. | -method:post |
-
domain |
- Shows resources coming from a specific domain. | -domain:mozilla.org |
-
remote-ip |
- Shows resources coming from a server with the specified IP. | -remote-ip:63.245.215.53- remote-ip:[2400:cb00:2048:1::6810:2802] |
-
cause |
- Shows resources matching a specific cause type. The types can be found in the description of the cause column. | -cause:js- cause:stylesheet |
-
transferred |
- Shows resources having a specific transferred size or a transferred size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024. |
- transferred:1k |
-
size |
- Shows resources having a specific size (after decompression) or a size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024. |
- size:2m |
-
larger-than |
- Shows resources that are larger than the specified size in bytes. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024. |
- larger-than:2000- -larger-than:4k |
-
mime-type |
- Shows resources that match the specified MIME type. | -mime-type:text/html- mime-type:image/png- mime-type:application/javascript |
-
is |
- is:cached and is:from-cache shows only resources coming from cache.- is:running shows only resources, which are currently being transferred. |
- is:cached- -is:running |
-
scheme |
- Shows resources transferred via the given scheme. | -scheme:http |
-
has-response-header |
- Shows resources that contain the specified HTTP response header. | -has-response-header:cache-control- has-response-header:X-Firefox-Spdy |
-
set-cookie-domain |
- Shows the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. |
- set-cookie-domain:.mozilla.org |
-
set-cookie-name |
- Shows the resources that have a Set-Cookie header with a name that matches the specified value. |
- set-cookie-name:_ga |
-
set-cookie-value |
- Shows the resources that have a Set-Cookie header with a value that matches the specified value. |
- set-cookie-value:true |
-
regexp |
- Shows the resources having a URL that matches the given {{Glossary("regular expression")}}. | -regexp:\d{5} |
-
For example, to find all 404, not found, errors, you can type "404" into the search and auto-complete suggests "status-code:404" so you'll end up with something like this:
- -
Use the Search panel to run a full-text search on headers and content.
- -
Other ways to use the search panel:
- -Context-clicking on a row in the list displays a context menu with the following options:
- -| Menuitem | -Description | -
|---|---|
| Copy > Copy URL | -Copies the URL. | -
| Copy > Copy as cURL | -Copies the network request to the clipboard as a cURL command, so you can execute it from a command line. See Copy as cURL, below. | -
| Copy > Copy as Fetch | -Copies the request as a call to the fetch() method, including the URL and any settings object. | -
| Copy > Copy Request Headers | -Copies the request's header to the clipboard. | -
| Copy > Copy Response Headers | -Copies the headers of the response for this request, to the clipboard. | -
| Copy > Copy Response | -Copies the entire response that was sent for this request. | -
| Copy > Copy All As HAR | -Creates an HTTP Archive (HAR) for all requests listed, and copies it to the clipboard. | -
| Save All As HAR | -Creates an HTTP Archive (HAR) for all requests listed, and opens a file dialog, so you can save it to a file. | -
| Resend | -Resends the request as it was originally sent with no changes made. | -
| Edit and Resend | -Opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request. | -
| Block URL | -Blocks the selected URL for future requests. See Blocking a specific URL from the Request List. | -
| Open in New Tab | -Resends the request in a new tab — very useful for debugging asynchronous requests. | -
| Open in Style Editor | -For a CSS resource, opens it in the Style Editor. | -
| Start Performance Analysis | -- |
| Use as Fetch in Console | -Submits the request as a call to the fetch() method in the console. | -
The command may include the following options:
- --X [METHOD] |
- If the method is not GET or POST | -
--data |
- For URL encoded request parameters | -
--data-binary |
- For multipart request parameters | -
--http/VERSION |
- If the HTTP version is not 1.1 | -
-I |
- If the method is HEAD | -
-H |
-
- One for each request header. - -If the "Accept-Encoding" header is present, the cURL command includes |
-
--globoff |
- Suppresses cURL's globbing (wildcard matching) feature if the copied URL includes square bracket characters ([ or ]). (Starting in Firefox 76) |
-
The HAR format enables you to export detailed information about network requests. In addition to the Copy and Save menu items for HAR in the context menu, similar menu items are available in the HAR dropdown menu in the toolbar, as well as an Import menuitem.
- -
The following articles cover different aspects of using the network monitor:
- -{{ToolsSidebar}}
- -The network monitor allows you to throttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types.
- -The toolbar includes a Throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions. Choose an option from the menu, and it will persist across reloads.
- -
The characteristics emulated are:
- -The table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. The speeds are expressed in multiples of bits per second.
- -| Selection | -Download speed | -Upload speed | -Minimum latency (ms) | -
|---|---|---|---|
| GPRS | -50 Kbps | -20 Kbps | -500 | -
| Regular 2G | -250 Kbps | -50 Kbps | -300 | -
| Good 2G | -450 Kbps | -150 Kbps | -150 | -
| Regular 3G | -750 Kbps | -250 Kbps | -100 | -
| Good 3G | -1.5 Mbps | -750 Kbps | -40 | -
| Regular 4G/LTE | -4 Mbps | -3 Mbps | -20 | -
| DSL | -2 Mbps | -1 Mbps | -5 | -
| Wi-Fi | -30 Mbps | -15 Mbps | -2 | -
The following articles cover different aspects of using the network monitor:
- -{{ToolsSidebar}}
- -The network monitor provides two toolbar areas, one above the main section, and another below.
- -The toolbar is at the top of the main network monitor window. (Prior to Firefox 77, this toolbar was arranged somewhat differently.)
- -
It provides:
- -.har.A second toolbar area at the bottom of the network monitor provides:
- -
The following articles cover different aspects of using the network monitor:
- -This article explains how to use the Page Inspector's 3-pane mode.
- -From Firefox 62 onwards, the Page Inspector has a new mode available — 3-Pane mode. When activated, this allows you to see the following simultaneously:
- -
Note: At narrower browser window widths, the tabs appear below the CSS Rules pane.
-Having the CSS Rules in their own pane is very useful because it allows you to not only inspect your HTML and edit the CSS applied to it, but also see the effect this has on CSS features such as computed styles and grids in real time. You just need to have the relevant tab open to see the effect.
- -The 3-pane inspector is disabled by default. It is enabled via a toggle control found in the tabs pane on the left hand side.
- -
Press the toggle control to toggle between the 2- and 3-pane views.
- -
With the 3-pane mode enabled, you can observe live changes in CSS features as you edit the rules applied to the page. For example, you could edit a CSS Grid property and observe the change immediately in the Grid Inspector.
- -{{EmbedYouTube("ELS2OOUvxIw")}}
- -In earlier versions of Firefox (since Firefox 59/60), you can enable 3 pane mode in Release/Beta by going to about:config and flipping the following preferences to true:
devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off.
devtools.inspector.split-sidebar-toggle — this adds the UI toggle button that lets you toggle it on and off.
In Firefox 61, these preferences got renamed to:
- -devtools.inspector.three-pane-enableddevtools.inspector.three-pane-toggleYou need to flip these two to true in Release/Beta to test the feature in Firefox 61.
Note: The 3-pane inspector is already enabled in Nightly/Developer edition before Firefox 62.
-A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The Firefox DevTools make it easy to discover both scrollable elements and any elements that are causing overflow.
In the HTML Pane, a scrollable element has the scroll badge next to it, as shown in the following image:
You can toggle the scroll badge to highlight elements causing an overflow, expanding nodes as needed to make the nodes visible:
You will also see an overflow badge next to the node causing the overflow.
CSS filter properties in the Rules view have a circular gray and white swatch next to them:
Clicking the swatch opens a filter editor:
- -
The filter editor lists each of the effects performed by that filter on a separate line. You can edit these lines, remove them individually, or drag the effects to change the order in which they are applied.
You can also add new effects by selecting an effect from the dropdown list at the bottom of the dialog. Once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list.
- -
Once you have added an effect, enter the settings you want and then press Enter to update the effect. The change will be apparent as soon as you press Enter.
- -From Firefox 42 onwards, you can also add filters to a list of presets. The list of presets will be preserved between browser sessions, making it easy to apply the settings in the future. You can save the current filter to the preset list:
- -
You can then apply saved filters to new elements. To apply one of your saved presets, click its name in the list.
The Shape Path Editor is a tool that helps you see and edit shapes created using {{cssxref("clip-path")}} and also the CSS {{cssxref("shape-outside")}} property and {{cssxref("<basic-shape>")}} values. This guide walks you through all of the available options.
- -The Shape Path Editor is accessed via the CSS Rules Panel, which can be opened as described in the guide to Opening the Inspector. Once you have selected your element, you should see the shape icon alongside any valid value, e.g. one for shape-outside.
Clicking the icon will cause the Editor to highlight the shape.
- -
To deactivate the Shape Path Editor click on the icon again, or select another element or a different editor. Note that the Shape Path Editor does not persist between page reloads — if you reload your page you will need to select the element again.
- -Once you have selected a shape on your page, the Shape Path Editor will draw lines to help you understand the path that is being created.
- -
The options given to you by the tool will differ depending on the type of basic shape that you are editing. Options can be accessed by activating the Shape Path Editor with a regular click on the icon, and you can use the context menu (Ctrl/Cmd + click) to access additional functionality.
- -If the value of shape-outside is circle(), you are creating a circle basic shape. Clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its center. If you move or resize the circle past the margin box, the edges become clipped by it.
In the Rules Panel you can see the values for circle() change as you edit the shape. You can then copy these values back into your stylesheet to create the new, tweaked shape path.
If the value of shape-outside is ellipse() then you are using the ellipse basic shape. The ellipse() value works in much the same way as circle() in the Shape Path Editor. An ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon.
If the value of shape-outside is inset() then you are using the inset basic shape, which enables the creation of offset values pulling the content in from the margin box.
Each side of the rectangle can be targeted after clicking on the shapes icon to activate the Shape Path Editor, and dragging each side will update the values for the top, right, bottom, and left offset values.
- -
If the value of shape-outside is polygon() then you are using the polygon basic shape. This is the most complex of the basic shape values, therefore the tool gives you more options when editing these:
There is extra functionality available on the shape highlight — if you Ctrl/Cmd + click on the shapes icon for your shape the highlight will change, instead providing the ability to scale and/or move it. Once again, clipping will occur if you exceed the bounds of the margin box.
- -
If your shape is a polygon, you also get the ability to rotate it around an axis.
- -The Shape Path Editor currently works for shapes generated via {{cssxref("clip-path")}}; it will also work for shapes generated via {{cssxref("shape-outside")}} as of Firefox 62.
diff --git a/files/en-us/tools/page_inspector/how_to/edit_css_shapes/inset.png b/files/en-us/tools/page_inspector/how_to/edit_css_shapes/inset.png deleted file mode 100644 index 70968ea11f612a9..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_css_shapes/inset.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_css_shapes/polygon-edit.png b/files/en-us/tools/page_inspector/how_to/edit_css_shapes/polygon-edit.png deleted file mode 100644 index 90d9df8c3115cbb..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_css_shapes/polygon-edit.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_css_shapes/scaled-circle.png b/files/en-us/tools/page_inspector/how_to/edit_css_shapes/scaled-circle.png deleted file mode 100644 index faa9935fd708158..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_css_shapes/scaled-circle.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/all-fonts-on-page_new63.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/all-fonts-on-page_new63.png deleted file mode 100644 index 8896ec40c755bf6..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/all-fonts-on-page_new63.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/change_font_after_cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/change_font_after_cropped.png deleted file mode 100644 index b5ff4d99a05dd97..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/change_font_after_cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/change_font_before_cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/change_font_before_cropped.png deleted file mode 100644 index 4a4437ecfcb6c66..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/change_font_before_cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/font-italic_cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/font-italic_cropped.png deleted file mode 100644 index 6d33a65246b9d0c..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/font-italic_cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/font-size_cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/font-size_cropped.png deleted file mode 100644 index eea408e6c35b03d..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/font-size_cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/font-weight_cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/font-weight_cropped.png deleted file mode 100644 index 56510effc588912..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/font-weight_cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts-editor-closeup-63-cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts-editor-closeup-63-cropped.png deleted file mode 100644 index e63bfc6f6469ed1..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts-editor-closeup-63-cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts-used.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts-used.png deleted file mode 100644 index f28a2c0e9b7b91e..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts-used.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts_62_tooltip_cropped.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts_62_tooltip_cropped.png deleted file mode 100644 index 176d17c10ce5a7f..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/fonts_62_tooltip_cropped.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/full-fonts-tab-new63.png b/files/en-us/tools/page_inspector/how_to/edit_fonts/full-fonts-tab-new63.png deleted file mode 100644 index 2f3b73b032d136f..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/edit_fonts/full-fonts-tab-new63.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/edit_fonts/index.html b/files/en-us/tools/page_inspector/how_to/edit_fonts/index.html deleted file mode 100644 index d6dcb1fd53c58de..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/edit_fonts/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Edit fonts -slug: Tools/Page_Inspector/How_to/Edit_fonts -tags: - - Fonts - - Guide - - Inspector - - Tools - - variable fonts ---- -This article provides a tour of the Font tools available in the Firefox DevTools. This tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.
- -Note: The updated Font tools as shown in this article are available in Firefox 63 onwards; if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available).
-The Fonts tab is located on the right-hand side of the Page Inspector when it is docked to the bottom of the screen. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. To access it:
- -
The Fonts tab has three major sections:
- -The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.
- -
Fonts are considered "used" when there is text content in the inspected element that has the font applied to it. Empty elements will not have any fonts used and will display the message "No fonts were found for the current element."
- -Fonts will be included in this section for one of the following reasons:
- -font-family CSS declaration value.font-family CSS declaration has been applied.Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts' characteristics.
- -
For standard (static) fonts, you will be able to change the settings listed below
- -The {{cssxref("font-size")}} for the inspected element.
- -
This can be set using em, rem, %, px, vh, or vw units. You can select values using the slider or enter a numeric value directly into the text box.
Note: If you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.
Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.
- -Example: If 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px.
The {{cssxref("line-height")}} of the inspected element.
- -
This can be set using unitless, em, %, or px units. You can select values using the slider or enter a numeric value directly into the text box.
Changing the unit of measure changes the value relative to the font-size setting.
Example: If the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px.
The {{cssxref("font-weight")}} for the inspected element.
- -
You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.
- -Note: For variable fonts (see below) that define a wght variation axis, this range is custom.
The {{cssxref("font-style")}} for the inspected element.
- -
This setting toggles between italic and normal values for the font-style CSS property.
Note: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.
-The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.
- -
The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.
- -Each font listed in this section shows you:
- -font-family identifier and full name of the font.Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.
- -Variable Fonts, or OpenType Font Variations, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary.
- -Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by axes of variation (see Introducing the 'variation axis' for more information). For example, {{cssxref("font-weight")}} can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).
- -There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer does implement a registered axis, its behavior must follow the defined behavior.
- -All variable font axes have a four-character axis tag. The CSS {{cssxref("font-variation-settings")}} property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using font-variation-settings, you could do something like this:
font-variation-settings: "wght" 350;- -
However, you should only use font-variation-settings as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).
Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade.
Here are the registered axes along with their corresponding CSS properties:
- -| Axis Tag | -CSS Property | -
|---|---|
| "wght" | -{{cssxref("font-weight")}} | -
| "wdth" | -{{cssxref("font-stretch")}} | -
| "slnt" (slant) | -{{cssxref("font-style")}}: oblique + angle |
-
| "ital" | -{{cssxref("font-style")}}: italic |
-
| "opsz" | -
- {{cssxref("font-optical-sizing")}} - |
-
Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer.
- -Note: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.
-Warning: In order to use variable fonts, you need to make sure that your operating system is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.
-If the inspected element uses a variable font, the Fonts tab shows the axes that have been implemented for that particular font, providing control to alter the value of each one. This is very useful for quickly finding out what axes are available in a particular font — they can vary quite dramatically as font designers can implement basically anything they like.
- -
You can adjust the axes individually or, if the font designer has included defined instances, you can select one from the "Instance" drop-down list and view the updates live on your page.
- -Here are a couple of examples of fonts with different axes defined:
- -
In the following example, you can see that the font "Cheee Variable" includes settings for Yeast and Gravity. These are custom axes defined by the font designer.
- -
The first image shows the font as it is used on the page with default settings. The second image shows the same font after selecting the "Hi Yeast Hi Gravity" variation.
- -
Finally, here are a few tips for making effective use of the Fonts tab:
- -
font-family font stack that is actually applied to the inspected element is underlined. This makes it easy to see exactly what is being applied where, when font stacks are specified.You can examine and edit CSS in the Inspector's CSS pane.
- -The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:
- -
The six buttons on the right top of the rules view allow you to change the display of certain CSS and rules view features. You can:
- -prefers-color-scheme media rules.
A warning icon appears next to unsupported CSS properties or rules that have invalid values. This can help you understand why certain styles are not being applied. In the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid:
- -
CSS properties have varied level of support across different browsers. From Firefox 81, compatibility tooltips may be displayed next to any CSS properties that have known compatibility issues, as shown below.
- -This feature is enabled from Firefox 81 by setting the preference devtools.inspector.ruleview.inline-compatibility-warning.enabled to true (open about:config in the URL bar to view/set Firefox preferences).
The tooltips, which are populated from the MDN browser compatibility project, identify the reason for the incompatibility (not supported, deprecated, experimental etc.), display icons for incompatible browsers, and provide a link to the associated property page for more information.
- -In addition to compatibility tooltips, the CSS Compatibility View shows any CSS compatibility issues for both the selected element and for the current page (as a whole).
For more information see: Page Inspector > CSS Compatibility View.
- -It displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked.If the element has a display: grid declaration, then it gets a grid icon next to it, like this: 
. Click that icon to display the grid overlaid on the page, including grid lines and tracks. See Examine grid layouts for more on this.
To view user-agent styles (i.e., browser-default CSS rules), enable "Inspector > Show Browser Styles" under the developer tool settings panel. (Note that this setting is independent of the "Browser styles" checkbox in the Computed view.)
- -User-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent):
The element {} rule at the top of the rules list isn't actually a CSS rule. It represents the CSS properties assigned to the element via its {{htmlattrxref("style")}} attribute.
This also gets the target icon: 
, giving you a convenient way to highlight the currently selected element in the page.
{{EmbedYouTube("bQzOAFvEDco")}}
- -There's a box at the top of the Rules view labeled "Filter Styles":
- -
As you type:
Click the "X" at the end of the search box to remove the filter.
While in the Rules view, you can press Ctrl / Cmd + F to focus the search field. Once you've typed in a filter, you can press Esc to remove it again.
-{{EmbedYouTube("9w8vDIWqnAE")}}
- -By default, the search box highlights all declarations which contain any part of the string. For example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.:
If you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches:
- -
Shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them.
- -The Rule view displays the following pseudo-elements, if they are applied to the selected element:
- -::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::selection
- :-moz-color-swatch
- :-moz-number-spin-box
- :-moz-number-spin-down
- :-moz-number-spin-up
- :-moz-number-text
- :-moz-number-wrapper
- :-moz-placeholder
- :-moz-progress-bar
- :-moz-range-progress
- :-moz-range-thumb
- :-moz-range-track
- :-moz-selection
If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:
- -
Clicking the triangle displays them:
- -
There's a button to the right of the filter box:
- -
Click the button to see checkboxes that you can use to enable the {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}}, {{cssxref(":focus-within")}}, {{cssxref(":focus-visible")}}, {{cssxref(":visited")}}, and {{cssxref(":target")}} pseudo-classes for the selected element:
- -
This feature can also be accessed from the popup menu in the HTML view.
If you enable one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied. In addition, the information that appears on the page itself show you what pseudo-class you are examining. For example:
- -
With an element selected in the HTML pane, you can click the .cls button in the Rules pane toolbar, to display the classes defined on that element.
- -At the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the Style Editor.
- -You can copy the location of the source file: right-click the link and select "Copy Location".
- -The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the Style Editor settings, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the Style Editor documentation.
- -If a CSS declaration is overridden by some other CSS rule with a greater weight, then the declaration is shown with a line through it.
- -Overridden declarations have a funnel next to them. Click the funnel to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.
- -This makes it easy to see which rule is overriding the declaration:
- -{{EmbedYouTube("i9mDVjJAGwQ")}}
- -You can toggle the display into a mode that emulates @media rules for print.
- -{{EmbedYouTube("AEmq9hNDOGU")}}
- -When on, any rules defined for printing the page will be displayed similar to the "Print Preview" mode that many word processing applications provide.
- -The color scheme simulator buttons can be used to test the rendering of styles based on the prefers-color-scheme media query (if any are defined for the page). There are two buttons, which enable the light and dark preference, respectively. Selecting either button deselects the other. If neither button is selected then the simulator does not set a preference, and the browser renders using the default feature value set by the operating system.
| Icon | -Value | -Description | -
|---|---|---|
 |
- null | -The prefers-color-scheme media feature is not set by the simulator.
- |
-
 |
- light |
- The prefers-color-scheme media feature is set to light. |
-
 |
- dark |
- The prefers-color-scheme media feature is set to dark. |
-
Note that if the operating system mode is set to a particular mode, then simulating that mode will not change page rendering (i.e. simulating dark mode when the operating system is using dark mode will not change the display).
- -If privacy.resistFingerprinting has been set true, the prefers-color-scheme preference is forced to light. You must set privacy.resistFingerprinting to false in order to use this feature.
Before Firefox 87 this feature is behind the preference devtools.inspector.color-scheme-simulation.enabled.
To see the complete computed CSS for the selected element, select the Computed panel in the righthand pane. This panel shows the calculated value that each CSS property has for the selected element. (This calculated value is exactly the same as what getComputedStyle would return.)
- -
You can Tab through the styles to select them, and you can find more information about each property — pressing F1 on a selected property will open up its MDN reference page.
- -Clicking the arrow next to the property name (or pressing Enter or Space while it is selected) shows the rule that set this value, along with a link to the source filename and line number:
- -
By default, this view only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box. You can Tab through the filenames/line numbers; pressing Enter/Return will open up the relevant file at that point in the Style Editor.
- -Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.
- -While in the Computed view, you can press Ctrl / Cmd + F to focus the search field. Once you've typed in a filter, you can press Esc to remove it again.
-If you click on a declaration or a selector in the Rules view you can edit it and see the results immediately. You can also Tab through the different existing properties and values, and start editing them by pressing Enter or Space. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace).
- -As you start typing a property name, you'll see a list of autocomplete suggestions. Press Tab to accept the current suggestion or Up and Down to move through the list. The default choice is the most common property that starts with the letters you've typed. For example, here the user has typed "c" and the default choice is "color":
- -
If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration.
- -Edits that you make in the Rules view are reflected in the Style Editor, and vice versa. Any changes you make are temporary: reloading the page will restore the original styling.
- -While you're editing CSS, the context menu you'll see is the normal one for working with editable text:
- -
CSS variable names will auto-complete depending on the variables defined in the CSS. If you enter var( into a property value and then type a dash (-), any variables you have declared in your CSS will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing ({{bug(1451211)}}).
-
- 
In addition, hovering over a CSS variable name brings up a tooltip showing what color value is stored in that variable ({{bug(1431949)}}).
- -
You can use the arrow and page up/down keys (along with others) to increase/decrease numeric rules while editing:
- -When you are editing the rules in the rules view, you can see the changes you have made in the Changes pane.
- -
You can view changes made to the rules view only. If you edit the CSS using the Style Editor, the changes will not be shown in the changes pane.
- -Also remember, as noted above, that changes you make to the CSS rules are temporary and will be reset if you reload the page.
-If you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet. Right-click on the changes panel and select Copy Rule from the context menu.
- -
The Copy Rule command copies the entire element, class, or id definition, including any unchanged rules and the rules that describe your changes. For example, copying the changes in the preceding image, you get the following:
- -.text-content p {
- box-sizing:border-box;
- max-width:24rem;
- text-decoration: underline;
- color: cadetblue;
- font-weight: bold;
-}
-
-You can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.
- -
There's also a button that enables you to do the same thing:
- -
To copy rules, and pieces of rules, use one of the following context menu items in the Rules view:
- -
You can examine and edit the page's HTML in the HTML pane.
- -At the bottom on the HTML pane is a breadcrumbs toolbar. This shows the complete hierarchy through the document for the branch containing the selected element:
- -
Hovering over a breadcrumb highlights that element in the page.
- -The breadcrumbs bar has its own keyboard shortcuts.
- -The Page Inspector's search box matches all markup in the current document and in any frames.
- -To start searching the markup, click in the search box to expand it or press Ctrl + F , or Cmd + F on a Mac. There are three types of searches that are performed automatically depending on what you enter, a full text search, a CSS selector search, and an XPath search.
- -The full text search will always be executed, independently of what you enter. That allows you to find CSS selectors and XPath expressions occurring within the text.
- -You can search elements by entering a {{Glossary("CSS selector")}}.
- -As you type, an autocomplete popup shows any class or ID attributes that match the current search term:
- -
Press Up and Down to cycle through suggestions, Tab to choose the current suggestion, then Enter to select the first node with that attribute.
- -{{EmbedYouTube("AKBhnfp1Opo")}}
- -To cycle through matches, press Enter. You can cycle backwards through matches using Shift + Enter.
- -It is also possible to search via XPaths. This allows you to search for specific elements without the conflict of matching words within the text. For example, //a matches all {{HTMLElement("a")}} elements but not the letter "a" within the text content. Furthermore it allows for some more advanced searches like finding elements that start with a specific text, for example.
The rest of the pane shows you the page's HTML as a tree (this UI is also called the Markup View). Just to the left of each node is an arrow: click the arrow to expand the node. If you hold the Alt key while clicking the arrow, it expands the node and all the nodes underneath it.
Moving the mouse over a node in the tree highlights that element in the page.
- -Nodes that are not visible are shown faded/desaturated. This can happen for different reasons such as using display: none or that the element doesn't have any dimensions.
There is an ellipsis shown between the opening and closing tag of an element when the node is collapsed if it has larger contents. Now children are indicated in the tree with this icon: 
Markers ("badges") are displayed to the right of some nodes. The table below explains the meaning of each badge:
- -event |
- The element has one or several event listeners attached to it. Clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of JavaScript code in the Debugger where the listener is defined. | -
scroll |
- The element is a {{Glossary("scroll container")}}, i.e. it has either overflow: scroll applied, or overflow: auto and sufficient content to cause scrollable overflow.- - If preference devtools.overflow.debugging.enabled is true, toggling the scroll badge will highlight any elements causing the overflow, and these nodes will additionally display the overflow badge. |
-
overflow |
- The element is causing scrollable overflow in a {{Glossary("scroll container")}} (either the current node or a parent node—the affected node will display the scroll badge).
-
-
- Note: The |
-
grid |
- The element is a {{Glossary("grid container")}}, i.e. it has display: grid applied to it. Clicking the marker enables the grid highlighter. |
-
flex |
- The element is a {{Glossary("flex container")}}, i.e. it has display: flex applied to it. Clicking the marker enables the flexbox highlighter. |
-
inline-grid |
- The element is an inline grid container, i.e. it has display: inline-grid or display: inline grid applied to it. Clicking the marker enables the grid highlighter. |
-
inline-flex |
- The element is an inline flex container, i.e. it has display: inline-flex or display: inline flex applied to it. Clicking the marker enables the flexbox highlighter. |
-
custom… |
- The element is a custom element. Clicking the marker switches to the line of JavaScript code in the Debugger where the custom element got defined. | -
Note: There are some useful keyboard shortcuts that can be used in the HTML tree — see the HTML pane keyboard shortcuts list.
-You can inspect pseudo-elements added using {{cssxref("::before")}} and {{cssxref("::after")}}:
- -{{EmbedYouTube("ecfqTGvzsNc")}}
- -When you open the Inspector on a page that includes custom elements, you can view the class definition for the custom element in the Debugger:
- -custom
The source for the element's class will be displayed in the Debugger.
- -
Web developers don't write all their code in just one line of text. They use white space such as spaces, returns, or tabs between their HTML elements because it makes markup more readable.
- -Usually this white space seems to have no effect and no visual output, but in fact, when a browser parses HTML it will automatically generate anonymous text nodes for elements not contained in a node. This includes white space (which is after all a type of text).
- -If these auto generated text nodes are inline level, browsers will give them a non-zero width and height. Then you will find strange gaps between elements, even if you haven't set any margin or padding on them.
- -Since Firefox 52, the Inspector displays these whitespace nodes, so you can see where the gaps in your markup come from. Whitespace nodes are represented with a dot: 
and you get an explanatory tooltip when you hover over them:
To see this in action, see the demo at https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.
- -Any shadow roots present in the DOM are exposed in the HTML page in the same manner as the regular DOM. The shadow root is signified by a node named #shadow-root — you can click its expansion arrow to see the full contents of the shadow DOM, and then manipulate the contained nodes in a similar way to other part of the page's DOM (although with a limited featureset — you can't, for example, drag and drop or delete shadow DOM nodes).
If a shadow DOM contains a "slotted" element (an element with a slot attribute after it has been inserted inside a {{htmlelement("slot")}} element — see Adding flexibility with slots for an explanation of how these are used), the "slotted" element will be shown inside its corresponding {{htmlelement("slot")}} element, with a "reveal" link alongside it. Clicking the "reveal" link will highlight the element with the slot attribute as it exists outside the shadow DOM
This is very useful when you've got a <slot> element and you can't find the source of its content.
Note: Shadow DOM inspection was implemented in Firefox 61, but was hidden behind the dom.webcomponents.shadowdom.enabled pref until Firefox 63. It is now turned on by default.
You can perform certain common tasks on a specific node using a popup context menu. To activate this menu, context-click the element. The menu contains the following items — click on the links to find the description of each command in the Context menu reference:
- -* These options only appear in certain contexts, for example the "Open File in Style-Editor" option only appears when you context-click over the top of a link to a CSS file.
- -| Edit as HTML | -Edit the element's HTML. | -
| (Copy) Inner HTML | -Copy the inner HTML for the element. | -
| (Copy) Outer HTML | -
- Copy the outer HTML for the element. - -Pressing Ctrl + C (or Cmd + C on a Mac) also performs this action. - |
-
| (Copy) Unique Selector/CSS Selector | -Copy a CSS selector that uniquely selects the element. | -
| (Copy) CSS Path | -Copy a CSS selector that represents the full path to the element. | -
| (Copy) Image Data-URL | -Copy image as a data:// URL, if the selected element is an image. | -
| (Copy) Attribute | -Copy the attribute of the element. | -
| Show DOM Properties | -Open the split console and enter the console command "inspect($0)" to inspect the currently selected element. |
-
| Use in Console | -Assigns the currently selected node to a variable named temp0 (or temp1 if temp0 is already taken, and so on), then opens the split console, enabling you to interact with that node using the console's command line. |
-
| Expand All | -In the tree view, expand the current element and all the elements underneath it. This is equivalent to holding the Alt key and clicking the disclosure triangle next to an element. | -
| Collapse | -In the tree view, collapse the current element. This is equivalent to clicking the disclosure arrow next to an element that's expanded. | -
| (Paste) Inner HTML | -Paste the clipboard contents into the node as its innerHTML. | -
| (Paste) Outer HTML | -Paste the clipboard contents into the node as its outerHTML. | -
| (Paste) Before | -Paste the clipboard contents into the document immediately before this node. | -
| (Paste) After | -Paste the clipboard contents into the document immediately after this node. | -
| (Paste) As First Child | -Paste the clipboard contents into the document as the first child of this node. | -
| (Paste) As Last Child | -Paste the clipboard contents into the document as the last child of this node. | -
| Scroll Into View | -
- Scrolls the web page so the selected node is visible. - -From Firefox 44, pressing the keyboard shortcut S will also scroll the selected node into view. - |
-
| Screenshot Node | -Takes a screenshot of the selected node, saved to your Downloads directory. See Taking screenshots. | -
| Create New Node | -Create a new empty <div> as the last child of the currently selected element. See Inserting new nodes. | -
| Duplicate Node | -Create a copy of this element, and insert the copy immediately after this element. | -
| Delete Node | -Delete the element from the DOM. | -
| Attribute/Add Attribute | -Add an attribute to the element. | -
| Attribute/Edit Attribute | -(only when invoked on an attribute) Edit the attribute. | -
| Attribute/Remove Attribute | -(only when invoked on an attribute) Remove the attribute. | -
| Open Link in New Tab | -(only when invoked over a link, such as an href attribute) Opens the linked item in a new tab. | -
| Open File in Debugger | -(only when invoked over a link to a JS source) Opens the linked source in the Debugger. | -
| Open File in Style-Editor | -(only when invoked over a link to a CSS source) Opens the linked source in the Style Editor. | -
| Copy Link Address | -(only when invoked over a URL) Copy the URL. | -
| (Change Pseudo-class) hover | -Set the :hover CSS pseudo-class. | -
| (Change Pseudo-class) active | -Set the :active CSS pseudo-class. | -
| (Change Pseudo-class) focus | -Set the :focus CSS pseudo-class. | -
| (Change Pseudo-class) focus-visible | -Set the :focus-visible CSS pseudo-class. | -
| (Change Pseudo-class) focus-within | -Set the :focus-within CSS pseudo-class. | -
| (Change Pseudo-class) visited | -Set the :visited CSS pseudo-class. | -
You can edit the HTML — tags, attributes, and content — directly in the HTML pane: double-click the text you want to edit, change it, and press Enter to see the changes reflected immediately.
- -To edit an element's {{domxref("Element.outerHTML", "outerHTML")}}, activate the element's popup menu and select "Edit As HTML". You'll see a text box in the HTML pane:
- -
You can add any HTML in here: changing the element's tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.
When you're editing HTML, the context menu you'll see is the normal one for working with editable text:
- -
You can use the popup menu to copy nodes in the HTML tree and paste them into the desired location.
- -You can reorganize the HTML content of a page by moving nodes in the HTML tree. Just click and hold on any element and drag it up or down in the tree. When you release the mouse button, the element will be inserted at the corresponding position:
- -{{EmbedYouTube("oI-a035nfWk")}}
- -You can cancel the drag and drop by pressing the Esc key.
- -There's a "+" icon at the top of the markup view:
- -
Click this icon to insert an empty {{HTMLElement("div")}} into the document as the last child of the currently selected element. You can then edit the new node's content and styling just as you would any other node in the document.
- -{{EmbedYouTube("NG5daffvVZM")}}
- -You can access the same functionality using the "Create New Node" popup menu item.
- -Note that this button is disabled if the selected element's type is such that adding a last-child would have no effect (for example, if it is an {{HTMLElement("html")}} or {{HTMLElement("iframe")}} element). However, it is enabled in places where it is not valid to insert a {{HTMLElement("div")}}, such as {{HTMLElement("style")}} or {{HTMLElement("link")}}. In these cases the element is added as text.
diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/inspector_shadowdom.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/inspector_shadowdom.png deleted file mode 100644 index 515ff2bfdcb0707..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/inspector_shadowdom.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/inspector_slot.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/inspector_slot.png deleted file mode 100644 index 590ba86f50531b0..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/inspector_slot.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/new-whitespace-text-indicator.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/new-whitespace-text-indicator.png deleted file mode 100644 index e925cabd497069f..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/new-whitespace-text-indicator.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/search_html.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/search_html.png deleted file mode 100644 index c1b84eaa18b8837..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/search_html.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/white_space_only.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/white_space_only.png deleted file mode 100644 index d7a6f5c428b530f..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/white_space_only.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/xpath_search.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/xpath_search.png deleted file mode 100644 index 95342b7f8da53c6..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_html/xpath_search.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/box-model-tooltip.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/box-model-tooltip.png deleted file mode 100644 index 0b83f8b1443ffea..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/box-model-tooltip.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/box-model.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/box-model.png deleted file mode 100644 index cbb926183f462aa..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/box-model.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html deleted file mode 100644 index 9158ef2fae7b362..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Examine and edit the box model -slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model -tags: - - Guide - - Tools ---- -With the Select Element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page:
- -{{EmbedYouTube("vDRzN-svJHQ")}}
- -It's also shown overlaid if you hover over an element's markup in the HTML pane:
- -{{EmbedYouTube("xA4IxTttNLk")}}
- -If the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element:
- -
When an element's selected, you can get a detailed look at the box model in the Box Model view:
- -
If you hover over a value, you'll see a tooltip telling you which rule the value comes from:
- -
If you hover over part of the box model in the Box Model view, the corresponding part of the page is highlighted:
- -{{EmbedYouTube("H3ZxRbbyfwI")}}
- -You can also edit the values in the Box Model view, and see the results immediately in the page:
- -{{EmbedYouTube("gHjDjM8GJ9I")}}
diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/inline-box-model.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/inline-box-model.png deleted file mode 100644 index 5da14d5e0f589e2..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_the_box_model/inline-box-model.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/en-us/tools/page_inspector/how_to/examine_event_listeners/index.html deleted file mode 100644 index 62607dba2ee6690..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/examine_event_listeners/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Examine Event Listeners -slug: Tools/Page_Inspector/How_to/Examine_event_listeners -tags: - - Guide - - Inspector - - Tools ---- -The inspector shows the word "event" next to elements in the HTML Pane, that have event listeners bound to them:
- -
Click the icon, then you'll see a popup listing all the event listeners bound to this element:
- -
Each line contains:
The Flexbox Inspector allows you to examine CSS Flexbox Layouts using the Firefox DevTools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
- -When an HTML element on your page has display: flex applied to it, a number of features are made available in the DevTools to provide easy access to Flexbox layout features.
In the HTML Pane, an element laid out with Flexbox has the word flex next to it as shown in the following image:
Click the word flex in the HTML pane to keep the overlay visible when you move the mouse away from the container.
When you hover over an element in the HTML pane, you will see a tooltip that gives you more information about the element. When you hover over a flex container or flex item, the tooltip includes the appropriate information.
- -This header is a flex container:
- -
Each navbar link is a flex item:
The nav element within the header is both a flex item and a flex container which holds the navigation links:
In the CSS pane's Rules view, any instance of a display: flex declaration gets a small Flexbox icon 
next to the word flex.
Clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item:
- -
The overlay will still be shown when you select other elements from the Inspector panel, so you can edit related CSS properties and see how the flex items are affected by your changes.
- -The CSS pane's Layout view includes a collapsible "Flex Container" section. If you expand the section without selecting a flexbox container, it will only display the message, "Select a Flex container or item to continue". Once you select an element whose display is defined as flex, the panel will include a number of options for viewing details about the flex container and flex items within it. You can find out more about those in the section below.
- -Note: The Layout view can be found underneath the Layout tab on the right-hand pane of the Page Inspector. The above and below screenshots should give you further hints on how to get to this.
-The Flex Container section of the Layout view looks like this:
- -
There are two settings you can change in the Flex Container section:
- -The flex items within the flex container are displayed as a numbered list in the Flex Items section. Each entry displays the item's selector. Hover over an element to highlight it on the page.
- -
If you click on the item, the display shifts to show details about that element:
- -
This view shows information about the calculations for the size of the selected flex item:
- -At the top of the section is a drop-down list of all the items in the selected flexbox container:
- -
You can use this drop-down to select any of the other flex items in the flex container.
diff --git a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-both.png b/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-both.png deleted file mode 100644 index 90c528d09638f1d..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-both.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-cont.png b/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-cont.png deleted file mode 100644 index 44dda1790e25bbf..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-cont.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-item.png b/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-item.png deleted file mode 100644 index 71b827be14a4764..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/infobar-item.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/item-details.png b/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/item-details.png deleted file mode 100644 index 05e25aae175f33b..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/item-details.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/overlay.png b/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/overlay.png deleted file mode 100644 index 048973f54c38689..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/overlay.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/select-items.png b/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/select-items.png deleted file mode 100644 index 82b26ab657255d4..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_flexbox_layouts/select-items.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/css-pane.png b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/css-pane.png deleted file mode 100644 index 39f785c741950ed..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/css-pane.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/extend-lines.png b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/extend-lines.png deleted file mode 100644 index 32cc8ba9685f469..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/extend-lines.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-named-areas.png b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-named-areas.png deleted file mode 100644 index 8d488f4a33d6ed6..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-named-areas.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-options.png b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-options.png deleted file mode 100644 index 12f2973c6fd2b7e..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-options.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-overlay.png b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-overlay.png deleted file mode 100644 index c039dbdb50d5d19..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/grid-overlay.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/html-pane.png b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/html-pane.png deleted file mode 100644 index 680dbf0f7c149ba..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/html-pane.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/index.html deleted file mode 100644 index 51207d644c3bc4e..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/examine_grid_layouts/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: 'CSS Grid Inspector: Examine grid layouts' -slug: Tools/Page_Inspector/How_to/Examine_grid_layouts -tags: - - Guide - - Inspector - - Tools ---- -The Grid Inspector allows you to examine CSS Grid Layouts using the Firefox DevTools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
- -When an HTML element on your page has display: grid applied to it, a number of features are made available in the DevTools to provide easy access to grid features.
In the HTML Pane, elements laid out using a grid have a "grid" marker beside them.
- -
In the CSS pane's Rules view, any instance of a display: grid declaration gets a grid icon included within it: .
Clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks:
- -
The overlay is still shown when you select other elements, so you can edit related CSS properties and see how the grid is affected.
- -When grids are included on a page, the CSS pane's Layout view includes a "Grid" section containing a number of options for viewing those Grids. You can find out more about those in the section below.
- -Note: The Layout view can be found underneath the Layout tab on the right-hand pane of the Page Inspector. The above and below screenshots should give you further hints on how to get to this.
-The Grid section of the Layout view looks like this:
- -
You'll see a number of options contained within:
- -display: grid set on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis.Note: Your grid preferences such as overlay color and display settings choices are persisted across page loads for each separate page.
-Let's examine these features in more detail.
- -Each grid present on a page has an entry in the "Overlay grid" section:
- -
Each entry consists of (from left to right):
- -When the page contains a grid with a subgrid, the entry for the subgrid is indented under its parent in the Overlay grid section. When you select the checkbox for the subgrid, the lines for the parent grid are displayed also displayed; if the checkbox for the parent grid is unselected, then its lines are translucent.
- -
By default, the line numbers are displayed on the grid overlay.
- -
Unchecking the "Display line numbers" box turns them off.
- -
In a grid with named areas, the area names are shown on the grid overlay by default.
- -
Unchecking the "Display area names" box turns them off.
- -
By default, the grid lines/tracks are only shown inside the element with display: grid set on it.
When you check the "Extend lines infinitely" option, the grid lines extend to the edge of the viewport along each axis.
- -
Shows a small version of the currently overlaid grid, which is in proportion to the real thing.
- -
Hovering over the different areas of the mini grid causes the equivalent area on the grid overlay to also highlight, along with a tooltip containing useful information such as the dimensions of that area, its row and column numbers, etc.
- -
Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.
- -{{ ListSubpages () }}
diff --git a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png b/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png deleted file mode 100644 index 237cedfd2f015c0..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png b/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png deleted file mode 100644 index 56f47743ca33535..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png b/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png deleted file mode 100644 index 49701dd1002bf48..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/index.html deleted file mode 100644 index 4d8ce3a198f1307..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Inspect and select colors -slug: Tools/Page_Inspector/How_to/Inspect_and_select_colors -tags: - - Guide - - Inspector - - Tools ---- -In the CSS Pane's Rules view, if a rule contains a color value, you'll see a sample of the color next to the value:
- -
A color sample is also shown for CSS custom properties (variables) that represent colors.
If you click on the color sample, you'll see a color picker popup, enabling you to change the color:
- -
If the color is a foreground color, the color picker tells you whether its contrast with the background color meets accessibility guidelines. Hovering the mouse over the contrast message gives a more detailed explanation.
- -The color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page:
- -{{EmbedYouTube("0Zx1TN21QOo")}}
- -Clicking the color sample while holding down the Shift key changes the color format:
- -{{EmbedYouTube("gYL8-gxc1MA")}}
diff --git a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png b/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png deleted file mode 100644 index 742a25678d16b0a..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/open_the_inspector/index.html b/files/en-us/tools/page_inspector/how_to/open_the_inspector/index.html deleted file mode 100644 index c8fcd400ae017a8..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/open_the_inspector/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Open the Inspector -slug: Tools/Page_Inspector/How_to/Open_the_Inspector -tags: - - Guide - - Inspector - - Tools ---- -There are two main ways to open the Inspector:
- -The Inspector will appear at the bottom of the browser window:
- -
You can set other locations for the inspector pane to appear using the menu as shown below:
- -
To the left side of the browser window:
- -
To the right side of the browser window:
- -
Or in a separate window:
- -
To start finding your way around the Inspector, see the UI tour.
diff --git a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_leftside.png b/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_leftside.png deleted file mode 100644 index be76e2862cd197a..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_leftside.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_menu_dock.png b/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_menu_dock.png deleted file mode 100644 index 62acffc30911bc9..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_menu_dock.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_rightside.png b/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_rightside.png deleted file mode 100644 index 187bd6f3c6cc642..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_rightside.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_sidexside.png b/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_sidexside.png deleted file mode 100644 index f8d8f079d482804..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/open_the_inspector/inspector_sidexside.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/open_the_inspector/pageinspector.png b/files/en-us/tools/page_inspector/how_to/open_the_inspector/pageinspector.png deleted file mode 100644 index a43b0d71e9de83f..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/open_the_inspector/pageinspector.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/box-model-reposition.png b/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/box-model-reposition.png deleted file mode 100644 index 5df8f1202488727..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/box-model-reposition.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/in-content-box-model-editing.png b/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/in-content-box-model-editing.png deleted file mode 100644 index ba5e5615545a026..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/in-content-box-model-editing.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html deleted file mode 100644 index bb9ba70b9c03a4e..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Reposition elements in the page -slug: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page ---- -Starting in Firefox 48 you can move absolutely positioned elements by dragging them around the page.
- -{{EmbedYouTube("Or5HM1FFhvE")}}
- -If an element has its {{cssxref("position")}} property set to absolute, relative or fixed and one or more of the {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} properties, the Box Model view displays a button:
If you click that button, two handles appear next to the element:
- -
You can use these handles to drag the element around the page.
- -If the element is absolutely positioned, dashed lines are shown representing the offset parent. For relatively positioned elements the dashed lines indicate the original position of the node. The offsets are indicated by a line and a tooltip for each side.
diff --git a/files/en-us/tools/page_inspector/how_to/select_an_element/index.html b/files/en-us/tools/page_inspector/how_to/select_an_element/index.html deleted file mode 100644 index 711ad836787b01f..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/select_an_element/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Select an element -slug: Tools/Page_Inspector/How_to/Select_an_element -tags: - - Guide - - Inspector - - Tools ---- -The selected element is the element in the page that the Inspector is currently focused on. The selected element is shown in the HTML pane and its CSS is displayed in the CSS pane.
- -The highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size:
- -
To open the Inspector and select an element immediately, activate the context menu over the element in the page and select "Inspect Element":
- -{{EmbedYouTube("db83PCnPiNM")}}
- -When the inspector is open, as you move the mouse around the elements listed in the HTML pane, the corresponding elements are highlighted in the page. Click an element in the HTML pane to select it:
- -{{EmbedYouTube("EojH_vCMesI")}}
- -You can also use the arrow keys to move around the DOM with the keyboard.
- -To select an element in the page itself, activate the "node picker" by clicking its icon: 
(also called the Select Element icon). After that, as you move the mouse around the page, the element under the mouse is highlighted. Click the element to select it:
{{EmbedYouTube("Ss_fJz0zaxA")}}
- -Starting in Firefox 52, if you Shift + click the element, then it is selected but the picker stays active. This lets you see the rules for the element in the CSS pane, but conveniently select another element in the page.
diff --git a/files/en-us/tools/page_inspector/how_to/select_an_element/inspector-highlighted.png b/files/en-us/tools/page_inspector/how_to/select_an_element/inspector-highlighted.png deleted file mode 100644 index 2afa672cb56d098..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/select_an_element/inspector-highlighted.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/select_an_element/node-picker.png b/files/en-us/tools/page_inspector/how_to/select_an_element/node-picker.png deleted file mode 100644 index b1f86488b82c0e8..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/select_an_element/node-picker.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/index.html b/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/index.html deleted file mode 100644 index 87c56f5f7d0335a..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Select and highlight elements -slug: Tools/Page_Inspector/How_to/Select_and_highlight_elements ---- -The selected element is the element in the page that the Inspector is currently focused on. The selected element is shown in the HTML pane and its CSS is displayed in the CSS pane.
- -The highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size:
- -
To open the Inspector and select an element immediately, activate the context menu over the element in the page and select "Inspect Element":
- -{{EmbedYouTube("db83PCnPiNM")}}
- -When the inspector is open, as you move the mouse around the elements listed in the HTML pane, the corresponding elements are highlighted in the page. Click an element in the HTML pane to select it:
- -{{EmbedYouTube("EojH_vCMesI")}}
- -You can also use the arrow keys to move around the DOM with the keyboard.
- -To select an element in the page itself, activate the "node picker" by clicking its icon: (also called the Select Element icon). After that, as you move the mouse around the page, the element under the mouse is highlighted. Click the element to select it:
{{EmbedYouTube("Ss_fJz0zaxA")}}
diff --git a/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/inspector-highlighted.png b/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/inspector-highlighted.png deleted file mode 100644 index 2afa672cb56d098..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/inspector-highlighted.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/node-picker.png b/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/node-picker.png deleted file mode 100644 index b1f86488b82c0e8..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/select_and_highlight_elements/node-picker.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/use_the_inspector_api/index.html b/files/en-us/tools/page_inspector/how_to/use_the_inspector_api/index.html deleted file mode 100644 index d53a47b7071bfc8..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/use_the_inspector_api/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Use the Inspector API -slug: Tools/Page_Inspector/How_to/Use_the_Inspector_API -tags: - - Inspector - - Reference - - Tools ---- -Firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:
- -defined in inspector-panel.js. Attributes and functions:
- -Bindable events using on:
- -Called when the left panel has been refreshed, after page change.
- -Called on first markuploaded.
- -Called after toggle of a pseudoclass.
- -"low-priority change event for things like paint and resize."
diff --git a/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/console-$0.png b/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/console-$0.png deleted file mode 100644 index 9ce705cfbe857b0..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/console-$0.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/console-highlight.png b/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/console-highlight.png deleted file mode 100644 index 35bcda498bbc588..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/console-highlight.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html deleted file mode 100644 index 98eb233fad38d35..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Use the Inspector from the Web Console -slug: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console -tags: - - Guide - - Inspector - - Tools ---- -The element that's currently selected in the Page Inspector can be referenced in the Web Console using the variable $0.
DOM elements in the Web Console output get a target next to them. If you hover over this target, the element is highlighted in the page, and if you click the target, the element is selected in the Inspector:
In the Rules view, you can see a preview of images specified using background-image. Just hover over the rule:
- -
-
-From Firefox 41, if you right-click the image declaration, you'll see an option to copy the image as a data: URL:
- -
diff --git a/files/en-us/tools/page_inspector/how_to/visualize_transforms/index.html b/files/en-us/tools/page_inspector/how_to/visualize_transforms/index.html
deleted file mode 100644
index f70144305ae6ac5..000000000000000
--- a/files/en-us/tools/page_inspector/how_to/visualize_transforms/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Visualize transforms
-slug: Tools/Page_Inspector/How_to/Visualize_transforms
-tags:
- - Guide
- - Inspector
- - Tools
----
-If you hover over a transform property in the Rules view, you'll see the transformation overlaid in the page:
Note that the Animation inspector's UI was revamped in Firefox 43. To see what the Animation inspector looks like in Firefox 43 and subsequent releases, see the main "Work with animations" page.
-The Animation inspector enables you to:
- -{{EmbedYouTube("0vSIuKaqD8o")}}
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/developer.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/developer.png deleted file mode 100644 index 331428f162e09ec..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/developer.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html deleted file mode 100644 index 8dce17c0e05dfa1..000000000000000 --- a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'Animation inspector example: CSS transitions' -slug: >- - Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions ---- -Example animation using CSS transitions.
- -<div class="channel"> - <img src="developer.png" class="icon"/> - <span class="note">Firefox Developer Edition</span> -</div>- -
.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;
-}
-
-
-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);
-
-{{EmbedLiveSample("firefox-logo-animation", 500, 200)}}
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/developer.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/developer.png
deleted file mode 100644
index 331428f162e09ec..000000000000000
Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/developer.png and /dev/null differ
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html
deleted file mode 100644
index 566315e4d657006..000000000000000
--- a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: 'Animation inspector example: Web Animations API'
-slug: >-
- Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API
----
-Example animation using the Web Animations API.
- -<div class="channel"> - <img src="developer.png" id="icon"/> - <span id="note">Firefox Developer Edition</span> -</div>- -
.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;
-}
-
-
-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);
-
-
-
-{{EmbedLiveSample("firefox-logo-animation", 500, 200)}}
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_not_optimized.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_not_optimized.png
deleted file mode 100644
index 910506040425f34..000000000000000
Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_not_optimized.png and /dev/null differ
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_pane.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_pane.png
deleted file mode 100644
index 02fe47b31ee473d..000000000000000
Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_pane.png and /dev/null differ
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_swoosh_01.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_swoosh_01.png
deleted file mode 100644
index ea91cc8756152cc..000000000000000
Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/animation_swoosh_01.png and /dev/null differ
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/compositor.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/compositor.png
deleted file mode 100644
index ec9f9a4789664f9..000000000000000
Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/compositor.png and /dev/null differ
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/index.html b/files/en-us/tools/page_inspector/how_to/work_with_animations/index.html
deleted file mode 100644
index 135cceaf1a91b5d..000000000000000
--- a/files/en-us/tools/page_inspector/how_to/work_with_animations/index.html
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: Work with animations
-slug: Tools/Page_Inspector/How_to/Work_with_animations
-tags:
- - Guide
- - Inspector
- - Tools
----
-This article covers three tools you can use to visualize and edit animations:
- - - -The Page Inspector's Animations view 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.
- -It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.
To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. 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.
- -{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}
- -These animations are made using the Web Animations API.
- -Let's use the animation inspector to see what's going on in this example.
- -<div class="channel">{{EmbedYouTube("XmKeAKryE5I")}}
- -Let's take a closer look at the contents of the animation inspector here:
- -
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).
- -Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:
- -transition was used to animate a property@keyframes animation was usedThe bar contains a lightning bolt icon 
if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).
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.
- -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 @keyframes, there is one bar for each animation, labeled with its name.
If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.
If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:
- -
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.
- -To the left of the selector is a "target" icon (). Clicking this icon locks the highlighter on the element.
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 img#icon's animation:
This is telling us that two properties were modified: filter and transform. 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. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:
This is essentially a visual representation of the animation's keyframes:
- -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%)' }
-];
-
-Applying all this to our example, we can see that:
- -span#note and img#icon. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.img#icon animation:
-
- span#note animation:
-
- At the top of the animation inspector:
- -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.
- -If you open animation-inspector-compositing.html 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:
- -
Let's now look at animation-inspector-compositing-silly.html — 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 transform 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:
Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:
- -{{EmbedYouTube("mDHtLK88ZW4")}}
- -When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.
- -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 P1 and P2, and see the results in the page:
- -{{EmbedYouTube("GW5-R2ewaqA")}}
- -This feature uses open source code from Lea Verou's cubic-bezier.com.
- -The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":
- -{{EmbedYouTube("Jx-J2Yy0aSg")}}
diff --git a/files/en-us/tools/page_inspector/how_to/work_with_animations/target-icon.png b/files/en-us/tools/page_inspector/how_to/work_with_animations/target-icon.png deleted file mode 100644 index 84ab9afa0c9c785..000000000000000 Binary files a/files/en-us/tools/page_inspector/how_to/work_with_animations/target-icon.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/index.html b/files/en-us/tools/page_inspector/index.html deleted file mode 100644 index 61cbdd9d451e6a6..000000000000000 --- a/files/en-us/tools/page_inspector/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Page Inspector -slug: Tools/Page_Inspector -tags: - - CSS - - DOM - - HTML - - Stylesheets - - Web Development - - Web Development:Tools - - l10n:priority ---- -Use the Page Inspector to examine and modify the HTML and CSS of a page.
- -You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See remote debugging to learn how to connect the developer tools to a remote target.
- -To find your way around the Inspector, here's a quick tour of the UI.
- -You can split the Rules view out into its own pane, separate from the other tabs on the CSS pane — this is called 3-pane mode.
- -To find out what you can do with the Inspector, see the following how to guides:
- -This article is a quick tour of the main sections of the Page Inspector's user interface.
- -It covers the three top-level components of the Inspector's UI:
- -This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector.
The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection:
- -
Note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the Inspector.
- -To learn how to select an element, see the guide to selecting an element.
- -The Inspector is split into two or three sections, depending on your settings. You can toggle the 3-pane view of the Inspector. The following image shows the 2-pane layout:
- -
In 2-pane mode, the Inspector includes the HTML Pane, and the CSS Pane, which can contain one of six tools:
- -The following image shows the 3-pane mode (available from Firefox 62 onwards) which moves the CSS Rules view into a separate pane in the center of the Inspector. The following image shows 3-pane mode:
- -
As you can see, the CSS pane has moved into the center of the Inspector. To learn more about the structure of the HTML pane, see the guide to examining and editing HTML.
- -The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific. See above.
- -
See Examine and edit CSS for more details.
- -The Layout view displays the box model of the page. If the page includes any sections using either the Flexbox display model or CSS Grids, this view shows the Flexbox or Grid settings used on the page.
- -
To learn more about the Layout view, see Examine and edit the box model. Note that before Firefox 50, the box model view did not appear in the "Layout view" tab, but had its own tab.
- -When you are editing in the Rules view, you can see the changes you have made in the Changes view.
- -
The Computed view shows you the complete computed CSS for the selected element (The computed values are the same as what getComputedStyle would return.):
- -
To learn more about the CSS declarations listed in this view, see Examine computed CSS.
- -Starting with Firefox Developer Edition version 77, the Compatibility view shows CSS compatibility issues, if any, for properties applied to the selected element, and for the current page as a whole. It shows icons for the browsers that do support the properties, and notes properties that are experimental or deprecated.
- -
Untick the checkbox for any browser you are not interested in. As new browser versions are released, the version numbers in this list will be updated.
- -The Fonts view shows all the fonts in the page along with editable samples.
- -
See View fonts for more details.
- -The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:
- -
See Work with animations for more details.
diff --git a/files/en-us/tools/page_inspector/ui_tour/indpextor_rules.png b/files/en-us/tools/page_inspector/ui_tour/indpextor_rules.png deleted file mode 100644 index c1f3c35e7c0abef..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/indpextor_rules.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/inspector_2pane.png b/files/en-us/tools/page_inspector/ui_tour/inspector_2pane.png deleted file mode 100644 index 42834664ea8037d..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/inspector_2pane.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/inspector_computed.png b/files/en-us/tools/page_inspector/ui_tour/inspector_computed.png deleted file mode 100644 index dcd8594aca236ba..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/inspector_computed.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/inspector_fonts.png b/files/en-us/tools/page_inspector/ui_tour/inspector_fonts.png deleted file mode 100644 index 138361f572def4a..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/inspector_fonts.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/inspector_layout.png b/files/en-us/tools/page_inspector/ui_tour/inspector_layout.png deleted file mode 100644 index dfdcc2b714b4a79..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/inspector_layout.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/inspector_tool.png b/files/en-us/tools/page_inspector/ui_tour/inspector_tool.png deleted file mode 100644 index 9c32d3ae62fd46a..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/inspector_tool.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/pageinspector.png b/files/en-us/tools/page_inspector/ui_tour/pageinspector.png deleted file mode 100644 index a43b0d71e9de83f..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/pageinspector.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/select_element_button.png b/files/en-us/tools/page_inspector/ui_tour/select_element_button.png deleted file mode 100644 index 8c19f3b1c0960a3..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/select_element_button.png and /dev/null differ diff --git a/files/en-us/tools/page_inspector/ui_tour/track_changes.png b/files/en-us/tools/page_inspector/ui_tour/track_changes.png deleted file mode 100644 index d4e234b9c517d44..000000000000000 Binary files a/files/en-us/tools/page_inspector/ui_tour/track_changes.png and /dev/null differ diff --git a/files/en-us/tools/paint_flashing_tool/index.html b/files/en-us/tools/paint_flashing_tool/index.html deleted file mode 100644 index cc05458d14d7f9d..000000000000000 --- a/files/en-us/tools/paint_flashing_tool/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Paint Flashing Tool -slug: Tools/Paint_Flashing_Tool -tags: - - Web Performance ---- -The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.
- -When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that changes the element's style.
Repainting can be an expensive operation, so the browser tries to minimize the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.
- -The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.
- -Open the Toolbox, then click the icon labeled "Highlight painted area":
- -
Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:
- -
In this example, there are two main sources of repaints:
:hover pseudo-classTo deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again.
- -One area where implementation choices can affect repaint efficiency is in CSS transitions. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's margin-left, while the second way moves the element using the transform property.
<body> - <div id="container"> - <div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div> - <div class="moving-box" id="moving-box-transform">Transition using transform</div> - </div> -</body> - -- -
#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%);
-}
-
-To see the transition, move the mouse into the space below:
- -{{ EmbedLiveSample('Example_CSS_transitions', 600, 300) }}
- -Now switch paint flashing on, and try it again. You should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions.
Why? Well, when you use transform, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.
In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.
diff --git a/files/en-us/tools/paint_flashing_tool/paint-flashing-activated.png b/files/en-us/tools/paint_flashing_tool/paint-flashing-activated.png deleted file mode 100644 index 70d3738292ce3a5..000000000000000 Binary files a/files/en-us/tools/paint_flashing_tool/paint-flashing-activated.png and /dev/null differ diff --git a/files/en-us/tools/paint_flashing_tool/paint-flashing-open-from-toolbox.png b/files/en-us/tools/paint_flashing_tool/paint-flashing-open-from-toolbox.png deleted file mode 100644 index c8c7466ee5f7edd..000000000000000 Binary files a/files/en-us/tools/paint_flashing_tool/paint-flashing-open-from-toolbox.png and /dev/null differ diff --git a/files/en-us/tools/performance/allocations/allocations-view-1.png b/files/en-us/tools/performance/allocations/allocations-view-1.png deleted file mode 100644 index 53086280e3f9476..000000000000000 Binary files a/files/en-us/tools/performance/allocations/allocations-view-1.png and /dev/null differ diff --git a/files/en-us/tools/performance/allocations/allocations-view-2.png b/files/en-us/tools/performance/allocations/allocations-view-2.png deleted file mode 100644 index 0029a3b1e84ebaa..000000000000000 Binary files a/files/en-us/tools/performance/allocations/allocations-view-2.png and /dev/null differ diff --git a/files/en-us/tools/performance/allocations/allocations-view-long-gc.png b/files/en-us/tools/performance/allocations/allocations-view-long-gc.png deleted file mode 100644 index 82aba70720ec105..000000000000000 Binary files a/files/en-us/tools/performance/allocations/allocations-view-long-gc.png and /dev/null differ diff --git a/files/en-us/tools/performance/allocations/index.html b/files/en-us/tools/performance/allocations/index.html deleted file mode 100644 index 09950b09cc4d96c..000000000000000 --- a/files/en-us/tools/performance/allocations/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Allocations -slug: Tools/Performance/Allocations ---- -The Allocations view in the Performance tool shows you which functions in your page are allocating the most memory over the course of the profile.
- -For performance this is important mostly because allocating a lot of memory, or making a lot of allocations, can trigger garbage collection. This in turn can hurt the responsiveness of a page.
-The Allocations view is new in Firefox 46.
-To enable the Allocations view, you must check "Record Allocations" in the Performance tool settings, before recording a profile. Then record a profile as usual, and you will see a new tab labeled "Allocations" in the toolbar:
- -{{EmbedYouTube("Le9tTo7bqts")}}
- -The allocations view looks something like this:
- -
The allocations view periodically samples allocations that are made over the recording. Each row represents a function in which at least one allocation-sample was taken during the recording.
- -It includes the following columns:
- -Rows are sorted by the "Self Bytes" column.
- -So in the example above:
- -signalLater(), which is 28.57% of the total number of samples takenNext to each function name is a disclosure arrow. Click this to see the places this function was called from:
- -
Here you can see that signalLater() was called from two places: removeInner() and setSelectionInner(). In this way you can walk back up the call stack, and understand better the context for these allocations.
You'll see that there are separate sets of columns for "Self" and for "Total". "Self" records samples taken only in this function. "Total" records samples taken in this function or in functions called by this function. At the top level, these are always the same, since the view presents "leaf" functions at the top level (that is, it presents an inverted view of the call stack). But if you start walking back up the call stack, you'll see the difference:
- -
Here, 8904 samples were taken in signalLater(). But signalLater() was called from two places: removeInner() and setSelectionInner(). Both these functions have 0 in Self Count, meaning that no allocations were seen directly in these functions. However, removeInner() has 8901 in Total Count, while setSelectionInner() has just 3 in Total Count. This is telling us that, of the 8904 allocations seen in signalLater(), all but three came through the removeInner() branch.
Of course, the memory allocated by a site is in itself useful information to know. But the main connection between the allocation profile of a site and its responsiveness is the cost of garbage collection (GC).
- -With a garbage-collected language, like JavaScript, the runtime periodically needs to walk the heap looking for objects that are no longer reachable, and then freeing the memory they occupy. While GC events like this are executing, the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.
- -To reduce the impact on responsiveness, SpiderMonkey (the JavaScript engine in Firefox) can perform GC in small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.
- -GC events are shown as red markers in the Waterfall view, and are a big red flag for responsiveness, sometimes running for hundreds of milliseconds:
- -
If you're seeing GC events in your site's performance profile, what can you do? SpiderMonkey uses a complex set of heuristics to decide when to do what sort of garbage collection.
- -In general, though: allocation pressure - allocating a lot of memory, or allocating memory at a high rate - makes SpiderMonkey more likely to run garbage collection, and more likely to run full, non-incremental garbage collection.
- -If a GC event was caused by allocation pressure, then the sidebar on the right of the marker in the Waterfall view contains a link labeled "Show allocation triggers". If you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last GC cycle to the start of the one you clicked on. This shows you all the allocations that collectively triggered this GC event:
- -{{EmbedYouTube("tO5ovD9Jw4k")}}
- -If you're seeing these problems, consider whether you can reduce the number or size of the allocations you're making here. For example:
- -The Call Tree tells you which JavaScript functions the browser spent the most time in. By analyzing its results, you can find bottlenecks in your code - places where the browser is spending a disproportionately large amount of time.
- -These bottlenecks are the places where any optimizations you can make will have the biggest impact.
-The Call Tree is a sampling profiler. It periodically samples the state of the JavaScript engine and records the stack for the code executing at the time. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser spent executing it.
- -In this article, we'll use the output of a simple program as an example. If you want to get the program to experiment with your profile, you can find it here. You can find the specific profile we discuss here - just import it to the performance tool to follow along.
- -There's a short page describing the structure of this program here.
- -Note that we use the same program - the same profile, in fact - in the documentation page for the Flame Chart.
-The screenshot below shows the output of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort. To do this, it generates some arrays filled with random integers and sorts them using each algorithm in turn.
- -We've zoomed into the part of the recording that shows a long JavaScript marker:
- -
The Call Tree presents the results in a table. Each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest.
- -Samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function).
- -Total Time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. These numbers should roughly be the same as the number of samples.
- -Total Cost is that number as a percentage of the total number of samples in the selected portion of the recording.
- -Self Time is calculated as the time spent in that particular function, excluding its children. This comes from the captured stacks where this function is the leafmost function.
- -Self Cost is calculated from Self Time as a percentage of the total number of samples in the selected portion of the recording.
- -In the current version of the Call Tree, these are the most important columns. Functions with a relatively high Self Cost are good candidates for optimization, either because they take a long time to run, or because they are called very often.
- -The inverted call tree is a good way to focus on these Self Cost values.
-This screenshot tells us something we probably already knew: Bubble sort is a very inefficient algorithm. We have about six times as many samples in bubble sort as in selection sort, and 13 times as many as in quicksort.
- -Next to each function name is a disclosure arrow: Click that, and you can see the path back up the call tree, from the function in which the sample was taken, to the root. For example, we can expand the entry for bubbleSort():
So we can see the call graph is like this:
- -sortAll() - - -> sort() - - -> bubbleSort()- -
Note also that Self Cost for sort() here is 1.45%, and note that this is the same as for the separate entry for sort() later in the list. This is telling us that some samples were taken in sort() itself, rather than in the functions it calls.
Sometimes there's more than one path back from an entry to the top level. Let's expand the entry for swap():
There were 253 samples taken inside swap(). But swap() was reached by two different paths: both bubbleSort() and selectionSort() use it. We can also see that 252 of the 253 samples in swap() were taken in the bubbleSort() branch, and only one in the selectionSort() branch.
This result means that bubble sort is even less efficient than we had thought! It can shoulder the blame for another 252 samples, or almost another 10% of the total cost.
- -With this kind of digging, we can figure out the whole call graph, with associated sample count:
- -sortAll() // 8 - - -> sort() // 37 - - -> bubbleSort() // 1345 - - -> swap() // 252 - - -> selectionSort() // 190 - - -> swap() // 1 - - -> quickSort() // 103 - - -> partition() // 12- -
You'll also see some rows labeled Gecko, Input & Events, and so on. These represent internal browser calls.
- -This can be useful information too. If your site is making the browser work hard, this might not show up as samples recorded in your code, but it is still your problem.
- -In our example, there are 679 samples assigned to Gecko - the second-largest group after bubbleSort(). Let's expand that:
This result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our sort() call. If we look at the code for sort(), it should be fairly obvious that the high platform data cost is coming from repeated calls to console.log():
function sort(unsorted) {
- console.log(bubbleSort(unsorted));
- console.log(selectionSort(unsorted));
- console.log(quickSort(unsorted));
-}
-
-It would certainly be worthwhile considering more efficient ways of implementing this.
- -One thing to be aware of here is that idle time is classified as Gecko, so parts of your profile where your JavaScript isn't running will contribute Gecko samples. These aren't relevant to the performance of your site.
- -By default, the Call Tree doesn't split platform data out into separate functions, because they add a great deal of noise, and the details are not likely to be useful to people not working on Firefox. If you want to see the details, check "Show Gecko Platform Data" in the Settings.
-An inverted call tree reverses the order of all stacks, putting the leafmost function calls at the top. The direct consequence is that this is a view that focuses more on the function's Self Time information. This is a very useful view to find some hot spot in your code.
- -To display this view, click the gear icon on the right-hand end of the performance tab and select Invert Call Tree.
- -
List of demo pages for performance scenarios and walkthroughs.
- -{{ ListSubpages ("/en-US/docs/Tools/Performance/Examples", 5) }}
diff --git a/files/en-us/tools/performance/examples/sorting_algorithms_comparison/index.html b/files/en-us/tools/performance/examples/sorting_algorithms_comparison/index.html deleted file mode 100644 index 999ab4882ff7f75..000000000000000 --- a/files/en-us/tools/performance/examples/sorting_algorithms_comparison/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Sorting algorithms comparison -slug: Tools/Performance/Examples/Sorting_algorithms_comparison ---- -This article describes a simple example program that we use in two of the Performance guides: the guide to the Call Tree and the guide to the Flame Chart.
- -This program compares the performance of three different sorting algorithms:
- -It consists of the following functions:
- -sortAll() |
- Top-level function. Iteratively (200 iterations) generates a randomized array and calls sort(). |
-
sort() |
- Calls each of bubbleSort(), selectionSort(), quickSort() in turn and logs the result. |
-
bubbleSort() |
- Implements a bubble sort, returning the sorted array. | -
selectionSort() |
- Implements a selection sort, returning the sorted array. | -
quickSort() |
- Implements quicksort, returning the sorted array. | -
swap() |
- Helper function for bubbleSort() and selectionSort(). |
-
partition() |
- Helper function for quickSort(). |
-
Its call graph looks like this:
- -sortAll() // (generate random array, then call sort) x 200 - - -> sort() // sort with each algorithm, log the result - - -> bubbleSort() - - -> swap() - - -> selectionSort() - - -> swap() - - -> quickSort() - - -> partition()- -
The implementations of the sorting algorithms in the program are taken from https://github.com/nzakas/computer-science-in-javascript/ and are used under the MIT license.
- -You can try out the example program here and clone the code here (be sure to check out the gh-pages branch). You can also download the specific profile we discuss - just import it to the Performance tool if you want to follow along. Of course, you can generate your own profile, too, but the numbers will be a little different.
diff --git a/files/en-us/tools/performance/flame_chart/index.html b/files/en-us/tools/performance/flame_chart/index.html deleted file mode 100644 index 782be0d7fb6887d..000000000000000 --- a/files/en-us/tools/performance/flame_chart/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Flame Chart -slug: Tools/Performance/Flame_Chart ---- -The Flame Chart shows you the state of the JavaScript stack for your code at every millisecond during the performance profile.
- -This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.
-The Call Tree and the Flame Chart are both used to analyze your site's JavaScript, and they both use the same data: a sample of the JavaScript engine's stack, taken periodically during the recording.
- -But while the Call Tree organizes this data to show you where your program is spending most time in aggregate across the recording, the Flame Chart uses it to show you when in the recording particular functions are executing. Essentially it shows you the state of the call stack at any given point during the recording.
- -Here's a screenshot showing the Flame Chart for a section of a profile:
- -
First of all, you'll see that, in the recording overview pane, we've selected a small slice of the recording to view in the Flame Chart. The Flame Chart displays a lot of data, so to get readable results, it's usually necessary to zoom in.
- -In the Flame Chart view itself, along the X-axis is time. The screenshot above covers the period from 1435ms to a little past 1465ms. Along the Y-axis are the functions on the call stack at that point in time, with the top-level at the top, and the leaf function at the bottom. Functions are color-coded to make them easier to distinguish.
- -This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.
- -To work effectively with the Flame Chart, you'll need to be able to navigate it. There are two main controls you can use to navigate the Flame Chart:
- -| Zoom: increase/decrease the selected portion of the complete profile that's displayed in the Flame Chart | -
- 1) Mouse wheel up/down in the Flame Chart. - -2) Trackpad 2 fingers up/down in the Flame Chart. - |
-
| Pan: move the selected portion of the complete profile left and right | -
- 1) Click and drag the selected portion in the recording overview pane. - -2) Click and drag anywhere in the Flame Chart. - |
-
To see how the Flame Chart can reveal the behavior of your program, we'll look at a simple example. We'll use the same example as in the Call Tree page: a program that compares three different sorting algorithms. There's a separate page that gives an overview of this program's structure.
- -We'll use the same profile file as that used in the Call Tree page. In the call tree page, we figured out that the program call graph in that profile, and the associated sample count, looked like this:
- -sortAll() // 8 - - -> sort() // 37 - - -> bubbleSort() // 1345 - - -> swap() // 252 - - -> selectionSort() // 190 - - -> swap() // 1 - - -> quickSort() // 103 - - -> partition() // 12- -
First, we'll just select the whole section in which the program was active:
- -
At the top, colored purple, is the sortAll() call, running throughout the program from start to finish. Underneath that, colored olive-green, are the calls it's making to sort(). Underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm.
Let's zoom in:
- -
This slice is about 140 ms long, and shows us more details of the functions being called by sort(). The sort() code is just this:
function sort(unsorted) {
- console.log(bubbleSort(unsorted));
- console.log(selectionSort(unsorted));
- console.log(quickSort(unsorted));
-}
-
-The markers labeled "bubb..." and colored olive-green are presumably bubbleSort(). The ones colored plain green are presumably the other sort functions. Even at a glance, we can see that the bubble sort blocks are much wider (of a longer duration) than the others.
We can also see some functions being called from bubbleSort(), colored purple.
Let's zoom in one more time:
- -
This slice is about 20ms long. We can see that the purple markers underneath bubbleSort() are the calls to swap(). If you counted them all, the Call Tree view tells us that you'd see 253 of them. All the ones in this zoom are underneath bubbleSort(), but according to the Call Tree view, the profile does contain one under selectionSort().
We can also see that two of the green markers are for selectionSort() and quickSort(), but we're also seeing calls to platform (Gecko) code in between our calls to the sorting functions. It seems very likely that this is from the console.log() calls in sort().
Frame rate is a measure of a website's responsiveness. A low or inconsistent frame rate can make a site appear unresponsive or janky, making for a bad user experience.
- -A frame rate of 60fps is the target for smooth performance, giving you a time budget of 16.7ms for all the updates needed in response to some event.
- -The frame rate graph in the Performance tool shows you the frame rate over the course of a recording. It gives you a quick indication of where your site might be having problems, enabling you to use the other tools for a more in-depth analysis.
-Frame rate is the rate at which a video device can produce images (or frames). It's most familiar from film and gaming, but is now widely used as a performance measure for websites and web apps.
- -In web performance, a frame encapsulates the work the browser needs to do in order to update and repaint the screen. Frame rate is most obviously applicable to animations: if the frame rate is too low, an animation will have a jerky appearance, while a faster frame rate will be smoother. But frame rate is also useful as a general measure of a site's responsiveness as the user interacts with it.
- -For example, if moving the mouse over some page element triggers some JavaScript that changes the element's appearance, and that triggers a reflow and a repaint, then all this work needs to be completed in that frame. If it takes too long for the browser to process the frame, then the browser will appear momentarily unresponsive (janky).
- -Similarly, if scrolling through a page involves a lot of complex page updates and the browser can't keep up an acceptable frame rate, scrolling the page will appear sluggish or will occasionally freeze.
- -In general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging.
- -A frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time budget of 16.7ms for all the updates that need to be made synchronously in response to some event.
- -However, consistency is especially important: if you can't deliver 60fps, it's better to deliver lower frame rates more consistently, and avoid sudden dips in the frame rate which cause the site to freeze.
-The frame rate graph is found in the Recording overview part of the Performance tool. It takes a timestamp when the browser finishes a frame, and uses this to keep track of the frame rate over the course of the recording.
- -
The x-axis is time over the profile period, and there are three annotations: the maximum frame rate, the average frame rate, and the lowest frame rate.
The great value of the frame rate graph is that, like the Web Console, it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for more in-depth analysis. For example, here's a screenshot of a performance profile:
- -
You can see that the average frame rate is reasonably healthy, but there are three spots where frame rate collapses for tens of milliseconds. This would certainly cause a noticeable stutter for any animations that were playing in the page.
- -The frame rate graph is correlated with the waterfall summary directly above it, and there we can see that the first two drops in the frame rate are correlated with orange bars, which denote time spent executing JavaScript.
- -If we select one of these slices of the recording, the main Waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem:
- -
We have a JavaScript function from a click event that's blocking the main thread for 170 milliseconds.
- -Which function, though? Switch to the Flame Chart to see the call stack at that point:
- -
The offending function is called doPointlessComputations(), and it's defined in "main.js". To fix it, we might consider splitting it into pieces and running the pieces inside requestAnimationFrame, or even running the entire function in a worker. The Intensive JavaScript article shows how you can use strategies like this to fix responsiveness problems caused by long-running synchronous JavaScript.
To open the Performance tools:
- -
To start a new recording, press the stopwatch icon in the Recordings pane. To stop, press it again:
- -
You can also start and stop recording from the Web Console, using console.profile() and console.profileEnd().
To save a profile, click the link labeled "Save" in the Recordings pane:
- -
To load a profile, click "Import..." and choose the file:
- -
To clear all loaded profiles, click "Clear".
- -If you do this, you'll lose any loaded profiles that you have not saved.
-
To switch between the Waterfall, Call Tree, and Flame Chart tools, use the buttons in the toolbar:
- -
To control which markers are shown in the Waterfall, use the button in the toolbar:
- -
To zoom into a slice of the recording, select that slice in the recording overview:
- -
The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.
- -You get four sub-tools to examine aspects of the profile in more detail:
- -{{EmbedYouTube("WBmttwfA_k8")}}
- -To find your way around the Performance tool, here's a quick tour of the UI.
-The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in jank as the browser struggles to hit a smooth frame rate.
- -The Frame rate and Waterfall can give you insight into the work the browser's doing in a CSS animation, to help diagnose performance problems.
-With CSS animations you specify a number of keyframes, each of which uses CSS to define the appearance of the element at a particular stage of the animation. The browser creates the animation as a transition from each keyframe to the next.
- -Compared with animating elements using JavaScript, CSS animations can be easier to create. They can also give better performance, as they give the browser more control over when to render frames, and to drop frames if necessary.
- -However, the performance cost of modifying a CSS property can vary from one property to another. Animating expensive CSS properties can result in jank as the browser struggles to hit a smooth frame rate.
- -The process the browser uses to update the page when a CSS property has changed can be described as a waterfall consisting of the following steps:
- -
This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.
- -In the context of the rendering waterfall, some properties are more expensive than others:
- -| Property type | -Cost | -Examples | -
|---|---|---|
| Properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint. | -   |
-
-
|
-
|
- Properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. - |
-  |
- - - | -
| Properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. | -  |
- transform- opacity |
-
The CSS Triggers website shows how much of the waterfall is triggered for each CSS property, with information for most CSS properties by browser engine.
-In this section we'll see how the Waterfall can highlight the difference between animating using margin and animating using transform.
The intention of this scenario isn't to convince you that animating using margin is always a bad idea. It's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems.
If you want to play along, the demo website is here. It looks like this:
- -
It has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform.
There are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint.
Leaving the "Use margin" option set, start the animation, open the Performance tool, and make a recording. You'll only need to record a few seconds.
- -Open up the first recording. Exactly what you'll see depends a lot on your machine and system load, but it will be something like this:
- -
This is showing three distinct views: (a) an overview of the Waterfall, (b) the frame rate, and (c) the timeline details.
- -
This is showing a compressed view of the Waterfall. The predominance of green is telling us that we're spending a lot of time painting.
- -
This is showing frame rate. Average frame rate here is 46.67fps, well below the target of 60fps. Worse, though, is that the frame rate is very jagged, with lots of dips into the twenties and teens. It's unlikely you'll see a smooth animation here, especially when you add in user interaction.
- -The rest of the recording shows the Waterfall view. If you scroll through this, you'll see a pattern like this:
- -
This is showing us the rendering waterfall. In each animation frame, we recalculate styles for every element, then perform a single layout, then a repaint.
- -You can see that paint especially is hurting performance here. In the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. With only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate.
- -You can experiment with this: try removing the box shadow using the Page Inspector, and see how that affects paint time. But next, we'll see how using transform instead of margin eliminates those expensive paints entirely.
Now switch the radio button in the web page to "Use transform", and make a new recording. It will look something like this:
- -
Compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation.
- -
Compared with the version that uses margin, this is looking pretty good. We're averaging nearly 60fps, and apart from one dip near the start, we're getting a consistently high frame rate.
- -The timeline view shows the reason for the improved frame rate. Compared with the version that uses margin, we're not spending any time in layout or (more importantly in this case) in paint:
- -
In this case, using transform significantly improved the site's performance, and the performance tools were able to show how and why it did.
Performance scenarios
diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/index.html b/files/en-us/tools/performance/scenarios/intensive_javascript/index.html deleted file mode 100644 index e899a1787cd3a0b..000000000000000 --- a/files/en-us/tools/performance/scenarios/intensive_javascript/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Intensive JavaScript -slug: Tools/Performance/Scenarios/Intensive_JavaScript ---- -By default the browser uses a single thread to run all the JavaScript in your page as well as to perform layout, reflows, and garbage collection. This means that long-running JavaScript functions can block the thread, leading to an unresponsive page and a bad user experience.
- -You can use the Frame rate and Waterfall tools to see when JavaScript is causing performance problems, and to single out the particular functions that need attention.
- -In this article we'll take an example site whose long-running JavaScript causes responsiveness problems, and apply two different approaches to fixing them. The first is to split long-running functions into pieces and use requestAnimationFrame to schedule each piece, and the second is to run the whole function in a separate thread using a web worker.
If you want to play along you can find the demo website here.
- -The demo website looks like this:
- -
It has three controls:
requestAnimationFrame(), or in another thread using a worker.Leaving the radio button set to "Use blocking call in main thread", make a recording:
- -Exactly what you see will vary from one machine to another, but it will be something like this:
- -
The top half of this is the waterfall overview. It gives us a compressed view of the Waterfall, which tells us what kinds of operations the browser is doing during the recording. The pink says that we are mostly performing CSS calculations and possibly reflow: this is the CSS animation that's running throughout the profile. Then there are three solid blocks of orange, representing JavaScript execution, one for each time we pressed the button.
- -The bottom half, which is correlated with the timeline summary in time, shows frame rate. We can see that frame rate is pretty healthy for most of the recording, but collapses completely whenever we press the button.
- -We can select one of these periods and have a closer look at it in the main Waterfall view:
- -
Here, when we pressed the button, the browser ran a JavaScript function, or series of functions, that blocked the main thread for 71.73ms, or more than four times our frame budget.
- -Which function, though? By switching to the Flame Chart view we can find out:
- -
This shows us the JS call stack at this point in the execution. At the top of the stack is a function called calculatePrimes(), and we can see its filename and line number. Here's the code, together with its immediate caller:
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);
-}
-
-
-We're just running a (very inefficient) primality test 50 times, for some quite large numbers.
- -In the first attempt at fixing this, we'll split up the function into a number of much smaller self-contained functions, and schedule each one using requestAnimationFrame().
requestAnimationFrame() tells the browser to run the given function in each frame, just before it performs a repaint. As long as each function is reasonably small, the browser should be able to keep inside its frame budget.
It's pretty simple to split up calculatePrimes(): we will just calculate primality for each number in a separate function:
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);
-}
-
-Let's test this version out: select the radio button labeled "Use requestAnimationFrame" and capture another profile. This time, the recording should look something like this:
- -
This is exactly what we might have expected to see. Instead of a single solid orange block, each button-press shows up as a long sequence of very short orange blocks. The orange blocks appear one frame apart, and each one represents one of the functions called from requestAnimationFrame(). Note that there are only two button-presses in this profile.
The function calls are interleaved with the pink blocks from the CSS animation, and each function is short enough that the browser can handle it without the overall frame rate dropping.
- -Using requestAnimationFrame worked to solve the responsiveness problem here, but there are a couple of potential problems with it:
In this version we'll try to fix the problem using a web worker. Web workers enable you to run JavaScript in a separate thread. The main thread and the worker thread can't call each other directly, but communicate using an asynchronous messaging API.
- -The main thread code would look something like this:
- -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
- });
-}
-
-The main difference here, compared with the original, is that we need to:
- -Then we need a new file "calculate.js", that looks like this:
- -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;
-}
-
-In the worker, we have to listen for a message telling us to start, and send a "done" message back when we are done. The code that actually performs the computations is exactly the same as the original code.
- -So how does this version perform? Switch the radio button to "Use a worker", and capture a new profile. You should see something like this:
- -
In this profile we pushed the button three times. Compared with the original, each button-press is visible in the overview as two very short orange markers:
- -doPointlessComputationsInWorker() function that handles the click event and starts the worker's processinghandleWorkerCompletion() function that runs when the worker calls "done".In between, the worker runs all the primality tests, and it doesn't seem to have any effect at all on the responsiveness of the main thread. This might seem unlikely, but because workers run in a separate thread, they can take advantage of multi-core processors, which a single-threaded web site can't.
- -The main limitation of web workers is that DOM APIs are not available to code running in a worker.
diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/js-worker-demo.png b/files/en-us/tools/performance/scenarios/intensive_javascript/js-worker-demo.png deleted file mode 100644 index e3f12ed65f04c20..000000000000000 Binary files a/files/en-us/tools/performance/scenarios/intensive_javascript/js-worker-demo.png and /dev/null differ diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-flame-chart.png b/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-flame-chart.png deleted file mode 100644 index 8a8c09b78d53939..000000000000000 Binary files a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-flame-chart.png and /dev/null differ diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-overview.png b/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-overview.png deleted file mode 100644 index d819adea4e6b9fa..000000000000000 Binary files a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-overview.png and /dev/null differ diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-waterfall.png b/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-waterfall.png deleted file mode 100644 index ca1234d734c0e3c..000000000000000 Binary files a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-blocking-waterfall.png and /dev/null differ diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-raf-overview.png b/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-raf-overview.png deleted file mode 100644 index 32cb6f82b321aba..000000000000000 Binary files a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-raf-overview.png and /dev/null differ diff --git a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-worker-overview.png b/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-worker-overview.png deleted file mode 100644 index 79e45c18faa9f65..000000000000000 Binary files a/files/en-us/tools/performance/scenarios/intensive_javascript/perf-js-worker-overview.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/allocations-view-1.png b/files/en-us/tools/performance/ui_tour/allocations-view-1.png deleted file mode 100644 index 53086280e3f9476..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/allocations-view-1.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/index.html b/files/en-us/tools/performance/ui_tour/index.html deleted file mode 100644 index 5850aabe47d570d..000000000000000 --- a/files/en-us/tools/performance/ui_tour/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: UI Tour -slug: Tools/Performance/UI_Tour ---- -The performance tool's UI consists of 4 main pieces:
- -
The toolbar contains buttons to:
- -
The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.
- -
At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".
- -This displays an overview of the entire recording, with the x-axis representing time.
- -
It contains two elements: an overview of the Waterfall and a frame rate graph.
- -This presents a compressed view of the Waterfall:
- -
Recorded operations are color-coded using the same scheme as in the main Waterfall view.
- -The frame rate gives you an overview of the browser's responsiveness during the recording:
- -
See the separate article on frame rate.
- -Because these elements are synchronized, you can correlate events in one element with events in another.
- -For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:
- -
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:
- -
The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.
- -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.
- -
To learn much more about the Waterfall, see the separate Waterfall page.
- -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.
- -
- To learn much more about the Call Tree, see the separate Call Tree page.
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:
- -
To learn much more about the Flame Chart, see the separate Flame Chart page.
- -The Allocations view is new in Firefox 46.
-The Allocations 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.
- -
The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile.
- -To learn much more about the Allocations view, see the separate Allocations page.
diff --git a/files/en-us/tools/performance/ui_tour/perf-call-tree.png b/files/en-us/tools/performance/ui_tour/perf-call-tree.png deleted file mode 100644 index 757dd3c3c71f660..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-call-tree.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-flame-chart.png b/files/en-us/tools/performance/ui_tour/perf-flame-chart.png deleted file mode 100644 index eac8095b2953cf6..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-flame-chart.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-frame-rate.png b/files/en-us/tools/performance/ui_tour/perf-frame-rate.png deleted file mode 100644 index f43ff00b03facee..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-frame-rate.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-overview-correlation.png b/files/en-us/tools/performance/ui_tour/perf-overview-correlation.png deleted file mode 100644 index b950d4ba1169faf..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-overview-correlation.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-overview.png b/files/en-us/tools/performance/ui_tour/perf-overview.png deleted file mode 100644 index e5e97bbf11872d1..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-overview.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-recordings-pane.png b/files/en-us/tools/performance/ui_tour/perf-recordings-pane.png deleted file mode 100644 index 092a8a67ce9157e..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-recordings-pane.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-tool-pieces.png b/files/en-us/tools/performance/ui_tour/perf-tool-pieces.png deleted file mode 100644 index 098c5a3257e3a21..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-tool-pieces.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-toolbar.png b/files/en-us/tools/performance/ui_tour/perf-toolbar.png deleted file mode 100644 index 11fd1bae433e2ba..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-toolbar.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-waterfall-overview.png b/files/en-us/tools/performance/ui_tour/perf-waterfall-overview.png deleted file mode 100644 index a96471b1c6cac56..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-waterfall-overview.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-waterfall.png b/files/en-us/tools/performance/ui_tour/perf-waterfall.png deleted file mode 100644 index f416c193efbec5d..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-waterfall.png and /dev/null differ diff --git a/files/en-us/tools/performance/ui_tour/perf-zoomed.png b/files/en-us/tools/performance/ui_tour/perf-zoomed.png deleted file mode 100644 index 5083e1461764f75..000000000000000 Binary files a/files/en-us/tools/performance/ui_tour/perf-zoomed.png and /dev/null differ diff --git a/files/en-us/tools/performance/waterfall/async-stack.png b/files/en-us/tools/performance/waterfall/async-stack.png deleted file mode 100644 index 45d5bb22268bf91..000000000000000 Binary files a/files/en-us/tools/performance/waterfall/async-stack.png and /dev/null differ diff --git a/files/en-us/tools/performance/waterfall/blue.png b/files/en-us/tools/performance/waterfall/blue.png deleted file mode 100644 index c9264fbe1fdb157..000000000000000 Binary files a/files/en-us/tools/performance/waterfall/blue.png and /dev/null differ diff --git a/files/en-us/tools/performance/waterfall/gray.png b/files/en-us/tools/performance/waterfall/gray.png deleted file mode 100644 index d6afce2e20927cd..000000000000000 Binary files a/files/en-us/tools/performance/waterfall/gray.png and /dev/null differ diff --git a/files/en-us/tools/performance/waterfall/green.png b/files/en-us/tools/performance/waterfall/green.png deleted file mode 100644 index 760400b7fa1fb10..000000000000000 Binary files a/files/en-us/tools/performance/waterfall/green.png and /dev/null differ diff --git a/files/en-us/tools/performance/waterfall/index.html b/files/en-us/tools/performance/waterfall/index.html deleted file mode 100644 index 3f78db141e367ce..000000000000000 --- a/files/en-us/tools/performance/waterfall/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: Waterfall -slug: Tools/Performance/Waterfall ---- -The Waterfall gives you insight into the sorts of things the browser is doing as it runs your site or app. It's based on the idea that the things a browser does when running a site can be divided into various types - running JavaScript, updating layout, and so on - and that at any given point in time, the browser is doing one of those things.
- -So if you see a sign of a performance problem - a drop in the frame rate, for example - you can go to the Waterfall to see what the browser was doing at that point in the recording.
-
Along the X-axis is time. Recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution.
- -When a marker is selected you'll see more information about it in a sidebar on the right. This includes the marker's duration and some more information that's specific to the marker type.
- -The markers for operations are color-coded and labeled. The following operations are recorded:
- -| Name and description | -Color | -Detailed information | -
|---|---|---|
|
-
-
- JavaScript code that's executed in response to a DOM event. - |
-  |
-
-
|
-
|
- JavaScript functions executed in the page are labeled with the reason the function was called: - -Script Tag |
- |
-
-
|
-
|
- Parse HTML - -Time spent parsing the page's HTML. - |
- |
-
-
|
-
|
- Parse XML - -Time spent parsing the page's XML. - |
- |
-
-
|
-
|
- Recalculate Style - -Calculating the computed styles that apply to page elements. - |
-  |
-
-
|
-
|
- Layout - -Calculating the position and size of page elements. This operation is sometimes called "reflow". - |
- |
- - |
|
- Paint - -Drawing pixels to the screen. - |
-  |
- - |
|
- Garbage Collection - -Garbage collection event. Non-incremental GC events are labeled "(Non-incremental)". - |
-  |
-
-
-
- New in Firefox 46: if the GC event was caused by allocation pressure, a link appears, labeled "Show Allocation Triggers". Click the link to see the allocation profile leading up to this GC event. - -See Allocations and Garbage Collection for more details. - |
-
|
- Cycle Collection - -Reclaiming C++ reference-counted data structures. - -Like garbage collection, but for C++ objects. See Kyle Huey's blog post about cycle collection. - |
- |
-
-
|
-
|
- CC Graph Reduction - -Preparation/pre-optimization for Cycle Collection. - |
- |
-
-
|
-
|
- Console - -The period between matching calls to |
-  |
-
-
|
-
|
- Timestamp - -A single call to |
-  |
-
-
|
-
|
- DOMContentLoaded - -The document's |
- |
- - |
|
- Load - -The document's |
- |
- - |
|
- Worker event in main thread - -Shown when the main thread sends a message to a worker, or receives a message from a worker. - |
- |
-
- One of: - -
|
-
|
- Worker event in worker thread - -Shown when a worker receives a message from the main thread, or sends a message to the main thread. - |
-  |
-
- One of: - -
|
-
The markers, and their colors, are the same in the Waterfall tool as in the Waterfall overview, making is easy to correlate from one to the other.
- -You can control which markers are displayed using a button in the Toolbar:
- -
Exactly what you'll see in the Waterfall is very dependent on the kind of thing your site is doing: JavaScript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. But there are common patterns which can alert you to possible performance problems.
- -One pattern that you'll often see in the Waterfall view is something like this:
- -
This is a visualization of the basic algorithm the browser uses to update the page in response to some event:
- -This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.
- -Importantly for responsiveness, the browser doesn't always have to go through every step:
- -width, display, font-size, or top, will cause a reflow. However, changing properties that don't alter geometry or position, such as color or opacity, will not.transform property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition.The Animating CSS properties article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.
- -By default, a site's JavaScript is executed in the same thread that the browser uses for layout updates, repaints, DOM events, and so on. This means that long-running JavaScript functions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze.
- -Using the frame rate tool and the Waterfall together, it's easy to see when long-running JavaScript is causing responsiveness problems. In the screenshot below, we've zoomed in on a JS function that's caused a drop in the frame rate:
- -
The Intensive JavaScript article shows how the Waterfall can highlight responsiveness problems caused by long JavaScript functions, and how you can use asynchronous methods to keep the main thread responsive.
- -Some paint effects, such as box-shadow, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. If you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the Waterfall for long green markers.
Red markers in the Waterfall represent garbage collection (GC) events, in which SpiderMonkey (the JavaScript engine in Firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it. GC is relevant to performance because while it's running the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.
- -To help reduce the length of pauses, SpiderMonkey implements incremental GC: this means that it can perform garbage collection in fairly small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.
- -In trying to avoid GC events, and especially non-incremental GC events, it's wise not to try to optimize for the specific implementation of the JavaScript engine. SpiderMonkey uses a complex set of heuristics to determine when GC is needed, and when non-incremental GC in particular is needed. In general, though:
- -When the Waterfall records a GC marker it indicates:
- -Two markers are directly controlled by console API calls: "Console" and "Timestamp".
- -These enable you to mark a specific section of the recording.
- -To make a console marker, call console.time() at the start of the section, and console.timeEnd() at the end. These functions take an argument which is used to name the section.
For example, suppose we have code like this:
- -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;
-}
-
-The Waterfall's output will look something like this:
- -
The marker is labeled with the argument you passed to console.time(), and when you select the marker, you can see the program stack in the right-hand sidebar.
New in Firefox 41.
- -Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point console.timeEnd() was called. If console.timeEnd() was called from the resolution of a Promise, it will also display "(Async: Promise)", under which it will show the "async stack": that is, the call stack at the point the promise was made.
For example, consider code like this:
- -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);
- });
-}
-
-The Waterfall will display a marker for the period between time() and timeEnd(), and if you select it, you'll see the async stack in the sidebar:
Timestamps enable you to mark an instant in the recording.
- -To make a timestamp marker, call console.timeStamp(). You can pass an argument to label the timestamp.
For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:
- -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;
-}
-
-In the Waterfall you'll now see something like this:
- -
Determining why CPUs are busy is a routine task for performance analysis, which often involves profiling stack traces. Profiling by sampling at a fixed rate is a coarse but effective way to see which code-paths are hot (busy on-CPU). It usually works by creating a timed interrupt that collects the current program counter, function address, or entire stack back trace, and translates these to something human readable when printing a summary report.
- -Profiling data can be thousands of lines long, and difficult to comprehend. Flame graphs are a visualization for sampled stack traces, which allows hot code-paths to be identified quickly. See theFlame Graphs main page for uses of this visualization other than CPU profiling.
- -Flame Graphs can work with any CPU profiler on any operating system. My examples here use Linux perf_events, DTrace, SystemTap, and ktap. See the Updates list for other profiler examples, and github for the flame graph software.
diff --git a/files/en-us/tools/remote_debugging/chrome_desktop/index.html b/files/en-us/tools/remote_debugging/chrome_desktop/index.html deleted file mode 100644 index c82264165f9cdd5..000000000000000 --- a/files/en-us/tools/remote_debugging/chrome_desktop/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Remotely debugging Chrome Desktop -slug: Tools/Remote_Debugging/Chrome_Desktop ---- -How to connect the Firefox Developer Tools to the Google Chrome browser running on the desktop.
- -Note that our support for this depends on the Valence add-on, which bridges the debugging protocol used by Firefox and that used by Chrome. Support for Valence is still experimental.
-This guide is split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.
- -You'll need:
- -{{EmbedYouTube("g5p9__OiaMY")}}
- -To enable remote debugging on Chrome Desktop you need to start it with the following special flag: --remote-debugging-port=9222. See this guide on running Chrome with flags.
There are some other flags that can be helpful. By running with --no-first-run, --no-default-browser-check, and --user-data-dir you can run Chrome alongside another Chrome instance.
For example, on OS X you could run the following command to start a debuggable copy of Chrome that's separate from any other instances you might have running:
- -/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')In Firefox, open WebIDE. In WebIDE, click "Select Runtime", and select "Chrome Desktop" from the dropdown menu.
- -Now click the "Open App" menu in WebIDE. You'll see a list of all the tabs open on the device. Click a tab to attach the developer tools to it. Most of the Firefox Developer Tools should now be available. The following tools are not yet supported:
- -{{ToolsSidebar}}
- -This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the debuggee, and the instance of Firefox doing the debugging is called the debugger.
- -First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the Developer Tools Settings. If you're using Firefox Developer Edition, they are checked by default.
- -
You only need to do this once: the setting values persist across restarts.
- -Next, you need to start the debugger server in the debuggee.
- -Run the debuggee from the command line, passing it the --start-debugger-server option:
/path/to/firefox --start-debugger-server- -
Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:
- -/path/to/firefox --start-debugger-server 1234- -
Note: in Windows, the start-debugger-server call will only have one dash:
firefox.exe -start-debugger-server 1234- -
Note: By default, and for security reasons, the devtools.debugger.force-local option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.
This guide is for Firefox version 36 and earlier. To debug in Firefox 68 and later, follow the instructions on about:debugging.
-This guide explains how to use remote debugging to inspect or debug code running in Firefox for Android over USB.
- -
This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.
- -First, you'll need:
- -Next, you'll need to get the desktop and the Android device talking to each other using the adb command-line tool.
- -To check it worked, open up a command shell on the desktop and type:
- -adb devices- -
You should see some output like:
- -List of devices attached -51800F220F01564 device -- -
(The long hex string will be different.)
- -If you do, then adb has found your device and you've successfully set up ADB.
Next, you need to enable remote debugging on both the Android device and the desktop.
- -To enable remote debugging on the device, you need to set the devtools.debugger.remote-enabled preference to true.
Go to about:config in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the devtools.debugger.remote-enabled preference, and press "Toggle".
On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:
- -
The browser will display a notification reminding you to set up port forwarding, which we'll do later on.
- -On the desktop, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:
- -
You'll then see a new option in the Web Developer menu labeled "Connect...":
- -
Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.
- -For Firefox 34 or below, go to a command prompt, and type:
- -adb forward tcp:6000 tcp:6000- -
For later versions of Firefox, go to a command prompt, and type:
- -adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket- -
(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)
- -For Firefox OS, type:
- -adb forward tcp:6000 localfilesystem:/data/local/debugger-socket- -
You'll need to reissue this command each time you physically attach desktop and device with the USB cable.
- -Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:
- -
Unless you've changed the port numbers, choose 6000 and press the "Connect" button.
Next you'll see a dialog in Firefox for Android asking you to confirm the connection:
- -
Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.
Next, the desktop shows you a dialog that looks something like this:
- -
This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.
Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:
- -
The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.
You can use the Firefox developer tools on your desktop to debug Web sites and Web apps running in other browsers or runtimes. The other browser might be on the same device as the tools themselves or on a different device, such as a phone connected over USB.
- -The detailed instructions for connecting the developer tools are specific to the runtime.
- -You can connect the developer tools to Gecko-based runtimes like Firefox Desktop, Firefox for Android, and Thunderbird.
- -This guide explains how to use remote debugging to inspect or debug code running in Thunderbird.
- -Various developer tools are supported by Thunderbird using the remote connection mechanism in Firefox. The currently supported toolset is the Web Console, Inspector, Debugger, Style Editor, Profiler and Network Monitor. Other Tools may become available in the future.
- -All that needs to be done in Thunderbird is enabling the debugger server. This can be done using Tools from the Menu Bar (alt + Tools) and selecting Allow Remote Debugging. By default, a debugger server will be started on port 6000. If you would like to change this port, for example to debug multiple profiles, you must open the advanced config editor and change the preference devtools.debugger.remote-port.
Firefox acts as the client and provides the user interface to control the developer tools for Thunderbird. It's best to use a Firefox and Thunderbird version with a matching major version number, but in some cases it will work even with differing versions.
- -To set up Firefox, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:
- -
Now you can open the connection page in Firefox via the tools menu:
- -
A page will open in the browser; you can add this to your bookmarks toolbar if you like. In case you didn't change the remote port, the fields will already be filled out correctly. Click on the Connect button to initiate the developer tools remote connection.
- -
Afterwards you will be presented with a list of remote tabs and processes. As Thunderbird's notion of tabs doesn't match Firefox, the remote tabs area shows all xul:browser elements in Thunderbird. This can be a content tab, or the message reader. In most cases you will want to select "Main Process" to debug the Thunderbird code itself. A new window opens containing a set of developer tools that can be used with your Thunderbird instance.
- -
Usage of the tools is mostly self explanatory. If you are having trouble with a certain tool, check the Developer Tools documentation. Due to a remote connection being used there might be some slight differences. Some tools might not be available, and it is also possible that performance is not comparable. For example, using the remote debugger tool takes quite some time to load because the files must be transferred over an internal network connection.
- -If you encounter an error, the first thing you should check is if you are using matching version numbers. If you are using Thunderbird 24, you should also use Firefox 24 to connect. Next, it important to figure out if it is a problem with the Firefox Developer Tools or with the remote connection code in Thunderbird. To verify this, please try to reproduce the problem using only Firefox. For example, if you notice that you cannot set an attribute value in the Inspector tool, try changing an attribute in the Browser Debugger in Firefox. If you cannot reproduce it there, file a bug in the Thunderbird product, otherwise file a bug in Firefox/Developer Tools.
diff --git a/files/en-us/tools/remote_debugging/thunderbird/remote-debugger-toolbox-settings.png b/files/en-us/tools/remote_debugging/thunderbird/remote-debugger-toolbox-settings.png deleted file mode 100644 index 3b573a25b39cd57..000000000000000 Binary files a/files/en-us/tools/remote_debugging/thunderbird/remote-debugger-toolbox-settings.png and /dev/null differ diff --git a/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-connect-menuitem.png b/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-connect-menuitem.png deleted file mode 100644 index 82b31c3ffdfb843..000000000000000 Binary files a/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-connect-menuitem.png and /dev/null differ diff --git a/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-desktop-connect.png b/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-desktop-connect.png deleted file mode 100644 index 4e1296faf2d21fc..000000000000000 Binary files a/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-desktop-connect.png and /dev/null differ diff --git a/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-desktop-select-target.png b/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-desktop-select-target.png deleted file mode 100644 index acc45274f23652a..000000000000000 Binary files a/files/en-us/tools/remote_debugging/thunderbird/remote-debugging-desktop-select-target.png and /dev/null differ diff --git a/files/en-us/tools/responsive_button.png b/files/en-us/tools/responsive_button.png deleted file mode 100644 index 71d2bc8d1aeffe4..000000000000000 Binary files a/files/en-us/tools/responsive_button.png and /dev/null differ diff --git a/files/en-us/tools/responsive_design_mode/index.html b/files/en-us/tools/responsive_design_mode/index.html deleted file mode 100644 index ec36537eb457d6f..000000000000000 --- a/files/en-us/tools/responsive_design_mode/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Responsive Design Mode -slug: Tools/Responsive_Design_Mode -tags: - - Design - - Dev Tools - - Firefox - - Guide - - Responsive Design - - Tools - - Web Development - - l10n:priority ---- -Responsive design is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
- -The most obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. Responsive Design Mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.
- -There are three ways to toggle Responsive Design Mode:
- -
With Responsive Design Mode enabled, the content area for web pages is set to the screen size for a mobile device. Initially, it's set to 320 x 480 pixels.
- -Note: The device you select when in Responsive Design Mode and the orientation (portrait or landscape) is saved between sessions.
-
Information for the selected device is centered over the display. From left to right, the display includes:
- -On the right end of the screen, three buttons allow you to:
- -Screenshots are saved to Firefox's default download location.
-If you checked "Screenshot to clipboard" in the Developer Tools Settings page, then the screenshot will be copied to the system clipboard.
-The Settings menu includes the following commands:
- -
Reloading on these changes can be helpful because certain page behaviors would otherwise not be applied. For example, many pages check for touch support on load and only add event handlers if it is supported, or only enable certain features on certain browsers.
- -However, if you are not interested in examining such features (maybe you are just checking the overall layout at different sizes), these reloads can waste time and possibly result in the loss of productive work, so it is useful to be able to control these reloads.
- -Now when you change such settings for the first time, you are given a warning message that tells you these reloads are no longer automatic, and informed about how you can make them automatic. For example:
- -
You can show or hide the Developer Tools toolbox independently of toggling Responsive Design Mode itself:
- -
While Responsive Design Mode is enabled, you can continue browsing as you normally would in the resized content area.
Just above the viewport there is a label "no device selected"; click this to see a list of device names. Select a device, and Responsive Design Mode sets the following properties to match the selected device:
- -Additionally, Firefox sets the User-Agent HTTP request header to identify itself as the default browser on the selected device. For example, if you've selected an iPhone, then Firefox identifies itself as Safari. The navigator.userAgent property is set to the same value.
{{EmbedYouTube("JNAyKemudv0")}}
- -The devices listed in the drop-down are just a subset of the devices that can be selected. At the end of the drop-down, there is an item labeled Edit list. Select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down. The set of devices, and the values associated with each device, are taken from https://github.com/mozilla/simulated-devices. You can also define a custom device, as described below.
- -You can create and save custom devices in Responsive Design Mode by clicking the Add Custom Device button. Each device can have its own:
- -Also, you can preview the properties of existing devices by hovering over the name in the device modal, where they display in a tooltip.
- -{{EmbedYouTube("SA0RlGtOCmE")}}
- -If you do all your development and testing using a very fast network connection, users may experience problems with your site if they are using a slower connection. In Responsive Design Mode, you can instruct the browser to emulate, very approximately, the characteristics of various different types of networks.
- -The characteristics emulated are:
- -The table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. Speeds are specified in Kibibits and Mebibits per second.
- -| Selection | -Download speed | -Upload speed | -Minimum latency (ms) | -
|---|---|---|---|
| GPRS | -50 Kib/s | -20 Kib/s | -500 | -
| Regular 2G | -250 Kib/s | -50 Kib/s | -300 | -
| Good 2G | -450 Kib/s | -150 Kib/s | -150 | -
| Regular 3G | -750 Kib/s | -250 Kib/s | -100 | -
| Good 3G | -1.5 Mib/s | -750 Kib/s | -40 | -
| Regular 4G/LTE | -4 Mib/s | -3 Mib/s | -20 | -
| DSL | -2 Mib/s | -1 Mib/s | -5 | -
| Wi-Fi | -30 Mib/s | -15 Mib/s | -2 | -
To select a network, click the list box that's initially labeled "No throttling":
- -
You can overlay horizontal and vertical rulers on a web page:
- -
The units are in pixels.
The dimensions of the viewport are displayed near the top-right corner of the viewport.
- -To be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the Developer Tools and checking "Toggle rulers for the page" under Available Toolbox Buttons.
- -
Once enabled, the "Toggle rulers for the page" button appears at the top right of the Toolbox, in the same place as the Settings/Options button.
- -
Behavior to keep in mind when using rulers:
- -{{ToolsSidebar}}
- -Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the ellipsis) on the right of the tab.
- -
The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window.
- -Show split console adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output.
- -
The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then:
- -
The Settings pane looks something like this:
- -
This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.
- -This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.
- -As of Firefox 62, if the option to "Select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.
- -Note that in Firefox 52 we removed the checkbox to toggle the "Select element" button. The "Select element" button is now always shown.
- -This enables you to choose one of two themes.
- -There's a light theme, which is the default:
- -
A dark theme (the default on Firefox Developer Edition):
- -
Settings that apply to more than one tool. There's just one of these:
- -If Common Preferences is not included in the Settings, Web Console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true
-Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.
- -[ or { will cause the editor to insert the matching closing character ] or } for you.Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.
Note: This tool has been deprecated and will soon be removed from Firefox. For details, see Deprecated tools.
-The Shader Editor enables you to see and edit the vertex and fragment shaders used by WebGL.
- -{{EmbedYouTube("hnoKqFuJhu0")}}
- -WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics in the browser without using plugins. With WebGL you provide 2 programs called shaders which are called at the appropriate stages of the OpenGL rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
-
- These shaders are written in OpenGL Shading Language, or GLSL. In WebGL they can be included in a page in several ways: as text hardcoded in JavaScript strings, as separate files included using {{HTMLElement("script")}} tags, or retrieved from the server as plain text. JavaScript code running in the page then sends them for compilation using the WebGL APIs, and they're executed on the device's GPU when needed.
With the Shader Editor, you can examine and edit the source of the vertex and fragment shaders.
- -Here's another screencast, showing how you can use the Shader Editor for complex applications (in this case, the Unreal Engine demo):
- -{{EmbedYouTube("YBErisxQkPQ")}}
- -The Shader Editor is disabled by default. To enable it, open the Toolbox settings and check "Shader Editor" in the "Default Firefox Developer Tools" item. You'll now see "Shader Editor" appear in the toolbar. Click it and the Shader Editor opens.
-
- At first you'll just see a blank window with a button asking you to reload the page:
To get started, load a page which creates a WebGL context and loads a program into it. The screenshots below are from the Unreal Engine demo.
- -You'll now see a window divided into three panes: a list of all the GLSL programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right:
- -
The left hand pane lists all programs currently in use by a WebGL context. If you hover over an entry in the list, the geometry drawn by that program is highlighted in red:
- -
If you click the eyeball icon just left of the program's entry, that program is disabled. This is useful for focusing on certain shaders or hiding overlapping geometry:
If you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them.
The middle and right hand panes show the vertex and fragment shaders for the currently selected program.
-
- You can edit these programs and see the results the next time the WebGL context redraws (for example, in the next animation frame). For example, you can modify the colors:
The editor highlights syntax errors in your code:
If you hover over the cross shown next to a line containing an error, you'll see more details about the problem:
Under the Cache Storage type within the Storage Inspector you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:
- -
When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in a table. The cookies table has the following columns:
- -Note: Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns.
-You can edit cookies by double-clicking inside cells in the Table Widget and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.
- -The context menu for each cookie includes the following commands:
- -
This storage type is only shown when debugging extensions. When selecting an extension ID in the storage tree of the Storage Inspector, a table lists the details of all the extension storage present for the extension. This table contains the following columns:
- -
The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:
- -For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.
- -You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Shift + F9 keyboard shortcut.
- -The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.
- -
The Storage Inspector UI is split into three main components:
- -
The storage tree lists all the storage types that the Storage Inspector can inspect:
- -
Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.
Under "Cache Storage", objects are organized by origin and then by the name of the cache:
- -
IndexedDB objects are organized by origin, then by database name, then by object store name:
- -
With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:
- -
You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.
- -Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.
- -The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.
- -All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:
- -
There's a search box at the top of the Table Widget:
- -
This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.
- -You can use Ctrl + F (Cmd + F on a Mac) to focus the search box.
- -You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):
- -
When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.
- -The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:
- -'{"foo": "bar"}' is shown as the origin JSON: {foo: "bar"}."1~2~3~4" or "1=2=3=4" is shown like an array: [1, 2, 3, 4]."ID=1234:foo=bar" is shown as JSON: {ID:1234, foo: "bar"}.The shown values can also be filtered using the search box at the top of the sidebar.
- -The following articles cover different aspects of using the Storage Inspector:
- - diff --git a/files/en-us/tools/storage_inspector/indexeddb/index.html b/files/en-us/tools/storage_inspector/indexeddb/index.html deleted file mode 100644 index 61b0f6fc323447f..000000000000000 --- a/files/en-us/tools/storage_inspector/indexeddb/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: IndexedDB -slug: Tools/Storage_Inspector/IndexedDB -tags: - - Dev Tools - - Firefox - - Guide - - IndexedDB - - Storage - - Storage Inspector - - Tools - - l10n:priority ---- -When you select an origin inside the Indexed DB storage type in the storage tree of the Storage Inspector, a table lists the details of all the databases present for that origin.
- -Note: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.
-Databases have the following details:
- -When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:
- -
When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.
- -You can delete an IndexedDB database using the context menu in the storage tree:
- -
If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:
You can use the context menu in the table widget to delete all items in an object store, or a particular item:
- -
When an origin corresponding to local storage or session storage is selected within the Storage Inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table.
- -You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:
- -{{EmbedYouTube("UKLgBBUi11c")}}
- -You can delete local storage and session storage entries using the context menu:
- -
You can also delete local and session storage entries by selecting an item and pressing the Delete or Backspace key.
- -Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.
diff --git a/files/en-us/tools/storage_inspector/storage_detail_add_refresh.png b/files/en-us/tools/storage_inspector/storage_detail_add_refresh.png deleted file mode 100644 index 4ffeed2800c3fe8..000000000000000 Binary files a/files/en-us/tools/storage_inspector/storage_detail_add_refresh.png and /dev/null differ diff --git a/files/en-us/tools/storage_inspector/storage_detail_filter.png b/files/en-us/tools/storage_inspector/storage_detail_filter.png deleted file mode 100644 index dc6888654ad2b6e..000000000000000 Binary files a/files/en-us/tools/storage_inspector/storage_detail_filter.png and /dev/null differ diff --git a/files/en-us/tools/storage_inspector/storage_inspector.png b/files/en-us/tools/storage_inspector/storage_inspector.png deleted file mode 100644 index ec9c21f77d7dd11..000000000000000 Binary files a/files/en-us/tools/storage_inspector/storage_inspector.png and /dev/null differ diff --git a/files/en-us/tools/storage_inspector/storage_labeled.png b/files/en-us/tools/storage_inspector/storage_labeled.png deleted file mode 100644 index 28cecc6ea0fa3c4..000000000000000 Binary files a/files/en-us/tools/storage_inspector/storage_labeled.png and /dev/null differ diff --git a/files/en-us/tools/storage_inspector/storage_types.png b/files/en-us/tools/storage_inspector/storage_types.png deleted file mode 100644 index 4a17e73fc51df0c..000000000000000 Binary files a/files/en-us/tools/storage_inspector/storage_types.png and /dev/null differ diff --git a/files/en-us/tools/style_editor/index.html b/files/en-us/tools/style_editor/index.html deleted file mode 100644 index 087ed548c5e0792..000000000000000 --- a/files/en-us/tools/style_editor/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Style Editor -slug: Tools/Style_Editor -tags: - - CSS - - Stylesheets - - Tools - - Web Development - - Web Development:Tools ---- -The Style Editor enables you to:
- -{{EmbedYouTube("7839qc55r7o")}}
- -To open the Style Editor choose the "Style Editor" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac). The Toolbox will appear at the bottom of the browser window, with the Style Editor activated:
- -
The Style Editor is divided into three main sections:
- - - -The style sheet pane, on the left, lists all the style sheets being used by the current document. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. You can save any changes you've made to the style sheet to your local computer by clicking the Save button in the bottom-right corner of each sheet's entry in the list.
- -From Firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab.
- -On the right is the editor pane. This is where the source for the selected style sheet is available for you to read and edit. Any changes you make are immediately applied to the page. This makes it easy to experiment with, revise, and test changes. Once you're satisfied with your changes, you can save a copy locally by clicking the Save button on the sheet's entry in the style sheet pane.
- -The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of keyboard shortcuts.
- -The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.
- -The Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.
- -
You can switch autocomplete off in the Style Editor settings.
The Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any @media rules. The sidebar lists the rules and provides a link to the line of the sheet where the rule is defined. Click an item to jump to that rule in the sheet. The condition text of the rule is greyed-out if the media query doesn't currently apply.
The media sidebar works especially well with Responsive Design View for creating and debugging responsive layouts:
{{EmbedYouTube("aVUXmvLSwoM")}}
- -From Firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the Responsive Design View:
{{EmbedYouTube("XeocxoW2NYY")}}
- -You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles are applied in real time just like changes to the other sheets.
- -You can load a style sheet from disk and apply it to the page by clicking the Import button.
- -{{EmbedYouTube("zu2eZbYtEUQ")}}
- -Web developers often create CSS files using a preprocessor like Sass, Less, or Stylus. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.
- -Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.
- -This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:
- -
For this to work, you must:
--source-map argument to the Lass command-line tool, but in some preprocessors like Sass, source maps are generated by default and you don't need to do anything.Now, if you check "Show original sources" in the Style Editor settings, the links next to CSS rules in the Rules view will link to the original sources in the Style Editor.
- -From Firefox 35 onwards original sources are displayed by default.
- -You can also edit the original sources in the Style Editor and see the results applied to the page immediately. To get this to work there are two extra steps.
- -First, set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this by passing the --watch option:
sass index.scss:index.css --watch- -
Next, save the original source in the Style Editor by clicking the "Save" button next to the file, and saving it over the original file.
- -Now when you make changes to the source file in the Style Editor the CSS is regenerated and you can see the changes right away.
- -You can use the Developer Tools to take a screenshot of the entire page, or of a single element in the page.
- -Use the screenshot icon: 
to take a full-page screenshot of the current page.
By default, the screenshot icon is not enabled. To enable it:
- -You'll now see the icon in the toolbar:
- -{{EmbedYouTube("KB5V9uJgcS4")}}
- -Click the icon to take a screenshot of the current page. The screenshot is saved to your browser's "Downloads" directory:
- -{{EmbedYouTube("HKS6MofdXVE")}}
- -To take a screenshot of a single element in the page, activate the context menu on that element in the Inspector's HTML pane, and select "Screenshot Node". The screenshot is saved to the browser's "Downloads" directory:
- -{{EmbedYouTube("p2pjF_BrE1o")}}
- -From Firefox 53, you can also copy the screenshot to the clipboard. Just check the box in Settings labeled "Screenshot to clipboard":
- -{{EmbedYouTube("AZedFGh6F78")}}
- -Now, whenever you take a screenshot, the screenshot is also copied to the clipboard.
- -If you need to specify a different device-pixel-ratio, set a delay before taking the screenshot, or specify your own file name, starting in Firefox 62 you can use the :screenshot helper function in the Web Console.
Type :screenshot in the Web Console to create a screenshot of the current page. By default, the image file will be named Screen Shot yyy-mm-dd at hh.mm.ss.png.
Tip: You could type :s and then hit Tab to autocomplete :screenshot.
The command has the following optional parameters:
- -| Command | -Type | -Description | -
|---|---|---|
--clipboard |
- boolean | -When present, this parameter will cause the screenshot to be copied to the clipboard. Prevents saving to a file unless you use the --file option to force file writing. |
-
--delay |
- number | -The number of seconds to delay before taking the screenshot; you can use an integer or floating point number. This is useful if you want to pop open a menu or invoke a hover state for the screenshot. | -
--dpr |
- number | -The device pixel ratio to use when taking the screenshot. Values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images. | -
--file |
- boolean | -When present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included. |
-
--filename |
- string | -The name to use in saving the file. The file should have a ".png" extension. | -
--fullpage |
- boolean | -If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, "-fullpage" will be appended to the file name. | -
--selector |
- string | -A CSS selector that selects a single element on the page. When supplied, only this element and its descendants will be included in the screenshot. | -
Note: If you capture an image to a filename like test.png, and then you capture to that same filename, the new image will overwrite the old image. So if you're using the up-arrow history scroll to capture images in quick succession, be careful — you need to remember to change the filename for each new capture.
Note: Thanks to Eric Meyer for his enthusiasm for our screenshot feature, and help! Small portions of this section have been borrowed from his Firefox's :screenshot command article.
-Screenshots:
- -
; needs to be enabled first).) in Responsive Design Mode.screenshot <filename.png> --fullpage.Settings:
- -In the markup view:
- -tempN variable.When selecting elements:
- -In the rules view:
- -
) next to any selector to highlight all elements that match it.) next to the element{} rule to lock the highlighter on the current element.
) next to an overridden property to find which other property overrides it.In all panels:
- -In the command line:
- -$0 references the currently selected node.$() is a shortcut to {{domxref("document.querySelector()")}}.$$() returns an array with the results from {{domxref("document.querySelectorAll()")}}.copy copies anything as a string.tempN variable for it.cd switches the JavaScript evaluation context to a different iframe in the page.console.table() displays tabular data as table.help opens the MDN page describing the available commands.:screenshot <filename.png> --fullpage saves a screenshot to your downloads directory using the optional file name. If no filename is included, the file name will be in this format:Screen Shot date at time.pngIn the console output:
- -) next to an element in the output to select it within the Inspector.
).) in the style sheet pane toggles the visibility of a style sheet.
) to import a style sheet or the create button (
) to create a new one.The Toolbox provides a single home for most of the developer tools that are built into Firefox.
- -There are three main ways to open the Toolbox:
- -) and select More tools > Web Developer Tools (Firefox 88 and earlier use the top-level menu Web Developer rather than More tools).By default, the window appears docked to the bottom side of the Firefox window, but you can detach it if you like. This is what it looks like when it's docked:
- -
The window itself is split into two parts: a toolbar along the top, and a main pane underneath:
Since Firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish ({{bug(1226272)}}).
-By default, the Toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in the toolbar.
- -
The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.
- -
On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See "Selecting elements".
- -Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools:
- -Note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the Firefox instance that launched the window, not all the hosted tools will be shown).
- -Next there's an array of buttons that can be added or removed in the settings. None of these tools are enabled by default, but you can add them in the developer tools settings:
- -Finally there's a row of buttons to:
- -There's also a meatball menu button that consists of following options:
- -See the separate page on the Developer Tools Settings.
- -The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.
- -Toolbox shortcuts lists the shortcuts that work whenever the toolbox is open, no matter which tool is active. This same page also lists tool-specific keyboard shortcuts.
diff --git a/files/en-us/tools/tools_toolbox/toolbox-labelled.png b/files/en-us/tools/tools_toolbox/toolbox-labelled.png deleted file mode 100644 index 44c240ccbc1f935..000000000000000 Binary files a/files/en-us/tools/tools_toolbox/toolbox-labelled.png and /dev/null differ diff --git a/files/en-us/tools/tools_toolbox/toolbox-toolbar-labelled.png b/files/en-us/tools/tools_toolbox/toolbox-toolbar-labelled.png deleted file mode 100644 index ab127817ff06be7..000000000000000 Binary files a/files/en-us/tools/tools_toolbox/toolbox-toolbar-labelled.png and /dev/null differ diff --git a/files/en-us/tools/tools_toolbox/toolbox.png b/files/en-us/tools/tools_toolbox/toolbox.png deleted file mode 100644 index a1a75935e8602cf..000000000000000 Binary files a/files/en-us/tools/tools_toolbox/toolbox.png and /dev/null differ diff --git a/files/en-us/tools/validators/index.html b/files/en-us/tools/validators/index.html deleted file mode 100644 index 8a024ffa980ac29..000000000000000 --- a/files/en-us/tools/validators/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Validators -slug: Tools/Validators -tags: - - Tools - - Website validator - - html5 validator - - validator ---- -This article lists different resources for developers to check web documents.
- -View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:
- -The command opens a new tab with the source for the current page.
- -View Source has three additional features, which can be accessed from the context menu in the View Source tab:
- -
This feature is useful when you're looking for HTML errors.
- -To access Go to Line from the keyboard, press Control + Option + L on macOS, or Alt + Shift + L on Windows or Linux.
- -It is possible to link to a particular line, by adding the #lineNNN anchor to the url the browser will jump to the NNN line.
- -For example view-source:https://www.mozilla.org/#line100
- -If you select part of a web page and context-click, you'll see a context menu item labeled "View Selection Source", that behaves just like "View Page Source", except you only see the source for the selection.
- -If you context-click while the mouse is over some MathML, you'll see a context menu item labeled "View MathML Source": click it to see the MathML source.
- -There are limitations to what View Source does for you that you need to be aware of.
- -View Source only reports parsing errors, not HTML validity errors. For example, putting a {{ HTMLElement("div") }} element as a child of a {{ HTMLElement("ul") }} element isn't a parse error, but it is not valid HTML. Therefore, this error will not be flagged in View Source. If you want to check that HTML is valid, you should use an HTML validator, such as the one offered by W3C.
- -Even though all the reported errors are parse errors according to the HTML specification, not all parse errors are reported by View Source. Among the errors that don't get reported:
- -xmlns attributes aren't reported.View Source uses the HTML tokenizer when highlighting XML source. While the tokenizer has support for processing instructions when highlighting XML source, that's the only XML-specific capability provided. Because of this, doctypes that have an internal subset are not highlighted correctly, and entity references to custom entities are also not highlighted correctly.
- -This mishighlighting can be seen by viewing the source of Firefox chrome files (such as XUL documents). However, this shouldn't be a problem in practice when viewing typical XML files.
- -Notice: This tool has been deprecated and will soon be removed from Firefox. For details, see Deprecated tools.
-With the Web Audio API, developers create an {{domxref ("AudioContext", "audio context")}}. Within that context they then construct a number of {{domxref ("AudioNode", "audio nodes")}}, including:
- -Each node has zero or more {{domxref ("AudioParam")}} properties that configure its operation. For example, the {{domxref ("GainNode")}} has a single gain property, while the {{domxref ("OscillatorNode")}} has frequency and detune properties.
The developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.
- -The Web Audio Editor examines an audio context constructed in the page and provides a visualization of its graph. This gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. You can then examine and edit the AudioParam properties for each node in the graph. Some non-AudioParam properties, like an OscillatorNode's type property, are displayed, and you can edit these as well.
This tool is still experimental. If you find bugs, we'd love it if you filed them in Bugzilla. If you have feedback or suggestions for new features, dev-developer-tools or Twitter are great places to register them.
- -The Web Audio Editor is not enabled by default in Firefox 32. To enable it, open the Developer Tool Settings and check "Web Audio". Now there should be an extra tab in the Toolbox toolbar labeled "Web Audio". Click the tab and load a page that constructs an audio context. Two good demos are:
- -The Web Audio Editor will now display the graph for the loaded audio context. Here's the graph for the Violent Theremin demo:
- -
You can see that it uses three nodes: an {{domxref ("OscillatorNode")}} as the source, a {{domxref ("GainNode")}} to control the volume, and an {{domxref ("GainNode")}} as the destination.
Displaying connections to AudioParams is new in Firefox 34.
-Connections between nodes are displayed as solid lines. If, instead, you've connected a node to an AudioParam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the AudioParam:
If you click on a node, it's highlighted and you get a node inspector on the right hand side. This list the values of that node's AudioParam properties. For example, here's what the OscillatorNode looks like:
With the Violent Theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. However, the value isn't updated in real time: you have to click the node again to see the updated value.
If you click on a value in the node inspector you can modify it: press Enter or Tab and the new value takes effect immediately.
- -New in Firefox 38.
-In the pane that shows you the node's details, there's an on/off button:
- -
Click it, and the graph will be modified to bypass this node, so it will no longer have any effect. Nodes that are bypassed are shown with a hatched background:
Most of the Web Console is occupied by the message display pane:
- -
Each message is displayed as a separate row:
- -
| Time | -The time the message was recorded. This is not shown by default: you can opt to see timestamps by selecting Show Timestamps in the console settings menu (gear icon in the console toolbar). | -
| Icon | -
- Not all console messages contain icons. The following icons may be used: - -
In addition, a disclosure triangle indicates that further information is available; clicking it displays or collapses that information. - |
-
| Message | -The message itself. | -
| Number of occurrences | -If a line that generates a warning or error is executed more than once, it is only logged once and this counter appears to indicate how many times it was encountered. | -
| Filename and line number | -
- For JavaScript, CSS and console API messages, the message can be traced to a specific line of code. The console then provides a link to the filename and line number that generated the message. - |
-
By default, the console is cleared each time you navigate to a new page or reload the current page. To override this behavior, enable Persist Logs in the console settings menu (gear icon).
- -The context menu options listed below are available on all message categories. Additional context menu options are described in the subsection for the message category they apply to.
- -Network log messages are not shown by default. Use the filtering feature to show them.
-Network requests are logged with a line that looks like this:
- -
| Time | -The time the message was recorded. | -
| Method | -
- The specific HTTP request method. - -If the request was made as an XMLHttpRequest, there's an additional "XHR" tag indicating this. - -If more information is available, a disclosure triangle lets you display it, in an embedded panel that is identical to the Network Monitor request details. - |
-
| URI | -The target URI. | -
| Summary | -The HTTP version, response code, and time taken to complete. Clicking the response code takes you to the reference page for that code. | -
{{EmbedYouTube("cFlcWzJ9j4I")}}
- -The context menu for network messages includes a few extra items in addition the globally-available ones:
- -
JavaScript errors contain a "Learn more" link that takes you to the JavaScript error reference containing additional advice for fixing issues:
- -{{EmbedYouTube("OabJc2QR6o0")}}
- -The Web Console understands source maps. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.
- -Stack traces show stack frames for async functions separately from those for synchronous functions. When you run code containing an async function, its traces (console.trace or thrown error) are shown with an Async: prefix.
- -
Note: CSS warnings and reflow messages are not shown by default, for performance reasons (see {{bug(1452143)}}). Use the filtering feature to show them.
-Some CSS messages contain a disclosure triangle at the left of the message. Click it to view more information about the error, as well as which DOM nodes are affected by the error.
- -
The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a "Learn More" link that takes you to a page with background information and advice for mitigating the issue.
- -The complete list of security messages is as follows:
- -| Message | -Details | -
|---|---|
| Blocked loading mixed active content | -The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details. | -
| Blocked loading mixed display content | -The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details. | -
| Loading mixed (insecure) active content on a secure page | -The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details. | -
| Loading mixed (insecure) display content on a secure page | -The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details. | -
| This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored. | -See Content Security Policy for more details. | -
| The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead. | -See Content Security Policy for more details. | -
| Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. | -Pages containing login forms must be served over HTTPS, not HTTP. | -
| Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen. | -Forms containing password fields must submit them over HTTPS, not HTTP. | -
| Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. | -iframes containing login forms must be served over HTTPS, not HTTP. | -
| The site specified an invalid Strict-Transport-Security header. | -See HTTP Strict Transport Security for more details. | -
|
- 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. - |
-
- The site uses a certificate whose signature uses the SHA-1 hash algorithm. - -SHA-1 is 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 Weak Signature Algorithm article for more details. - -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. - |
-
Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.
- -Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.
-The Logging category includes messages logged using the Console API.
- -The Web console supports the following Console API messages:
- -
Informational message
Warning
Error
Blocked; for network messagesassert()clear()count()dir()dirxml()error()exception()group()groupEnd()info()log()table()time()timeEnd()trace()warn()The console prints a stack trace for all error messages, like this:
- -function foo() {
- console.error("it explodes");
-}
-
-function bar() {
- foo();
-}
-
-function doStuff() {
- bar();
-}
-
-doStuff();
-
-
Server-side log messages was introduced in Firefox 43, but removed in Firefox 56. You can install the Chrome Logger extension to (re)-enable the feature.
-With the Chrome Logger extension, Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.
- -It uses the Chrome Logger protocol. Briefly, the way it works is:
- -X-ChromeLogger-Data.To find a suitable library for your server code, see the Chrome Logger documentation.
- -Commands sent to the browser using the Web Console's JavaScript interpreter, and the corresponding responses, are logged in the console messages.
- -For responses that contain objects or variables, the following context menu options are available:
- -temp0, temp1, etc.) whose value is the selected object. The name of the variable appears as an input to the interpreter, and its value appears as a response.You can use the toolbar along the top to constrain the results displayed.
- -
To see only messages of particular categories, click the button labeled with that category (Errors, CSS, and so on).
For Errors and Warnings, when you turn off display of the category, a number appears next to the button text to indicate how many messages of that type are available. For example, "Warnings (25)".
- -Network requests with response codes in the 400-499 (client error) or 500-599 (server error) ranges are considered errors. Their display is controlled by the Errors button, not the Requests button.
- -To see only messages that contain a specific string, type in the text box labeled "Filter output". For example, if you entered the string img into the text box, you would have a list something like this:
- -
A small "x" icon appears at the right end of the text box when you have entered a string on which to filter the output. Click the "x" icon to clear the filter and show the entire list again.
- -You can negate a text search by prefixing it with the - character. For example, -img shows only items that do not contain the string img.
You can also use a valid regular expression to filter the console output. For example, the following video shows the results when filtering on two simple regular expressions: /(cool|rad)/ and /(cool)/.
{{EmbedYouTube("E6bGOe2fvW0")}}
- -You can negate a regular expression search by prefixing it with the - character. For example, -/(cool|rad)/ shows only items that do not match the expression /(cool|rad)/.
Finally, you can use the trashcan icon on the left to clear the contents of the console. When you clear the console, the console cache is also cleared. This prevents errors that have already been logged from reappearing when you reopen the console.
diff --git a/files/en-us/tools/web_console/console_messages/info-icon.png b/files/en-us/tools/web_console/console_messages/info-icon.png deleted file mode 100644 index a823b483a8b7094..000000000000000 Binary files a/files/en-us/tools/web_console/console_messages/info-icon.png and /dev/null differ diff --git a/files/en-us/tools/web_console/console_messages/response-msg-annotated.png b/files/en-us/tools/web_console/console_messages/response-msg-annotated.png deleted file mode 100644 index cec871d88cd65f4..000000000000000 Binary files a/files/en-us/tools/web_console/console_messages/response-msg-annotated.png and /dev/null differ diff --git a/files/en-us/tools/web_console/console_messages/response-msg-context-menu.png b/files/en-us/tools/web_console/console_messages/response-msg-context-menu.png deleted file mode 100644 index 18b0fca31570d44..000000000000000 Binary files a/files/en-us/tools/web_console/console_messages/response-msg-context-menu.png and /dev/null differ diff --git a/files/en-us/tools/web_console/console_messages/warning-icon.png b/files/en-us/tools/web_console/console_messages/warning-icon.png deleted file mode 100644 index f8e8769a6efe306..000000000000000 Binary files a/files/en-us/tools/web_console/console_messages/warning-icon.png and /dev/null differ diff --git a/files/en-us/tools/web_console/helpers/index.html b/files/en-us/tools/web_console/helpers/index.html deleted file mode 100644 index cee619fe2eaa1d4..000000000000000 --- a/files/en-us/tools/web_console/helpers/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Web Console Helpers -slug: Tools/Web_Console/Helpers -tags: - - Debugging - - JavaScript - - Web Development - - web console ---- -{{ToolsSidebar}}
- -The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.
- -$(selector, element)Looks up a CSS selector string selector , returning the first node descended from element that matches. If unspecified, element defaults to document. Equivalent to {{ domxref("document.querySelector()") }} or calls the $ function in the page, if it exists.
See the QuerySelector code snippet.
-$$(selector, element)selector, returning an array of DOM nodes descended from element that match. If unspecified, element defaults to document. This is like for {{ domxref("document.querySelectorAll()") }}, but returns an array instead of a {{ domxref("NodeList") }}.$0$_$x(xpath, element, resultType)xpath expression in the context of element and returns an array of matching nodes. If unspecified, element defaults to document. The resultType parameter specifies the type of result to return; it can be an XPathResult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, ANY_TYPE is used.:block:unblock.clear()clearHistory()copy()outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.help() {{deprecated_inline}}:helpinspect()keys()Object.keys.pprint() {{deprecated_inline}}:screenshotScreen Shot yyy-mm-dd at hh.mm.ss.png| Command | -Type | -Description | -
|---|---|---|
--clipboard |
- boolean | -When present, this parameter will cause the screenshot to be copied to the clipboard. | -
--delay |
- number | -The number of seconds to delay before taking the screenshot. | -
--dpr |
- number | -The device pixel ratio to use when taking the screenshot. | -
--file |
- boolean | -When present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included. |
-
--filename |
- string | -The name to use in saving the file. The file should have a ".png" extension. | -
--fullpage |
- boolean | -If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, "-fullpage" will be appended to the file name. | -
--selector |
- string | -The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot. | -
:unblockvalues()keys().Please refer to the Console API for more information about logging from content.
- -temp0, temp1, temp2, etc. referencing the node.Let's say you have a DOM node with the class "title". In fact, this page you're reading right now has one, so you can open up the Web Console and try this right now.
- -Let's take a look at the contents of that node by using the $() and inspect() functions:
inspect($(".title"))
-
-This automatically generates rich output for the object, showing you the contents of the first DOM node that matches the CSS selector ".title", which is of course the first element with class "title". You can use the up- and down-arrow keys to navigate through the output, the right-arrow key to expand an item, and the left-arrow key to collapse it.
The Web Console:
- -{{EmbedYouTube("C6Cyrpkb25k")}}
- -You open the Web Console from a menu or with a keyboard shortcut:
- -The Toolbox appear at the bottom, left, or right of the browser window (depending on your docking settings), with the Web Console activated (it's just called Console in the DevTools toolbar).
diff --git a/files/en-us/tools/web_console/invoke_getters_from_autocomplete/index.html b/files/en-us/tools/web_console/invoke_getters_from_autocomplete/index.html deleted file mode 100644 index 02d8d26a86d87cb..000000000000000 --- a/files/en-us/tools/web_console/invoke_getters_from_autocomplete/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Invoke getters from autocomplete -slug: Tools/Web_Console/Invoke_getters_from_autocomplete ---- - diff --git a/files/en-us/tools/web_console/remoting/index.html b/files/en-us/tools/web_console/remoting/index.html deleted file mode 100644 index 7858c21d85ea209..000000000000000 --- a/files/en-us/tools/web_console/remoting/index.html +++ /dev/null @@ -1,687 +0,0 @@ ---- -title: Web Console remoting -slug: Tools/Web_Console/remoting -tags: - - Debugging - - Reference - - web console ---- -This document describes the way Web Console remoting works. The Web Console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab. For communication between the server and the client we use the Remote Debugging Protocol. This architecture allows you to connect a Web Console client instance to a server running on B2G, Fennec or some other Firefox instance.
- -To better understand the architecture of the Web Console we recommend learning about the debugger architecture.
- -The remote Web Console is a feature introduced in Firefox 18. This document describes the latest protocol, with changes that have been made since then.
-WebConsoleActor and the WebConsoleClientThe WebConsoleActor lives in dbg-webconsole-actors.js, in the toolkit/devtools/webconsole folder.
The WebConsoleClient lives in WebConsoleClient.jsm (in toolkit/devtools/webconsole) and it is used by the Web Console when working with the Web Console actor.
To see how the debugger is used in the Web Console code, look in browser/devtools/webconsole/webconsole.js, and search for WebConsoleConnectionProxy.
The new Web Console actors are:
- -WebConsoleActor allows JS evaluation, autocomplete, start/stop listeners, etc.NetworkEventActor is used for each new network request. The client can request further network event details - like response body or request headers.To attach to the WebConsoleActor, follow these steps:
connectToServer() // the usual -listTabs() -pickTheTabYouWant() -debuggerClient.attachConsole(tab.consoleActor, listeners, onAttachConsole) -- -
The listeners argument is an array which specifies listeners you want to start in the web console. These can be: page errors, window.console API messages, network activity, and file activity. For example:
["PageError", "ConsoleAPI", "NetworkActivity", "FileActivity"]- -
The Web Console actor does not start any listeners by default. The client has the option to start each listener when needed. This approach allows for lower resource usage on the server - this is a potential issue if the server runs on devices with fewer resources.
-The onAttachConsole callback receives a new instance of the WebConsoleClient object. This object provides methods that abstract away protocol packets, things like startListeners(), stopListeners(), etc.
Protocol packets look as follows:
- -{
- "to": "root",
- "type": "listTabs"
-}
-{
- "from": "root",
- "consoleActor": "conn0.console9",
- "selected": 2,
- "tabs": [
- {
- "actor": "conn0.tab2",
- "consoleActor": "conn0.console7",
- "title": "",
- "url": "https://tbpl.mozilla.org/?tree=Fx-Team"
- },
-// ...
- ]
-}
-
-
-Notice that the consoleActor is also available as a global actor. When you attach to the global consoleActor you receive all of the network requests, page errors, and the other events from all of the tabs and windows, including chrome errors and network events. This actor is used for the Browser Console implementation and for debugging remote Firefox/B2G instances.
startListeners(listeners, onResponse)The new startListeners packet:
{
- "to": "conn0.console9",
- "type": "startListeners",
- "listeners": [
- "PageError",
- "ConsoleAPI",
- "NetworkActivity",
- "FileActivity"
- ]
-}
-
-
-The reply is:
- -{
- "startedListeners": [
- "PageError",
- "ConsoleAPI",
- "NetworkActivity",
- "FileActivity"
- ],
- "nativeConsoleAPI": true,
- "from": "conn0.console9"
-}
-
-
-The reply tells which listeners were started and it includes a flag nativeConsoleAPI which tells if the window.console object was overridden by the scripts in the page or not.
To listen to the tab navigation events you also need to attach to the tab actor for the given tab. The tabNavigated notification comes from tab actors.
Prior to Firefox 20 the Web Console actor provided a LocationChange listener, with an associated locationChanged notification. This is no longer the case: we have made changes to allow the Web Console client to reuse the tabNavigated notification (bug 792062).
When page navigation starts the following packet is sent from the tab actor:
- -{
- "from": tabActor,
- "type": "tabNavigated",
- "state": "start",
- "url": newURL,
- "nativeConsoleAPI": true
-}
-
-
-The nativeConsoleAPI property tells if the window.console object is native or not for the top level window object for the given tab - this is always true when navigation starts. When navigation stops the following packet is sent:
{
- "from": tabActor,
- "type": "tabNavigated",
- "state": "stop",
- "url": newURL,
- "title": newTitle,
- "nativeConsoleAPI": true|false
-}
-
-getCachedMessages(types, onResponse)The webConsoleClient.getCachedMessages(types, onResponse) method sends the following packet to the server:
{
- "to": "conn0.console9",
- "type": "getCachedMessages",
- "messageTypes": [
- "PageError",
- "ConsoleAPI"
- ]
-}
-
-
-The getCachedMessages packet allows one to retrieve the cached messages from before the Web Console was open. You can only get cached messages for page errors and console API calls. The reply looks like this:
{
- "messages": [ ... ],
- "from": "conn0.console9"
-}
-
-
-Each message in the array is of the same type as when we send typical page errors and console API calls. These will be explained in the following sections of this document.
- -To allow the Web Console to configure logging options while it is running, we have added the setPreferences packet:
{
- "to": "conn0.console9",
- "type": "setPreferences",
- "preferences": {
- "NetworkMonitor.saveRequestAndResponseBodies": false
- }
-}
-
-
-Reply:
- -{
- "updated": [
- "NetworkMonitor.saveRequestAndResponseBodies"
- ],
- "from": "conn0.console10"
-}
-
-
-For convenience you can use webConsoleClient.setPreferences(prefs, onResponse). The prefs argument is an object like { prefName: prefValue, ... }.
In Firefox 25 we added the getPreferences request packet:
{
- "to": "conn0.console34",
- "type": "getPreferences",
- "preferences": [
- "NetworkMonitor.saveRequestAndResponseBodies"
- ]
-}
-
-
-Reply packet:
- -{
- "preferences": {
- "NetworkMonitor.saveRequestAndResponseBodies": false
- },
- "from": "conn0.console34"
-}
-
-
-You can also use the webConsoleClient.getPreferences(prefs, onResponse). The prefs argument is an array of preferences you want to get their values for, by name.
The Browser Console can be used while the user has private windows open. Each page error, console API message and network request is annotated with a private flag. Private messages are cleared whenever the last private window is closed. The console actor provides the lastPrivateContextExited notification:
{
- "from": "conn0.console19",
- "type": "lastPrivateContextExited"
-}
-
-
-This notification is sent only when your client is attached to the global console actor, it does not make sense for tab console actors.
- -This notification has been introduced in Firefox 24.
-Starting with Firefox 25 you can send an HTTP request using the console actor:
- -{
- "to": "conn0.console9",
- "type": "sendHTTPRequest",
- "request": {
- "url": "http://localhost",
- "method": "GET",
- "headers": [
- {
- name: "Header-name",
- value: "header value",
- },
- // ...
- ],
- },
-}
-
-
-The response packet is a network event actor grip:
- -{
- "to": "conn0.console9",
- "eventActor": {
- "actor": "conn0.netEvent14",
- "startedDateTime": "2013-08-26T19:50:03.699Z",
- "url": "http://localhost",
- "method": "GET"
- "isXHR": true,
- "private": false
- }
-}
-
-
-You can also use the webConsoleClient.sendHTTPRequest(request, onResponse) method. The request argument is the same as the request object in the above example request packet.
Page errors come from the nsIConsoleService. Each allowed page error is an nsIScriptError object.
The pageError packet is:
{
- "from": "conn0.console9",
- "type": "pageError",
- "pageError": {
- "errorMessage": "ReferenceError: foo is not defined",
- "sourceName": "http://localhost/~mihai/mozilla/test.js",
- "lineText": "",
- "lineNumber": 6,
- "columnNumber": 0,
- "category": "content javascript",
- "timeStamp": 1347294508210,
- "error": false,
- "warning": false,
- "exception": true,
- "strict": false,
- "private": false,
- }
-}
-
-
-The packet is similar to nsIScriptError - for simplicity. We only removed several unneeded properties and changed how flags work.
The private flag tells if the error comes from a private window/tab (added in Firefox 24).
Starting with Firefox 24 the errorMessage and lineText properties can be long string actor grips if the string is very long.
The window.console API calls send internal messages throughout Gecko which allow us to do whatever we want for each call. The Web Console actor sends these messages to the remote debugging client.
We use the ObjectActor from dbg-script-actors.js without a ThreadActor, to avoid slowing down the page scripts - the debugger deoptimizes JavaScript execution in the target page. The lifetime of object actors in the Web Console is different than the lifetime of these objects in the debugger - which is usually per pause or per thread. The Web Console manages the lifetime of ObjectActors manually.
Prior to Firefox 23 we used a different actor (WebConsoleObjectActor) for working with JavaScript objects through the protocol. In bug 783499 we did a number of changes that allowed us to reuse the ObjectActor from the debugger.
Console API messages come through the nsIObserverService - the console object implementation lives in dom/base/ConsoleAPI.js.
For each console message we receive in the server, we send the following consoleAPICall packet to the client:
{
- "from": "conn0.console9",
- "type": "consoleAPICall",
- "message": {
- "level": "error",
- "filename": "http://localhost/~mihai/mozilla/test.html",
- "lineNumber": 149,
- "functionName": "",
- "timeStamp": 1347302713771,
- "private": false,
- "arguments": [
- "error omg aloha ",
- {
- "type": "object",
- "className": "HTMLBodyElement",
- "actor": "conn0.consoleObj20"
- },
- " 960 739 3.141592653589793 %a",
- "zuzu",
- { "type": "null" },
- { "type": "undefined" }
- ]
- }
-}
-
-
-Similar to how we send the page errors, here we send the actual console event received from the nsIObserverService. We change the arguments array - we create ObjectActor instances for each object passed as an argument - and, lastly, we remove some unneeded properties (like window IDs). In the case of long strings we use the LongStringActor. The Web Console can then inspect the arguments.
The private flag tells if the console API call comes from a private window/tab (added in Firefox 24).
We have small variations for the object, depending on the console API call method - just like there are small differences in the console event object received from the observer service. To see these differences please look in the Console API implementation: dom/base/ConsoleAPI.js.
- -evaluateJS request and response packetsThe Web Console client provides the evaluateJS(requestId, string, onResponse) method which sends the following packet:
{
- "to": "conn0.console9",
- "type": "evaluateJS",
- "text": "document",
- "bindObjectActor": null,
- "frameActor": null,
- "url": null,
- "selectedNodeActor": null,
-}
-
-
-The bindObjectActor property is an optional ObjectActor ID that points to a Debugger.Object. This option allows you to bind _self to the Debugger.Object of the given object actor, during string evaluation. See evalInGlobalWithBindings() for information about bindings.
The variable view needs to update objects and it does so by binding _self to the Debugger.Object of the ObjectActor that is being viewed. As such, variable view sends strings like these for evaluation:
_self["prop"] = value; --
The frameActor property is an optional FrameActor ID. The FA holds a reference to a Debugger.Frame. This option allows you to evaluate the string in the frame of the given FA.
The url property is an optional URL to evaluate the script as (new in Firefox 25). The default source URL for evaluation is "debugger eval code".
The selectedNodeActor property is an optional NodeActor ID, which is used to indicate which node is currently selected in the Inspector, if any. This NodeActor can then be referred to by the $0 JSTerm helper.
The response packet:
- -{
- "from": "conn0.console9",
- "input": "document",
- "result": {
- "type": "object",
- "className": "HTMLDocument",
- "actor": "conn0.consoleObj20"
- "extensible": true,
- "frozen": false,
- "sealed": false
- },
- "timestamp": 1347306273605,
- "exception": null,
- "exceptionMessage": null,
- "helperResult": null
-}
-
-
-exception holds the JSON-ification of the exception thrown during evaluation.exceptionMessage holds the exception.toString() result.result has the result ObjectActor instance.helperResult is anything that might come from a JSTerm helper result, JSON stuff (not content objects!).In Firefox 23: we renamed the error and errorMessage properties to exception and exceptionMessage respectively, to avoid conflict with the default properties used when protocol errors occur.
The autocomplete request packet:
{
- "to": "conn0.console9",
- "type": "autocomplete",
- "text": "d",
- "cursor": 1
-}
-
-
-The response packet:
- -{
- "from": "conn0.console9",
- "matches": [
- "decodeURI",
- "decodeURIComponent",
- "defaultStatus",
- "devicePixelRatio",
- "disableExternalCapture",
- "dispatchEvent",
- "doMyXHR",
- "document",
- "dump"
- ],
- "matchProp": "d"
-}
-
-
-There's also the clearMessagesCache request packet that has no response. This clears the console API calls cache and should clear the page errors cache - see bug 717611.
networkEvent packetWhenever a new network request starts being logged the networkEvent packet is sent:
{
- "from": "conn0.console10",
- "type": "networkEvent",
- "eventActor": {
- "actor": "conn0.netEvent14",
- "startedDateTime": "2012-09-17T19:50:03.699Z",
- "url": "http://localhost/~mihai/mozilla/test2.css",
- "method": "GET"
- "isXHR": false,
- "private": false
- }
-}
-
-
-This packet is used to inform the Web Console of a new network event. For each request a new NetworkEventActor instance is created. The isXHR flag indicates if the request was initiated via an XMLHttpRequest instance, that is: the nsIHttpChannel's notification is of an nsIXMLHttpRequest interface.
The private flag tells if the network request comes from a private window/tab (added in Firefox 24).
NetworkEventActorThe new network event actor stores further request and response information.
- -networkEventUpdate packetThe Web Console UI needs to be kept up-to-date when changes happen, when new stuff is added. The new networkEventUpdate packet is sent for this purpose. Examples:
{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "requestHeaders",
- "headers": 10,
- "headersSize": 425
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "requestCookies",
- "cookies": 0
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "requestPostData",
- "dataSize": 1024,
- "discardRequestBody": false
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "responseStart",
- "response": {
- "httpVersion": "HTTP/1.1",
- "status": "304",
- "statusText": "Not Modified",
- "headersSize": 194,
- "discardResponseBody": true
- }
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "eventTimings",
- "totalTime": 1
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "responseHeaders",
- "headers": 6,
- "headersSize": 194
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "responseCookies",
- "cookies": 0
-},
-{
- "from": "conn0.netEvent14",
- "type": "networkEventUpdate",
- "updateType": "responseContent",
- "mimeType": "text/css",
- "contentSize": 0,
- "discardResponseBody": true
-}
-
-
-Actual headers, cookies, and bodies are not sent.
- -getRequestHeaders and other packetsTo get more details about a network event you can use the following packet requests (and replies).
- -The getRequestHeaders packet:
{
- "to": "conn0.netEvent15",
- "type": "getRequestHeaders"
-}
-{
- "from": "conn0.netEvent15",
- "headers": [
- {
- "name": "Host",
- "value": "localhost"
- }, ...
- ],
- "headersSize": 350
-}
-
-
-The getRequestCookies packet:
{
- "to": "conn0.netEvent15",
- "type": "getRequestCookies"
-}
-{
- "from": "conn0.netEvent15",
- "cookies": []
-}
-
-
-The getResponseHeaders packet:
{
- "to": "conn0.netEvent15",
- "type": "getResponseHeaders"
-}
-{
- "from": "conn0.netEvent15",
- "headers": [
- {
- "name": "Date",
- "value": "Mon, 17 Sep 2012 20:05:27 GMT"
- }, ...
- ],
- "headersSize": 320
-}
-
-
-The getResponseCookies packet:
{
- "to": "conn0.netEvent15",
- "type": "getResponseCookies"
-}
-{
- "from": "conn0.netEvent15",
- "cookies": []
-}
-
-
-Starting with Firefox 19: for all of the header and cookie values in the above packets we use LongStringActor grips when the value is very long. This helps us avoid using too much of the network bandwidth.
The getRequestPostData packet:
{
- "to": "conn0.netEvent15",
- "type": "getRequestPostData"
-}
-{
- "from": "conn0.netEvent15",
- "postData": { text: "foobar" },
- "postDataDiscarded": false
-}
-
-The getResponseContent packet:
{
- "to": "conn0.netEvent15",
- "type": "getResponseContent"
-}
-{
- "from": "conn0.netEvent15",
- "content": {
- "mimeType": "text/css",
- "text": "\n@import \"test.css\";\n\n.foobar { color: green }\n\n"
- },
- "contentDiscarded": false
-}
-
-
-The request and response content text value is most commonly sent using a LongStringActor grip. For very short request/response bodies we send the raw text.
Starting with Firefox 19: for non-text response types we send the content in base64 encoding (again, most likely a LongStringActor grip). To tell the difference just check if response.content.encoding == "base64".
The getEventTimings packet:
{
- "to": "conn0.netEvent15",
- "type": "getEventTimings"
-}
-{
- "from": "conn0.netEvent15",
- "timings": {
- "blocked": 0,
- "dns": 0,
- "connect": 0,
- "send": 0,
- "wait": 16,
- "receive": 0
- },
- "totalTime": 16
-}
-
-
-fileActivity packetWhen a file load is observed the following fileActivity packet is sent to the client:
{
- "from": "conn0.console9",
- "type": "fileActivity",
- "uri": "file:///home/mihai/public_html/mozilla/test2.css"
-}
-
-
-Protocol changes by Firefox version:
- -LongStringActor usage in several places.locationChanged packet and updated the tabNavigated packet for tab actors.WebConsoleObjectActor. Now the Web Console uses the JavaScript debugger API and the ObjectActor.bindObjectActor and frameActor options to the evaluateJS request packet.private flags for the console actor notifications, bug 874061. Also added the lastPrivateContextExited notification for the global console actor.isXHR flag for the networkEvent notification, bug 859046.message property from the pageError packet notification, bug 877773. The lineText and errorMessage properties can be long string actors now.url option to the evaluateJS request packet.getPreferences and sendHTTPRequest request packets to the console actor, bug 886067 and bug 731311.As of this writing, this document is a dense summary of the work we did in bug 768096 and subsequent changes. We try to keep this document up-to-date. We hope this is helpful for you.
- -If you make changes to the Web Console server please update this document. Thank you!
diff --git a/files/en-us/tools/web_console/rich_output/commandline-highlightnode.png b/files/en-us/tools/web_console/rich_output/commandline-highlightnode.png deleted file mode 100644 index 578f2e1f95c3622..000000000000000 Binary files a/files/en-us/tools/web_console/rich_output/commandline-highlightnode.png and /dev/null differ diff --git a/files/en-us/tools/web_console/rich_output/console_export.png b/files/en-us/tools/web_console/rich_output/console_export.png deleted file mode 100644 index f973acbd4cfca9e..000000000000000 Binary files a/files/en-us/tools/web_console/rich_output/console_export.png and /dev/null differ diff --git a/files/en-us/tools/web_console/rich_output/console_logobject.png b/files/en-us/tools/web_console/rich_output/console_logobject.png deleted file mode 100644 index 3435d8cfe851b06..000000000000000 Binary files a/files/en-us/tools/web_console/rich_output/console_logobject.png and /dev/null differ diff --git a/files/en-us/tools/web_console/rich_output/index.html b/files/en-us/tools/web_console/rich_output/index.html deleted file mode 100644 index 36c8c158732fd11..000000000000000 --- a/files/en-us/tools/web_console/rich_output/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Rich output -slug: Tools/Web_Console/Rich_output ---- -When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:
- -The Web Console provides rich output for many object types, including the following:
- -Object |
-  |
-
Array |
-  |
-
Date |
-  |
-
Promise |
-
-
|
-
RegExp |
-  |
-
Window |
-  |
-
Document |
-  |
-
Element |
-  |
-
Event |
-  |
-
When an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded. Click on the triangle, and the object will be expanded to show its contents:
- -
Starting with Firefox 67 (available now in Firefox Developer) you can use the arrow keys on your keyboard to navigate through objects displayed in the console. The right-arrow key opens the details of an object and the left-arrow key closes open objects.
- -Similar to examining object details, you can see the details about a network request directly in the console. Click on the arrow next to the request and a details panel will open that is equivalent to the Headers panel in the Network Monitor tool.
- -{{EmbedYouTube("Cj3Pjq6jk9s")}}
- -Once you have output in the console window, you can save it to the clipboard by right-clicking on the output and selecting Export visible messages to clipboard:
- -
This will copy all of the output to the clipboard. Then you can paste it into a document. The output will look something like this:
- -
console.log(todoList)
-Array(4) [ {…}, {…}, {…}, {…} ]
-debugger eval code:1:9
-undefined
-
-If you expand objects, such as arrays, you get slightly different content. For example, by expanding the array in the above list, I get the following:
- -console.log(todoList)
-(4) […]
-
-0: Object { status: "Done", description: "Morning Pages", dateCreated: 1552404478137 }
-
-1: Object { status: "In Progress", description: "Refactor styles", dateCreated: 1552404493169 }
-
-2: Object { status: "To Do", description: "Create feedback form", dateCreated: 1552404512630 }
-
-3: Object { status: "To Do", description: "Normalize table", dateCreated: 1552404533790 }
-
-length: 4
-
-<prototype>: Array []
-debugger eval code:1:9
-undefined
-
-If you hover the mouse over any DOM element in the console output, it's highlighted on the page:
- -
In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the Inspector with that node selected.
You can use the console alongside other tools. While you're in another tool in the Toolbox, just press Esc or select the "Show split console" command in the Toolbar menu. The toolbox will now appear split, with the original tool above and the web console underneath.
- -You can close the split console by pressing Esc again, or by selecting the "Hide split console" menu command.
- -
{{EmbedYouTube("G2hyxhPHyXo")}}
- -As usual, $0 works as a shorthand for the element currently selected in the Inspector:
When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:
You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.
- -For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the >> prompt.
- -
To enter expressions in single-line mode, type at the prompt and press Enter. To enter multi-line expressions, press Shift+Enter after typing each line, then Enter to run all the entered lines.
- -The expression you type is echoed under the input prompt, followed by the result.
- -If your input does not appear to be complete when you press Enter, then the Console treats this as Shift+Enter , enabling you to finish your input.
- -For example, if you type:
- -function foo() {
-
-and then Enter, the Console does not immediately execute the input, but behaves as if you had pressed Shift+Enter , so you can finish entering the function definition.
- -For multi-line entry, click the "split panel" icon at the right hand side of the single-line entry field, or press Ctrl+B (Windows/Linux) or Cmd+B (macOS). The multi-line editing pane opens on the left side the of Web Console.
- -
You can enter multiple lines of JavaScript by default in this mode, pressing Enter after each one. To execute the snippet that is currently in the editing pane, click the Run button or press Ctrl+Enter (or Cmd+Return on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result.
- -Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.
- -You can open files when in multi-line mode, and save the current contents of the editing pane to a file.
- -To switch back to single-line mode, click the X icon at the top of the multi-line editing pane, or press Ctrl+B (Windows/Linux) or Cmd+B (MacOS).
- -You can access variables defined in the page, both built-in variables like window and variables added by JavaScript libraries like jQuery:
The editor has autocomplete: enter the first few letters and a popup appears with possible completions:
- -
Press Enter, Tab, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.
- -Console autocomplete suggestions are case-insensitive.
- -The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.
- -You get autocomplete suggestions for array elements, as well:
- -
You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem Enable Autocompletion has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.
- -This feature is available in Firefox Nightly, in versions labeled 74 and later.
-When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.
- -You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem Instant Evaluation has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.
- -Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click Run, you can switch to single-line mode and still use your function.
- -
The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".
- -The output is highlighted as well where appropriate.
- -Syntax highlighting is not visible in your browser if Accessibility features have been enabled.
-The interpreter remembers expressions you've typed. To move back and forward through your history:
- -The expression history is persisted across sessions. To clear the history, use the clearHistory() helper function.
You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press F9. On Mac press Ctrl+R (note: not Cmd+R!) to initiate the reverse search.
- -
Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing F9 on Windows and Linux ( Ctrl+R on Mac) cycles backwards through the matches.
- -
Once you have initiated the reverse search, you can use Shift + F9 on Windows or Linux ( Ctrl+S on Mac) to search forward in the list of matches. You can also use the ⋀ and ⋁ icons in the expression search bar.
- -When you find the expression you want, press Enter (Return) to execute the statement.
- -Working with iframes explains how to direct all debugging tools to target a particular iframe, including the command line interpreter.
- -The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier. - For more information see Web Console Helpers.
diff --git a/files/en-us/tools/web_console/the_command_line_interpreter/reverse_search.png b/files/en-us/tools/web_console/the_command_line_interpreter/reverse_search.png deleted file mode 100644 index b9dcd3f0b73f40f..000000000000000 Binary files a/files/en-us/tools/web_console/the_command_line_interpreter/reverse_search.png and /dev/null differ diff --git a/files/en-us/tools/web_console/the_command_line_interpreter/reverse_search_example.png b/files/en-us/tools/web_console/the_command_line_interpreter/reverse_search_example.png deleted file mode 100644 index 6899c3bb9332191..000000000000000 Binary files a/files/en-us/tools/web_console/the_command_line_interpreter/reverse_search_example.png and /dev/null differ diff --git a/files/en-us/tools/web_console/the_command_line_interpreter/web-console-iframe-document.png b/files/en-us/tools/web_console/the_command_line_interpreter/web-console-iframe-document.png deleted file mode 100644 index db22cfa61634e15..000000000000000 Binary files a/files/en-us/tools/web_console/the_command_line_interpreter/web-console-iframe-document.png and /dev/null differ diff --git a/files/en-us/tools/web_console/the_command_line_interpreter/web-console-iframe-function.png b/files/en-us/tools/web_console/the_command_line_interpreter/web-console-iframe-function.png deleted file mode 100644 index 88b5b47e1decea9..000000000000000 Binary files a/files/en-us/tools/web_console/the_command_line_interpreter/web-console-iframe-function.png and /dev/null differ diff --git a/files/en-us/tools/web_console/the_command_line_interpreter/web_console_multi.png b/files/en-us/tools/web_console/the_command_line_interpreter/web_console_multi.png deleted file mode 100644 index b1be269584d1a69..000000000000000 Binary files a/files/en-us/tools/web_console/the_command_line_interpreter/web_console_multi.png and /dev/null differ diff --git a/files/en-us/tools/web_console/the_command_line_interpreter/web_console_single.png b/files/en-us/tools/web_console/the_command_line_interpreter/web_console_single.png deleted file mode 100644 index 62827ea7a0fc2af..000000000000000 Binary files a/files/en-us/tools/web_console/the_command_line_interpreter/web_console_single.png and /dev/null differ diff --git a/files/en-us/tools/web_console/ui_tour/index.html b/files/en-us/tools/web_console/ui_tour/index.html deleted file mode 100644 index b61bfc79631b7b4..000000000000000 --- a/files/en-us/tools/web_console/ui_tour/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Web Console UI Tour -slug: Tools/Web_Console/UI_Tour -tags: - - Firefox - - Tools - - console - - web console ---- -The Web Console's interface is split into three horizontal sections, detailed in the sections below.
- -
-
-
-The toolbar across the top contains a number of features:
- -This is where the messages appear, both those generated by the code in the page, and those generated by the commands entered on the command line.
- -See Console messages for a lot more detail on what the messages can contain.
- -You can clear the contents of the console by entering the keyboard command Ctrl + Shift + L (Windows, macOS, and Linux) or Cmd + K on macOS.
-The command line starts with double angle brackets (>>). Use it to enter JavaScript expressions.
- -In Firefox 71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode.
diff --git a/files/en-us/tools/web_console/ui_tour/web_console.png b/files/en-us/tools/web_console/ui_tour/web_console.png deleted file mode 100644 index e8f5e27203315da..000000000000000 Binary files a/files/en-us/tools/web_console/ui_tour/web_console.png and /dev/null differ diff --git a/files/en-us/tools/working_with_iframes/developer_tools_select_iframe.png b/files/en-us/tools/working_with_iframes/developer_tools_select_iframe.png deleted file mode 100644 index 17d2ec698b26946..000000000000000 Binary files a/files/en-us/tools/working_with_iframes/developer_tools_select_iframe.png and /dev/null differ diff --git a/files/en-us/tools/working_with_iframes/developer_tools_settings_iframes.png b/files/en-us/tools/working_with_iframes/developer_tools_settings_iframes.png deleted file mode 100644 index 04585375feff960..000000000000000 Binary files a/files/en-us/tools/working_with_iframes/developer_tools_settings_iframes.png and /dev/null differ diff --git a/files/en-us/tools/working_with_iframes/frame-selection-button.png b/files/en-us/tools/working_with_iframes/frame-selection-button.png deleted file mode 100644 index 0820cebf1c1b10a..000000000000000 Binary files a/files/en-us/tools/working_with_iframes/frame-selection-button.png and /dev/null differ diff --git a/files/en-us/tools/working_with_iframes/frame-selection-popup.png b/files/en-us/tools/working_with_iframes/frame-selection-popup.png deleted file mode 100644 index ae96760ae2fa0d4..000000000000000 Binary files a/files/en-us/tools/working_with_iframes/frame-selection-popup.png and /dev/null differ diff --git a/files/en-us/tools/working_with_iframes/index.html b/files/en-us/tools/working_with_iframes/index.html deleted file mode 100644 index 0c3094c2ed0556c..000000000000000 --- a/files/en-us/tools/working_with_iframes/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Working with iframes -slug: Tools/Working_with_iframes -tags: - - Debugging - - DevTools - - Developer Tools - - Frames - - Tools ---- -You can point the developer tools at a specific iframe within a document. The Inspector, Console, Debugger and all other developer tools will then target that iframe (essentially behaving as if the rest of the page does not exist).
{{EmbedYouTube("Me9hjqd74m8")}}
- -To set an iframe as the target for the developer tools:
- -
The iframe context picker button feature is enabled by default (if it has been disabled the iframe button is never displayed). The feature can be re-enabled from the Settings menu, using the "Select an iframe as the currently targeted document" checkbox.
-