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.1k
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.2k
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
530
fetch is the new XHR
Avatar for othree othree
6
3.6k

Other Decks in Programming

See All in Programming
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
410
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
1
1.4k
New "Type" system on PicoRuby
Avatar for pocke pocke
1
410
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
520
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
770
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
OSもどきOS
Avatar for Sora Arakawa arkw
0
370
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
Avatar for TOMIKAWA Sotaro ssssota
3
1.9k
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.4k
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
Avatar for MinoDriven minodriven
11
4k
dRuby over BLE
Avatar for makicamel makicamel
1
260
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
570

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.8k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
330
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
320
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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