Debugging Blog.js - A little help here?

Topics: ASP.NET 2.0
May 16, 2009 at 2:54 AM
Edited May 16, 2009 at 6:55 AM

So, check it out, I built BlogEngineTheme.com, and in all my effort I somehow broke the ratings.  That's all well and good (good is relative) but I'm unable to figure out how I can debug the blog.js code without spending an enormous amount of time ramping up on my Ajax or jquery or whatever you want to call it (see what I mean?).  Give me a postback and I'm fine...

So, my question is this, how do you guys debug Blog.js when it gives you grief?  I like my breakpoints and step-through just as much as the next guy...but there must be some effective way to debug these client-side javascripts.  I just don't know that yet.

Feel free to check out the issue on the site.  The ratings don't register...seems it's not firing from what I can tell.

Any love out there?  I believe this failed after my upgrade to 1.5, but I don't think it's related to the updated files themselves, rather my own fat fingers.

Clueless in Anaheim

Coordinator
May 16, 2009 at 11:12 AM

There's a JavaScript error occurring when trying to rate a post.

Rate is not defined
javascript:void(Rate('2a730673-e9ac-436e-8ebc-c80a9d3dd54e',%203))


In BE 1.4.5, the JS function to rate a post was called "Rate".  In BE 1.5, it's now "BlogEngine.rate" (also note the "r" in rate is lower case).

In BE 1.5, the JS shown in the error message above to initiate the rating call is no longer sent to the browser.  Instead, the rating JS calls are now setup via JavaScript when the page first loads.  In BE 1.4.5 the JavaScript code in the error message above was outputted to the browser from the BE core (in PostViewBase.cs).  If you've updated the BlogEngine core to the latest version, then that code above shouldn't be sent to the browser like it is now ... unless that code is coming from your theme or somewhere else.

So somewhere in your code, that old "void(Rate(..." is being sent to the browser.  I'd do a search for it.  It's no longer present in the default BE 1.5 installation.

If you're using Firefox, that JS error I posted above should be visible in the Error Console (under the Tools menu).

For debugging JavaScript and webpages in general, you should definitely get Firebug -- an add-on for Firefox.  It allows you to set break points in JavaScript code, and step through the code line-by-line.  It also gives tons of good CSS related information.

Having said that, for the blog.js file that gets sent to the browser from BE, all the white-space is stripped out, so it's not at all practical to try and debug JS code that is one super long line of code :)  I've debugged it in the past by either temporarily adding alerts or console.log statements (part of Firebug), or by temporarily turning off the white-space removal in the BE core so the unmodified version of blog.js gets sent to the browser.

May 16, 2009 at 10:14 PM

That was exactly enough to help me out!  Thanks Ben!  Got everything fixed and hopefully, there aren't any more bugs from my mangling, lol.  I must have screwed that up when I converted to 1.5.

I already have Firebug, invaluable, but I'm still learning all the features it provides.  Oddly, my browsers were not giving me any errors, so perhaps I need to check into that a bit too.

Thanks for all the help!

Cheers!

Wayne