Chrome Developer Tools

Projected Time

About 1 hour

• 10 minutes for a video walkthrough of slides
• 10 minutes to download and launch the Quick Source Viewer Chrome Extension
• 30 minutes for Independent Practice
• 10 minutes for Check for Understanding

Prerequisites

None

Motivation

Chrome Developer Tools help tremendously with front-end development (HTML, CSS & JavaScript) and are also useful for running and debugging JavaScript code.

Objectives

Participants will be able to

• Open the Source Code Viewer
• Use the Quick Source Viewer Chrome Extension
• Access the “Elements” tab within the Developer Tools pane
• Access the JavaScript console within the Developer Tools pane

Specific Things to Learn

• Why Chrome Developer Tools are an important part of a web developer’s workflow
• How to view a webpage’s source code with and without Quick Source Viewer
• How to access the “Elements” tab to view a webpage’s HTML and CSS
• How to access the JavaScript console to run and debug code
• Participants will learn the various keyboard shortcuts to open Chrome Developer Tools

Materials

• Chrome Developer Tools (video walkthrough of slides)
• Chrome Developer Tools (slides)

Common Mistakes / Misconceptions

• “Websites are so mysterious! I can’t find out how they’re made.” Hopefully this lesson has shown you how to find the code behind your favorite websites!
• “All the source code I’ll see using Chrome Dev Tools is good-quality code.” Most of the code you’ll see will be good-quality code if you’re looking at the website of a reputable or well-known company. There are exceptions, however.
• “I can just copy and paste whatever code I find using Chrome Dev Tools.” You should always 1) Understand the code you want to use before you put it into your own project, and 2) Give proper credit to the company or person who wrote the code.

Demonstration

The instructor demonstrates how to use Chrome Developer Tools during the video walkthrough.

Group Practice

None.

Independent Practice

1. Techtonica staff will assign you a pair partner.

2. Navigate to one of your favorite websites.

3. Open the source code using the Quick Source Viewer Chrome Extension. Discuss what you see with your pair partner.

4. Open the Developer Tools pane and navigate to the “Elements” tab.

4a. Activate the mouseover tool and hover over different elements of the webpage. What parts of the HTML & CSS code become highlighted when you mouseover certain parts of the webpage?

4b. Deactivate the mouseover tool. Click on the mobile tool and view the webpage on a variety of screen sizes. Is the webpage responsive (elements change size and layout based on screen size) or not?

5. Open the JavaScript console. What do you see?

Challenge

Participants can explore inside Chrome Developer Tools and see what other functionality it has.

Supplemental Materials

• Quick Source Viewer Chrome Extension

Check for Understanding

1. List the keyboard shortcuts that you can use to access webpage HTML elements, the Source Code Viewer, and the JavaScript console, respectively.

2. When would it be helpful to use the JavaScript console (as opposed to the Source Code Viewer)?

3. What are some advantages of using the Quick Source Viewer extension (as compared to the Source Code Viewer)?