Opera Dragonfly is a web developer tool included in the Opera browser that allows inspection of pages, debugging of JavaScript, monitoring of network activity, and profiling of page performance. It provides features like DOM inspection, breaking on breakpoints and events, console access, and remote debugging capabilities. Dragonfly aims to help developers debug issues in both code and performance of a page using features optimized for rapid development.

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