Found 149 pages:

# Page Tags and summary
1 Firefox Developer Tools 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.
2 3D view HTML, Tools, Web Development, Web Development:Tools
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.
3 about:debugging Debugger, Remote debugging, about:debugging
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.
4 about:debugging (before Firefox 68)
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.
5 Accessibility Inspector 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.
6 Color vision simulation Accessibility, Accessibility inspector, Color blindness, DevTools, Guide, Simulation, Tools
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.
7 The Web Developer Menu Add-ons, Debugging, Tools, Web Developer
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:
8 Application Application, Debugging, DevTools, Firefox, Guide, Manifests, Service Workers
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.
9 Inspecting web app manifests Application, DevTools, Firefox, Guide, Manifest
In this article we will look at inspecting app manifests using the Firefox DevTools Application panel.
10 Debugging service workers Application, DevTools, Firefox, Guide, Service Workers
In this article we will look at debugging service workers using the Firefox DevTools Application Panel.
11 Browser Console Browser, Debugging, Tools, Web Development, WebDevelopment:Tools
The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.
12 Browser Toolbox Debug, Firefox, JavaScript
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.
13 Debugger-API Debugger, Intermediate, Intro, JavaScript, Tools
Mozilla’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.
14 Debugger.Environment
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.
15 Debugger.Frame
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.
16 Debugger.Memory
The Debugger API can help tools observe the debuggee’s memory use in various ways:
17 Debugger.Object
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.
18 Debugger.Script
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".
19 Debugger.Source
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".
20 Debugger
When called as a constructor, the Debugger object creates a new Debugger instance.
21 Tutorial: Show Allocations Per Call Path Debugger, Tools, Tutorial
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.
22 Tutorial: Set a breakpoint
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.
23 Debugger.Object
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.
24 The Firefox JavaScript Debugger Debugger, Debugging, Dev Tools, JavaScript, Tools, l10n:priority
The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.
25 Break on DOM mutation DOM Mutation Breakpoint, Debugger, Debugging, Dev Tools, Tools, breakpoint
A DOM Mutation Breakpoint pauses the code when the DOM node on which you have set the breakpoint is modified.
26 How to
These articles describe how to use the debugger.
27 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.
28 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.
29 Debug eval sources
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.
30 Disable breakpoints
To disable a single breakpoint, uncheck the checkbox next to it in the breakpoints list.
31 Highlight and inspect DOM nodes DOM node, Debugger, DevTools, Page Inspector
If you hover over a DOM node in the Watch Expressions, it will be highlighted in the page.
32 Ignore a source
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.
33 Open the debugger
There are three ways to open the debugger:
34 Pretty-print a minified file 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]".
35 Search
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:
36 Set a breakpoint 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.
37 Set a conditional breakpoint Conditional, Debugger, Debugging, DevTools, Developer Tools, Firefox, Guide, JavaScript debugging, Tools, WM, breakpoint
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.
38 Set watch expressions 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.
39 Step through code Debugger, DevTools, JavaScript, Step through code
When the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar:
40 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:
41 Use watchpoints Firefox, Guide, Tools
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. 
42 Set a logpoint Debugger, Debugging, Dev Tools, JavaScript debugging, Tools, breakpoint, logpoint
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.
43 Set an XHR breakpoint Debugger, Debugging, JavaScript, XHR Breakpoint
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:
44 Set event listener breakpoints Debugger, Dev Tools, Event Debugging, Event Handler, Event Listener, JavaScript debugging, Tools, breakpoint, events
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.
45 Source map errors 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.
46 UI Tour 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
47 Using the Debugger map scopes feature
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).
48 Deprecated tools Deprecated, Tools
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.
49 DevTools API DevTools
The DevTools API provides a way to register and access developer tools in Firefox.
50 DevToolsColors CSS
This chart lists colors and CSS variables as implemented in the dark theme and light theme for developer tools.
51 DOM Property Viewer DOM, Tools, Web Development
The DOM Property Viewer lets you inspect the properties of the DOM as an expandable tree structure, starting from the window object of the current page or the selected iframe.
52 Eyedropper 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:
53 Firefox OS 1.1 Simulator Firefox OS, Guide, Tools
This page describes the "old" Firefox OS Simulator. You should only use this if you're developing apps for Firefox 1.1, and it can only be installed on Firefox 24 or Firefox 25.
54 Firefox OS Simulator
The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. This means that in many cases, you don't need a real device to test and debug your app. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.
55 JSON viewer
The JSON viewer is new in Firefox 44.
56 All keyboard shortcuts Tools, l10n:priority
This page lists all keyboard shortcuts used by the developer tools built into Firefox.
57 Measure a portion of the page Design, DevTools, Developer, Firefox, Layout, Measure, Measuring, Measuring Tool, Tools
Using the Measuring Tool you can measure a specific area of a web page.
58 Memory 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.
59 Aggregate view
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:":
60 Basic operations
Before Firefox 50, the Memory tool is not enabled by default. To enable it, open the developer tool settings, and check the "Memory" box under "Default Firefox Developer Tools":
61 DOM allocation example
This article describes a very simple web page that we'll use to illustrate some features of the Memory tool.
62 Dominators view
The Dominators view is new in Firefox 46.
63 Dominators

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.

