Debugging finding errors
There are several things you can do to find errors and fix them.
This tutorial focuses on:
- Get the line number
- Get the error message
- Code in the address bar
- Setting breakpoints
- Tools
Get the line number
When an error occurs some browsers will tell you the line number that the error occurred on. This is a very practical thing that saves you the effort of looking through multiple lines of code to find the error.
Javascript error line number
This code will get the Javascript error console in Firefox to report that errors occurred on lines 3 and 4.
This PHP code will get a web browser to display a report (instead of a webpage) that the error occurred on line 5.
Get the error message
Some browsers will tell you in detail what the error is.
Javascript error message
The above Javascript code got the Javascript error console in Firefox to report two things:
- alrt is not defined on line 3
- unterminated string literal on line 4
The above PHP code will get a web browser to display a report (instead of a webpage) saying Parse error: parse error, expecting `','' or `';'' on line 5
Code in the address bar
You can execute code (specifically, Javscript) right from your address bar. To do this, go to your web browser's address bar and type javascript: followed by a Javascript statement.
Try something simple like javascript:alert("Javascript in the address bar!"); and press Enter. You should then see a message in an alert box.
Use this technique to do things like display the value of a variable or the text within a textbox which will help you in your quest to fix errors on the page.
For more examples of using Javascript in the address bar check out our Javascript in the address bar how-to page.
NOTE: This technique can be done in all the major browsers - Firefox, Internet Explorer, Opera, Chrome, and Safari.
Setting breakpoints
A breakpoint is a place in code where execution is purposely stopped. A breakpoint is set to test the code for certain things and see how it functions up to a certain point. You can set breakpoints using some of the tools we discuss in the Debugging tools page.
Tools
You don't always have to look for errors manually, there are many tools that will help you do it.
Firebug
An add-on for Firefox, Firebug has several debugging capabilities (and many other capabilities) you can use to debug HTML, CSS, Javascript, and PHP.
Download Firebug
Venkman Javascript Debugger
Another add-on for Firefox. You can use this add-on to debug Javascript.
Download Venkman Javascript Debugger
Our Debugging tools page contains a full list of debugging tools you can use as well as instructions on how to use each one.