CODEWITHSUNDEEP
javascriptdebugging
G33kKahuna
G33kKahuna

Reputation: 1810

Tools to capture executing javascript code

Is there any tool to capture executing and executed javascript code on client side? We use debugger command to step through on dev machines but to debug production issues is there any tool that captures loaded and executing javascript code?

Any guidance is much appreciated.

thanks

Upvotes: 0

Views: 1572

Answers (5)

Myles
Myles

Reputation: 21500

Firebug, IE developer toolbar, and MS Script Debugger, depending on your browser.

Upvotes: 0

Annie
Annie

Reputation: 6631

If you want ways to debug production code, there are a few things you can monitor:

  • Capture window.onerror events.
  • Create a JSON object to log important events on the page.
  • If you're worried your site might be slow, use "new Date.getTime()" before/after a slow operation to get the time it took to run.

I don't know of ready-made tools for doing this. Generally people use an img tag to send a GET request back to their server, and then analyze the logs. Here's an example for logging JavaScript errors:

window.onerror = function(errorMsg, url, lineNumber) {
  var url = '/js_err?msg=' + uriEncodeComponent(errorMsg) +
            '&url=' + uriEncodeComponent(url) + 
            '&line=' + uriEncodeComponent(line);
  var i = new Image();
  i.src = url; // Sends GET request to /js_err with info

  // Add some checks so that if above code throws an error, you won't
  // ping your server in an infinite loop
}

Then you can look at requests to /js_err in your logs to see what the top error messages are, and combine with the user agent of the request to see what browsers the errors occur in.

Upvotes: 1

JustEngland
JustEngland

Reputation: 1391

There are several tools I use including Firebug, internet explorer 8 from time to time. However my favorite tool to use for complex debugging is visual studio. A key for using visual studio is using the debugger command.

Upvotes: -1

Yanick Landry
Yanick Landry

Reputation: 61

Personnally, I love using Chromium Developper Tools : http://www.chromium.org/devtools. You can start with CTRL-SHIFT-J or by clicking the Document-like icon on the top right corner, then Developper Options.

Upvotes: 0

Sampson
Sampson

Reputation: 268326

If you're using Firefox (or can to test), FireBug is a great tool that will allow you to step-into, out of, over, etc., blocks of javascript code. It additionally will allow you to put break-points in your js, and pause its execution if you need to.

Upvotes: 2

Related Questions