Run around Chrome Inspector
-
Upload
tiang-cheng -
Category
Software
-
view
60 -
download
0
description
Transcript of Run around Chrome Inspector
![Page 1: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/1.jpg)
Be a better JS DeveloperUnderstanding the foundational concepts of Javascript
![Page 2: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/2.jpg)
About Me
• Passionate about Technology
• Been playing with computers since 8yrs old
• Haven’t stopped playing since
![Page 3: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/3.jpg)
Welcome!
• Tell us about yourself
• Who you are
• Why you are here
• What is your favourite Melbourne holiday destination
![Page 4: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/4.jpg)
Goals for Today• Use the Chrome Inspector for all your JS development
• Understand the foundations, principles and design patterns of Javascript
• Use jQuery framework
• Use AJAX calls
• Make promises (and keep them!)
• Make friends (and hopefully keep them too!)
![Page 5: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/5.jpg)
Stop me at anytime
To ask a question
About anything
or Clarify any point
![Page 6: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/6.jpg)
Google Chrome InspectorYour Friendly Javascript Development Environment
![Page 7: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/7.jpg)
For More info…
• Chrome Inspector Reference Guide: https://developer.chrome.com/devtools/docs/javascript-debugging
![Page 8: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/8.jpg)
What is Chrome Inspector
• A Web Development Tool
• Write, and run code
• Live edit a website (HTML/CSS/Javascript)
![Page 9: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/9.jpg)
![Page 10: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/10.jpg)
For Javascript Dev…
• Elements
• Network
• Sources
• Console
![Page 11: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/11.jpg)
Panel Options - Elements
• Select the DOM
• using the $0 selector
• Live Editing
• Inspect CSS styles
• Edit CSS styles
![Page 12: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/12.jpg)
Panel Options - Elements
• Select an element
• Add the hidden class
• Change the colour
• Remove a style
![Page 13: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/13.jpg)
Panel Options - Network
• Network inspects all HTTP Calls
• Gets, Post…
• Inspect the data sent and received
• Get the response time for each file
![Page 14: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/14.jpg)
Panel Options - Network
• View a http get
• View the timing of a network call
• Inspect the data sent and retrieved
![Page 15: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/15.jpg)
Panel Options - Console
• Your sandbox
• Create and run javascript functions
• Inspect, modify, and run code
• Modify your code while it’s running
![Page 16: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/16.jpg)
Panel Options - Console
• Do a console.log(‘hello world’)
• Write an if statement
• Write a function
• Use a debugger statement in the function
![Page 17: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/17.jpg)
Panel Options - Sources
• This is your Javascript Development Environment
• Add Breakpoints for debugging
• Inspect variables, call stack
• Modify existing files (but not recommended…)
![Page 18: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/18.jpg)
Panel Options - Sources
• Add a breakpoint
• Inspect a variable using the console
• Pretty Print a file
![Page 19: Run around Chrome Inspector](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdd1d8b42a7e298b51ce/html5/thumbnails/19.jpg)
For More info…
• Chrome Inspector Reference Guide: https://developer.chrome.com/devtools/docs/javascript-debugging