DEBUGGING JAVASCRIPTWITH CHROME DEVTOOLS

Created by / Dipil Singh Saud @dipilsaud

HEADS UP1. Devtools UI2. Know the Console3. Debugging4. Share / Questions

DEVTOOLSCMD + SHIFT + I

Panels

Settings

THE CONSOLETips and Tricks

to give you the kicks

CONSOLE.LOG() WITH A TWISTconsole.log("%cBIG RED MESSAGE", "font-size: 200%;

background-color: #C0FFEE;")

console.log(arg1, arg2, arg3)

CONSOLE.DIR()

ELEMENTS/CONSOLE$0..$4 OR $n(x)

inspect(element)

CONSOLE.TABLE(ELEMENTS, FIELDS)

COPY()

Filters

Preserve Log

Scoping into Frames

Store as Global Variable

FIREBUG APIhttps://getfirebug.com/wiki/index.php/Command_Line_API

DEBUGGING

SETTING BREAKPOINTSStep Over / Step Into / Step Out

Scope Variables

Watch Expressions

Async

BREAKPOINTS ON XHR

DEBUG FROM UIBreak on Subtree Modification

Break on Event

TIMELINE TO DEBUG

LINKSDocsPresentation FrameworkDebugging Asynchronous Javascript

HAVE A QUESTION?OR

SHARE YOUR PIECE

THANK YOU FOR YOURPATIENCE