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

1. Catching bugs with Opera Dragonfly
AN OVERVIEW OF OPERA'S DEVELOPER TOOLS
Patrick H. Lauke / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012

2. www.opera.com/developer/tools

3. www.opera.com/dragonfly

4. Opera Dragonfly
●
“HTML5 web application”
●
uses application cache (needs one-time load)
●
rapid release cycle with 3 release channels

5. my.opera.com/dragonfly/blog

6. github.com/operasoftware/dragonfly

7. documents

8. ● shows the DOM, not the source

12. ● node selection and properties
● editing nodes, changing styles
● event handlers

17. scripts

18. JavaScript debugging
●
syntax errors are “simple” – throw errors

21. JavaScript debugging
●
more insidious: logic errors
●
difficult to see what's going on inside script

22. alert( … )

23. console

29. ● breakpoints: line, conditional, event, function
● explicit debugger statement

32. ● console in scope

34. ● dynamic value inspection

37. ● function return values

39. network

40. ●
activity on load and after page loaded
● graph view (waterfall) and data view
● filtering
● make request – curl style
● network options

45. resources

47. profiler

48. ●
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)

49. remote debugging

51. ● first debug tool to have remote debugging
● other browsers now catching on
● others limited, require USB/ADB, extra app

52. people.apache.org/~pmuellr/weinre

53. hacks.mozilla.org/2012/08/...

54. developers.google.com/chrome-developer-tools/docs/remote-debugging

55. html.adobe.com/edge/inspect

58. www.opera.com/developer/tools/mobile

62. why emulate?
● real touch events
●
viewport
●
reacts correctly to media queries
(device-pixel-ratio, device-width, … )

63. UPnP
my.opera.com/dragonfly/blog/2012/04/13/...

64. want to know more?

65. my.opera.com/dragonfly/blog

66. github.com/operasoftware

67. operaturkiye.net

68. www.opera.com/developer
patrick.lauke@opera.com