Website Optimization Course (How To)

Chrome DevTools Basics

The Google Chrome web browser includes a built in set of features for web designers and developers called the Chrome DevTools. Using the DevTools, any webpage can be inspected for bugs and profiled on a number of performance characteristics. Some of the most powerful panels in the DevTools include the Elements panel which allows for interaction with DOM tree and styling, as well as the Console panel, which makes it trivial to access JavaScript functions and test out new front-end code.

• Accessing the DevTools

  2:52

• Accessing the DevTools

  4 questions

• The Elements Panel

  6:31

• The Elements Panel

  4 questions

• The Resources Panel

  3:36

• The Resources Panel

  4 questions

• The Network Panel

  8:50

• The Network Panel

  4 questions

• The Sources Panel

  3:29

• The Sources Panel

  4 questions

• The Timeline Panel

  5:26

• The Timeline Panel

  4 questions

• The Profiles Panel

  5:44

• The Profiles Panel

  4 questions

• The Audits Panel

  2:29

• The Audits Panel

  3 questions

• The Console Panel

  6:59

• The Console Panel

  5 questions

• The Console API

  3:48

• The Console API

  3 questions

• Adjusting Settings

  4:34

• Adjusting Settings

  3 questions

• Extra Credit

  Open the Chrome DevTools on your favorite website and then do the following:

  • Use the Elements panel to inspect the HTML and CSS.
  • Use the Sources panel and try modifying some of the content or styling on the page.
  • Open the Network panel and refresh the browser. Then, try to see if you can find any areas where the front-end performance could be improved.