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
Infer入門
riru
4
1.4k
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
480
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
110
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
360
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
450
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
16
9.7k
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
590
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.6k
QA x AIエコシステム段階構築作戦
osu
0
260
Reactの歴史を振り返る
tutinoko
1
180
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
200
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Side Projects
sachag
455
43k
Bash Introduction
62gerente
614
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Building Adaptive Systems
keathley
43
2.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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