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

Web Developer Tools in Modern Browsers

othree
January 12, 2013
Programming
12
7k

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.9k
WAT JavaScript Date
othree
3
1.9k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.7k
Web Trends to 2015
othree
4
310
Transducer
othree
9
2.8k
HITCON 11 Photographer
othree
4
470
fetch is the new XHR
othree
6
3.5k

Other Decks in Programming

See All in Programming
もう僕は OpenAPI を書きたくない
sgash708
4
1.4k
Formの複雑さに立ち向かう
bmthd
1
830
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Honoとフロントエンドの 型安全性について
yodaka
6
830
Writing documentation can be fun with plugin system
okuramasafumi
0
120
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
890
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
昭和の職場からアジャイルの世界へ
kumagoro95
1
370
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
730

Featured

See All Featured
Docker and Python
trallard
44
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
A better future with KSS
kneath
238
17k
Making Projects Easy
brettharned
116
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Bash Introduction
62gerente
611
210k
4 Signs Your Business is Dying
shpigford
182
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k

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