Sushma Kini MARY PIETROWICz Zhicheng YAN Chrome DevTools Builtin Debugging tool in Google Chrome Why do you need to know this To debug your code To set J avascript breakpoint ID: 803088
Download The PPT/PDF document "CS 418 : Week 2 Chrome DevTools" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS 418 : Week 2Chrome DevTools
Sushma
Kini
MARY
PIETROWICz
Zhicheng
YAN
Slide2Chrome DevTools Built-in Debugging tool in Google Chrome
Why do you need to know this?
To debug your code
To set
J
avascript
breakpoint
To find any kind of layout issues
Slide3Accessing 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
Slide4DevTools Window - ELEMENT
Elements Panel: Inspect and Live-edit the HTML and CSS of the webpage.
Slide5DevTools Window - SOURCESSources Panel: Used to debug your JavaScript code using breakpoints.
Slide6Setting up a breakpoint
Breakpoint on a line of code
Breakpoint on JavaScript Event Listener
Slide7DevTools Window - CONSOLEConsole 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
.
Slide8Debugging Examples1) https://courses.engr.illinois.edu/cs418/hello1.html
2)
https://
courses.engr.illinois.edu/cs418/hello2.html
3)
https://
courses.engr.illinois.edu/cs418/hello3.html
Slide9REFERNCES1) https://developers.google.com/web/tools/chrome-devtools/
ANY QUESTIONS?