Engagement/Developer Engagement/Grab bag/Developer Tools

From MozillaWiki
Jump to: navigation, search

In today's development world, browsers have evolved from being simple tools to display web content to being fully-fledged read and write development tools. Modern in-built tools allow developers to not only see the source code, but also modify it live in the browser, measure what is being shown and seeing the impact their work has in the browser in terms of performance.

Debugging our web code has evolved from trial and error to live code editing, measuring the impact we have and being able to inject code to try out changes without having to re-build the site and risk breaking the experience of our end users during development.

Mozilla was the pioneer in this area, with Firebug being the extension to Firefox that made it a developer browser rather than just a way to display the web. All other browsers copied that model and created in-build developer tools that allow all kind of interaction and measuring.

The Firefox Developer Tools differ slightly from the tools shipped with Safari, Chrome or Internet Explorer as they are not a single "debugging suite" but consist of several components that each do one job and one job well, to be turned on and off on demand by developers depending what they are currently trying to achieve.

The different parts of the developer tools are explained in detail with screencasts and usage examples on their Wiki page, but here is a quick reminder what each of them mean:

Basic Tools

  • Page Inspector is the main tool to inspect what is on the screen, you can see the HTML, which CSS has been applied and what the browser did to render the element. You also get insight into all the available properties and can edit all of them live in the browser. If you don't know why something does not display correctly, this will give you the information you need.
  • Web Console is your JavaScript command console into the current document. You can write short JavaScript commands and execute them directly in the scope of the current window. If you want to run larger chunks of JavaScript against the document and run it only in part rather than a whole, semi-colon separated command group, you can use the Scratchpad instead.
  • Style Editor - is the main tool to manipulate the style sheets loaded into the document. You can turn them on or off and modify them without a page rebuild or reload.
  • Debugger - allows you to debug JavaScript in the page using breakpoints and step-by-step debugging. No need for alert() and console.log() in your scripts any longer.
  • Profiler allows you to measure the JavaScript performance of interactions and get granular insight into what happened, which methods got called and where your memory went.
  • Network Monitor gives you insight into everything that happened during loading of the current document and what subsequently goes in and out. A great insight to find out why the page isn't coming in as snappy as it should.
  • Shader Editor allows you to debug WebGL shaders live in the browser

Mobile Tools

  • Remote Debugging allows you to debug sessions on a mobile device and taking advantage of the more convenient interfaces on your desktop. Tap on things on the phone, measure what happened on the desktop.
  • Firefox OS Simulator is a fully-fledged simulation of a FirefoxOS device on your desktop. Not all WebAPIs are available in the simulator but it should get you going quickly.
  • Responsive Design View is a great way to see your product in different screen resolutions without having to resize the browser. You still have the whole screen size to see the debugging tools whilst seeing what end users would see on a smaller device.

Standalone Tools

  • Scratchpad is a great way to run larger JavaScript chunks in the context of the current page. This allows you to debug functionality of your scripts without having to re-build your page/app.
  • Browser Console - is similar to the Web Console but also gives you insight into the inner workings of Firefox. This is useful for Firefox debugging.
  • Developer Toolbar is a command line interface to all the other development tools. You can interact with them on a code level which is great for plain keyboard users and automated scripting.
  • 3D View is a three dimensional representation of the depth of the DOM of the current document. Great to detect if your HTML is too complex.
  • Paint Flashing Tool shows you when the browser is re-painting an element. As repaints are a big performance hit, this tool helps you to un-jank your code.
  • Debugging Firefox JS Code allows you to debug the code of the browser itself.

Up-to-date information about Developer Tools can always be found in the Release notes

Devtools Screencasts

Retrieved from "https://wiki.mozilla.org/index.php?title=Engagement/Developer_Engagement/Grab_bag/Developer_Tools&oldid=996574"