How to use Web Inspector at ToolCon 2014

1,368 views

Published on

web inspector tips

Published in: Software

How to use Web Inspector at ToolCon 2014

  1. 1. Web Inspector? How to use insanehong@FRENDS
  2. 2. @insanehong NAVER Labs / 시스템스 컴퓨팅G http://insanehong.kr http://about.me/insanehong 김덕홍 / FRENDS
  3. 3. Amazing https://www.flickr.com/photos/cayusa/2962437091 !
  4. 4. SHUT UP AND TAKE MY TIPS
  5. 5. [명사] (실용적인, 작은) 조언 https://www.flickr.com/photos/tigerpixel/3488935627
  6. 6. Dock-To-Right For Vertical-Split Editing 어! 그거 어떻게 옆에 나와요?
  7. 7. Dock-To-Right For Vertical-Split Editing Long Click
  8. 8. Who? Where? Why? D.O.M Change?
  9. 9. Add New Element Style
  10. 10. Force Element State
  11. 11. DOM Breakpoints
  12. 12. Edit Breakpoint
  13. 13. Advanced Breakpoints Source Panel
  14. 14. I will find you and I will kill you
  15. 15. Filter By Filename Tip: Cmd+O, (Windows : Ctrl+O), Fuzzy Matching
  16. 16. Filter For A Function Or Selector Tip: Cmd+Shift+O, (Windows : Ctrl+Shift+O), Fuzzy Matching
  17. 17. Text Search Across All Files Tip: Cmd+Opt+F(windows : Ctrl+Shift+F)
  18. 18. Hidden Features in Console
  19. 19. Filtering the Displayed Object Properties
  20. 20. Log XMLHttpRequests
  21. 21. what's been happening? https://www.flickr.com/photos/intercultura/8750597428
  22. 22. chrome.csi()
  23. 23. chrome.loadTimes()
  24. 24. Additional Network Panel Columns
  25. 25. Q & A
  26. 26. Thanks twitter: @insanehong email: insanehong@gmail.com
  27. 27. reference https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1 https://developer.chrome.com/devtools

×