![Dale St. Marthe](https://web.dev/images/authors/dalestmarthe.jpg) Dale St. Marthe [LinkedIn](https://www.linkedin.com/in/dale-st-marthe)

<br />

Chrome DevTools offers many powerful tools that help you deeply inspect and improve your web applications.

The following video provides an overview of six fundamental tools, including the **Inspect** button and **Device Mode** , along with the **Elements** , **Console** , **Sources** , and **Network** panels. Additionally, you will learn about the **Styles** tab and ways to customize DevTools.

[Video](https://www.youtube.com/watch?v=t1c5tNPpXjs)

Watch the video to learn how to:

- [Inspect and edit DOM elements](https://developer.chrome.com/docs/devtools/dom.md.txt).
- Visualize and change the dimensions of an element with the [Box Model](https://developer.chrome.com/docs/devtools/css.md.txt#box-model).
- See what your page [looks like on mobile devices](https://developer.chrome.com/docs/devtools/device-mode.md.txt#viewport).
- Identify JavaScript errors with the **Console** panel.
- Debug JavaScript using [breakpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints.md.txt) in the **Sources** panel.
- Analyze and filter network activity in the **Network** panel.
- [Simulate slower connection speeds](https://developer.chrome.com/docs/devtools/network.md.txt#throttle).
- [Customize DevTools](https://developer.chrome.com/docs/devtools/customize.md.txt).

For an in-depth overview, see our [DevTools overview](https://developer.chrome.com/docs/devtools/overview.md.txt).