Upload
tiang-cheng
View
60
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Using Chrome Inspector for Javascript development
Citation preview
Be a better JS DeveloperUnderstanding the foundational concepts of Javascript
About Me
• Passionate about Technology
• Been playing with computers since 8yrs old
• Haven’t stopped playing since
Welcome!
• Tell us about yourself
• Who you are
• Why you are here
• What is your favourite Melbourne holiday destination
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!)
Stop me at anytime
To ask a question
About anything
or Clarify any point
Google Chrome InspectorYour Friendly Javascript Development Environment
For More info…
• Chrome Inspector Reference Guide: https://developer.chrome.com/devtools/docs/javascript-debugging
What is Chrome Inspector
• A Web Development Tool
• Write, and run code
• Live edit a website (HTML/CSS/Javascript)
For Javascript Dev…
• Elements
• Network
• Sources
• Console
Panel Options - Elements
• Select the DOM
• using the $0 selector
• Live Editing
• Inspect CSS styles
• Edit CSS styles
Panel Options - Elements
• Select an element
• Add the hidden class
• Change the colour
• Remove a style
Panel Options - Network
• Network inspects all HTTP Calls
• Gets, Post…
• Inspect the data sent and received
• Get the response time for each file
Panel Options - Network
• View a http get
• View the timing of a network call
• Inspect the data sent and retrieved
Panel Options - Console
• Your sandbox
• Create and run javascript functions
• Inspect, modify, and run code
• Modify your code while it’s running
Panel Options - Console
• Do a console.log(‘hello world’)
• Write an if statement
• Write a function
• Use a debugger statement in the function
Panel Options - Sources
• This is your Javascript Development Environment
• Add Breakpoints for debugging
• Inspect variables, call stack
• Modify existing files (but not recommended…)
Panel Options - Sources
• Add a breakpoint
• Inspect a variable using the console
• Pretty Print a file
For More info…
• Chrome Inspector Reference Guide: https://developer.chrome.com/devtools/docs/javascript-debugging