Tools to capture executing javascript code

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.