Skip to content

Latest commit

 

History

History
64 lines (40 loc) · 3.24 KB

chrome-developer-tools.md

File metadata and controls

64 lines (40 loc) · 3.24 KB
Raw

Chrome Developer Tools

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
  • Various keyboard shortcuts to open Chrome Developer Tools

Materials

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.

Independent Practice

  1. Navigate to one of your favorite websites.

  2. Open the source code using the Quick Source Viewer Chrome Extension.

  3. Open the Developer Tools pane and navigate to the "Elements" tab.

    3a. 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?

    3b. 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?

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

Supplemental Materials

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)?