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

Web Developer Tools in Modern Browsers

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
January 12, 2013
Programming
12
6.8k

Web Developer Tools in Modern Browsers

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

January 12, 2013
Tweet

More Decks by othree

See All by othree
WAT JavaScript Date
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
3
1.6k
Modern HTML Email Development
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
3
2.4k
MRT & GIT
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
1.5k
YAJS.vim and Vim Syntax Highlight
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
2.1k
Web Trends to 2015
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
260
Transducer
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
9
2.5k
HITCON 11 Photographer
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
360
fetch is the new XHR
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
6
3.3k
TypeScript, future and past
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
2
2k

Other Decks in Programming

See All in Programming
#JJUG_CCC 「サポート」は製品開発？　- JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
244963b5eab1dd775692490daea81a7f?s=48 cdataj
0
420
Licences open source : entre guerre de clochers et radicalité
323bb1cb39e6478e559b6e13d2fdf518?s=48 pylapp
2
510
[DevTrends - Jun/2022] Arquitetura baseada em eventos
36489105af6ebd101e8f250e537e70d3?s=48 camilacampos
0
150
Jetpack Compose, 어디까지 알고 있을까?
4d4d46ec84935e69f6f63b011873335d?s=48 jisungbin
0
120
Springin‘でみんなもクリエイターに！
000064025fd47aaaeda16b914f44cc79?s=48 ueponx
0
220
マルチプロダクト×非構造化データ×機械学習を支えるデータ信頼性
9b95bbde8856da418c299333b312da3f?s=48 akino
0
150
GoogleI/O2022 LT報告会資料
2bd3b8c3550384ab61d671b673c119bb?s=48 shinsukefujita1126
0
360
Node-RED 3.0 新機能紹介
A56269ca269966f71293d08b32ad53b3?s=48 utaani
0
140
オブジェクト指向で挫折する初学者へ
Dde759e35b9d62d448b3924502750a31?s=48 deepoil
0
170
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
240
開発速度を5倍早くするVSCodeの拡張機能を作った
D7da604883d0056673358ed111aa9ec3?s=48 purp1eeeee
2
160
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか？
70be36c6f5871b4f2d238f96587ffeb3?s=48 miiiki
0
120

Featured

See All Featured
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
11k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
9.2k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k

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