Search completed in 0.90 seconds.
116 results for "devtools":
Your results are loading. Please wait...
DevTools API - Firefox Developer Tools
warning: the devtools api is still wip.
... introduction the devtools api provides a way to register and access developer tools in firefox.
...the gdevtools global object provides methods to register a tool definition and to access tool instances.
...And 16 more matches
Migrating from Firebug - Firefox Developer Tools
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.
...the devtools share the same shortcuts, but also provide shortcuts for the different panels.
...And 52 more matches
Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn the basics of what browser devtools are, and how to do simple inspection and editing of css.
... how to access browser devtools the article what are browser developer tools is an up-to-date guide explaining how to access the tools in various browsers and platforms.
...And 20 more matches
Index - Firefox Developer Tools
3 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.
... 4 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.
... 11 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).
...And 20 more matches
Web Replay
devtools' debugger and console can be used to inspect and control the replay.
... getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay".
... advanced options preferences devtools.recordreplay.enablerewinding when disabled, firefox records a page signifcantly faster.
...And 10 more matches
Setting up an extension development environment - Archive of obsolete content
devtools.chrome.enabled = true.
... devtools.debugger.remote-enabled = true.
...the devtools.chrome.enabled preference must also be set to true for the browser debugger to be enabled.
...And 3 more matches
Profiling with the Firefox Profiler
it has tighter integration with firefox than external profilers, and has more of a platform focus than the devtools performance panel.
...in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much information as the firefox profiler web app.
... set devtools.debugger.remote-enabled to true in about:config for fennec.
...And 3 more matches
Settings - Firefox Developer Tools
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 inspector show browser styles a setting to control whether styles applied by the browser (user-agent styles) should be displayed in the inspector's rules view.
...this setting works by toggling the about:config preference "devtools.markup.collapseattributes".
... to change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseattributelength".
...And 3 more matches
Index - Learn web development
beginner, browser, css, codingscripting, dev tools, html, javascript, learn the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: 26 what are hyperlinks?
... 117 debugging css beginner, css, dom, debugging, devtools, learn, source sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect.
...this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on.
...And 2 more matches
React resources - Learn web development
react devtools we used console.log() to check on the state and props of our application in this tutorial, and you'll also have seen some of the useful warnings and error message that react gives you both in the cli and your browser's javascript console.
... the react devtools utility allows you to inspect the internals of your react application directly in the browser.
... this screenshot shows our finished application as it appears in react devtools: on the left, we see all of the components that make up our application, including some unique keys for the things that are rendered from arrays.
...And 2 more matches
Debugging JavaScript
to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings.
... go to about:config and set the following two prefs: devtools.chrome.enabled: true devtools.debugger.remote-enabled: true after you restart the browser, you can access the browser debugger through tools > web developer > browser toolbox.
... (note that before firefox 28, this was labeled "browser debugger" and only the debugger was available, not the whole toolbox.) note that you must accept the incoming connection : (you may disable the pop-up above with the devtools.debugger.prompt-connection set to false in about:config.
...And 2 more matches
/loader - Archive of obsolete content
t/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all relative url require() statements (those that start with ".") are first resolved relative to the requirer module id and the result of it is then resolved using the paths option.
...t/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolev all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow relative urls and resolve them to add-on root: // ./main -> resource://my-addon/root/main.js './': 'resource://my-addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shorte...
... console: { log: dump.bind(dump, "log: "), info: dump.bind(dump, "info: "), warn: dump.bind(dump, "warn: "), error: dump.bind(dump, "error: ") } }, modules: { // expose legacy api via pseudo modules that eventually may be // replaced with a real ones :) "devtools/gcli": cu.import("resource:///modules/gcli.jsm", {}), "net/utils": cu.import("resource:///modules/netutil.jsm", {}) } }); loader instances the loader produces instances that are nothing more than representations of the environment into which modules are loaded.
...it examines each element until it finds the prefix matching the supplied id and replaces it with the location it maps to: let mapping = [ [ 'sdk/', 'resource://gre/modules/commonjs/sdk/' ], [ './', 'resource://my-addon/' ], [ '', 'resource:///modules/' ] ]; resolveuri('./main', mapping); // => resource://my-addon/main.js resolveuri('devtools/gcli', mapping); // => resource:///modules/devtools/gcli.js resolveuri('sdk/core/promise', mapping); // => resource://gre/modules/commonjs/sdk/core/promise.js override() this function is used to create a fresh object that contains own properties of two arguments it takes.
Common Firefox theme issues and solutions - Archive of obsolete content
to fix this issue you need to copy the files chrome://browser/skin/devtools/inspect-button.png and chrome://browser/skin/devtools/treepanel-button.png from the default theme into your browser/devetools/ folder.
... you also need to insert the following style rules into the proper place in the browser/browser.css file in your theme theme: /* highlighter toolbar - html tree */ #inspector-treepanel-toolbutton { list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png"); -moz-margin-end: 0; -moz-image-region: rect(0px 18px 16px 0px); } /* highlighter toolbar */ #inspector-inspect-toolbutton { list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); -moz-image-region: rect(0px 16px 16px 0px); } style inspector is completely unstyled the style inspector that is part of firefox 10 and later needs to be styled.
...you'll probably want to copy the files from the folder browser/devtools/ from the default theme into your theme and then modify as necessary to achieve the desired look.
... .inspector-breadcrumbs-button { -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 stretch; /* for ff13- */ -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; /* for ff14+ */ } responsive design view responsive design view is missing background for unused area the responsive design view tool (tools > web developer > responsive design view) needs background styling for the unused...
Experimental features in Firefox
nightly 72 no developer edition 72 no beta 72 no release 72 no preference name devtools.inspector.color-scheme-simulation.enabled execution context selector this feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu.
... nightly 71 yes developer edition 71 yes beta 71 no release 71 no preference name devtools.inspector.compatibility.enabled server-sent events in network monitor the network monitor displays information for server-sent events.
... nightly 80 yes developer edition 80 yes beta 80 no release 80 no preference name devtools.netmonitor.features.serversentevents ui desktop zooming this feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do.
Accessibility Inspector - Firefox Developer Tools
the accessibility inspector also uses this information to provide valuable accessibility debugging capabilities in the devtools.
... 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.
... notable related features when the accessibility features are turned on, there are a number of useful additional features available in the devtools, which are detailed below: context menu options an extra context menu option is added, both for the general context menu on the web page when right/ctrl + clicking a ui feature, and the html pane of the page inspector when right/ctrl + clicking a dom element: when you choose the inspect accessibility properties/show accessibility properties context menu options, the accessibility tab is im...
Browser Console - Firefox Developer Tools
to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings.
... 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); bonus features available for add-on sdk add-ons, the console api is available automatically.
...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.
about:debugging - Firefox Developer Tools
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.
... whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showhiddenaddons preference.
... 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.
... to enable it, open the configuration editor (about:config) and set devtools.aboutdebugging.new-enabled to true.
Firefox Developer Tools
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: the collective term for the ui inside which the devtools all live is the toolbox.
... migrating from firebug 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.
Debugging a XULRunner Application - Archive of obsolete content
browser debugger as of gecko 44, it is no longer possible to start the devtools server from xul apps.
...add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); // don't specify a window type parameter below if "navigator:browser" // is suitable for your app.
... debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version 37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.js: (in recent ffox, edit about:config instead) pref("devtools.debugger.remote-enabled", true); in firefox, go to tools > web developer > connect...
source-editor.jsm
constant value description sourceeditor.prefs.component "devtools.editor.component" a string indicating the name of the source editor engine to use; this is "orion" by default.
... sourceeditor.prefs.expand_tab "devtools.editor.expandtab" a boolean value that indicates whether or not to automatically expand tabs out to a series of spaces.
... sourceeditor.prefs.tab_size "devtools.editor.tabsize" an integer value that specifies the number of spaces per tab.
Page inspector 3-pane mode - Firefox Developer Tools
enabling the 3-pane inspector pre-firefox 62 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 prefs 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-enabled devtools.inspector.three-pane-toggle you need to flip these two to true in release/beta to test the feature in firefox 61.
Web Console remoting - Firefox Developer Tools
the webconsoleactor and the webconsoleclient the 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.
Event reference
cssruleviewrefreshed devtools specific the "rules" view of the style inspector has been updated.
... cssruleviewchanged devtools specific the "rules" view of the style inspector has been changed.
... cssruleviewcsslinkclicked devtools specific a link to a css file has been clicked in the "rules" view of the style inspector.
Remotely debugging Firefox for Metro - Archive of obsolete content
set up firefox for metro go to about:config in firefox for metro, and set the following required preference: devtools.debugger.remote-enabled = true you may also want to set these optional preferences: devtools.debugger.force-local = false (if you want to connect from a different machine over the network) devtools.debugger.remote-host (to change the tcp hostname where firefox will listen for connections) devtools.debugger.remote-port (to change the tcp port number where firefox will listen for connections...
...) devtools.debugger.prompt-connection = false (allow connections without displaying a confirmation prompt.
Developer Tools - MDN Web Docs Glossary: Definitions of Web-related terms
developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software.
... learn more general knowledge web development tools on wikipedia technical reference firefox developer tools on mdn firebug (former developer tool for firefox) chrome devtools on chrome.com safari web inspector on apple.com edge dev tools on microsoft.com ...
The box model - Learn web development
use browser devtools to view the box model your browser developer tools can make understanding the box model far easier.
... if you inspect an element in firefox's devtools, you can see the size of the element plus its margin, padding, and border.
Beginner's guide to media queries - Learn web development
the responsive design mode in firefox devtools is very useful for working out where these breakpoints should go.
...if we view the layout in responsive design mode in devtools we can see that it works pretty well as a straightforward mobile view of the site.
How CSS works - Learn web development
when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply.
... the updated output is as follows: in our debugging css article in the next module we will be using browser devtools to debug css problems, and will learn more about how the browser interprets css.
What are browser developer tools? - Learn web development
this article explains how to use the basic functions of your browser's devtools.
... how to open the devtools in your browser the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: how do you pull it up?
Common questions - Learn web development
every browser features a set of devtools for debugging html, css, and other web code.
... this article explains how to use the basic functions of your browser's devtools.
JavaScript object basics - Learn web development
i\'m ' + this.name[0] + '.'); } }; after saving and refreshing, try entering some of the following into the javascript console on your browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
...the live version will give you a blank screen, but that's ok — again, open your devtools and try typing in the above commands to see the object structure.
Test your skills: Object basics - Learn web development
run the greeting() method using dot notation (it will log the greeting to the browser devtools' console).
...we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the browser devtools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
update your existing checkalltodos() function to the following: const checkalltodos = (completed) => { todos.foreach(t => t.completed = completed) console.log('todos', todos) } go back to your browser, open your devtools console, and click check all/uncheck all a few times.
... let name = '' let nameel // reference to the name input dom node if (autofocus) nameel.focus() now go back to the todos component, and pass the autofocus prop into the <newtodo> component call, like so: <!-- newtodo --> <newtodo autofocus on:addtodo={e => addtodo(e.detail)} /> if you try your app out now, you'll see that the page is now blank, and in your devtools web console you'll see an error along the lines of: typeerror: nameel is undefined.
Creating our first Vue component - Learn web development
go to your browser's devtools and you’ll see a warning along these lines in the console: [vue warn]: missing required prop: "label" found in ---> <todoitem> at src/components/todoitem.vue <app> at src/app.vue <root> this is because we marked the label as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into t...
...you can check if the unique ids are working by temporarily adding more <to-do-item></to-do-item> calls into app.vue, and then checking their rendered output with your browser's devtools.
Examples
alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { return 'i didnt do a promise.resolve so this will not understand that mypromise is a promise'; } // creates this error: /* exception: mypromise.then is not a function @scratchpad/5:8:1 wca_evalwithdebugger@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:1069:7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:734:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1098:9 ldt_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transpor...
...t.js:279:11 makeinfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/devtoolsutils.js:84:7 */ intermediate of user defined promise function 1 components.utils.import("resource://gre/modules/promise.jsm"); // this function creates and returns a new promise.
Debugging service workers - Firefox Developer Tools
in this article we will look at debugging service workers using the firefox devtools application panel.
... the firefox devtools’ storage tab has a cache storage section that lists all the different caches you have stored under each different origin.
Access debugging in add-ons - Firefox Developer Tools
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): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js 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.
Step through code - Firefox Developer Tools
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.
Network request list - Firefox Developer Tools
you can configure the threshhold in the configuration editor (about:config) by modifying the devtools.netmonitor.audits.slow setting.
... when you refresh the page, that specific url will be blocked and a message will be added to the item in the list indicating that it has been blocked by the devtools.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
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.
... discovering flex containers 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.
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... view @media rules for color-scheme-preference as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature.
CSS Grid Inspector: Examine grid layouts - Firefox Developer 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.
... discovering css grids 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.
about:debugging (before Firefox 68) - Firefox Developer Tools
whether or not system add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showsystemaddons preference.
... the "enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
note: firefox devtools have supported highlighting text nodes since version 52, making it easier to see exactly what nodes whitespace characters are contained within.
... the firefox devtools html inspector will highlight text nodes, and also show you exactly what area the elements are taking up — useful if you are wondering what is causing the problem, and are maybe thinking you've got some extra margin in there or something!
console/plain-text - Archive of obsolete content
all of its methods are inherited from console.jsm (resource://gre/modules/devtools/console.jsm).
window/utils - Archive of obsolete content
in particular: null: get all window types navigator:browser: get "normal" browser windows devtools:scratchpad: get scratchpad windows navigator:view-source: get view source windows if you're not also passing options, you can omit this, and it's the same as passing null.
Extension Etiquette - Archive of obsolete content
ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator").
Adding menus and submenus - Archive of obsolete content
if you're overlaying the tools menu, your overlay code should have something like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="javascriptconsole,devtoolsseparator"> <menupopup> <!-- your menuitem goes here.
The Essentials of an Extension - Archive of obsolete content
one recommended location for menus in the classic menu vase is under the tools menu, so the code should really look like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menupopup> we're overlaying the menu that is deeper into the xul tree, but it doesn't matter because all we nee...
Error Console - Archive of obsolete content
the error console is deprecated in firefox, and is now only made available if you set the devtools.errorconsole.enabled preference to true.
windowtype - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows ...
window - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , pe...
wizard - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties canadvance type: boolean this property is set to true if the user can press the next button to go to the next page.
Scratchpad - Archive of obsolete content
to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
111 developer tools codingscripting, developer tools, glossary developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software.
Advanced styling effects - Learn web development
note: in firefox you can use the devtools shapes inspector to inspect shapes.
Cascade and inheritance - Learn web development
the below video shows how you can use the firefox devtools to inspect a page's cascade, specificity, and more: understanding inheritance we'll start with inheritance.
Styling tables - Learn web development
this includes information on using browser devtools to find solutions to your problems.
CSS building blocks - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you find out what is going on.
Responsive design - Learn web development
note: the screenshots above are taken using the responsive design mode in firefox devtools.
Test your skills: Media Queries and Responsive Design - Learn web development
you can drag your window smaller or use the responsive design view in firefox devtools to view this as if on a phone.
Responsive images - Learn web development
to see which images were loaded, you can use firefox devtools's network monitor tab.
Client-side storage - Learn web development
go to the devtools, then choose application > service workers, then check the offline checkbox if you are using chrome.
Test your skills: Object-oriented JavaScript - Learn web development
call your calcperimeter() method on the instance, to see whether it logs the calculation result to the browser devtools' console as expected.
React interactivity: Events and state - Learn web development
in fact, react will give you a warning in your devtools console — "warning: encountered two children with the same key..." we need to fix this.
Working with Svelte stores - Learn web development
you can also inspect it in the devtools console.
Introduction to automated testing - Learn web development
devtools — allows you to use your browser's devtools to directly debug or manipulate the page being shown in the test browser.
Handling common HTML and CSS problems - Learn web development
hovering the warning triangle will provide a descriptive error message: other browser devtools have similar features.
Benchmarking
async stacks async stacks no longer impact performance since firefox 78, as bug 1601179 limits async stack capturing to when devtools is opened.
Command line options
-devtools start with native developer tools opened.
Configuring Build Options
this is useful when working locally on javascript-powered components like the devtools.
Contributing to the Mozilla code base
project skills documentation/onboarding firefox browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview ...
mach
for example: $ cd devtools/client $ mach build webconsole # rebuild only the files in the devtools/client/webconsole directory $ mach mochitest webconsole/test # run mochitests in devtools/client/webconsole/test enable tab completion to enable tab completion in bash, run the following command.
Firefox and the "about" protocol
about:crashes lists all crashes, which happened during the runtime of firefox (in case the user enabled the crash reporter) about:credits lists all contributors to the firefox project about:debugging switches to the developer tools debugging page, which allows you to debug add-ons, tabs and service workers about:devtools summarizes the developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information about:logo firefox logo about:memory provides a way to display memory usage, save it as repo...
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
it was originally used in firefox os to implement browser applications before that project was cancelled; since firefox 47 it is available to desktop chrome code and used in places like the firefox devtools.
Browser API
browser api methods removed in firefox 65 in firefox 65, several of the mozilla browser api methods were removed in an effort to cut down on domrequest usage in the browser, and remove the parts of the browser api that are no longer needed (it is used only by the firefox devtools at this point).
SourceMap.jsm
get a reference to the module: let sourcemap = {}; components.utils.import('resource:///modules/devtools/sourcemap.jsm', sourcemap); sourcemapconsumer a sourcemapconsumer instance represents a parsed source map which we can query for information about the original file positions by giving it a file position in the generated source.
Localization content best practices
developer tools key shortcuts when translating firefox strings from /devtools/ folder, you may see some keys like this: inspector.searchhtml.key=cmdorctrl+f the first part of the string `cmdorctrl` should not be translated.
Mozilla projects on GitHub
debugger.html the debugger.html, a modern universal js debugger for firefox devtools, node, and every other js environment.
Memory Profiler
using the add-on open the devtools panel or webide.
Power profiling overview
the animation inspector in the firefox devtools can identify them.
Performance
memory profiling and leak detection tools the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
WebReplayRoadmap
this is based on the logpoints feature in the debugger, which can be enabled with the devtools.debugger.features.log-points preference.
Components.utils.importGlobalProperties
example components.utils.import("resource://gre/modules/devtools/console.jsm"); components.utils.importglobalproperties(["atob", "btoa"]); var encoded = btoa("hello"); console.log(encoded); // "sgvsbg8=" console.log(atob(encoded)); // "hello" alternative methods if importglobalproperties does not support the targeted firefox version, here are some alternative methods to import these objects.
Inspecting web app manifests - Firefox Developer Tools
in this article we will look at inspecting app manifests using the firefox devtools application panel.
Application - Firefox Developer Tools
accessing the application panel the application panel is available on the standard devtools tab menu under application, in firefox 79+.
Browser Toolbox - Firefox Developer Tools
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.
Examine, modify, and watch variables - Firefox Developer Tools
if you need to use it, you can, for now, switch back to the old debugger by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.
Use a source map - Firefox Developer Tools
the comment's syntax is like this: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html.
Set event listener breakpoints - Firefox Developer Tools
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.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
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.
Deprecated tools - Firefox Developer Tools
over the course of devtools development, we have added several experimental panels to try out new ideas.
JSON viewer - Firefox Developer Tools
to enable this feature in other release channels, set the devtools.jsonview.enabled preference to true.
All keyboard shortcuts - Firefox Developer Tools
to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting.
Measure a portion of the page - Firefox Developer Tools
to enable its button: go to the devtools settings.
Edit fonts - Firefox Developer Tools
this article provides a tour of the font tools available in the firefox devtools.
Examine and edit HTML - Firefox Developer Tools
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.
Use the Inspector API - Firefox Developer Tools
firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context: window.inspector defined in inspector-panel.js.
Allocations - Firefox Developer Tools
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.
Debugging Firefox Desktop - Firefox Developer Tools
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.
Style Editor - Firefox Developer Tools
to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting.
Web Console - Firefox Developer Tools
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).
CacheStorage - Web APIs
those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu.
Console API - Web APIs
find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or workerglobalscope.console in workers; accessible using just console — contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's web console.
DeprecationReportBody - Web APIs
this typically matches the message a browser will display in its devtools console when a deprecated feature is used, if one is available.
InterventionReportBody - Web APIs
this typically matches the message a browser will display in its devtools console when an intervention is imposed, if one is available.
ReadableStream.cancel() - Web APIs
see devtools for details.
Web applications and ARIA FAQ - Accessibility
several inspecting and debugging tools exist to help you test aria in action: object inspector on windows accessibility inspector on os x accprobe on linux firebug's dom inspector the accessibility inspector for firebug the audits tab in chrome devtools there are several free or open source screen readers that can be used to do hands-on testing with aria.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
note: if you are not sure whether margins are collapsing, check the box model values in your browser devtools.
CSS Grid Layout - CSS: Cascading Style Sheets
ss grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspector css grid playground grid garden - a game for learning css grid specifications specification status comment css grid layout module level 2 working draft added subgrids.
Overview of CSS Shapes - CSS: Cascading Style Sheets
developer tools for shapes along with css shapes support in the browser, firefox are shipping a shape path editor in the firefox devtools.
Shapes From Images - CSS: Cascading Style Sheets
devtools can help you to identify cors errors.
JavaScript modules - JavaScript
you'll still get syntax errors shown in the devtools, but you'll not be able to use some of the debugging techniques you might have expected to use.
Inheritance and the prototype chain - JavaScript
more information is available for firefox developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not matter how you declare the function, a // function in javascript will always have a default // prototype property.
Index - WebAssembly
11 using the webassembly javascript api api, devtools, javascript, webassembly, compile, instantiate, memory, table this article has taken you through the basics of using the webassembly javascript api to include a webassembly module in a javascript context and make use of its functions, and how to use webassembly memory and tables in javascript.
Using the WebAssembly JavaScript API - WebAssembly
see webassembly debugging with firefox devtools for a video preview.