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

How to use Web Inspector at ToolCon 2014

828

Published on

web inspector tips

Published in: Software
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
828
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
1
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×