DEBUG LIKE A DOCTORUSING GOOGLE CHROME DEVTOOLS

Presented by @lahdiouiouadie

QUICK FILE SWITCHING

SEARCH, NAVIGATE AND FILTERCtrl + o : Filter For A Script, Stylesheet Or Snippet By

Filename

SEARCH WITHIN SOURCE CODECtrl + Shift + F

GO TO LINECtrl + G

SELECTING ELEMENTS IN CONSOLE$() = document.querySelector()$$() = document.querySelectorAll()$0 – $4 = A history of the five most recent DOM elements

MULTIPLE CARETS & SELECTIONSHolding Ctrl

PRESERVE LOG

PRETTY PRINT

DEVICE EMULATION SENSORSSimulate mobile devices’ sensors like touch screens and

accelerometers

COLOR PICKER

FORCE ELEMENT STATESimulates CSS states like :hover and :focus on elements

VISUALIZE THE SHADOW DOM

SELECT NEXT OCCURRENCEPress Ctrl + D

CHANGE COLOR FORMATShift + Click

EDITING LOCAL FILES THROUGH WORKSPACES

RELOADNormal ReloadHard ReloadEmpty Cache and Hard Reload

JUMP BETWEEN MATCHING BRACKETSCtrl + M

WEBSOCKET

VISUALISE INFORMATIONS ABOUT THE INITIALHANDSHAKE

LOGGING WEBSOCKET FRAMES

MORE DETAILED INFORMATIONS ABOUT THEWEBSOCKET FRAMES

chrome://net-internals

TEXT SEARCH ACROSS ALL FILESCtrl + Shift + F

FILTER FOR A FUNCTION OR SELECTOR WITHIN AFILE

Ctrl + Shift + O

LOCAL MODIFICATIONS

SNIPPETSCmd + Enter

CONSOLE

CLEARING THE CONSOLE HISTORYCtrl + L

FRAME SELECTION

WRITING TO THE CONSOLEconsole.log() | error() | warn()

console.log("Node count:", a.childNodes.length, "and the current time is:" console.log

FILTERING CONSOLE OUTPUT

GROUPING OUTPUT var user = "jsmith", authenticated = false; console.group( console.log( // authentication code here... if (!authenticated) console console.groupEnd();

VIEWING STRUCTURED DATA console.table([a:1, b:2, c:3, a:"foo", b:false, c:undefined]); console.table

MEASURING HOW LONG SOMETHING TAKES console.time("Array initialize"); var array= for ( array[i] = ; console.timeEnd(

BREAKPOINTS

VISUALISE INFORMATIONS ABOUT THE INITIALHANDSHAKE

LOGGING WEBSOCKET FRAMES

MORE DETAILED INFORMATIONS ABOUT THEWEBSOCKET FRAMES

chrome://net-internals

RESOURCES15 must know chrome devtools tips tricks by DannyMarkovDevtoolstips by Jeferson Koslowskiwww.developer.chrome.com

THANK YOU