Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Developer Tools in Modern Browsers

othree
January 12, 2013
Programming
12
6.8k

Web Developer Tools in Modern Browsers

othree

January 12, 2013
Tweet

More Decks by othree

See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.2k
WAT JavaScript Date
othree
3
1.6k
Modern HTML Email Development
othree
3
2.4k
MRT & GIT
othree
1
1.5k
YAJS.vim and Vim Syntax Highlight
othree
1
2.2k
Web Trends to 2015
othree
4
270
Transducer
othree
9
2.5k
HITCON 11 Photographer
othree
4
390
fetch is the new XHR
othree
6
3.4k

Other Decks in Programming

See All in Programming
ECテックカンファレンス2023
kspace
1
320
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
110
Milestoner
bkuhlmann
1
240
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
190
Gradle build: The time is now
nonews
1
460
Workshop on Jetpack compose
aldefy
0
140
Step Functions Distributed Map を使ってみた
codemountains
0
100
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.4k
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
Cloudflare Workersと状態管理
chimame
3
480
T3 Stack and TypeScript ecosystem
quramy
3
740
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k

Featured

See All Featured
Fireside Chat
paigeccino
16
1.8k
The Invisible Customer
myddelton
113
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
Web Components: a chance to create the future
zenorocha
304
40k
A Philosophy of Restraint
colly
193
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Producing Creativity
orderedlist
PRO
335
38k
Facilitating Awesome Meetings
lara
33
4.6k
Visualization
eitanlees
128
12k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Art, The Web, and Tiny UX
lynnandtonic
284
18k

Transcript

  1. Web Developer Tools in Modern Browsers othree @ WebConf

  2. Past

  3. None
  4. None

  5. How Developers Debugging

  6. None
  7. None

  8. Problems • Only script debugging • Error messages are not

    useful

  9. The Most Powerful Debugging Function

  10. alert

  11. Present

  12. Text

  13. None
  14. None
  15. None
  16. None
  17. None

  18. Rich Internet Applications

  19. None

  20. 2004

  21. None

  22. Take Back the Web

  23. 2007

  24. None

  25. Firebug • First modern browser developer tool • by Joe

    Hewitt
  26. None
  27. None

  28. Modern Dev Tool Functions • Inspect DOM Tree • Style

    Lookup • Useful Debug Message • Monitor Network • Performance Tuning • ...

  29. Modern Dev Tools • Firebug for Firefox • Developer Tool

    for Chrome/Safari • Dragonfly for Opera
  30. None
  31. None
  32. None

  33. Demo Time

  34. One More Thing

  35. Firebug Lite

  36. Firebug Lite • Browser independent • Supports all major browser

    including IE

  37. Take a Look

  38. Further Reading

  39. Things I didn’t know about the WebKit inspector

  40. Wait, DevTools could do THAT?

  41. Improving Web App Performance With the Chrome DevTools Timeline and

    Profiles

  42. Using the Heap Profiler in Chrome Dev Tools

  43. Secrets of the Chrome Developer Tools

  44. My Workflow: Never having to leave DevTools

  45. Documents • Console API • Command Line API • Chrome

    Developer Tools • Opera Dragonfly Documentation

  46. Questions?

  47. me • othree • Twitter, Plurk, flickr, Github, PTT •

    Blog: https://blog.othree.net • F2E at HTC

  48. Thanks