26 lines
1.2 KiB
Markdown
26 lines
1.2 KiB
Markdown
---
|
||
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)
|