Debugging Deep Dive
All the things your browser can do
Hashtags: #jsconf #debugging
Brian Arnold Sinclair
- Staff Software Engineer @ Bazaarvoice
- Lord of Waterdeep
- Rock Band guitar expert
Outline
- Exploration of Developer Tools
- Console API
- Command Line API
- Techniques
Developer Tools
Exploration!
Elements
Peeking at the DOM
Network
- Overview
- Chrome's Timeline
- Details
Scripts
- Fuzzy Finder
- Pretty printing
- Searching
Breaking Execution
- Breakpoints
- Conditionally brekaing
- Other types of breakpoints
Other areas
- Timeline
- Profiles
- Resources
All great, but more for analysis than straight debugging
Emulation
- Viewport
- Mobile
- Throttling
Console
There's so much here, it gets its own section!
Console API
Much more than just console.log
Logging
- Basic types
- Formatting
- Tabular output
- Tracing
Grouping
Logging in style
Recording
- Profiling
- Timing
Command Line API
Getting hands-on with things
Dollars!
- $_
- $0 - $4
- $ / $$
Inspecting
- inspect
- dir / dirxml
- keys / values
Observing
- debug
- monitor
- monitorEvents
- getEventListeners
Other Utilities
- Right-click for Global
- copy
- clear
- table
Techniques
(Here there be hacks, sometimes)
Learn JavaScript
No, really, learn the core
Read the spec, read JS: TDG, go beyond the good parts
Read up on ES5, ES6, ES7
Subscribe to JS Weekly
Use a style guide!
Inconsistently written code SUCKS to debug
Look into things like Idiomatic for a starting point, and EditorConfig to help enforce it
You don't write code for yourself, you write it for the moron who has to maintain it in a year.
More often than not, you are that moron.
Rubber Duck
- Colleagues
- Friends at other shops
- An actual rubber duck
Private Mode
Not just for hiding things
Extra Users
For when Private Mode isn't enough
Named Function Expressions
Named functions are easier to debug, as the call stack has a nice, clean name right there in it!
Dollar parent Exploration
Combining $_ and $0 for fun and profit*
* There may not be profit
Breakpoint Actions
Use and abuse of conditional breakpoints
Native replacement
Just about everything is mutable, so make changes
SomeNative.prototype.someMethod = function () { debugger; }Crimes Against Production
`console.group` EXTREME!!1!
toWrap[method] = function wrapped () {
var groupName = identifier + ': ' + method;
console[grouping](groupName);
console.log('%s args: %o', method, arguments);
try {
var value = oldMethod.apply(this, arguments);
console.log('%s return value: %o', method, value);
return value;
} catch (e) {
console.error('%s error: %o', method, e);
} finally {
console.log('%s: Exiting', method);
console.groupEnd(groupName);
}
};