Updated: See how I used Firebug to learn jQuery
AJAX, JavaScript, jQuery By Dave Ward. Posted September 21, 2009Note: This post is part of a long-running series of posts covering the union of jQuery and ASP.NET: jQuery for the ASP.NET Developer.
Topics in this series range all the way from using jQuery to enhance UpdatePanels to using jQuery up to completely manage rendering and interaction in the browser with ASP.NET only acting as a backend API. If the post you're viewing now is something that interests you, be sure to check out the rest of the posts in this series.
It 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
Your turn. What do you think?
A blog isn't a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you're better off posting it on Stack Overflow instead of commenting here. Tweet or email me a link to your question there and I'll try to help if I can.
15 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
- TOPGFX » Blog Archive » Firebug : The Key to Successful Web Development
- 9 Ways to Instantly Code Faster | Neil Kearney Design
- How to find AlloyUI version « Cats & Code
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?
I’ve been a guest on the Polymorphic Podcast and the jQuery Podcast.
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!
Nice video tutorial, I’ve never used the console before and for now on I’m gonna start using it =D
Thanks!
Hey Thanks for tutorial . I have bookmarked Jquerify but I get problem when I type JQuery in console of firebug I get error JQuery is not defined . Can you point out what mistake I am doing .
JavaScript is case-sensitive. Make sure you’re typing
jQueryand *not*JQuery.Wow! I’m so lucky I found this article. I’m just beggining to learn jquery and this information will be so helpful! Thank you so much Dave.. I’ll start checking out ur site oftenly.. great job on this article!
P.S. The tutorial video deserves an Oscar for best programming film :)