Web Inspector and Firefox Dollar Functions
Many of you probably didn't know this but WebKit-based like Safari and Chrome, in addition to Firefox, contain special dollar functions within the console object that allow you to grab elements within the current page. While I've not determined the use of each method, a few of them are obvious:
// Dollar method
// Returns an element by ID
$ = function (id) {
return document.getElementById.apply(document, arguments);
}
// Bling-Bling method
// Returns array of nodes found by QSA
$$ = function(selector) {
return document.querySelectorAll.apply(document, arguments);
}
// Broke method
// returns the currently selected element within the console HTML pane
$0 = function toString() { [native code] }
The $1 - $4 methods are returning undefined, oddly enough.
It's not clear to me what the last few methods do. Maybe they're placeholders for feature methods but they continue to be undefined for now.
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![Use Custom Missing Image Graphics Using Dojo]()
A few months back I posted an article about how you can use your own "missing image" graphics when an image fails to load using MooTools and jQuery. Here's how to do the same using Dojo.
The HTML
We'll delegate the image to display by class...
![How to Create a Twitter Card]()
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
$0 returns whatever you have selected in the Elements tab.
These all work in Firebug too, by the way.
Line #15 in the first code segment shows this.
$0 and $1 return the currently selected DOM element and the previously selected DOM element, respectively. I haven’t yet found a use for this while debugging, mainly because selecting elements in the inspector and debugging in the console seem (for me at least) to be disconnected tasks, but maybe there will be a reason some day? ^_^
Not sure about webkit’s inspector, but you can find the API for firebug’s CLI here: http://getfirebug.com/wiki/index.php/Command_Line_API
Perhaps if they plan to use it in the future, they have to reserve it now so that the dom-modifying frameworks don’t start using it :)
Didn’t know about this, the bling-bling method is cool though, haha.
Here you can find all Answers ;) (At the bottom)
http://developer.euro.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html
Now I get it, this is why Douglas Crockford says you shouldn’t use $ functions.