Posts Tagged ‘debugger’

Debugging JavaScript in IE, FF, and Chrome

Thursday, October 13th, 2011

Javascript debugging can be tough – particularly when dealing with the multiple tiers that the WebCenter Interaction portal pulls code from, JS can come from different locations and get combined on one page, resulting in name collisions and other subtle problems when the portal page is rendered in the browser.

Sure would be nice to step through that JavaScript code in IE Developer or Firebug, right? Sure, you can set breakpoints in both of those tools, but what if you don’t know exactly where to set it?

Simple, just use this line in your Javascript code:


Whenever your debug window is open, this command will instruct the tool to break immediately, which will allow you to monitor variables, set other breakpoints, and step through the code. Bonus tip: whether you’re using Internet Explorer, Firebug, or Chrome, the F12 key will bring up the respective “debug window” in that environment.

One thing to keep in mind with this command is that it breaks the code immediately. So, in the above example, the breakpoint is hit before the DOM even loads. In this case, you may be scratching your head wondering why some elements in the DOM or variables in the script aren’t being displayed properly in the Watch window. That’s because if the JS or HTML comes after your breakpoint, then the browser wouldn’t have processed it from the DOM yet.

Cool Tools 21: IE Developer Tools

Friday, June 10th, 2011

At Integryst, we do a lot of Plumtree / ALUI / WCI diagnostics. We’ve featured IEWatch, IE Web Developer, and discussed FireBug as fantastic tools to diagnose what’s really going on in the portal from the perspective of the web browser.

Today’s Cool Tool is yet another one you already have but probably didn’t know it: Internet Explorer’s Developer Tools. In an IE8 or IE9 browsing session, just hit F12 to bring it up, and you’ll have virtually all of the functionality offered by those tools other tools – DOM analysis, Javascript debugging, and HTTP traffic monitoring.

Happy Debugging!

Cool Tools 8: IEWatch

Monday, August 2nd, 2010

You know what I like about Integryst’s Cool Tools feature?  You guys always have great alternatives to the specific problems these tools solve – the Cool Tool feature of Benthic’s Golden drew more comments than any other post, and they were all great!

I’ve profiled header tools before (FireBug is an obvious one), but I haven’t profiled any IE header/debug tools yet.  I’ve used IEInspector’s HTTP Analyzer before, but for the love of all that was Holy and Mighty, that thing crashed IE more often than a WebCenter Consultant on a 24 hour code bender (didn’t see that one coming did you?  yeah, I’m not funny).

So, today’s profile is for my latest IE header tool of choice: IEWatch’s IEWatch Professional.  It’s not cheap at $169, but at least it’s not as bad as HTTP Analyzer and doesn’t fold like a cheap suit (yeah, i don’t even know what that means.  i’m not funny.).  The tool is straightforward:  install it and choose View: Explorer Bars: IEWatch from IE’s menu, and you’ve got a slick header tool that gives you a decent snapshot of what IE is doing behind the scenes, showing requests, responses, post data, and pretty much everything else you need to diagnose a poorly performing ALUI portal…

So here’s my question – given that HTTP Analyzer is cheaper, but has more bugs than this place (sheeeesh!  i TOLD YOU i wasn’t funny!), what IE header tool do YOU use?