--description--

Being able to inspect and debug your HTML and CSS is critical to front-end development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.

To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.

Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.

--assignment--

Play around with Chrome Dev Tools and see if you can answer the following question.

--questions--

--text--

Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?

--answers--

Console and Network

---

Elements and Styles

---

Sources and Application

---

Performance and Memory

--video-solution--

2