25 Secrets of the Browser Developer Tools

Development.
Over the last few years there has been one tool that has helped out every web developer more than any other the browser developer tools. W orking in harmony with the web browser, the developer tools allows us to manipulate DOM elements, CSS styles, JavaSc ript and other useful information from the same window often in real time. Historically developers have used Firefoxs Firebug add -on to develop and debug their websites, but more recently each browser has developed its own set of tools and each comes with its own advantages and disadvantages. Nowadays it seems hard to imagine ever building a website without one of these handy tools, which are normally accessible by either pressing F12 in W indows or Cmd

Option

and I on the Mac, or by right clicking on the page and selecting Inspect Element.

Browser Chrome Firefox Internet Explorer Opera Safari

Development Toolset Developer Tools Firebug Developer Toolbar Dragonfly Developer Tools

Type Integrated Add-on Integrated Integrated Integrated (Default off)

Documentation Documentation Documentation Documentation Documentation Overview

But are you using the developer tools to their full potential? The biggest positive about the developer tools is that they are incredibly easy to use, but as a result developers often miss out on a large proportion of the functionality provided. Inspired b y a video talk by Paul Irish and Pavel Feldman , Ive compiled a list of secrets of the developer console. Im not expecting every one of these to be unknown to you, but hopefully some of these will help you to become an even better web developer. If you have any more secrets, feel free to leave a co mment at the end of the article and Ill update the post once I have verified them. Id also love to know what developer console you use as your primary development tool, let me know below!

The Console Tab

The heart of any developer tool is the console tab where you can output debug and execute commands in to the current web page.

Referencing the current element

Chrome, Firefox, Opera, Safari If you have an element currently selected in your Elements tab, you can use the reference $0 to call it within your code. For example, to see the elements contents you would type $0.innerHTML. In Chrome and Safari, you can call the console from any of the other tabs by pressing Escape so you dont have to keep switching. In Firebug, the console is available through an icon to the left of the tabs or by pressing either Ctrl, Shift and L on W indows or Cmd Shift and L on Mac.

In Opera, you can select the previous element you had highlighted using $1. In Chrome and Safari, you can select the previous elements you have highlighted using $1 $4.

Using console.log to output multiple values and objects at the same time
All W e know console.log() is incredibly useful for outputting debug to the developer console, and preferred over alerts, but it can be irritating to output a string followed by an object if you re not aware of this feature of logging. Using console.log('message:' + $('#message')) will only tell you that your message is an object, and logging the object by its self can get confusing if the log is happening in the middle of a loop. console.log() actually accepts multiple parameters, so you can output both the string and the object from the same command using console.log('message:', $('#message')) ; or any other combination of JavaScript type you can think of. You can use console.warn() for warning messages; console.error() for error messaging and console.info() for information messages. You can also use console.assert() to test expressions for true or false. (Thanks to Masklinn for additional information)

Re-using a JavaScript command

All If youve typed a command in to the JavaScript console and you wish to re -run it, simply hit the up key to scroll through a list of previous commands you have called from the console.

Persist
Chrome, Firefox Theres an obvious button for persisting con sole content in Firefox right above the console, but its slightly more hidden in Chrome. Right click in the console to reveal a menu with Preserve Log upon Navigation as an option.

Viewing the source of an object

Firefox Firefox supports the toSource() method which means its available in Firebug for printing out the contents of an object as a string in to the console.

Changing frame
Firefox Running JavaScript commands from the console command line is incredibly useful, but if you have an iframe to contend with it quickly becomes a problem. Luckily you can use the following command to focus on the frame in question and execute your commands against.

cd(window.frames['frameName']);

Chrome Chrome allows you to change frame in a different way. On a page which contains frames, youll need to go to the Console tab and choose your frame from the dropdown at the bottom of the console.

Opera Opera also has a dropdown for changing frame which is available from the Console and Documents tab. The dropdown will only appear on the Console tab if there are frames to select.

(Thanks to Paul Irish and Daniel Herzog for the additional information)

Copying your code straight to the clipboard

