This document introduces the Elements panel and JavaScript Console in Chrome DevTools. The Elements panel allows you to view and edit the HTML and CSS of any element on the page. To select an element, use the element selector tool and click on the element. This will show the element's HTML and CSS which can be edited. The JavaScript Console allows you to write JavaScript code to test and interact with the current page.

1. ChromeDevToolsBasics
Elements and the JavaScript Console

2. Elements
WhereyoucanviewHTMLandCSS
Clickheretoopen
Page'sHTML
Styles
Element'sCSS

3. Grabbinganelement
Toselectanelementonthepage,clickontheelementselector...
Clickhere

4. Grabbinganelement
...andclickontheelementonthepage.
Clickonan
elementonthepage

5. Grabbinganelement
Nowyoucanviewtheelement'sHTMLandCSS...
Element'sHTML
Element'sCSS

6. Grabbinganelement
...andeveneditthese.
Ourbutton'stext
changedtored...
...afterwechanged
thetextcolorCSS
propertytored

7. Console
Aconsole...
Clickhereto
open

8. Console
...inwhichyoucanwriteJavaScript.