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.
Must watch for front end developers. Excellent for beginners and advanced users will learn a thing or two as well.
DerekBraid
@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.
SunnyNYC
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
RichardBronosky
Thank you Paul, as always very helpful.
caseybecking
It can be done using Facebook Query Language, Google FQL for more info.
RemcoPeggeman
Okay...,
This video make me Better Today. Thanks !
avirtualizer
the $0 tip is by far the most useful feature ever :) oh. and here's another one: clear() clears your screen
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!
RichardBronosky
its really some cool feature i dont know.
MaheshSankhala
@labobo Sounds like a good reason to avoid it.
MargaretLeber
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!
beardymonger
Why did I subscribe to this channel. I don't get anything he's saying.
darthirakli
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
PiotrZalewa
@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)
Why did I subscribe to this channel. I don't understand anything he's saying.
darthirakli
Dont forget that your image is over the console text area
tiagofreres
@labobo Sounds like a good reason to avoid it.
MargaretLeber
Wow, this is a great tutorial for JavaScript developers
MichaelFreudenberg
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 - 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
RichardBronosky
At the bottom of the console when I "inspect element" and expand out something like 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.
