Google Chrome Developer Tools: 12 Tricks to Develop Quicker

Google Chrome Developer Tools: 12 Tricks to Develop Quicker


Hey there. I’m Paul Irish. I’m a Developer
Advocate on the Google Chrome team and today I’m going to show some advanced uses of the
core Chrome Dev Tools features. First, let’s enter into the dev tools. It’s
common to use the app’s menu. And you can also use a keyboard shortcut, like Ctrl-shift-I
on Windows or Cmd-option-I on Mac. But I prefer to open them by right-clicking on an element
and choosing Inspect. Now that we have this open, I can navigate
the DOM by clicking on the arrows, but it’s much quicker to use the keyboard arrow keys
to traverse up and down the DOM tree. You’ll notice as I’m selecting these elements,
I get an onscreen blue highlight, but I also get a css selector that represents that element,
along with its current width and height. Sometimes, I like to zoom out of the page
with ctrl – to get the full view while I do this.
Now, over in the Console tab, I’d like to share a few things.
Let’s say that you have a big string coming from your app, and you want to copy it into
your clipboard. While you certainly could highlight the entire
string with your mouse, it’s much more effective to use the console’s built in copy method.
I can now paste this wherever I am going. Sometimes you get too much text in the console.
You can use the clear() function to clear it out.
Or, of course, the clear icon below will do just the same.
Now sometimes, you have a reference to a DOM element, and you want to inspect it. Right
now, I have a reference to the big headline on the page.
A simple way to do that is the console’s inspect function.
Now, let’s say you have the reverse: You’re looking at an element in the Elements tab,
but you want to access it via scripts. What I used to do is add an ID onto the element
and use getElementById. You’ll notice I brought up the console right
here. In fact, I can toggle on a console on every tab of the dev tools with the escape
key. But instead of setting a temporary ID to the
element, to save time, I can just type $0 in the console. This is a shortcut reference
to whatever element is currently selected in this panel. It’s just a regular reference,
so if I’m using jQuery I can toss it into it’s dollar method easily.
Now over on the Network tab, I’d like to share a few things.
In this waterfall chart, two lines are added. The blue one points out where the DOMContentLoaded
event fires, which is basically “document ready” and the red is window’s load event,
which waits for all images and iframes to finish.
Now you probably have had to inspect the cookies that are associated with your page request
before. The Headers tab has that info as one of the request headers, but you can now view
the current cookies in table format. You also have the size of each cookie, which
you want to keep as small as possible, as all the cookies are sent in the HTTP header
with every request of the page. Now, I’d like to show you a few handy features
when doing Javascript debugging. I’m going to bring up a page with some basic script.
So here, I can filter our results here using search or a category filter. Easy enough.
This gallery.js contains most of the functionality. Now I’d like to add some logging to see what’s
going on. In Chrome, I can edit the script on the fly inside the UI. This feature is
unique to Chrome because of how the V8 Javascript engine executes your code.
I’m going to jump down to the showGallery function. I can use cmd-G or ctrl-G to jump
to a specific line number. Now I’d really like to dig into this JSON
argument here, so I’m going to console log it out.
Now when I filter, I get the object logged to the console, where I can poke around with
it further. You’ll notice I’m also getting an exception
thrown on the page. Sometimes it’s difficult to figure out where these errors are coming
from. By clicking on this pause button, I can ask the dev tools to pause execution whenever
an exception is encountered, effectively giving me a breakpoint at that position.
I can now open up the console, again by hitting Escape, and figure out what’s going on.
Whoops! Looks like that element doesn’t exist yet. I guess it’s time to file a bug
report. If you’d like to dive into the dev tools,
I definitely recommend picking up a dev channel version of Chrome. It updates weekly and gets
new features in the dev tools very regularly.

62 thoughts to “Google Chrome Developer Tools: 12 Tricks to Develop Quicker”

  1. Chrome has the nicest developer tools by far. It's the little things that count. I learn't a few things from this video which will make the experience even better.

  2. Cool demo. Now it explains why '$' in the console doesn't work as jQuery sometimes. When I am in a breakpoint, I found that I could not use '$' but had to use 'jQuery' to execute some selectors to see what they were evaluating to.

  3. chrome devtools rocks! I was a firebug user until the dev channel got the network tab .. now I can't live without it anymore, it's the best!

  4. I was a firebug user and I must say it was hard to switch to chrome, but once you get comfortable with it it has a lot of awesome features (even more if you are in the dev channel).

    also, go paul! 🙂

  5. I would be really nice, if the developers could make the CSS-part of the devtools as editable and accessible as in firebug. That would be a really helpful.

  6. Chrome dev tools are improving fast, just a couple of months ago they couldn't do much. Now they're close to firebug. Also it's nice to have all these new features that firebug doesn't, not like on IE8 where the tools are just a poor-made copy of firebug.

  7. nice overview. I am so used to using Firebug with Firefox which is why I haven't switched to Chrome for development purposes. With Firebug, I can press a key shortcut to start the inspection tool. Is such a thing possible with Chrome dev tools?

  8. Chrome dev tool is really great and I found a way to customize it on my own (dark color scheme,bigger font…)I didn't know how to do that in Firebug.

  9. I'm a dimwit and I've been doing this stuff for 6 years. The basics are very easy if you don't start off with old and outdated information. From there it's just making time to use it until you understand it. Then take baby steps into the areas you don't understand. It helps to have an actual need that can only be met by learning something new.

  10. Keep at it Bobby, if you learn just 1% more every day that is quite a bit of compounded interest over the course of a year! If you can get really good at one area of web development you have the opportunity to enter a very niche market that is currently starved of great talent.

  11. Question: I want to make a few small html tweaks using inspector such as <h2> to an <h3> and I need to know how to save those change after I made them. When I go to resources all I can find is php codes. I need to figure out how to find where the actually html line was written to make the changes.  Any thoughts?  

  12. Come on @Paul Irish and Google guys, show some respect to deaf / hard of hearing people and stop speak too fast! Or at least provide a slow down button as provided in many other places.
    It's difficult to follow both captions and screen demonstrations at a fast pace you know..

    Google shouldn't just be a leader, but act as one too.

  13. How can we control developer tools through Python Script? Suppose I am using some Webdriver like Selenium to open Chrome instance then how can I control developer tools through code?

  14. Just after 3:00, Paul uses the "Scripts" tab which is now called the "Sources" tab.
    Very helpful video, thanks.

  15. I have a question. I have this site where there are collapsed comments. In the html-code it says

    <a href="javascript:void(0);" class="collapsed-comment"><span>View 18 replies</span> <!—-></a>

    What I want the console (or a script) to do now is trigger everyone of these links to expand all comments at once.

    Why I want to do this? I want to search the comments for keywords without much effort and I know, if I knew more html or javascript, there wouldn't be this problem.

    So if anyone firm in the subject could offer me his/her help, I would be glad. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *