Learning jQuery

Google Chrome is designed to be fast in every possible way: It’s quick to start up from your desktop, loads web pages in a snap, and runs complex web applications fast.

Google has turned most of web developers away from their beloved Firefox with the myriad of web-developer-friendly extensions available at Chrome store. Developers in increasing numbers are giving Chrome a try and some of them are not looking back. I have found 10 Chrome Extensions for jQuery Developers, these extensions will help jQuery freaks in speedy development, testing and debugging their jQuery code right in their browser window. Enjoy !!

1. jQuery Audit

jQuery Audit creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects.

2. jQuery Debugger

jQuery Debugger helps you to find bugs in the code it inspects your jquery selectors, and watch their matching elements displayed on any website. It is designed to help you understand easily even the most complex selectors.

3. jQuery Injector

jQuery Injector lets you inject jQuery in the current page. You can check for successful insertion, by running "$().jquery" command in the console.

4. All Cheat Sheets

This extension gives you various cheat sheets right in your browser for quick help.

5. jQuery Reference

jQuery Reference Search Extension allows you to search about any jQuery reference without moving to new tab or window.

6. JSIDE

This is a very simple tool to help out testing and checking out new ideas when you are offline. It creates a new blank page in edit mode using: data:text/html, html contenteditable. And also links jQuery-1.11.1 packaged with the extension, making it a fully offline capable tool.

7. jQuerify

Inject jQuery latest stable release version into any page you want or indicate presence of jQuery if it is included on page already. It allows you to use injected jQuery in the console shell (You can invoke Chrome console by "Ctrl+Shift+j" on PC or "Option+Command+j" on Mac) and to see the indication if jQuery has already been injected to the current page.

8. jQuery Maxify

This extension maxifies all minified jQuery references on a page can be toggled on and off by clicking the extensions icon.

9. jQuery Console Fix

Small extension which fixes console.log output for jQuery objects in Chrome Developer Tools console. With this extension jQuery objects are displayed like in older versions of chrome (full list with highlighting on hover).

10. Quick Search on jQuery API

This handy extension helps you to search faster on the official jQuery API docs site. Using it is very easy. Just type in "sjq" to your browsers address bar and press "tab" or "space", now the extension is activated and ready to use.