Web

When Toolbars Collide

Alex Koyich
Share

Designers, developers and geeks alike are always searching for tools to enhance their efficiency and make work easier. One such tool is the Web Developer extension for Firefox (also available for Chrome). Chris Pederick dished out this handy add-on 10 years ago in 2003.

Firefox 10.0, released in January of 2012, came with some new features labelled collectively as Developer Tools. These built-in tools didn’t include as many features as Pederick’s extension. However, included in Developer Tools was a bold, intuitive HTML and CSS inspector that allowed you to easily select and inspect each and every element on a web page.

Now, more than a year and a half later, Firefox (now at version 22) boasts a refined, sleek set of Developer Tools. But this set bears a new, yet familiar, name: Web Developer. This new Web Developer sports – among other tools – an inspector, style editor, profiler and responsive design view.

Inspector

Activate the Inspector tool, then rollover or click an element on the page. This selects the element, and the inspector console reveals where the element is nested within the code, as well as displays an easily navigable breadcrumb showing where the element sits in the page hierarchy. There’s also a side panel that lets you see what CSS rules are declared for the element, what rules are computed or ignored and what the object’s position is within the box model.

Style Editor

The Style Editor outputs a list of all the CSS stylesheets implemented on the web page, in a selectable-list format. Click a list item and the console loads that stylesheet and enables real time editing of the CSS.

Profiler

Launch the Profiler and click “Start” to create a JavaScript profile: see where your JavaScript code is spending all its time. Once you hit “Stop,” the console will save the profile and output the results in the form of a graph and datagrid, showing every JavaScript action that fired and how long it took to run. You can click and drag to select a specific portion of the graph. This selection will display in a new console tab, with a zoomed-in graph and a smaller, focused datagrid. You can create and save as many profiles as you need.

Responsive Design View

What really shines amid all the features of the new Web Developer is the Responsive Design View. Instead of resizing the browser window to show how your site will look on different screen sizes or devices, as the resize tool does from Pederick’s Web Developer extension, simply drag-resize the viewport within the browser window. Freely drag the viewport to whatever size you want, or choose a size from the drop-down list (you can add custom sizes to this list).

Shortcuts

Also, since many designers and developers are keyboard shortcut fanatics (myself included), the built-in Web Developer lets you show and hide all its components with a nice ‘n easy set of keyboard shortcuts:

  • Inspector: Ctrl + Shift + I
  • Style Editor: Shift + F7
  • Profiler: Shift + F5
  • Responsive Design View: Ctrl + Shift + M
  • Scratchpad: Shift + F4
  • Debugger: Ctrl + Shift + S
  • Developer Toolbar: Shift + F2

Pederick’s Web Developer extension is a toolbar, so it’s always visible. But, you can add a “show/hide Web Developer” toggle button to Firefox. Click either 1) the Firefox button (top left) > “Options” > “Toolbar Layout…” or 2) “View” > “Toolbars” > “Customize…” to launch the “Customize Toolbar” pop-up. Then, drag the Web Developer button from the pop-up to wherever you want the button to appear among your toolbars.

The Verdict

So, you can ditch the Web Developer extension and stick with Firefox’s Web Developer, right? You could, but you’d be missing out on some powerful, and convenient, features. Features such as toolbar buttons to validate your CSS, HTML, RSS and hyperlinks via the W3C validation services; quick links that disable cache or cookies and clear form fields; and display options that hide, outline or label all instances of an element on the current page. The extension also features live, HTML editing capabilities.

Therefore, pick and choose which features from either Web Developer best serve your work flow, and keep your coding or designing at top efficiency. In an open-source browser on the open web, it’s fitting that these tools bearing the same name are not battling for superiority. The Web Developer extension is a complement, rather than an opponent, to the built-in Web Developer.

http://www.mozilla.org/en-US/firefox/10.0/releasenotes/
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
http://chrispederick.com/
http://www.pcnexus.net/2013/05/mozilla-firefox-21-all-keyboard-shortcuts-2013.html