Chrome, Firefox, Safari Using the copy() command within the developer tools console, you can copy the contents of a command straight to the clipboard.

Making calculations in the browser

All This tip makes a lot of sense, but its surprising how many people dont use it! If you need to know the answer to a math calculation quickly (e.g. the width of three columns in a 456px container) you dont need to open Calculator. Just type the math question in to the developer tools console and it will return your answer. Its 152, by the way.

The Scripts Tab

Home to all the JavaScript running on the page, the script(s) tab contains a dropdown to allow you to select the script you wish to debug.

Dealing with minified JavaScript

Chrome, Internet Explorer, Safari Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then its probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un -minify your JavaScript. In Chrome and Safari, simply select the Scripts tab, find the relevant file in the drop down menu and then press the { } (pretty print) icon located in the bottom panel.

In Internet Explorer 9, click the tool icon by the script selection drop down to find the option to format the JavaScript.

Watching variables
All A common tool with .NET development, watch allows you to monitor a list of variables from one handy area, at the top of t he right hand bar on the scripts tab. W atching a variable is really easy, just type in the name of the variable and watch will keep its value up to date.

Editing and executing JavaScript on the fly

Chrome Rather than editing in a separate editor and reloading the page, with Chrome you can edit directly in to the page. Simply double click where you would like to change the code, and type! Hit Ctrl/Cmd and S to save.

Creating a breakpoint whenever a JavaScript error occurs

All Simply click the pause icon in the Scr ipt tab of your developer console to pause the script when the first JavaScript error occurs. The line that has caused the error will be highlighted for you to review.

Creating a script breakpoint based on the DOM changing

Chrome, Firefox If you know your page is breaking when a certain part of the DOM changes, or you just want to find out what script is responsible for changing that elements attribute, Chrome and Firebug both allow you to set up a JavaScript breakpoint effectively allowing you to find t he culprit in your code. Simply highlight the element you want to monitor and right click to select the conditions to break on. (Thanks to Jason W ilson for the additional information)

The Elements tab

Known as the HTML tab in Firefox and the Documents tab in Opera, the elements tab displays the DOM in its current state. On Internet Explorer, you will need to hit the refresh button to see the current DOM.

Getting the dimensions of a container the easy way

Chrome, Safari Im a big fan of using overflow:auto to contain floated elements, but it causes problems in older versions of Internet Explorer unless you specify an actual width (auto and 100% wont suffice). The dimensions can be found in the Computed Style which is handy but still a number of clicks. Using Chrome or Safari, you can easily view the dimensions of an element by hovering over it in the source code in the Elements tab, or alternatively using the magnifying glass in the bottom toolbar.

Firebug, Internet Explorer, Opera Youll need to select the Layout tab in the right hand panel or scroll through the list of computed styles in the right hand sidebar. (Thanks to Masklinn for the additional information)

Expand view of all elements

Firefox, Opera In Firebug, on the HTML tab pressing asterisk (*) on the num keypad expands all elements except scripts and stylesheets. Holding shift and pressing asterisk will also ex pand the scripts and stylesheet (link) elements. In Dragonfly on Opera, theres a button in the Documents tab to do the same task, as shown below.

Incrementing margin, padding, width, height, border even color

All If you have an element which you need to modify the margin, padding, width or height for, you can use the cursor keys to increment/decrement the size. Simply use the up and down cursor keys to increment/decrement by a unit of 1. In Chrome, Firebug and Safari you can increment/decrement by a unit of 10 by holding the Shift key whilst pressing the up and down cursor keys. In Chrome and Safari, you can increment/decrement by a unit of 0.1 hold the Alt key whilst pressing the up and down cursor keys. In Chrome and Safari, you can also increment/decrement by a unit of 100 by holding down the Shift key whilst pressing Page -Up and Page-Down. These shortcuts are especially helpful when you are unsure of exactly what the correct size should be. In Chrome, Safari and Opera you can also use the up and down keys to increment and decrement color values. (Thanks to mikkelrom for the additional information)

Styling :active, :hover, :focus, :visited states

