Catching bugs with Opera DragonflyAN OVERVIEW OF OPERA'S DEVELOPER TOOLS

Patrick H. Lauke / Özgür Web Teknolojileri Günleri / Istanbul / 19 October 2012

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 3 release channels

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 what's 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 style● network options

resources

profiler

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

remote debugging

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

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, … )

UPnP

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

want to know more?

my.opera.com/dragonfly/blog

github.com/operasoftware

operaturkiye.net

www.opera.com/developerpatrick.lauke@opera.com