Getting Started with Chrome DevTools (Part 1)

Rich is a Sr. Software Engineer at Vertafore. He also makes JavaScript games (like Zelda) and presents random front-end topics at anonymous-function.com.

Synopsis

New to web development or looking to get started? Learning Chrome DevTools will help cut down on time spent building and debugging web sites. This walkthrough covers tips and tricks for beginners and includes a live sample site with videos and source code.

Background

Being effective in your working environment is very important to developers. Many web developers I've met transitioned from server-side development, but never got any training on their new set of tools.

Chrome DevTools (CDT) is one of the most useful tools for web developers. It allows us to create, manipulate, and debug websites in the browser. Before tools like CDT and Firebug, working in the browser's runtime environment was like getting dental work done at a Kenny G concert.

In the Dark Ages, we were forced to add debug HTML and JavaScript alerts if we wanted to see what was happening in the browser.

Our Workspace

Although frameworks are all the rage these days, we will look at examples on a simple site built with pure HTML, JavaScript, and CSS. This will help us focus on the features of CDT rather than worrying about how a particular framework generates markup or handles events and scope.

Sample Site

Site: Available on Anonymous-Function
Source: Available on GitHub

Let's look at what features our simple site has:

Table of games
Inputs and a button to add new games
Bold games have a CSS class of "radical"
Hover over a game to hightlight it

Starting DevTools

To open DevTools, right-click anywhere in the browser's viewport and select Inspect Element. This will open DevTools and bring focus to the selected element in the window.
Mac: Cmd(⌘) + Option + I
Windows: F12 -or- Ctrl + Shift + I

HTML Elements

You can edit HTML on-the-fly using CDT. Let's take a look at how we can change some HTML:

Using the magnifying glass, I select the element I want to change. Alternatively, I could drill down through the nodes to find the value.

When you find the element you wish to change, right-click on it to choose from common actions including:

Edit as HTML. Open an inline text editor. This makes it easier to do any type of change or multiple changes.
Add Attribute. Add a specific HTML attribute such as class or style.
Delete. Remove an entire element, including its children. Pressing the Delete key will also do this.
Force Element State. This submenu allows you to inspect styles applied to specific situations such as an anchor's :hover or :visited state.

Tag names and attributes can also be changed. Double-click an attribute or its value to change it using the inline textbox that appears.
Keep in mind that any HTML/JavaScript/CSS changes made in CDT are lost if the page refreshes

Shortcuts

Mac OS X	Windows	Action
Cmd(⌘) + Z	Ctrl + Z	Undo last change
Cmd(⌘) + ↑ (↓)	Ctrl + ↑ (↓)	Move element up/down
H	H	Hide element
Del	Backspace	Delete element

Styles

You can also view and change styles using CDT. You can change the CSS of a single element, add new or modify existing rules, and even see what rules apply to specific elements.
When an element is selected, you can click on element.style to apply inline styles. CDT provides an auto-complete to help with both properties and values. Use Tab to shortcut between properties and values and Shift + Tab to go backwards. You can also toggle specific styles on/off by using the checkbox next to the property name.
Clicking the plus (+) icon lets you add rules dynamically to the inspector stylesheet. Then you can edit the HTML to match the selectors. In the example we created a new rule of .cool and added that class to one of the table rows.

When viewing an element, you'll see a list of all the rules/styles that apply and where they come from in the source. This is useful when trying to answer questions such as "Why is this stupid thing bold?". In the video, clicking app.css takes us to the working copy Chrome has loaded. We can even make changes in Source view! This is very useful when you are building in the browser and copying back to your code editor.

Console

CDT provides access to the browser's JavaScript runtime through the Console. You can use the Console to invoke and modify JavaScript or just treat it like a terminal. For example, you can:

Log objects for debugging
Run functions
Add new functions
Assign event handlers
Do math!

console.log("Hello World!");
function buttonClick(){
 var consoleText = document.getElementById("game-console").value;
 var titleText = document.getElementById("game-title").value;
 addNewGame(consoleText, titleText);
 document.getElementById("game-console").value = "";
 document.getElementById("game-title").value = "";
}
function addNewGame(consoleText, titleText) {
 var gameTable = document.getElementById("game-table");
 var el = document.createElement("tr");
 el.innerHTML = "<td>" + consoleText + "</td><td>" + titleText + "</td>";
 gameTable.appendChild(el);
 console.log("Game Added!", consoleText, titleText);
}

Review the JavaScript above before diving into the next video. Additionally, you can view the annotated source on GitHub.

This first thing we see in the Console is the text "Hello World". That comes from line 1 in the JavaScript and is a good way to make sure the browser is loading the script properly when you add a new file.

When I click the Add button in the UI, it will eventually run addNewGame() and we can see the "Game Added!" text along with the name of the console and game. We can get the same result by running addNewGame() directly in the Console.

You can also reassign function/variable definitions in the the Console. In the video, I reassign it a function that does nothing but a log statement, and by running it again we can see it takes effect immediately. Executing just the variable name will show you that it is a function reference. If the variable name were an object instead of a function, it would log its value.

Debugging

Debugging JavaScript can be very useful when the Console alone isn't good enough. You can use the debugger keyword anywhere in your JavaScript and CDT will pause the execution as long as it's open. Video time.

In the Sources tab you have access to all the scripts currently loaded by Chrome. By opening app.js and clicking a line number, I can toggle a breakpoint. A list of all breakpoints (whether active or not) is visible in the bottom on the window.

Let's set a breakpoint at the beginning of addNewGame(). As soon as the function runs, whether through the UI or from the Console, the browser will pause execution. The Scope panel shows the current state of all variable in both window and global scope. You can even use the Console to run commands against the current snapshot of the variables.

Using F10 (Step-Over) will take you step-by-step through the function and after each step you can see how the variables change in Scope. You can expand any object to drill-down into its properties.

Clicking the play button (F8) will continue execution until the next breakpoint. If no other breakpoints are set it will play through to the end of the function.

Deeper Dive

We just barely scratched the surface of what Chrome DevTools has to offer but this will get any developer started. We'll take a look at advanced features such as monitoring network traffic and performance in Part 2. We'll also look at some ways to use CDT when working with frameworks like AngularJS.

Labels

Technology