Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012

3,955 views
3,847 views

Published on

http://www.ozgurwebgunleri.org.tr/2012/

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,955
On SlideShare
0
From Embeds
0
Number of Embeds
195
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012

  1. 1. Catching bugs with Opera DragonflyAN OVERVIEW OF OPERAS DEVELOPER TOOLS Patrick H. Lauke / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
  2. 2. www.opera.com/developer/tools
  3. 3. www.opera.com/dragonfly
  4. 4. Opera Dragonfly● “HTML5 web application”● uses application cache (needs one-time load)● rapid release cycle with 3 release channels
  5. 5. my.opera.com/dragonfly/blog
  6. 6. github.com/operasoftware/dragonfly
  7. 7. documents
  8. 8. ● shows the DOM, not the source
  9. 9. ● node selection and properties● editing nodes, changing styles● event handlers
  10. 10. scripts
  11. 11. JavaScript debugging● syntax errors are “simple” – throw errors
  12. 12. JavaScript debugging● more insidious: logic errors● difficult to see whats going on inside script
  13. 13. alert( … )
  14. 14. console
  15. 15. ● breakpoints: line, conditional, event, function● explicit debugger statement
  16. 16. ● console in scope
  17. 17. ● dynamic value inspection
  18. 18. ● function return values
  19. 19. network
  20. 20. ● activity on load and after page loaded● graph view (waterfall) and data view● filtering● make request – curl style● network options
  21. 21. resources
  22. 22. profiler
  23. 23. ● first debug tool to have profiler● shows internal processes of the browser● mainly CSS profiling at the moment● useful for performance optimisation(particularly on slow devices)
  24. 24. remote debugging
  25. 25. ● first debug tool to have remote debugging● other browsers now catching on● others limited, require USB/ADB, extra app
  26. 26. people.apache.org/~pmuellr/weinre
  27. 27. hacks.mozilla.org/2012/08/...
  28. 28. developers.google.com/chrome-developer-tools/docs/remote-debugging
  29. 29. html.adobe.com/edge/inspect
  30. 30. www.opera.com/developer/tools/mobile
  31. 31. why emulate?● real touch events● viewport● reacts correctly to media queries (device-pixel-ratio, device-width, … )
  32. 32. UPnPmy.opera.com/dragonfly/blog/2012/04/13/...
  33. 33. want to know more?
  34. 34. my.opera.com/dragonfly/blog
  35. 35. github.com/operasoftware
  36. 36. operaturkiye.net
  37. 37. www.opera.com/developer patrick.lauke@opera.com

×