The document provides an overview of debugging JavaScript using Chrome DevTools, covering key features such as the DevTools UI, console commands, and debugging techniques. It highlights useful tips like customizing console output and setting breakpoints to track variable scope and asynchronous events. The document also includes links for further resources and encouragement for user interaction and sharing experiences.

1. DEBUGGING JAVASCRIPT
WITH CHROME DEVTOOLS
Createdby /DipilSinghSaud @dipilsaud

2. HEADS UP
1. Devtools UI
2. Know the Console
3. Debugging
4. Share /Questions

3. DEVTOOLS
CMD+SHIFT+I
Panels
Settings

4. THE CONSOLE
Tips and Tricks
to give you the kicks

5. CONSOLE.LOG() WITH A TWIST
console.log("%cBIGRED MESSAGE", "font-size: 200%;
background-color: #C0FFEE;")
console.log(arg1, arg2, arg3)

6. CONSOLE.DIR()

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

8. CONSOLE.TABLE(ELEMENTS, FIELDS)

9. COPY()

10. Filters
Preserve Log
Scopinginto Frames
Store as GlobalVariable

11. FIREBUG API
https://getfirebug.com/wiki/index.php/Command_Line_API

12. DEBUGGING

13. SETTING BREAKPOINTS
Step Over /Step Into /Step Out
Scope Variables
Watch Expressions
Async

14. BREAKPOINTS ON XHR

15. DEBUG FROM UI
Break on Subtree Modification
Break on Event

16. TIMELINE TO DEBUG

17. LINKS
Docs
Presentation Framework
DebuggingAsynchronous Javascript

18. HAVE A QUESTION?
OR
SHARE YOUR PIECE

19. THANK YOU FOR YOUR
PATIENCE