Chrome, Firefox, Opera Styling CSS in the developer console is awesome, but becomes a little more tricky when testing other element states such as hover. Thankfully, there is a solution. Chrome has a button built for this purpose. In the Elements tabs right hand column look for the dotted element/cursor icon which allows you to try other states.

For Firebug, in the right hand column click the arrow menu beside the Style tab and selected your desired state. In Opera, its the icon that looks like a list under Styles.

Rotate through color definition types

Chrome, Safari Colors can be defined in multiple ways on a web page by name, through a hexadecimal value (3 or 6 digits), as rgb or hsl (or their alpha transparent versions). You can rotate through these different definitions in Chrome or Safari by clicking the color square next to your color. (Thanks to Masklinn for the additional information.)

Color picker
Opera In Opera, clicking the color square next to a color allows you to select a different color via a handy picker.

The Resources tab

The resources tab lists all the stylesheets, JavaScript, images used on your page. This tab unfortunately doesnt exist in Firebug or Internet Explorer, although some of its features are integrated in to other tabs.

Saving your changes

Chrome, Internet Explorer, Safari Making changes to the CSS or JavaScript is great, but it becomes a hassle to re -implement in to your source code once you are happy. In Internet Explorer, on each tab a save icon provides save to file functionality on a per file basis. Meanwhile the Resources tab in Chrome and Safari has a handy feature that stores all your changes as specific revisions enabling you to quickly go back and forth through all your changes. Find the file where youve applied the changes (which can be easily accessed by clicking the file name next to the element youve changed), and a list of revisions will be provided. In Chrome, right click on the filename to save a new version of your file. In Safari youll unfortunately have to copy and paste.

Cookies and Storage

Chrome, Opera, Safari Also in the list of resources is a easily accessible list of different storage options together with any data stored for each option. Opera has a Storage tab which does the same thing.

The Network tab

The network tab shows all the resources and files downloaded to load your page. In most cases the developer tools need to be open for the network tab to show any information, so you may need to

refresh. The tab is known as Net in Firefox. For Internet Ex plorer, it is only available in version 9 and later.

Disabling browser cache

All Each supported browser allows you to disable cache, but there is no consistency with how. In Chrome, youll find the option in the settings cog. In Firebug, youll find the option in the arrow alongside the Net tab header. In Internet Explorer, the option is under Cache in the menu bar. In Opera, to clear the cache click the Network tab, select the Network Options secondary tab and choose the first option. In Safari, you can disable your browser cache under the Develop menu in the menu bar. To bring up the clear cache (and other data) dialog on any browser in W indows press Ctrl, Shift and Delete. (Thanks to Steven and karl for the additional information)

Latency
All In Chrome and Safari, the network tab allows you to see how long it takes a server to respond to a request. The faded color line for each resource indicates when the request was sent, and when a response was sent back. The filled color indicates when the resou rce was downloaded. In Chrome, you can hover over these lines to get a breakdown of where the time was spent. In Opera, the same principles apply except the latency is measured by a grey line as opposed to a faded line.

In Internet Explorer, latency is marked as yellow and hovering over the line will give more information. In Firebug, latency is marked in the color purple and labelled as W aiting. Hovering over one of these lines in Firebug also gives a detailed breakdown of where the time was spent.

DOMContentLoaded, load event fired

Chrome, Safari The network tab for Chrome and Safari also reveals 2 additional pieces of information, DOMContentLoaded as a blue line and load event fired as a red line. The DOMContentLoaded line indicates when the browser has finished parsing th e document (but other resources such as images and stylesheets may not be downloaded), whilst the load event line indicates when these resources are complete. If the two events fire at the same time, the line will be purple. (Thanks to Steven and Joey for the additional information)

Other Crashing
All Sometimes I find my developer tools have crashed and wont respond to m y mouse clicks. Rather than close the entire browser window and re-open, I often find that using the keyboard shortcuts to close and reopen the developer tools fixes the problem. I hope these features and secrets have been useful to you, although your skill level and experience will determine how many of these are new to you. I deliberately havent included profiling and remote debugging in this list, as these are topics I want to cover in more detail in a later post. Please feel free to leave feedback, corrections and your own tips below!