web inspector tips

1. Web Inspector?
How to use
insanehong@FRENDS

2. @insanehong
NAVER Labs / 시스템스 컴퓨팅G
http://insanehong.kr
http://about.me/insanehong
김덕홍 / FRENDS

4. Amazing
https://www.flickr.com/photos/cayusa/2962437091
!

5. SHUT UP AND
TAKE MY TIPS

6. [명사] (실용적인, 작은) 조언
https://www.flickr.com/photos/tigerpixel/3488935627

7. Dock-To-Right For Vertical-Split Editing
어! 그거 어떻게 옆에 나와요?

8. Dock-To-Right For Vertical-Split Editing
Long Click

9. Who? Where? Why?
D.O.M Change?

10. Add New Element Style

11. Force Element State

12. DOM Breakpoints

13. Edit Breakpoint

14. Advanced Breakpoints
Source Panel

15. I will find you and I will kill you

16. Filter By Filename
Tip: Cmd+O, (Windows : Ctrl+O), Fuzzy Matching

17. Filter For A Function Or Selector
Tip: Cmd+Shift+O, (Windows : Ctrl+Shift+O), Fuzzy Matching

18. Text Search Across All Files
Tip: Cmd+Opt+F(windows : Ctrl+Shift+F)

19. Hidden Features
in Console

20. Filtering the Displayed Object Properties

21. Log XMLHttpRequests

22. what's been happening?
https://www.flickr.com/photos/intercultura/8750597428

23. chrome.csi()

24. chrome.loadTimes()

25. Additional Network Panel Columns

26. Q & A

27. Thanks
twitter: @insanehong
email: insanehong@gmail.com

28. reference
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
https://developer.chrome.com/devtools