Engagement/Developer Engagement/Grab bag/Developer Tools
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:
- 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.
- 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.
- 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
- 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.
- 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
- Jason Weathersby: Debugging and optimising Canvas performance with Firefox Devtools