by Krzysztof Szafranek on Frontend DEV Conf'13 http://bit.ly/Krzyszof_Szafranek

1. Getting the Most
out of
Your Tools
Krzysztof Szafranek
@szafranek

2. 2000

3. 2000

4. 2001

5. 2001

6. Joe Hewitt
A man who single-handedly did more for web developers than any other individual.

7. 2006

8. 2013

9. Style Editor
JS Debugger
JS Profiler
JS Console
DOM Inspector
Networking

10. CSS profiler
Responsive & 3D
Rendering tools
Scriptable cmd line
Memory profiler
Performance audit

11. Firebug

12. Console API

13. debugger

14. Style tracing

15. CSS editing

16. Back/Forward
Cache

17. Firefox dev tools

18. Firefox Nightly

19. The old new tools

20. 3D view

21. Responsive view

22. Repainting

23. Font explorer

24. Command line

25. screenshot ~/Downloads/screen.png --fullpage

26. jsb http://www.google-analytics.com/ga.js
Pretty print + editing!
Note: To add a variable in the current window, remember to prefix it, e.g.:
window.myCustomFunction

27. Editor integration
http://paulrouget.com/e/devtoolsnext/

28. Web Inspector

29. Chrome Canary

30. Editor integration
http://sokolovstas.github.io/SublimeWebInspector/

31. Pretty print

32. Pretty print

33. Live editing

34. Memory profiling

35. Audits

36. Remote debugger

37. FPS counter
about:flags
For hardware accelerated elements (WebGL, CSS transforms)

38. about:tracing
html5rocks.com/en/tutorials/games/abouttracing

39. Want more?

40. Jan Odvarko
@janodvarko
softwareishard.com

41. Paul Rouget
@paulrouget
paulrouget.com

42. Paul Irish
paulirish.com
@paul_irish

43. @addyosmani
Addy Osmani
addyosmani.com

44. Thank You!
@szafranek

45. Photo credits:
FranksValli
Gene Hunt
williamcromar