The most common usage for the console is jQuery programming – we can easily traverse the page searching appropriate element or just testing selectors before scripting. The scenario complicates when there is no jQuery included.
Google Chrome console treats $ as an alias for document.getElementById and the result of such queries are far from the desired outcome. Fortunately there is a nice alternative for it which is “$$” alias.
$$ is alias to document.querySelectorAll function that does pretty similar work as jQuery.find method. So everytime I feel the lack of jQuery I use this thing with success. Remember that it doesn’t implement all the selectors that jQuery has (like :first, :even) for argument/classes queries it is enough.
As jQuery.find method replacement we can also use “querySelectorAll” method.
Another great tool traversing the document to find some element is $x method. It uses XPath istead of css selectors. It’s good new especially for people who can do more with XPath than with jQuery.
How about ability to deal with iframe’s?
$$ and $x does not search for the content of “iframe” element. To do it you have to switch the search context. To do it with $$ once more you have to use the full name of querySelectorAll method but in context of specific “iframe” document:
In case of $x it’s is slightly different – you have to pass context as a parameter:
You have to remember, that this kind of scripting have to adhere crossframe-scripting policy – domain of the frame should be the same as parent context’s domain.