Chrome Development Tools Intro

Launch Chrome Developer Tools

Bring up the context-menu and select the "Inspect" menu option, or Ctrl-Shift-I on Windows

Complete the Following Exercise

Click on the Sources tab and view the different types of files that are available.

  • How many CSS files are part of the site?

  • How many JavaScript files are part of the site?

Click on the Elements tab and view the DOM. Look for the head element at the top of the tree. Find the meta element that has the property named "description". What is the value if the description property?

Click on the Console tab and at the prompt, enter "2" + 2 at the prompt. What do you get back?

While you are in the Console tab, enter "window" at the prompt and hit Enter. You should see a window object returned. Click on the little arrow to the left to expand it. Can you drill down and find the value of the window.location.protocol property?

Last updated