Java Reference
In-Depth Information
Before delving into the various debuggers, let's create a page you can debug:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 18: Example 3</title>
</head>
<body>
<script>
function writeTimesTable(timesTable) {
var writeString;
for (var counter = 1; counter < 12; counter++) {
writeString = counter + " * " + timesTable + " = ";
writeString = writeString + (timesTable * counter);
writeString = writeString + "<br />";
document.write(writeString);
}
}
writeTimesTable(2);
</script>
</body>
</html>
Save this as
ch18 _ example3.html
. You will need to open this file in each browser in order to
debug it.
The next section walks you through the features and functionality of Chrome's JavaScript debugger.
Because of the universal nature of debugging and debuggers, the sections for Internet Explorer,
Firefox, and Safari will merely familiarize you with the UI for each browser's debugger and point
out any differences.
debugging in Chrome (and opera)
Chrome and Opera use the same rendering and JavaScript engine, and as such, they also share the
same development tools. For the sake of simplicity, this section focuses on Chrome, but keep in
mind that Opera is exactly the same.
You can access Chrome's developer tools a couple of ways. You can click the “hamburger menu” in
the top right‐hand corner of the window and select More Tools
➢
Developers tools. You can also
open them by pressing the F12 key.
Note
You'll find that F12 opens the developer tools in almost every browser.
By default, the Developer tools opens as a panel in Chrome (see Figure 18-3).
