Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Web Developer Tools in Modern Browsers

othree
January 12, 2013
Programming
12
7k

Web Developer Tools in Modern Browsers

othree

January 12, 2013
Tweet

More Decks by othree

See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.8k
WAT JavaScript Date
othree
3
1.9k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.6k
Web Trends to 2015
othree
4
310
Transducer
othree
9
2.8k
HITCON 11 Photographer
othree
4
460
fetch is the new XHR
othree
6
3.4k

Other Decks in Programming

See All in Programming
subpath importsで始めるモック生活
10tera
0
380
Modular Monolith Monorepo ～シンプルさを保ちながらmonorepoのメリットを最大化する～
yuisakamoto
10
3.6k
Cognitoが大型アップデート！ Managed Loginとパスワードレスログインを 実際に使ってみた@しむそくRadio Special Day1
tmhirai
2
130
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
570
Gestaltung digitaler Lösungen – Produktions- oder Designprozess?
techstories
0
110
Vapor Revolution
kazupon
2
2.4k
Reckoner における Datadog Browser Test の活用事例 / Datadog Browser Test at Reckoner
nomadblacky
0
180
Jakarta EE meets AI
ivargrimstad
0
830
@nifty天気予報：フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
120
N.E.X.T LEVEL
pluu
2
210
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
100
チームにとって最適なスキルアップ施策とは何か/what-is-the-best-skill-up-approach-for-team
nobuoooo
0
160

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Scaling GitHub
holman
458
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Rails Girls Zürich Keynote
gr2m
94
13k
Writing Fast Ruby
sferik
627
61k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Documentation Writing (for coders)
carmenintech
65
4.5k
Site-Speed That Sticks
csswizardry
0
84
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
870
Teambox: Starting and Learning
jrom
133
8.8k
A Philosophy of Restraint
colly
203
16k

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