Skip to content

Latest commit

 

History

History
70 lines (48 loc) · 3.35 KB

chrome-developer-tools.md

File metadata and controls

70 lines (48 loc) · 3.35 KB

Chrome Developer Tools

Projected Time

About 1 hour

  • 10 minutes for 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 Teach

  • 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

Supplemental Materials

Lesson

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

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?

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

Challenge

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

Check for Understanding

  1. Make a cheat sheet of keyboard shortcuts you can use to open the various tools inside Chrome Developer Tools. Save this cheat sheet as a note on your computer.