Skip to content
Critical Web Design Wiki

2.3 Javascript and DevTools

Overview
Inspect your web pages with DevTools.

Inspect CSS Rules with DevTools

Section titled “Inspect CSS Rules with DevTools”

This video demonstrates how to test JS expressions in the DevTools Console. I opened the Console by pressing Command+Option+J on my Mac. You can also get there from the Google Chrome Browser’s View Menu, then Developer, then JavaScript Console.

Excerpt Exercise 2.2.5
Use DevTools to explore HTML, CSS, and JS in a web page.
  1. Right+click anywhere on a web page and choose “Inspect”.
  2. Mouse over HTML elements in DevTools to see the corresponding elements on the page.
  3. Select one of the elements to see the CSS applied to it and a visualization using the Box Model diagram in the bottom right.

A screenshot of the Elements tab in DevTools.

  1. Use the Element tool to select and inspect elements directly on the page.

Element tool

Run Javascript in the Console

Section titled “Run Javascript in the Console”

Executing an alert function in the Console We tested Javascript directly in the Console in this exercise.

Tree diagram of the document object model. The hierarchical document object visualized.

A screenshot showing how to run Javascript in the Console prompt. Use the Console to test Javascript before you save it in your script tag.

Javascript Errors

Section titled “Javascript Errors”

A screenshot of the Console showing messages, warnings, and errors. The Console can show several types of messages, warnings, and errors to let you know about issues with your page.

A screenshot showing code with a syntax error due to the use of smart quotes in VS Code. VS Code and other editors use color to let you know when your code syntax is not correct. The first line in this image uses dumb quotes so the formatter changes the color to indicate it is recognized as a string. The second line uses smart quotes (a.k.a. “curly quotes”) so the formatter shows the string does not conform to a single color and adds red underlines to signify the syntax error.

Finished Prompt

Section titled “Finished Prompt”

outcome This outcome https://criticalwebdesign.github.io/book/02-view-source/2-3 is based on Apple’s “Different” manifesto/campaign. It employs inline and block styles as well as some negative values for margins to emphasize repetition and contrast in scale, value, and form (rotation).

outcome This outcome https://criticalwebdesign.github.io/book/02-view-source/examples/poem-chaos.html uses Javascript to update the CSS of the page to create an animated rendition of Rachel Greene’s description of the possibilities and “chaos” of the WWW from her book, Internet Art.