25 Secrets of the Browser Developer Tools
Posted on
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. Working in harmony with the web browser, the developer tools allows us to manipulate DOM elements, CSS styles, JavaScript 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 Windows or “Cmd” ⌘, “Option” ⌥ and “I” on the Mac, or by right clicking on the page and selecting “Inspect Element”.
| Browser | Development Toolset | Type | Documentation |
|---|---|---|---|
| Chrome | Developer Tools | Integrated | Documentation |
| Firefox | Firebug | Add-on | Documentation |
| Internet Explorer | Developer Toolbar | Integrated | Documentation |
| Opera | Dragonfly | Integrated | Documentation |
| Safari | Developer Tools | Integrated (Default off) | 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 by 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 comment 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 Windows 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 – We 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 you’ve 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 – There’s an obvious button for persisting console content in Firefox right above the console, but it’s 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 it’s 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.
|
1 |
cd(window.frames['frameName']); |
Chrome – Chrome allows you to change frame in a different way. On a page which contains frames, you’ll 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 it’s surprising how many people don’t 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 don’t need to open Calculator. Just type the math question in to the developer tools’ console and it will return your answer. It’s 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 it’s 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 the right hand bar on the “scripts” tab. Watching 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 Script 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 element’s attribute, Chrome and Firebug both allow you to set up a JavaScript breakpoint effectively allowing you to find the 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 Wilson 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 – 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). 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 – 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.
(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 expand the scripts and stylesheet (link) elements.
In Dragonfly on Opera, there’s 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” tab’s 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, it’s 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 doesn’t 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 you’ve applied the changes (which can be easily accessed by clicking the file name next to the element you’ve 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 you’ll 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 Explorer, 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, you’ll find the option in the settings cog. In Firebug, you’ll 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 Windows 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 resource 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 ‘Waiting’. 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 the 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 won’t respond to my mouse clicks. Rather than close the entire browser window and re-open, I often find that using the keyboard shortcuts to close and re-open 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 haven’t 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!
Enjoyed this post? Follow me on Twitter!
64 Comments
-
Paul Irish
Posted on
Great roundup! Excellent stuff.
On changing frames.. While Chrome doesn’t support the cd() method, you can change the context in which the console is based with a dropdown. (It may not have shipped to stable yet, but it’s been in canary for a while)
Otherwise I think you nailed the rest. Thx very much for this post
-
Rob Tarr
Posted on
Andi, thanks for the info. It’s a great writeup of the devtools, but I think the “Creating a breakpoint whenever a JavaScript error occurs” is incorrect. In Chrome & Firefox, clicking the pause button pauses execution at the next available JS point (event, timed function, etc.) Opera seems to have a break on JS error button.
If I’m wrong, I’d love to know how to turn that on!
-
ximi
Posted on
Great write up! Some I knew, but the majority I didn’t and I’ll definitely start using the lion share from now on!
-
Paul Irish
Posted on
Rob, in chrome at least, this is the Pause button at the bottom of the console (instead of the pause/stepinto/stepover buttons).
Blue pause: break on errors including ones inside of try/catch blocks.
Purple pause: break on uncaught errors. (Usually what you want)
-
Owen Corso
Posted on
thanks for compiling an outline of all the various browsers tools into one place. this is very useful because understanding the right tool for the job saves a ton of time in the long run.
what about firebug lite for chrome?
-
Steven
Posted on
Awesome writeup. To me it always seems like Chrome is the clear winner in the developer features, but I just haven’t had time to switch from Safari yet.
A few corrections about Safari (at least on OS X):
“DOMContentLoaded, load event fired” – Safari has both the red and blue lines for the different events.
“Disabling browser cache” – this is under the Develop menu in Safari
-
Ido Green
Posted on
Great post… I would try to do some 5min videos around its content.
Good job!!
-
Rob Tarr
Posted on
Paul, thanks for clearing that up. I guess I’ve overlooked that in the past. That’s awesome!
Thanks Andi.
-
Alex Wolkov
Posted on
You can also add that in webkit and I think in firefox you have the ability to select dom elements with the $$ function.
Also $0 like you said points to the currently selected element, might worth mentioning that $1 points to the previously selected one, $2 the one before that and so on.
Another way to put the consol in debug mode, is writing the word debugger; in your files. That keyword will put most of the consoles to breakpoint mode when executed.
-
Rajat Mittal
Posted on
First, nice roundup of the features. Kudos!
However, Copying anything from the console is not easy.
You simply can’t select multiple lines using the mouse and copy.
The way I do it is double click anything in console to select and then use the keyboard to increase the range of the selection.
I tried the copy() command as well but that didn’t seem to work as intended.
Am i missing something?
-
Jason Wilson
Posted on
Nice writeup! I was never aware of the $0, $1 variables being available.
You mentioned that Chrome allows you to break on element change, but Firebug also has this feature as well. A little different wording than Chrome, but you can break on attribute changes, child addition/removal, or element removal.
-
karl
Posted on
To disable the cache into Opera Dragonfly, Network Tab -> Network Options and then select the first option.
-
karl
Posted on
Another missing feature for Opera in the description is remote debugging. It is about debugging a mobile context from your desktop.
-
Joey
Posted on
“Safari unfortunately only shows DOMContentLoaded (and as a purple line).”
As Steven already said, Safari has both blue and red line. Purple is the addition of blue and red, i.e. When domcontentloaded and onload fire at the same time (or, well, can’t be distinguished visually)
-
Dave Stibrany
Posted on
Thanks for this great article! Im loving learning about all that can be done with these fantastic tools.
-
mikkelrom
Posted on
Good job writing this awesome post!
When incrementing values like padding and width etc. in Chrome, you can increment the values faster by using these shortcuts:
0.1 unit: Alt-Up/Down
1 unit: Up/Down (You already knew this one
)
10 unit: Shift-Up/Down or PageUp/PageDown
100 unit: Shift-PageUp/PageDown
-
Masklinn
Posted on
It would be nice to be able to submit fixes/contributions, as some of these tips are not correctly scoped (e.g. some are marked as Chrome-only but also available in Safari — Rotate through color definition types for instance — others are marked as Chrome-only but also available in Firebug — Creating a script breakpoint based on the DOM changing), others are missing (there are far more methods to the “console“ API than just “log“, and they’re criminally unknown) and yet others are incomplete (“console.log“ can take multiple arguments but it can also take a printf-style format string; Firefox now has a — pretty barebones — built-in console; in Firefox “Getting the dimensions of a container the easy way” can be performed much more easily by using the “Layout” sub-tab of the HTML pane — this also adds nifty rulers to the document on hover for alignment; …
-
Andi Smith
Posted on
Hi everyone,
The brilliant thing with this post is it feels like not only have I helped other developers increase their productivity; but I have also learnt a lot – so thank you to everyone who has chipped in with further information. I’ve made updates throughout the post where relevant (with thanks).
@Rajat – how are you using the copy() command? It won’t copy what has already appeared in the console log.
@Jason Wilson – I’m not quite sure how I missed that in Firebug! Apologies for this!
@karl – I’m looking to cover remote debugging in a future post.
@Masklinn – I appreciate there are parts of this post that are missing some information – the post was based on my knowledge, and I am updating this post and will continue to update with all the comments that are submitted once I have had time to verify them. I didn’t include the other console messaging mainly due to I don’t find it something that increase a developer’s productivity. But, it is information worth knowing – so I’ve added a short addition about it.
Thanks everybody!
Andi
-
Divya Manian
Posted on
Excellent excellent post. Love it. There is a feature in Network tab in Opera DFL that I love, which is the “Make Request” tab. It allows you to ping a domain with your custom request headers and renders the response (sort of like curl but with better UI!)
There is also a “Global Header Overrides option in the “Network Options” that make it simple to always override the request headers in DFL.
-
Michael
Posted on
Great stuff, loved reading it. Some very helpful things in there for old and new developers. Thank you very much for this post.
Thing is, my eyes began to hurt from reading the page. Your font isn’t dark (wide?) enough to make the thinner characters easily readable (at least in Chrome for PC.) I like the clean design of the blog, but that font is just killing me.
-
Andi Smith
Posted on
@Michael Thanks for the feedback – I’ll look into making the font slightly thicker/darker.
-
Eugene Petersen
Posted on
Great Post!
I Love it!!
Just a word on “Cache” and configurations:
Firefox has a “hidden page”, type about:config in the address bar and you can configure just about everything, including the webdevelopment tools.
Use it, don’t use it……….
-
JK
Posted on
Super useful—thanks for the write up.
-
Phil Stricker
Posted on
Calculator in the console! Who knew?
-
David Scheppers
Posted on
Hi, thanks for this interesting post; a nice summary of browser developer tools.
I am lucky to only have to contend with IE mostly, but I sometimes use Firefox.
I recently found an interesting Firefox add-on that provides another way of looking at the DOM, worth a look: Tilt.
I found it at http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/
-
Rodrigo Ayala
Posted on
Wow, excellent post! Very recommended to web developers.
I use a lot of browser tools mentioned here, but I didn’t know about specifying an iframe to run javascript functions from the console. Cool!
About disabling cache, I don’know, I prefer to press CTRL + F5 on Firefox to reload a page ignoring cache.
Excellent job Andi!
-
Andi Smith
Posted on
@Rodrigo Ayala – Thanks for the kind words.
Be careful with Ctrl + F5. Depending on the browser, I’ve had mixed results.
For example, I’ve found hitting Ctrl + F5 on a page with Flash sometimes only reloads the SWF and not any of the resources the SWF requests (such as XML or CSS). Also, if you have a resource that you are using multiple times (an image, for example) some browsers will reload the resource from fresh for every resource, which can give the illusion of a poorly performing page.
Sorry I have no concrete information on what browsers and situations these two scenarios occur in to hand, it’s from memory. But Shift, Control and Delete is safer if you want to ensure your cache is completely cleared.
-
yusuf
Posted on
great post. thanks for it, it helped me a lot.
-
Ulrik Høyer Kold
Posted on
Great summary of the possibilities in these unavoidable tools. I learned a couple(!) of new tricks and remembered a few rarely used
This article was featured on Yammer in my workplace. I can easily recommend it.
I primarily use Firebug, secondly Dragonfly and the built-in Chrome Dev. Tools.
-
Claus
Posted on
Thanks for the cross-tool overview. Looking forward to the next installments.
Regarding “criminally unknown” APIs, you might want to link to the Firebug Console and Command Line APIs:
http://getfirebug.com/wiki/index.php/Console_API
http://getfirebug.com/wiki/index.php/Command_Line_API
You might also want to mention this series of posts on the new js-tools list:
-
Tony
Posted on
How do you use the cursor keys to expand the element? All I see is the cursor moving in the elements tab!
-
Andi Smith
Posted on
@Tony – To expand the element, you need to have the cursor focussed on the correct attribute in the right hand styles part of the browser developer tools.
For example – assuming you are using Chrome – let’s go for a demo on this very page:
1. Right click on the comments textarea.
2. Choose “Inspect Element”
3. The browser developer tools will open with the textarea highlighted in the left column.
4. In the right hand column, look for “form textarea” under “Matched CSS Rules”.
5. Find ‘width’ and doubleclick the value to the right of it.
6. Hit up and down to change the value.
-
Andi Smith
Posted on
If you need a beginner’s guide to the Chrome Developer Tools I recommend Dave Auld’s article.
-
Capi Etheriel
Posted on
In Firebug, you can increment margin, padding and font-size (any number value) by 10 using the Page Up and Page Down keys.
-
Edwin Martin
Posted on
Here’s another nice feature that’s missing. You already mention breaking on DOM-changes.
In Firefox and Chrome (and possibly other browsers), you can break on a JavaScript expression being true.
Just right-click the breakpoint and enter your JavaScript expression.
This is very handy when the script you want to inspect is called a lot of times but you’re only interested in a specific condition, which can be the 30th call to this script. With this feature, you don’t have to click “continue” 30 times.
-
Mike Ratcliffe
Posted on
Awesome post.
A little known feature of Firebug is that in the HTML tree you can right-click a node and select “Log events.” After you have done this all events raised by that node will be logged to the Console. This is extremely useful when you are unsure which event you need to use in a particular situation.
-
Steven
Posted on
You can also create a new style on the fly if you are in the Elements tab and you click on the ‘+’ symbol in the Styles sub-tab. It will create the new style name based on currently selected element. This is highly useful if you have a list that doesn’t have a specific style to it, but you want to apply the same style to every element in the list. The alternative would be to enter the element style for every single list item. It is somewhat buggy though, and occasionally causes the browser to crash.
-
Tailor Vijay
Posted on
Check out FireFile add-on for FireBug. It saves CSS changes directly to server. Tends to be a little buggy still, but with your help it can become the best thing that’s happened to FireBug in FireFox lately.
-
Magnus Lindmark
Posted on
Thanks for the article! i’ve missed some of the IE stuff.. Now i might not be so upset when i’m dealing with that browser.
Off topic: I did catch an uncaught error on this page when i tried the “pause on uncaught exceptions”.
Which lead me to your “console.log(‘test’);”
I’m really glad that we have an “remove all console.” in our build script.
-
Andi Smith
Posted on
@Magnus Lindmark – Thanks for that.. I noticed it the other day – thought I’d removed it. Will make sure it’s expelled tonight.
Remove all console. in your build script is a very good idea.
-
waqas
Posted on
Thanks for sharing. Keep posting
-
Kagan MacTane
Posted on
Excellent article! Thank you very much. There are so many things here that I didn’t know…
Under “DOMContentLoaded, load event fired”, Firebug’s Net tab also shows this information, in exactly the same way: a blue line for DOMContentLoaded and a red line for the load event.
-
Kissaki
Posted on
There’s addons for Firebug which extend its functionality.
For example, for the listed cookie features there is Firecookie, which will extend Firebug with a cookie tab so you can also manage those.
-
Webdesign Blog (Heiko)
Posted on
Wow, awesome overivew about all those developer tool features. My favorite one is still firebug ;o)
-
Aaron Mc Adam
Posted on
A small one, but you can use interpolation with console.log, examples:
console.log( ‘this is my string: %s’, string )
console.log( ‘this is my object: %o’, object )check the Firebug docs for the others
-
Aaron Mc Adam
Posted on
Another one, under your Resources heading, you say “This tab unfortunately doesn’t exist in Firebug”. That’s not true, the Net tab does the same thing
-
Alex
Posted on
Great post! Very useful informations. Thanks for that. I’m going to probably use all the new features I learned in that article about. Didn’t expect, that I knew that little, because I always meant, I am able to deal with the developer tools.
By the way, while trying some of the commands with Chrome, an error occurred into the Console-Window: “Uncaught ReferenceError: popupWindow is not defined crayon.js:131″.
Thanks again!
-
Rod Vagg
Posted on
Andi, after keeping a tab open to this page for more than a week I finally managed to cruise through it and there’s so much good stuff in here and plenty of things I didn’t know! Thanks for rounding this all up.
Perhaps you’d like to put this up as a hosted GitHub page that we can contribute to over time and keep updated? I’m using FF Aurora at the moment and the dev tools are surprisingly good for a first implementation and your doc would benefit from details of these tools too.
Cheers
-
Janghou
Posted on
Nice post!
@Divya, I also like the `Make Request` tab in Opera’s Dragonfly.
Especially because you can easily track the difference between normal and Javascript requests.
Although, a simple enhancement could even make it gorgeous.
http://my.opera.com/community/forums/topic.dml?id=1044462
-
Shripad K
Posted on
There is one thing missing in Chrome developer though. Styling :disabled! Hope they add this state too.
-
Connor Middleton
Posted on
This is great, now I can get more use out of the tools. And having the different tools listed will allow me to troubleshoot those pesky problems that only occur in one browser. Not that I am naming names or anything… IE
-
Giancarlo
Posted on
Thanks for this! Lots of very useful tips.
-
Andreas Lagerkvist
Posted on
Nice list! Some were news to me. I also like to dump entire objects in the console using console.dir(). It’s a bit like var_dump() in PHP. There’s also console.time() and console.timeEnd() but I personally don’t use them very often.
-
manuel
Posted on
Hi, nice list!
I’m missing the “console.time(‘foo’);” command. (corresponding “console.timeEnd(‘foo’);”)It’s very helpful for performance tests!
-
Rodrigo Oliveira
Posted on
.toSource() and :active, :hover, :focus, :visited pseudo-class checkboxes were new to me. Thanks.
-
Didrik Nordström
Posted on
Thank you, didn’t know about a few of these. Also concise content, to the point, me like!
-
David Brown
Posted on
This is awesome, few tricks I wasn’t aware of.
Thank you.
-
Per Zimmerman
Posted on
One really useful trick is to log in conditional breakpoints in Firebug. As console logging returns undefined, the breakpoint won’t be hit.
-
Joe Larson
Posted on
Awesome! I’ve been helplessly addicted to Firebug for years but have fallen into a rut of only using the features I’m used to. I need to reboot my Firebug habits, and get more comfortable with the other browser’s tools.
Useful Firebug cheatsheet: http://duvet-dayz.com/firebug-cheatsheet/
Chrome dev tool cheatsheet: http://smus.com/devtools-cheatsheet
-
Rilwis
Posted on
Great article. There’re some things I didn’t know. Thanks for sharing.
-
Jeremy Hull
Posted on
In iOS Safari console.log() only accepts one parameter and doesn’t handle printf styling.
-
Christophe
Posted on
I am getting started with developer tools, and I learnt a lot in just 5 minutes. Thanks!
-
Niki Hook
Posted on
Well i still think, that its strange, that firefox doesnt have features, which IE has
-
Henry
Posted on
I didnt know if firefox support .toSource() method. Thanks !
