Debug like a doctor using google chrome DevTools http://www.ouadie.tk/debugLikeDoctor

1. DEBUG LIKE A DOCTOR
USING GOOGLE CHROME DEVTOOLS
Presented by @lahdiouiouadie

2. QUICK FILE SWITCHING

3. SEARCH, NAVIGATE AND FILTER
Ctrl + o : Filter For A Script, Stylesheet Or Snippet By
Filename

4. SEARCH WITHIN SOURCE CODE
Ctrl + Shift + F

5. GO TO LINE
Ctrl + G

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

7. MULTIPLE CARETS & SELECTIONS
Holding Ctrl

8. PRESERVE LOG

9. PRETTY PRINT {}

10. DEVICE EMULATION SENSORS
Simulate mobile devices’ sensors like touch screens and
accelerometers

11. COLOR PICKER

12. FORCE ELEMENT STATE
Simulates CSS states like :hover and :focus on elements

13. VISUALIZE THE SHADOW DOM

14. SELECT NEXT OCCURRENCE
Press Ctrl + D

15. CHANGE COLOR FORMAT
Shift + Click

16. EDITING LOCAL FILES THROUGH WORKSPACES

17. RELOAD
Normal Reload
Hard Reload
Empty Cache and Hard Reload

18. JUMP BETWEEN MATCHING BRACKETS
Ctrl + M

19. WEBSOCKET

20. VISUALISE INFORMATIONS ABOUT THE INITIAL
HANDSHAKE

21. LOGGING WEBSOCKET FRAMES

22. MORE DETAILED INFORMATIONS ABOUT THE
WEBSOCKET FRAMES
chrome://net-internals

23. TEXT SEARCH ACROSS ALL FILES
Ctrl + Shift + F

24. FILTER FOR A FUNCTION OR SELECTOR WITHIN A
FILE
Ctrl + Shift + O

25. LOCAL MODIFICATIONS

26. SNIPPETS
Cmd + Enter

27. CONSOLE

28. CLEARING THE CONSOLE HISTORY
Ctrl + L

29. FRAME SELECTION

30. WRITING TO THE CONSOLE
console.log() | error() | warn()
console.log("Node count:", a.childNodes.length, "and the current time is:"
console.log

31. FILTERING CONSOLE OUTPUT

32. GROUPING OUTPUT
var user = "jsmith", authenticated = false;
console.group(
console.log(
// authentication
if (!authenticate
console
}
console.groupEnd(

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

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

35. BREAKPOINTS

36. VISUALISE INFORMATIONS ABOUT THE INITIAL
HANDSHAKE

37. LOGGING WEBSOCKET FRAMES

38. MORE DETAILED INFORMATIONS ABOUT THE
WEBSOCKET FRAMES
chrome://net-internals

39. RESOURCES
15 must know chrome devtools tips tricks by Danny
Markov
Devtoolstips by Jeferson Koslowski
www.developer.chrome.com

40. THANK YOU