7
Oct

Become a Javascript Console Power-User


Hey. I wanted to give you guys a few
tips on how you can become more of a console power-user. If you are not familiar
with console.log, this video is not for you. All right. First we’re going to
get right into it. You’ll notice that I’m here
inside of jsFiddle. It’s just listing out exactly
what I’m going to be talking about right now. And, well, we do have a
little bit of script. Over here, we’ve got a little
Ajax request that’s going to fire off whenever I
click on the page. So we’re going to fire that
Ajax request, and when it comes back, we’re going to
create a text area, add that to the DOM, and then set the
value of the text area to be whatever came back from
the Ajax request. Now, I’m going to do that here,
and I click, and then text areas come in. That’s good. But sometimes you’ll be doing
this, and you’ll expect this to show up in the console. And by default, it
doesn’t show up in the Chrome DevTools. You can right click and
turn on XHR logging. And so now, when I have that on,
all those XHRs are logged to the console, and I can go
over to Network and figure out exactly the details
of those requests. Now you might have noticed,
Preserve Log is here. This is brand new. So on page refreshes, your
console can stay preserved, which is pretty cool. So I’m going to go ahead and– I think I’ll keep this on. And I’m going to show
you console.time. So I type console.time up
here, and we’re going to give it a name. And I need to say
when it ends. And so console.time and timeEnd
is just a nice way for you to kind of measure how
long something takes. Now, you could do it yourself
with the data object, but we have a little hook for it. So I’m going to click, and so
now we have an idea of how long it takes from the
start of the Ajax to the end of the Ajax. It’s pretty cool. Console.dir is an
interesting one. And to do it, I’m going
to dir out the text area that I’ve created. And I want to show that in
comparison to console.log. So we’ll both log and
dir that out. I’ll run that, and
now I’ll click. So here we have– this is the log view, and this
is more of like the tree-level view, and console.dir gives you
more of the DOM-level view of an object. So sometimes you kind
of want that. Now, I’m going to take this app
and blow this up into the full-screen view. And I will point out that if
you’re actually typing in the console, you could type
console.dir and do that right inside the console, but you
can have a nice little convenience function, so you
can just type dir directly, and that works as well. So there’s a few other
methods that are available inside the console. So one of them is Inspect,
and so this is cool. So I have this text area, and I
want to actually go see that in the Elements tab. And I can just type inspect. We hop right over to Elements,
and it’s already selected. Now similarly, I might have
an element that– I’m seeing an element, so I
actually want to access it in the script. So I access it right here. I click on that, and I’m going
to bring up Console with the Escape key. And $0. And so that just is
a reference to whatever was selected. And so this just works normally,
so I can kind of do whatever I want with it. Another one, and this
is fun, is $$. And so this is also known as
the bling bling function. Bling bling is pretty cool. So this is just a peek into
the DevTool source. It’s just a wraparound query
selector all, and so I can just pass a selector to it and
see what matches on the page. So here, I have two text areas
on the page, and so that’s what it returns. It’s easy as that. Now, monitorEvents. I’m going to show monitorEvents
to you. And it does what it says
on the [? TIM. ?] And monitorEvents. And I’m going to pass at one
of these text areas. And there we go. Now, it’s this text
area, here. OK, cool. So all the MouseEvents– you see mousemove, click, KeyboardEvents, scroll events– I get to see all the events
that are firing on this object, which gives you a lot
insight into what’s going on. Now, there is another way to do
this, in that I can do the same thing, and I can pass at
a second primer of either mouse or key. And now, with key, I only
get the keyboard events. No scroll, no mouse events. So that’s pretty cool. Next, I want to show you
keys and values. So keys gives you the names of
the keys [? in the ?] object, all the properties
and the methods. So I’m just going to
pass the document– [UNINTELLIGIBLE] document.head, document.node
type. There’s a lot of
stuff on there. Similarly, values gives me
back all the values. There’s a lot of different kinds
of values, a bunch of functions, stuff like that. I’m going to go back to keys for
a second, and there’s some pretty cool stuff in here– a
web visibility state, some interesting stuff. And I’d love to dig into
this a little bit more. So I could copy-paste this,
but it’s little awkward. The easier way is just to call
the copy method that’s built right into the console. This copies it to your clipboard
immediately. So I can go over to my text
editor, paste it, and do whatever I need to do to it. Oops. No, no. There we go. That’s what I wanted. All right, cool. Now, I just want to show two
pretty cool techniques coming from some other browsers. First I’m going to head
over to Opera. This is opera.next. And we have up HTML5 Rocks, and
sometimes you just want jQuery to work with. On this page, we actually
don’t have jQuery. On Opera, I can type double
slash, and call jQuery as a function, and it just
loads in jQuery. It’s like the jQuery
[? a.size ?] bookmarklet. And now I can use jQuery
to my heart’s content. That’s pretty cool. Pretty cool feature in Opera. Switch over to Firefox Aurora. And here we have a page
that has an iframe. All right? I’m going to open
up this iframe. Look at the DOM view, and
you’ll see the iframe. Inside of that is a script,
and inside of that script is a secret. So this is a common thing. You’ll have a script inside. You’ll want to understand what’s
going on inside that script, but of course, your
console is operating inside the context of the outside
frame, right? And so, I’m asking what
the secret is, and it’s not out here. It’s inside there. So in Firebug, you can
type “cd.” And cd changes the context. And so, I’m actually going to
go and select that frame. There’s that frame. And now I need to pass the
window object, so I’m going to pass that content window, and
it looks about right. And, cool. So we actually just changed the
context of what Firebug is looking at, and now I can type
secret, get my answer. So I’m querying the Javascript
that’s going on inside of here, and to return back to the
outer context, I just do cd(top), and I’m back
where I started. That’s about it. All right, so I would definitely
recommend checking out the DevTools website, where
there’s a bunch more docs on all this stuff, if
you’re interested in digging and learning more. All right, thanks.

