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
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
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.