In the early days of web development, bug tracking was often accomplished by inserting variable values in
console, originally developed as part of the Firebug browser extension, now has its own API, and is invaluable for web developers at every skill level.
Bringing Up The console
While every vendor supports it, the console looks slightly different from one browser to the next, and is reached in a slightly different way in each:
- In Chrome: ⌘-Option-J
- In Firefox: ⌘-Shift-J
- In Safari: Ensure that the Developer Menu option is on in Advanced Preferences; use ⌘-Option-C to bring up the console.
Part Scratchpad, Part Report Card
The console fulfills many tasks. It is, among other things:
- A “scratchpad” area to test code before implementation
- A place for page scripts to output status and tracking information
I’ll discuss many more possible uses for
console in future articles; for now, let’s take a quick look at the simplest of these features.
Start up a console, load a basic valid HTML page, and type the following into the console window:
Note that the console returns to you the body element, including all of its markup and text. An empty document would return:
Now let’s take it a little further:
document.body.style.backgroundColor = "red";
Used as a catchment for errors, the console becomes even more useful. For example, write a script directly on a web page:
artists = ["Daft Punk","DJ Shadow","Amon Tobin"]; artists.push("Front Line Assembly"); console.log("The artists array contains " + artists.length + " elements");
Load the page, and switch to the console window. With
console.log() you can “echo out” any variable, or the result of any action.
You can use the console for a lot more than these simple tasks, but I hope this will provide a good start for beginners.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.