Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Developer Tools in Modern Browsers
Search
othree
January 12, 2013
Programming
12
7.1k
Web Developer Tools in Modern Browsers
othree
January 12, 2013
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.7k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Programming
See All in Programming
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
1
370
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
slogパッケージの深掘り
integral0515
0
120
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
130
効率的な開発手段として VRTを活用する
ishkawa
1
180
Caude codeで爆速開発
codelynx
0
100
AIのメモリー
watany
11
950
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
790
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
200
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
120
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
RailsConf 2023
tenderlove
30
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
314
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Transcript
Web Developer Tools in Modern Browsers othree @ WebConf
Past
None
None
How Developers Debugging
None
None
Problems • Only script debugging • Error messages are not
useful
The Most Powerful Debugging Function
alert
Present
Text
None
None
None
None
None
Rich Internet Applications
None
2004
None
Take Back the Web
2007
None
Firebug • First modern browser developer tool • by Joe
Hewitt
None
None
Modern Dev Tool Functions • Inspect DOM Tree • Style
Lookup • Useful Debug Message • Monitor Network • Performance Tuning • ...
Modern Dev Tools • Firebug for Firefox • Developer Tool
for Chrome/Safari • Dragonfly for Opera
None
None
None
Demo Time
One More Thing
Firebug Lite
Firebug Lite • Browser independent • Supports all major browser
including IE
Take a Look
Further Reading
Things I didn’t know about the WebKit inspector
Wait, DevTools could do THAT?
Improving Web App Performance With the Chrome DevTools Timeline and
Profiles
Using the Heap Profiler in Chrome Dev Tools
Secrets of the Chrome Developer Tools
My Workflow: Never having to leave DevTools
Documents • Console API • Command Line API • Chrome
Developer Tools • Opera Dragonfly Documentation
Questions?
me • othree • Twitter, Plurk, flickr, Github, PTT •
Blog: https://blog.othree.net • F2E at HTC
Thanks