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

Web Developer Tools in Modern Browsers

Avatar for othree othree
January 12, 2013
Programming
7.2k
12

Web Developer Tools in Modern Browsers

Avatar for othree

othree

January 12, 2013

More Decks by othree

See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
Avatar for othree othree
1
2.3k
WAT JavaScript Date
Avatar for othree othree
3
2.2k
Modern HTML Email Development
Avatar for othree othree
3
2.8k
MRT & GIT
Avatar for othree othree
1
2.4k
YAJS.vim and Vim Syntax Highlight
Avatar for othree othree
1
3.1k
Web Trends to 2015
Avatar for othree othree
4
360
Transducer
Avatar for othree othree
9
3.2k
HITCON 11 Photographer
Avatar for othree othree
4
540
fetch is the new XHR
Avatar for othree othree
6
3.6k

Other Decks in Programming

See All in Programming
Deep dive into the select statement (GopherCon UK)
Avatar for Jesús Espino jespino
0
170
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
140
[PyCon KR 2026] More Variants, More Diversity for AI Accelerators
Avatar for Joongi Kim achimnol
0
130
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
540
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
160
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
260
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
140
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
420
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
110
My Marp Sample
Avatar for Shota Inoue sinoue0108
0
140
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
9.9k
30年振りにコンパイラの定数整数除算を改善した
Avatar for herumi herumi
9
4.4k

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
260
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.7k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
490
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
680
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k

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