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
6.9k
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
1.6k
WAT JavaScript Date
othree
3
1.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
1.8k
YAJS.vim and Vim Syntax Highlight
othree
1
2.4k
Web Trends to 2015
othree
4
280
Transducer
othree
9
2.6k
HITCON 11 Photographer
othree
4
450
fetch is the new XHR
othree
6
3.4k
Other Decks in Programming
See All in Programming
開発者体験を変えるInfrastructure as Codeの新機能6選!
konokenj
4
840
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
310
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
22
11k
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
4
810
Learning Ruby
okuramasafumi
5
370
Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
820
LPIXEL×CADDi_kaerururu
kaerururu
2
260
Material 3で Material 2ぽい見た目にする
numeroanddev
2
220
decksh - a little language for decks
ajstarks
4
18k
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
170
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Product Roadmaps are Hard
iamctodd
43
9.6k
Writing Fast Ruby
sferik
619
59k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Into the Great Unknown - MozCon
thekraken
10
810
Git: the NoSQL Database
bkeepers
PRO
421
63k
Building an army of robots
kneath
300
41k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
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