24 lines
1.0 KiB
Markdown
24 lines
1.0 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
|
|||
|
|
|
|||
|
|
### Accessing the development tools
|
|||
|
|
|
|||
|
|
1. 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.
|
|||
|
|
2. On a web page right click on an element. When the menu appears select ‘Inspect’.
|
|||
|
|
|
|||
|
|
### More Information:
|
|||
|
|
* [Chrome DevTools](https://developer.chrome.com/devtools)
|
|||
|
|
* [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)
|