Getting started with google-chrome-devtools

Remarks#

This section provides an overview of what google-chrome-devtools is, and why a developer might want to use it.

It should also mention any large subjects within google-chrome-devtools, and link out to the related topics. Since the Documentation for google-chrome-devtools is new, you may need to create initial versions of those related topics.

Search by filename

While in the sources tab use CTRL+O (⌘+O for Mac) to search by filename.

Go to member (javaScript function/CSS rule)

Use CTRL+SHIFT+O (⌘+SHIFT+O for mac) to navigate to a javaScript function/CSS rule when viewing a file.

Accessing Chrome Dev Tools

While chrome browser is open to any tab (except welcome tabs) you have three options to open Chrome Dev Tools:

Keyboard: Type command ⌘+option+i

Browser Menu: Click ‘Menu’ > ‘More Tools’ > ‘Developer Tools’

Program Menu (at top of your screen): Click ‘View’ > ‘Developer’ > ‘Developer Tools’