ptg16476052JavaScript and the Chrome Development Tools 47517
The src attribute will accept any valid URL, on the same server or on another. Naming
your JavaScript files with the extension .js is customary.
JavaScript and the Chrome Development Tools
You’ve already seen how useful the Chrome Development Tools are when it comes
to inspecting the source code of a page and diagnosing CSS issues on a web page.
Developer tools like these were originally introduced to help people who were writ-
ing JavaScript. There are two incredibly useful features for JavaScript developers in the
Developer Tools. The first is the JavaScript Debugger, which I’ll discuss a bit later on.
The second is the JavaScript Console, which provides a place to enter JavaScript code,
execute it, and view the results interactively.
As I walk you through the JavaScript language, you can use the Console of the Chrome
Development Tools (or the JavaScript Console in whichever browser you prefer) to run
the examples. JavaScript errors that occur as you interact with the page are also printed in
the Console, so when you’re adding JavaScript to your own pages, you’ll use it to inves-
tigate the bugs that inevitably crop up as you write your own JavaScript. You can see
what the Console loo ks like in Figure 17.1.
To view the Console, you open the Developer Tools and click on the Console tab. The >
prompt is where you enter your JavaScript code to be evaluated. The Console is what’s
known as a REPL, which is short for Read-eval-print Loop. That’s because it reads the
code you enter, evaluates it, and then prints the results. It’s a place you can experiment
more easily than editing the JavaScript on a page, loading it in a browser, and then view-
ing the results.
To see how it works, open the Console and type "1 + 1" at the prompt. On the next line,
you’ll see the number 2, the results of that mathematical expression. That expression
FIGURE 17.1
The Chrome
Developer Tools
JavaScript Console.