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