Who is

JS Dude?

• @jsdude005
• Organize Chicago JavaScript meetup
• Sr. Web Developer, Nielsen
• Enjoy Learning, talking about JavaScript

Jump from 14,000ft

Chicago Marathon 2016

10,000 volts

Morning of a developer

Real morning

"Oh yeah"

App doesn't work

Before start

• Repro locally
• Anything in console
• Isolate the bug
• Look at the data in network tab
• Sort out of the options
• Talk about how things were developed
• Easy things first

Summary: Problem-1

1. Elements Tab: Event Listeners
2. Source Tab: Event Listener BreakPoints
3. getEventListeners
4. monitorEvent(element, [events])
5. unmonitorEvents(element)
6. Show function definition
7. for jquery, findEventHandlers.js

You are not done!

one more problem to go

Summary: Problem-2

• Open file: cmd + P (Ctrl + P)
• Filter function: Cmd + shift + O (Ctrl + shift + O)
• console.table()
• conditional breakpoint
• Esc to open console
• Live Edit
• blackbox script

Evening

of a programmer

Small pieces

Style

• Cmd + z (Ctrl + z)
• class toggle
• Edit Margin, Padding
• color picker and color palette
• Shift + Click: change color format
• DOM search by css selctor

Console tab

• console.log
• debug(), undebug()
• keys(obj), values(obj)
• Edit html in console
• monitor function
• document.body.contentEditable = true
• Preserve log

Source tab

• Ctrl + G : Go to line
• Cmd + option + F (ctrl + shift + F)
• Break point in a long line
• Matching Bracket: Ctrl + M
• Cmd + Click: multi cursor
• Cmd + D (ctrl + D): select next occurrence

Async JS

Full stack trace

• setInterval
• setTimeout
XMLHttpRequest
promises
requestAnimationFrame
MutationObservers
and more...

XHR breakpoints

Enable Async

Summary: Network

• filter by, "Method:GET", domain:google,
• replay XHR
• async
• XHR breakpoint
• Filmstrip recording
• Copy a response
• Network throttle

snippet

My fav - snippets

• all globals
• jquerify
• all colors
• view cookies
• form controls

Extensions

some extensions

• web developer
• Edit this cookie
• JSON View
• JSON formatter
• Page speed insights
• Visual Events
• http headers
• full page screen capture

others

Easy and Useful

• With DevTools opened: Click and hold the reload button
• Workspace: save from dev tool
• Device mode: device, network simulation
• debug media queries

Night of a developer

Summary

What we have talked

1. monitor, unmonitor
2. filter Functions (Ctrl + Shift + O)
3. console.table
4. async, XHR breakpoints
5. Know dev tool

Need more?

• Code School: devtool course
• Art of Debugging
• Explain promise as cartoon
• 4 Types of Memory Leak in JS
• ES6 promise in depth
• Memory Debugging

Free tip

Hotel Room

• body lotion as shoe shiner
• hair conditioner as shaving cream
• hair dryer to dry wet shocks