JavaScript/Debugging

< JavaScript

JavaScript Debuggers

Firebug

Venkman JavaScript Debugger

Internet Explorer debugging

Safari debugging

Safari includes a powerful set of tools that make it easy to debug, tweak, and optimize a website for peak performance and compatibility. To access them, turn on the Develop menu in Safari preferences. These include Web Inspector, Error Console, disabling functions, and other developer features. The Web Inspector gives you quick and easy access to the richest set of development tools ever included in a browser. From viewing the structure of a page to debugging JavaScript to optimizing performance, the Web Inspector presents its tools in a clean window designed to make developing web applications more efficient. To activate it, choose Show Web Inspector from the Develop menu. The Scripts pane features the powerful JavaScript Debugger in Safari. To use it, choose the Scripts pane in the Web Inspector and click Enable Debugging. The debugger cycles through your page’s JavaScript, stopping when it encounters exceptions or erroneous syntax. The Scripts pane also lets you pause the JavaScript, set breakpoints, and evaluate local variables.[1]

JTF: JavaScript Unit Testing Farm

jsUnit

built-in debugging tools

Some people prefer to send debugging messages to a "debugging console" rather than use the alert() function. Following is a brief list of popular browsers and how to access their respective consoles/debugging tools.

Common Mistakes

  // Object
  var obj = {
    'foo'   : 'bar',
    'color' : 'red', //trailing comma
  };

  // Array
  var arr = [
    'foo',
    'bar', //trailing comma
  ];
alert('He's eating food'); should be
alert('He\'s eating food'); or
alert("He's eating food");

Debugging Methods

Debugging in JavaScript doesn't differ very much from debugging in most other programming languages. See the article at Computer Programming Principles/Maintaining/Debugging.

Following Variables as a Script is Running

The most basic way to inspect variables while running is a simple alert() call. However some development environments allow you to step through your code, inspecting variables as you go. These kind of environments may allow you to change variables while the program is paused.

Browser Bugs

Sometimes the browser is buggy, not your script. This means you must find a workaround.

Browser bug reports

browser-dependent code

Some advanced features of JavaScript don't work in some browsers.

Too often our first reaction is: Detect which browser the user is using, then do something the cool way if the user's browser is one of the ones that support it. Otherwise skip it.

Instead of using a "browser detect", a much better approach is to write "object detection" JavaScript to detect if the user's browser supports the particular object (method, array or property) we want to use.

To find out if a method, property, or other object exists, and run code if it does, we write code like this:

var el = null;
if (document.getElementById) {
  // modern technique
  el = document.getElementById(id);
} else if (document.all) {
  // older Internet Explorer technique
  el = document.all[id];
} else if (document.layers) {
  // older Netscape Web browser technique
  el = document.layers[id];
}

References

  1. ↑ "Safari - The best way to see the sites." (in English) (HTML). Apple. http://www.apple.com/safari/features.html#developer. Retrieved 2015-03-09.

Further reading

This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.