App doesn't work

Before start

• Repro locally
• Anything in console
• Sort out of the options
• Talk about how things were developed
• Easy things first
• Know dev tool

Summary: Problem-1

• Elements Tab: Event Listeners
• Source Tab: Event Listener BreakPoints
• getEventListeners
• monitorEvent(element, [events])
• unmonitorEvents(element)
• Show function definition
• for jquery, findEventHandlers.js
• blackbox script

You are not done!

one more problem to go

Summary: Problem-2

• Open file: Ctrl + P
• Filter function: Ctrl + shift + O
• Matching Bracket: Ctrl + M
• console.table()
• conditional breakpoint
• Esc to open console
• Live Edit

Small pieces

Style

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

Console tab

• $(), $$()
• $0, $1, $2
• 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
• Ctrl + Click: multi cursor
• Ctrl + D : select next occurrence

Async JS

Full stack trace

• setInterval
• setTimeout

XHR breakpoints

Enable Async

promise error

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.log("Failed!", error);
});							
						

get('story.json').then(function(response) {
  console.log("Success!", response);
}).catch(function(error) {
  console.log("Failed!", error);
});							
						

anther large code block.

asyncThing1().then(function() {
  return asyncThing2();
}).then(function() {
  return asyncThing3();
}).catch(function(err) {
  return asyncRecovery1();
}).then(function() {
  return asyncThing4();
}, function(err) {
  return asyncRecovery2();
}).catch(function(err) {
  console.log("Don't worry about it");
}).then(function() {
  console.log("All done!");
});							
						

Q promise error

function theDepthsOfMyProgram() {
  Q.delay(100).done(function explode() {
    throw new Error("boo!");
  });
}

theDepthsOfMyProgram();
						

Error: boo!
    at explode (/path/to/test.js:3:11)
    at _fulfilled (/path/to/test.js:q:54)
    at resolvedValue.promiseDispatch.done (/path/to/q.js:823:30)
    at makePromise.promise.promiseDispatch (/path/to/q.js:496:13)
    at pending (/path/to/q.js:397:39)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)
						

Long Strack Trace

Q.longStackSupport = true;							
						

Error: boo!
    at explode (/path/to/test.js:3:11)
From previous event:
    at theDepthsOfMyProgram (/path/to/test.js:2:16)
    at Object.<anonymous> (/path/to/test.js:7:1)							
						</anonymous>

Summary: Network

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

Evening

of a programmer

snippet

My fav - snippets

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

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

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