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 Firefox’s 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 , I’ve compiled a list of “secrets” of the developer console. I’m 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 I’ll update the post once I have verified them. I’d 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 don’t 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.

⌘,

1

1 cd(window. You can also use console.frames['frameName']). Firefox – There’s an obvious button for persisting con sole content in Firefox right above the console.log('message:'. Chrome – Chrome allows you to change frame in a different way. (Thanks to Masklinn for additional information) Re-using a JavaScript command All – If you’ve typed a command in to the JavaScript console and you wish to re -run it. $('#message')) . but if you have an iframe to contend with it quickly becomes a problem.info() for information messages. but it can be irritating to output a string followed by an object if you’ re not aware of this feature of logging. Luckily you can use the following command to focus on the frame in question and execute your commands against.log() is incredibly useful for outputting debug to the developer console. Using console. In Chrome and Safari. Viewing the source of an object Firefox – Firefox supports the toSource() method which means it’s available in Firebug for printing out the contents of an object as a string in to the console. and preferred over alerts. Using console. console. On a page which contains frames. you can select the previous elements you have highlighted using $1 – $4. you can select the previous element you had highlighted using $1. simply hit the up key to scroll through a list of previous commands you have called from the console. you’ll need to go to the “Console” tab and choose your frame from the dropdown at the bottom of the console.assert() to test expressions for true or false.error() for error messaging and console. You can use console. or any other combination of JavaScript type you can think of.log('message:' + $('#message')) will only tell you that your message is an object. console. so you can output both the string and the object from the same command using console. Right click in the console to reveal a menu with “Preserve Log upon Navigation” as an option.In Opera. 2 . and logging the object by its self can get confusing if the log is happening in the middle of a loop.log() actually accepts multiple parameters.log to output multiple values and objects at the same time All – W e know console. Persist Chrome.warn() for warning messages. Changing frame Firefox – Running JavaScript commands from the console command line is incredibly useful. but it’s slightly more hidden in Chrome.

g. find the relevant file in the drop down menu and then press the “{ }” (pretty print) icon located in the bottom panel. some of the browsers have an option to un -minify your JavaScript. In Chrome and Safari. Making calculations in the browser All – This tip makes a lot of sense. It’s 152. but it’s surprising how many people don’t use it! If you need to know the answer to a math calculation quickly (e. click the tool icon by the script selection drop down to find the option to format the JavaScript. by the way. How can you debug minified code? Helpfully. Just type the math question in to the developer tools’ console and it will return your answer. The dropdown will only appear on the “Console” tab if there are frames to select. simply select the ‘Scripts’ tab. In Internet Explorer 9. 3 . The “Scripts” Tab Home to all the JavaScript running on the page. Dealing with minified JavaScript Chrome. the width of three columns in a 456px container) you don’t need to open Calculator. (Thanks to Paul Irish and Daniel Herzog for the additional information) Copying your code straight to the clipboard Chrome. Safari – Placing breakpoints on JavaScript makes debugging much easier. Firefox. Internet Explorer. Safari – Using the copy() command within the developer tools console.Opera – Opera also has a dropdown for changing frame which is available from the “Console” and “Documents” tab. the script(s) tab contains a dropdown to allow you to select the script you wish to debug. you can copy the contents of a command straight to the clipboard. but if your code has already made it to production then it’s probably been minified.

Simply highlight the element you want to monitor and right click to select the conditions to break on. just type in the name of the variable and ‘watch’ will keep its value up to date. you will need to hit the ‘refresh’ button to see the current DOM. Chrome and Firebug both allow you to set up a JavaScript breakpoint effectively allowing you to find t he culprit in your code. Getting the dimensions of a container the easy way Chrome.Watching variables All – A common tool with . (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.NET development. or you just want to find out what script is responsible for changing that element’s attribute. Using Chrome or Safari. or alternatively using the magnifying glass in the bottom toolbar. The line that has caused the error will be highlighted for you to review. you can easily view the dimensions of an element by hovering over it in the source code in the “Elements” tab. and type! Hit Ctrl/Cmd and S to save. the “elements” tab displays the DOM in its current state. 4 . 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. Editing and executing JavaScript on the fly Chrome – Rather than editing in a separate editor and reloading the page. Creating a script breakpoint based on the DOM changing Chrome. ‘watch’ allows you to monitor a list of variables from one handy area. with Chrome you can edit directly in to the page. The dimensions can be found in the “Computed Style” which is handy but still a number of clicks. at the top of t he right hand bar on the “scripts” tab. Simply double click where you would like to change the code. Safari – I’m 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% won’t suffice). Firefox – If you know your page is breaking when a certain part of the DOM changes. W atching a variable is really easy. On Internet Explorer.

