Become a Javascript Console Power-User

Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. Paul Irish from the Chrome team gives you a rundown.

• Category

  Science & Technology

[Piotr Zalewa]

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

[Richard Bronosky]

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.appl­y(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]

Hj

[Martin Charles]

Hj

[Richard Bronosky]

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.t­imeEnd('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

[Richard Bronosky]

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!

[Remco Peggeman]

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