Chrome Dev Tools
Nothing New
Stepan Suvorov
VP Engineering @
Studytube
@stevermeister
Chrome Dev Tools
console
sources/debugging
network
performance
memory
application
...
Console
Console.log
console.log()
.info(), .warn(), .error(), .dir(), .table()
.assert()
.group(name)/.groupEnd()
.groupCollapsed()
.time() / timeEnd()
.count(label)
.trace()
Element Selector
$_
$0, $1, $2 ...
$(), $$()
$x('/html/body/script[2]');
inspect(element)
inspect(object)
Helpers
monitorEvents(document, "mousedown");
profile()/profileEnd()
keys(), values()
clear()
copy()
ES2017
await on global level
clever multiline
autocomplete for collections
More Inspiration?
console styling - http://goo.gl/2Tm9zJ
console.image - http://goo.gl/e1Vo0V
console-text-image - http://goo.gl/F3FAUU
console.history
Elements
Copy JS path
Sources
Inline "live" breakpoints
Extra conditions for breakpoints
Partial breakpoints
Blackbox for 3rd parties
Change History
JavaScript Snippets
big set of snippets - https://github.com/bahmutov/code-snippets
More
More smart things
shortcut Cmd + Shift + P
Prettifier
Multicursor
Network and CPU throttling
Screenshot
Coverage
Animations
Audit panel
Mobile remote debug
Made with Slides.com