64 Monster example
This article describes a very simple web page that we'll use to illustrate some features of the Memory tool.
65 Tree map view
The Tree map view is new in Firefox 48.
66 Migrating from Firebug 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.
67 Network Monitor Debugging, Dev Tools, Firefox, Guide, Networking, Tools, l10n:priority
The Network Monitor shows you all the network requests Firefox makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, and details of each request.
68 Inspecting server-sent events Firefox, Network Monitor, Server-sent events
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.
69 Inspecting web sockets JavaScript, Network Monitor, WebAPIs, web socket inspector, web sockets
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.
70 Performance Analysis 110n:priority, Debugging, Dev Tools, Firefox, Guide, Networking, Tools
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.
71 Network monitor recording 110n:priority, Debugging, Dev Tools, Firefox, Guide, Networking, Tools
You can pause and resume the monitoring of network traffic using the pause button.
72 Network request details 110n:priority, Debugging, Dev Tools, Firefox, Guide, Networking, Tools
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.
73 Network request list 110n:priority, Debugging, Dev Tools, Firefox, Guide, Networking, Tools
The request list of the Network Monitor shows a list of all the network requests made in the course of loading the page.
74 Throttling 110n:priority, Debugging, Dev Tools, Firefox, Guide, Networking, Tools
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.
75 Network monitor toolbar 110n:priority, Debugging, Dev Tools, Firefox, Guide, Networking, Tools
The network monitor provides two toolbar areas, one above the main section, and another below.
76 Page Inspector 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.
77 Page inspector 3-pane mode 3-pane, CSS, Guide, Inspector, Tools
This article explains how to use the Page Inspector's 3-pane mode.
78 How to
Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.
79 Debug scrollable overflow
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.
80 Edit CSS filters CSS, DevTools, Filters, Page Inspector, Tools
CSS filter properties in the Rules view have a circular gray and white swatch next to them:
81 Edit Shape Paths in CSS CSS, DevTools, Page Inspector, Rules view, Tools, highlighter, shapes
The Shape Path Editor is a tool that helps you see and edit shapes created using clip-path and also the CSS shape-outside property and <basic-shape> values. This guide walks you through all of the available options.
82 Edit fonts 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.
83 Examine and edit CSS Guide, Inspector, Tools
You can examine and edit CSS in the Inspector's CSS pane.
84 Examine and edit HTML Debugging, Firefox, Guide, Inspector, Mozilla, Tools
You can examine and edit the page's HTML in the HTML pane.
85 Examine and edit the box model 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:
86 Examine Event Listeners Guide, Inspector, Tools
The inspector shows the word "event" next to elements in the HTML Pane, that have event listeners bound to them:
87 CSS Flexbox Inspector: Examine Flexbox layouts Guide, Inspector, Tools, flexbox
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.
88 CSS Grid Inspector: Examine grid layouts 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.
89 Inspect and select colors 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:
90 Open the Inspector Guide, Inspector, Tools
There are two main ways to open the Inspector:
91 Reposition elements in the page
Starting in Firefox 48 you can move absolutely positioned elements by dragging them around the page.
92 Select an element 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.
93 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.
94 Use the Inspector API Inspector, Reference, Tools
Firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:
95 Use the Inspector from the Web Console Guide, Inspector, Tools
The element that's currently selected in the Page Inspector can be referenced in the Web Console using the variable $0.
96 View background images
In the Rules view, you can see a preview of images specified using background-image. Just hover over the rule:
97 Visualize transforms Guide, Inspector, Tools
If you hover over a transform property in the Rules view, you'll see the transformation overlaid in the page:
98 Work with animations Guide, Inspector, Tools
This article covers three tools you can use to visualize and edit animations:
99 Animation inspector (Firefox 41 and 42)
The Animation inspector enables you to:
100 Animation inspector example: CSS transitions
Example animation using CSS transitions.
101 Animation inspector example: Web Animations API
Example animation using the Web Animations API.
102 UI Tour Guide, Inspector, Tools
This article is a quick tour of the main sections of the Page Inspector's user interface.
103 Paint Flashing Tool 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.
104 Performance Developer Tools, Learn, Performance, Web Performance
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.
105 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.

