Break on Mutate-When this option is enabled, the browser will break into the JavaScript debugger whenever the DOM element is changed dynamically.The hover highlight is color coded, with light blue being the contents, purple being the padding, and yellow being the margin for the HTML element. When an element is hovered over in the DOM tree, the element is highlighted on the web page. When you look at the HTML file and search for clickItNot, you can see on line 16 that an onclick event is linked to clickItNot(), but that the JavaScript function is named clickIt(). The error states that clickItNot is not defined. An error is added to the console, as shown in Figure 2.3.
Now in the console you should see Page Is Loaded, the text that is logged in the loadedFunction() function, but no errors.ħ. Go back to Firefox and refresh the web page. In Aptana, change the word fnction in line 6 to function.Ħ. Looking at the failed definition statement, you can see that function is misspelled as fnction.ĥ. Taking these two errors together indicates that a problem exists with the definition for loadedFunction(). The second error shows that loadedFunction is not defined. The first error shows that missing “ ” in the definition for loadedFunction(). Notice the errors displayed in the console, as shown in Figure 2.2. Open the following URL in Firefox to load the newly created web page: Click the Console tab in Firebug to bring up the JavaScript console shown in Figure 2.2.įIGURE 2.2 The JavaScript console showing two errors that occurred during the page load.ģ. Open Firefox and click the Firebug icon.Ģ. With the file now in place, use the following steps to debug the errors using the JavaScript console:ġ. The problem is that the script has several bugs. Another message, User Clicked, is displayed each time the user clicks the Click Me text in the browser.
Firefox firebug java script debugger code#
The code in Listing 2.1 is supposed to display the message Page Is Loaded in the console after the page has been loaded in the browser. LISTING 2.1 A Very Simple HTML Document with JavaScript Errors Type in the contents of Listing 2.1, or if you have the file from the website, cut and paste the contents into the new file. Right-click the new folder and select New, File from the menu.ĥ.
Name the folder hour02 and click Finish.ģ. Right-click the project and select New, Folder from the menu.Ģ. Use the following steps to add the listing to your project in Aptana:ġ. Consider the HTML code in Listing 2.1, which contains several errors. The simplest way to understand using the console is to debug an actual script. Try it Yourself: Using the JavaScript Console to Find Errors This is useful when debugging because you can often see the problem by looking at the error and the single line of code. Notice in the error message, the top portion of text refers to the error that occurred and the bottom shows the actual JavaScript line. If you click the line number, you go directly to the code. One is a log statement, and the second is an error. Notice that in the messages portion in Figure 2.1, there are two types of messages.
0 kommentar(er)
