Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Catching bugs with Opera DragonflyAN OVERVIEW OF OPERAS DEVELOPER TOOLS Patrick H. Lauke / Özgür Web Teknolojileri Günleri...
www.opera.com/developer/tools
www.opera.com/dragonfly
Opera Dragonfly●    “HTML5 web application”●    uses application cache (needs one-time load)●    rapid release cycle with ...
my.opera.com/dragonfly/blog
github.com/operasoftware/dragonfly
documents
●   shows the DOM, not the source
●   node selection and properties●   editing nodes, changing styles●   event handlers
scripts
JavaScript debugging●    syntax errors are “simple” – throw errors
JavaScript debugging●    more insidious: logic errors●    difficult to see whats going on inside script
alert( … )
console
●   breakpoints: line, conditional, event, function●   explicit debugger statement
●   console in scope
●   dynamic value inspection
●   function return values
network
●    activity on load and after page loaded●   graph view (waterfall) and data view●   filtering●   make request – curl st...
resources
profiler
●    first debug tool to have profiler●   shows internal processes of the browser●   mainly CSS profiling at the moment● u...
remote debugging
●   first debug tool to have remote debugging●   other browsers now catching on●   others limited, require USB/ADB, extra ...
people.apache.org/~pmuellr/weinre
hacks.mozilla.org/2012/08/...
developers.google.com/chrome-developer-tools/docs/remote-debugging
html.adobe.com/edge/inspect
www.opera.com/developer/tools/mobile
why emulate?●   real touch events●    viewport●    reacts correctly to media queries    (device-pixel-ratio, device-width,...
UPnPmy.opera.com/dragonfly/blog/2012/04/13/...
want to know more?
my.opera.com/dragonfly/blog
github.com/operasoftware
operaturkiye.net
www.opera.com/developer   patrick.lauke@opera.com
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Catching bugs with Opera Dragonfly / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012
Upcoming SlideShare
Loading in …5
×

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

4,071 views

Published on

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

Published in: Education
  • Be the first to comment

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

×