Incrementing margin. border – even color All – If you have an element which you need to modify the margin.Firebug. Chrome has a button built for this purpose. height. 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. you can also increment/decrement by a unit of 100 by holding down the “Shift” key whilst pressing Page -Up and Page-Down. In Chrome. In Opera. there’s a button in the “Documents” tab to do the same task. there is a solution. Opera – Styling CSS in the developer console is awesome. (Thanks to mikkelrom for the additional information) Styling :active. In the “Elements” tab’s right hand column look for the dotted element/cursor icon which allows you to try other states. 5 .     Simply use the up and down cursor keys to increment/decrement by a unit of 1. In Chrome. padding. but becomes a little more tricky when testing other element states such as hover. padding. For Firebug. (Thanks to Masklinn for the additional information) Expand view of all elements Firefox. Safari and Opera you can also use the up and down keys to increment and decrement color values. on the “HTML” tab pressing asterisk (*) on the num keypad expands all elements except scripts and stylesheets. These shortcuts are especially helpful when you are unsure of exactly what the correct size should be. Firefox. as shown below. Thankfully. :focus. width or height for. In Dragonfly on Opera. Internet Explorer. width. you can use the cursor keys to increment/decrement the size. you can increment/decrement by a unit of 0. Opera – You’ll need to select the “Layout” tab in the right hand panel or scroll through the list of computed styles in the right hand sidebar. Opera – In Firebug. Holding shift and pressing asterisk will also ex pand the scripts and stylesheet (link) elements. it’s the icon that looks like a list under “Styles”. In Chrome and Safari. In Chrome and Safari. in the right hand column click the arrow menu beside the Style tab and selected your desired state.1 hold the “Alt” key whilst pressing the up and down cursor keys. :hover. :visited states Chrome.

Opera. although some of its features are integrated in to other tabs. through a hexadecimal value (3 or 6 digits). 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. In most cases the developer tools need to be open for the network tab to show any information. You can rotate through these different definitions in Chrome or Safari by clicking the color square next to your color. In Safari you’ll unfortunately have to copy and paste. Saving your changes Chrome. Safari – Also in the list of resources is a easily accessible list of different storage options together with any data stored for each option. Find the file where you’ve applied the changes (which can be easily accessed by clicking the file name next to the element you’ve changed). The “Network” tab The network tab shows all the resources and files downloaded to load your page. on each tab a “save” icon provides save to file functionality on a per file basis. clicking the color square next to a color allows you to select a different color via a handy picker. (Thanks to Masklinn for the additional information. Opera has a “Storage” tab which does the same thing. JavaScript. This tab unfortunately doesn’t exist in Firebug or Internet Explorer. In Chrome. images used on your page. so you may need to 6 . but it becomes a hassle to re -implement in to your source code once you are happy. The “Resources” tab The resources tab lists all the stylesheets. right click on the filename to save a new version of your file. In Internet Explorer.Rotate through color definition types Chrome. Cookies and Storage Chrome. Safari – Colors can be defined in multiple ways on a web page – by name. Safari – Making changes to the CSS or JavaScript is great. Internet Explorer. as rgb or hsl (or their alpha transparent versions).) Color picker Opera – In Opera. and a list of revisions will be provided.

latency is marked as yellow and hovering over the line will give more information. In Firebug. In Opera. To bring up the clear cache (and other data) dialog on any browser in W indows press Ctrl. Shift and Delete. 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). you’ll find the option in the arrow alongside the “Net” tab header.refresh. and when a response was sent back. you can disable your browser cache under the Develop menu in the menu bar. but there is no consistency with how. select the Network Options secondary tab and choose the first option. you’ll find the option in the settings cog. Disabling browser cache All – Each supported browser allows you to disable cache. the same principles apply except the latency is measured by a grey line as opposed to a faded line. In Firebug. In Opera. load event fired Chrome. (Thanks to Steven and karl for the additional information) Latency All – In Chrome and Safari. In Chrome. (Thanks to Steven and Joey for the additional information) 7 . DOMContentLoaded. For Internet Ex plorer. The faded color line for each resource indicates when the request was sent. The tab is known as “Net” in Firefox. Hovering over one of these lines in Firebug also gives a detailed breakdown of where the time was spent. In Internet Explorer. the option is under “Cache” in the menu bar. In Chrome. In Safari. The filled color indicates when the resou rce was downloaded. the line will be purple. Safari – The network tab for Chrome and Safari also reveals 2 additional pieces of information. In Internet Explorer. it is only available in version 9 and later. DOMContentLoaded as a blue line and load event fired as a red line. the network tab allows you to see how long it takes a server to respond to a request. you can hover over these lines to get a breakdown of where the time was spent. whilst the load event line indicates when these resources are complete. If the two events fire at the same time. latency is marked in the color purple and labelled as ‘W aiting’. to clear the cache click the Network tab.

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

Sign up to vote on this title
UsefulNot useful