greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/index.md

1.2 KiB
Raw Blame History

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: