Run around Chrome Inspector
0 likes514 views
This document provides an introduction to using the Chrome Inspector for JavaScript development. It outlines goals of understanding JavaScript foundations, using jQuery and AJAX calls, making promises, and making friends. It then demonstrates various panels of the Chrome Inspector including Elements, Network, Sources, and Console for selecting DOM elements, inspecting HTTP calls, adding breakpoints for debugging, and running JavaScript code. Users are encouraged to ask questions.
Run around Chrome Inspector
- 1. Be a better JS Developer Understanding the foundational concepts of Javascript
- 2. About Me • Passionate about Technology • Been playing with computers since 8yrs old • Haven’t stopped playing since
- 3. Welcome! • Tell us about yourself • Who you are • Why you are here • What is your favourite Melbourne holiday destination
- 4. 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!)
- 5. Stop me at anytime To ask a question About anything or Clarify any point
- 6. Google Chrome Inspector Your Friendly Javascript Development Environment
- 7. For More info… • Chrome Inspector Reference Guide: https://developer.chrome.com/devtools/docs/ javascript-debugging
- 8. What is Chrome Inspector • A Web Development Tool • Write, and run code • Live edit a website (HTML/CSS/Javascript)
- 10. For Javascript Dev… • Elements • Network • Sources • Console
- 11. Panel Options - Elements • Select the DOM • using the $0 selector • Live Editing • Inspect CSS styles • Edit CSS styles
- 12. Panel Options - Elements • Select an element • Add the hidden class • Change the colour • Remove a style
- 13. Panel Options - Network • Network inspects all HTTP Calls • Gets, Post… • Inspect the data sent and received • Get the response time for each file
- 14. Panel Options - Network • View a http get • View the timing of a network call • Inspect the data sent and retrieved
- 15. Panel Options - Console • Your sandbox • Create and run javascript functions • Inspect, modify, and run code • Modify your code while it’s running
- 16. Panel Options - Console • Do a console.log(‘hello world’) • Write an if statement • Write a function • Use a debugger statement in the function
- 17. Panel Options - Sources • This is your Javascript Development Environment • Add Breakpoints for debugging • Inspect variables, call stack • Modify existing files (but not recommended…)
- 18. Panel Options - Sources • Add a breakpoint • Inspect a variable using the console • Pretty Print a file
- 19. For More info… • Chrome Inspector Reference Guide: https://developer.chrome.com/devtools/docs/ javascript-debugging