1. CS 418 : Week 2 Chrome DevTools SUSHMA KINI MARY PIETROWICZ ZHICHENG YAN

2. Chrome DevTools  Built-in Debugging tool in Google Chrome  Why do you need to know this? To debug your code To set Javascript breakpoint To find any kind of layout issues

3. Accessing DevTools  Go to Chrome Menu. Select Tools -> Developer Tools  Right – click on any page element and select inspect element. Shortcuts:  Ctrl+Shift+I (Cmd + Opt + I on Mac) to open DevTools  Ctrl+Shift+J (Cmd + Opt + J on Mac) to open Console  Ctrl+Shift+C (Cmd + Shift + C on Mac) to open Devtools in Inspect element mode

4. DevTools Window - ELEMENT Elements Panel: Inspect and Live-edit the HTML and CSS of the webpage.

5. DevTools Window - SOURCES Sources Panel: Used to debug your JavaScript code using breakpoints.

6. Setting up a breakpoint Breakpoint on a line of code Breakpoint on JavaScript Event Listener

7. DevTools Window - CONSOLE Console Panel: Used to log diagnostic information in the development process and provide shell prompt which can be used to interact with the document and DevTools.

8. Debugging Examples 1) https://courses.engr.illinois.edu/cs418/hello1.htmlhttps://courses.engr.illinois.edu/cs418/hello1.html 2) https://courses.engr.illinois.edu/cs418/hello2.htmlhttps://courses.engr.illinois.edu/cs418/hello2.html 3) https://courses.engr.illinois.edu/cs418/hello3.htmlhttps://courses.engr.illinois.edu/cs418/hello3.html

9. REFERNCES 1) https://developers.google.com/web/tools/chrome-devtools/https://developers.google.com/web/tools/chrome-devtools/ ANY QUESTIONS?