freeCodeCamp/guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/index.md

---
title: Chrome Developer Tools
---

## Chrome Firefox Development Tools

Chrome and Firefox Developer tools assist web developers in analyzing the HTML, CSS and Javascript on a web page. They are useful for debugging, optimizing code, inspecting elements and much more.

**Features:**
* **Page Inspector:**  View and edit page content and layout.
* **Web Console:**  See javascript console.log() messages and erros
* **JavaScript Debugger:**  View and modify JavaScript running on a page
* **Network Monitor:**  See network requests made when pages are loaded
* **Performance Tools:**  Analyze computer resources used by the site
* **Audits:**  Identify and fix common problems that affect your site's performance, accessibility and user experience

### Accessing the development tools

* In the menu bar at the top of the screen select View > Developer > Developer Tools. The tools will appear on the bottom, side, or as a pop-out window. 
* On a web page right click on an element. When the menu appears select ‘Inspect’.
* Press F12 if on a Windows machine

### More Information:
* [Chrome DevTools](https://developer.chrome.com/devtools)
* [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)