DevTools Tutorial
Learning Competencies
By the end of this tutorial, you should be familiar with and able to:
- Navigate and edit a website's HTML and CSS elements using the Chrome DevTools inspector
- Use DevTools to manipulate elements in the DOM
- Use DevTools console and other commands
- Examine network and resources
Summary
One of the ways we access the DOM is using Developer Tools (DevTools). DevTools also assists us with testing and debugging websites and applications. All major browsers include developer tools, which enable developers to examine the code of a web page or app and run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard. DevTools allows us to access the DOM and assists us with testing and debugging websites and applications.
In this exercise, you'll be downloading the source files and following the DevTools tutorial.
Time Box
| Challenge | Time |
|---|---|
| Interactive tutorial | 1.5 hours |
| Reflect | 30 minutes |
Instructions
Use these files to follow along - the files accompanying the YouTube video differ slightly from the tutorial.
- Clone this repo down using your terminal. Use `code .` to open the folder in VS Code, and look for the `JS Devtools Crashcourse Resources`.
- Use the files above and complete the Google Chrome Developers Crash Course.
- Go to a website of your choice. Use DevTools to manipulate some elements.
Pro-tip: Adjust the YouTube timing to increase speed.
Reflect
In your my-reflections-sprint-2 file, answer the questions under the DevTools Tutorial heading.
Commit and push your changes to GitHub.