Lesson Tuesday

Learning to debug is an essential skill to pick up early on. There are many debugging techniques; here are a couple you’ll need to use all the time in debugging your HTML & CSS.

To keep things concise, I'll only give instructions for Google Chrome. If you aren't using Chrome, I'd suggest you download and install it now. Both the JavaScript console and the Inspect tools discussed below are part of Chrome Developer Tools, or DevTools.

JavaScript Console

In Chrome, click on the menu button (it looks like ☰ in older versions of Chrome, or three vertical dots in newer versions) and is on the right side of the address bar), go to the More Tools menu, and click Developer Tools. You may also have to click the Console tab at the top of the window that pops open. (As a shortcut, you can also press Cmd + Option + J, or Windows + Alt + J on Epicodus keyboards.) This is called the JavaScript console. We're not actually using JavaScript (yet!), but this is where all errors in your web page are logged. If you see something that looks like Failed to load resource file:///Users/michael/epicodus/css/styles.css, Chrome is telling you that it was instructed to look for your CSS file at Users/michael/epicodus/css/styles.css, but that the file wasn't there. In other words, you either gave the wrong path to the file, or you put the file in the wrong place.

Inspect

Here's a really powerful trick I want to show you for learning and debugging CSS and HTML. You can do this in almost any web browser, but I'll just give instruction for Chrome. Now, right-click anywhere on the Learn How to Program homepage and click Inspect. A little window will pop open that shows you the source code for the page, with the element you inspected selected. As a shortcut, you can open it with Cmd + Option + I.

On the left side of the DevTools, you can select a different element, and expand or collapse all of the elements on the page to make it easier to see the layout. On the right side, the inspector shows you the CSS for the current element. One of the really cool things about this is that it shows you all of the different rules that have been applied to the current element, including those that have been overridden due to specificity or order. You can also uncheck a rule to disable it, or double-click a rule to edit it and see the change live. You can even add your own rules to see what they will do live.

Try inspecting elements on this page to see what CSS rules are being applied.

Terminology


  • DevTools or Developer Tools: An area of the Google Chrome web browser that offers debugging options, and other tools helpful to web developers to assist in locating problems, measuring performance, etc.

  • JavaScript Console: Location in Google Chrome where a website's errors are logged, and other debugging tools are available.

  • Inspecting an element: The act of looking at the code for a specific element on the page.

How To


  • Open JavaScript Console in Chrome: In Chrome, click on the menu button (it looks like ☰ on the right side of address bar), go to the More Tools , and click Developer Tools. You may also have to click the Console tab at the top of the window that pops open.

  • Keyboard shortcut for JavaScript Console in Chrome: CMD + Option + J

  • How to inspect an element: Right click on an element of a web page, and select "Inspect" from the resulting menu of options.