Updated: See how I used Firebug to learn jQuery
AJAX, JavaScript, jQuery By Dave Ward on September 21st, 2009It was great to see all the positive responses to the screencast I recently recorded with Craig Shoemaker on how to use Firebug’s console to learn jQuery. That being my first screencast, I really appreciate all of your support.
However, you almost unanimously commented that it was too difficult to read the commands typed at the console, and you were right. So, Craig and I re-recorded the entire thing, paying extra attention to the legibility of the end result.
Craig also managed to edit the same content down to 9:59m this time, so you can watch it on YouTube if you prefer:
If the HQ version of the YouTube video still isn’t legible enough for you, Craig also made a full resolution WMV available as well.
Similar posts
What do you think? Your comments are welcome.
I appreciate all of your comments, questions, and other feedback, but please try to stay on topic. If you have a question unrelated to this post, I recommend posting on the ASP.NET forums instead.
If you're replying to an existing comment, please use the threading feature. To do this, click the "Reply to this" link underneath the comment you're replying to.
12 Mentions Elsewhere
- Tweets that mention Updated: See how I used Firebug to learn jQuery | Encosia -- Topsy.com
- How to use Firebug to learn jQuery « vincenthome’s Tech Clips
- DotNetShoutout
- Squirrel Hacker » Daily Digest for September 22nd
- DotNetBurner - jQuery
- Dave Burke - Everyman Links for September 22, 2009
- Dave Ward at Encosia Just Rocks! « ActiveEngine
- Using Firebug to learn jQuery « Creative in Code
- uberVU - social comments
- Jack Altiere » Blog Archive » JQuery delegates
- 14 Ways To Start Learning jQuery | Tweeaks Design
- Tìm hiểu về firebug
I didn’t know about jQuerify. That will definitly help a lot Thanks!
Thanks Dave..Gr8 work
how to add this bookmarks?
jQueryify is available here: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet
SelectorGadget is available here: http://www.selectorgadget.com/
If you use the web developer firefox add-on and want to use Ctrl+Shift+C for Firebug’s inspect element, you’ll have to disable Ctrl+Shift+C triggering View CSS in web developer (Options > Keys).
Wow. That was really cool and thanks for sharing.
That is totally cool! Thanks for sharing. Please do more instructional video like this. It is extremely helpful. I have basically never worked with jQuery and this video made it easy to catch on.
I am having a problem with asp.net generated ids.
When I enter
jQuery(“ct100_cphMainContent_lblResult”)
Firebug returns an empty set
When I enter
jQuery(“span”)
Firebug returns
[span#ctl00_cphMainContent_lblResult]
What is that about?
You’re typing ct100, but it’s ctl00. L, not one.
@Dave
I had 3 people looking at that code and no one figured it out. In Courier New the two look just the same. Boy do I feel silly.
Thanx
Don’t feel bad. I thought those were three digit numbers for the longest time myself too.
great video, would love to see how firebug helped you learn some of the MS Ajax functionality as well
It’s simplistic, but you might be interested in this old post I made about that: http://encosia.com/2007/03/06/debug-and-explore-aspnet-ajax-with-firebug/
Figuring out un/poorly-documented JavaScript APIs definitely boils down to using breakpoints and exploring the objects that are passed around.
OH. MY. GOD, Magnum! This was awesome. I wish I had this 6 months ago!!!! 10 minutes was about the right length to deliver the message, and your example really drive the point about how you can quickly learn jQuery.
Dave, I’ve been reading your posts for since this summer and your material has helped me immensely on my death march project. Every forum, and especially on StackOverflow, I’ve been telling people to come a read your blog, as it has been a primary source for me when trying to integrate jQuery with .Net. Dude, keep it up and crank it to 11!
Thank you for this!
It helped me to debug a jQuery problem I was having with a CMS I’m using. I haven’t used jQuery at all and wasn’t familiar with the syntax or coding but by using Firebug and jQuerify I was able to trace the problem down and get it working.
I’ve been putting off playing with jQuery but now with this quick and easy way to learn it client-side I’ve already found a few places where I can use it effectively.
Thanks again!
The slideToggle example with the click handler doesn’t work for me. I’m getting “$(this) is null” error in firebug, I’m pretty sure I did exactly the same even from scratch again with refreshed new page..
When jQueryifying and using Firebug, you usually get the best results when you have the Firebug pane open and activated before injecting jQuery. Other than that, I’m not sure what would cause that error.
The exact command from the video, if you want to copy-paste, is:
Thanks a lot… its superb
excellent! thanks a lot.
Fantastic tips! Finally got me using the console. Do you have any podcasts on itunes or otherwise?
Excellent video!
I’ve been using Firebug, but never really paid attention to the console… will start using it more often as your video proved it can be very useful!
Thank you for sharing!