106 Call Tree JavaScript, Performance, memory

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.

107 Examples
List of demo pages for performance scenarios and walkthroughs.
108 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.
109 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.

110 Frame rate

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.

111 How to
To open the Performance tools:
112 Scenarios NeedsContent
Performance scenarios
113 Animating CSS properties CSS animation, Developer Tools, Web Performance

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.

114 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.

115 UI Tour
The performance tool's UI consists of 4 main pieces:
116 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.

117 Remote Debugging Tools, l10n:priority
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.
118 Remotely debugging Chrome Desktop
How to connect the Firefox Developer Tools to the Google Chrome browser running on the desktop.
119 Debugging Firefox Desktop Debugging, Guide, Tools
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.
120 Debugging Firefox for Android with WebIDE Debugging, Guide, Tools
This article describes how to connect the Firefox Developer Tools to Firefox for Android from Firefox 36 onwards.
121 Remotely debugging Firefox <36 for Android Android, Debugging
This guide explains how to use remote debugging to inspect or debug code running in Firefox for Android over USB.
122 Remotely debugging Thunderbird Debug, Tutorial, thunderbird
This guide explains how to use remote debugging to inspect or debug code running in Thunderbird.
123 Responsive Design Mode 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.
124 Rulers DevTools, Firefox, Rulers, Tools
You can overlay horizontal and vertical rulers on a web page:
125 Settings
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.
126 Shader Editor
The Shader Editor enables you to see and edit the vertex and fragment shaders used by WebGL.
127 Storage Inspector Cookies, Dev Tools, Firefox, Guide, IndexedDB, Local Storage, Session Storage, Storage, Tools
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:
128 Cache Storage Cache Storage, DevTools, Firefox, Guide, Storage, Storage Inspector, Tools, l10n:priority
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:
129 Cookies Cookies, Dev Tools, Firefox, Guide, Storage, Storage Inspector, Tools, l10n:priority
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:
130 Extension Storage Dev Tools, Extension Storage, Firefox, Guide, Storage, Storage Inspector, Tools, l10n:priority
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:
131 IndexedDB 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.
132 Local Storage / Session Storage Dev Tools, Firefox, Guide, Local Storage, Session Storage, Storage, Storage Inspector, Tools, l10n:priority
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.
133 Style Editor CSS, Stylesheets, Tools, Web Development, Web Development:Tools
The Style Editor enables you to:
134 Taking screenshots Screenshot, Tools
You can use the Developer Tools to take a screenshot of the entire page, or of a single element in the page.
135 Tips Dev Tools, Tools, Web Development
136 Toolbox
The Toolbox provides a single home for most of the developer tools that are built into Firefox.
137 Validators Tools, Website validator, html5 validator, validator
This article lists different resources for developers to check web documents.
138 View Source DevTools, Firefox, view page source
View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:
139 Web Audio Editor Firefox, Mozilla, Tools, Web Audio API
With the Web Audio API, developers create an AudioContext. Within that context they then construct a number of AudioNode, including:
140 Web Console Debugging, Guide, Security, Tools, Web Development, Web Development:Tools, l10n:priority, web console
The Web Console:
141 Console messages
Most of the Web Console is occupied by the message display pane:
142 Web Console Helpers Debugging, JavaScript, Web Development, web console
The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.
143 Invoke getters from autocomplete
No summary!
144 Web Console remoting 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.
145 Rich output
When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:
146 Split console
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.
147 The JavaScript input interpreter Debugging, Web Development, web console
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.
148 Web Console UI Tour Firefox, Tools, console, web console
The Web Console's interface is split into three horizontal sections, detailed in the sections below.
149 Working with iframes 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).