Separate Code Pages

This is based on the material starting at page 33. The point is that putting all (or any) of the JavaScript code directly in the Web Page is generally a poor idea as the book explains.

As an example, this is the IceCreamPage separated into HTML and JS files:

When you load a page with external scripts in it, the debugger will find them for you. This is what the debugger looks like after loading IceCreamCode.html

The Inspector tab shows the HTML

The Debugger tab shows the JavaScript


You can set a breakpoint and debug the JavaScript code the same way in an external file. Here I added the debugger statement in the ScratchPad to the IceCreamCode.js file, saved it, then reloaded the IceCreamCode.html file in the browser window.

Notice that by hovering the mouse over the scoops variable the current value is shown.

This is the example from the book on page 33:

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <title>Beer Page</title>

 </head>

 <body>

     <h1 id="Head">Beer song</h1>

     <script src="BeerBottles.js">

     </script>

 </body>

 </html>

And this is the JavaScript in BeerBottles.js:

 "use strict"        // force safe javascript

 var word = "bottles";     // for building up string

 var count = 99;

 while (count > 0) {        // loop for count

     console.log(count + " " + word + " of beer on the wall"); // write to the console log

     console.log(count + " " + word + " of beer");

     console.log("Take one down and pass it around,");

     count = count -1;

     if (count > 0) {

         console.log(count + " " + word + " of beer on the wall"); // write to the console log

     }

     else {

         console.log("No more " + word + " of beer on the wall.");

     }

 }

Often you’ll want to have more than one file opening for editing at the same time, for example an html file and a JavaScript file. ScratchPad has only one editing tab, but you can open multiple files in different ScratchPad by using the File→New Window menu choice in ScratchPad.

In this example, to stop the code when it reaches the end, put a breakpoint command after the else line, then refresh the page in the browser window.

The debugger window will open with execution stopped on the debugger statement line. You can then check the value in the count variable by just hovering over it with the cursor.

Back to First Page

More Debugger Stuff