Tags: , , , , , , ,

36 Comments

  • casey becking says:

    Thank you Paul, as always very helpful.

  • Tiago Wüst Frères says:

    Dont forget that your image is over the console text area

  • Tiago Wüst Frères says:

    Very nice features

  • Sunny Singh says:

    @STHayden JSONP is basically loading a script via the script tag, so it's not something that could really be seen like Ajax. I agree that XHR should be on by default though, so used to that in Firebug that I thought Chrome didn't have that at all.

  • Huzoor Bux says:

    Google you rock this is amazing.

  • labobo says:

    @KDALove that's not hard either dude, it's just not documented by google officially, only thing you have to do is some poking around
    those tips were nice actually, i already knew some of them though..but still nice and handy,
    google should add more of these useful quick commands to help developers

  • labobo says:

    @KDALove Interesting point but i didn't notice any disgusting advertising of chrome.
    Just useful console tips to speed up some common tasks.

    Can you debug chrome extensions with Firebug ?
    What if you don't want to install firefox just to debug something ?
    There's also the possibility that some java stuff works differently in chrome vs ex. firefox..

    I only use chrome's debugger when developing extensions (and of course when tracking down annoying time wasting ads to block)

  • labobo says:

    I hate time wasting pimping videos too.

    If you want to see good examples of product pimping videos just go to channel9 dot msdn dot com

    .net vs c++ video ratio is obviously not equal for example
    nor do you see them use non-microsoft products when demoing ever!

  • Piotr Zalewa says:

    Just a warning about using /show/ – please do not share or click on links with /show/ on jsfiddle.net, their undocummented and I will block them sooner or later.

    For accessing unframed result please use draft feature (read docs about it).

    For sharing result use an embedded link with the result panel ( add /embedded/result/ to the URL, check the embedded docs).

    Enjoy using jsFiddle

  • Roman Shafigullin says:

    thanks

  • Margaret Leber says:

    @labobo Sounds like a good reason to avoid it.

  • Margaret Leber says:

    @labobo Sounds like a good reason to avoid it.

  • darthirakli says:

    Why did I subscribe to this channel. I don't get anything he's saying.

  • darthirakli says:

    Why did I subscribe to this channel. I don't understand anything he's saying.

  • Viktor Gustafsson says:

    Great great stuff!

  • Mike Weber says:

    I've wanted $0 for so long; I just never knew it until now.

  • beardymonger says:

    ha ha ha, a few days after it shows up and 300 likes already! 1 dislike (IE user, maybe)

    I can only say: MORE PLEASE!

  • andrefy0 says:

    Thanks, great summary of the console tools

  • American English Conversation says:

    At the bottom of the console when I "inspect element" and expand out something like "div#main-status-bar.status-bar" it would be nice if there was a convenient (more intuitive) way to cut selectors to the clipboard. As a web developer, this is the main reason I switched from Firefox but often I still find it cumbersome to get the selectors I want, especially when they have really long names nested 20 levels deep and the references are ambiguous. Anyway, good to know these tools are available.

  • Mahesh Sankhala says:

    its really some cool feature i dont know.

  • Răzvan Botea says:

    the $0 tip is by far the most useful feature ever 🙂 oh. and here's another one: clear() clears your screen

  • Gorbenko Oleg says:

    Thank you very much! Really useful information for my work!

  • Pratheep Raj says:

    cmd + K to clear

  • Remco Peggeman says:

    It can be done using Facebook Query Language, Google FQL for more info.

  • Bruno Bronosky says:

    One thing that Paul Irish didn't mention here was console.dirxml

    Compare these in the console for this very page…
    // Replace f with double dollar sign – "Thanks YouTube!"
    console.log(f('.comment'))
    console.dir(f('.comment'))
    console.dirxml(f('.comment'))

    The last one is the same as doing a simple:
    f('.comment')

    …except that you can use it in the middle of a really complex jQuery.each loop for debugging!

  • Bruno Bronosky says:

    My notes on this video part 1 of 2

    0:48 Log XMLH𝚝𝚝pRequests – console context menu option to log URL of all finished XHR loads
    1:02 Preserve Log upon Navigation – console context menu option to prevent the log from clearing
    1:18 console.time('name');console.timeEnd('name') – convenience methods for timing
    1:44 console.dir(obj) || dir(obj) – "DOM level" view similar to the "Tree level" view of console.log(object)
    2:42 inspect(el) – locates a dom object in the elements tab

  • Bruno Bronosky says:

    My notes on this video part 2 of 2

    3:05 $0 – references the object selected in the elements tab
    3:18 $​$ – convenience wrapper around document.querySelectorAll.apply(document, arguments)
    3:44 monitor(el) – monitors all events on a dom element
    4:14 monitor(el, 'key|mouse') – monitors key or mouse events on a dom element
    4:35 keys(obj) – shows all the keys of an object
    4:52 values(obj) – shows all the values of an object
    5:12 copy(obj) – copies to your clipboard
    …stuff for other browsers

  • Martin Charles says:

    Hj

  • Martin Charles says:

    Hj

  • tarekahf says:

    Thanks … very useful vide. I have a problem accessing script variable in console window same as in 2:27. It works only in Debug Mode, but after execution is finished, I get error: ReferenceError: varname is not defined.

    How I can inspect script variable after script is executed?

  • Philippe Thomas says:

    #paulirish  
    I have learned more in the first 42 seconds, than most of the tutorial out there.
    The wizard is pulling some nice magic trick, I found out that, some tips like this
    could increase my workproduction and studies rate by a lot…if not, you are just turning around until you find them.

    We should have more of these video…

    Dont you have some awesome terminal tutorial ?

  • Derek Braid says:

    Must watch for front end developers.  Excellent for beginners and advanced users will learn a thing or two as well. 

  • Michael Freudenberg says:

    Wow, this is a great tutorial for JavaScript developers

  • Mayendra Costanov says:

    Okay…,
    This video make me Better Today. Thanks !

  • Debadatta Bhattacharjee says:

    Thank You, fascinated

  • Web Application Guide says:

    Thank You !! Still valuable lessons 🙂

Leave a Reply

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