A Christmas Present from the Opera Dragonfly Team!

By Divya Maniannimbupani. Wednesday, December 7, 2011 4:26:03 PM

, , ,

The team has been hard at work to deliver a nice christmas present for developers! We have an experimental release ready for you to try out (change the URL in opera:config#DeveloperTools to point to https://dragonfly.opera.com/app/stp-1/experimental/) and make it run on Opera Next. Let’s see what you get:

Better Network Data

Network performance is the first website optimization you should do, and the Opera Dragonfly team has been hard at work to make this even better! You now get a better overview of all the resources as they get loaded, including graphs of how each resource loads and data on the time spent.

Do note that this UI is far from final, and we await your feedback to iterate over it.

Script Tooltips

I mentioned on the previous post that we have tooltips that display when you hover on a JavaScript object. It has now been integrated (and with better styles!) which you can see in action in this build.

CSS Shorthands

There are more fixes for CSS shorthands, the default values are no longer shown for font and background properties. You can now have an easier time debugging CSS!

I have included here a video demonstration of how both these features would work for you:

This build includes all the recent changes except the profiler in one neat new package. Hope you have fun exploring and debugging your webpages with Dragonfly! Do let us know if you come across any issues!

What's New in Opera Dragonfly with Opera NextMore dynamic JavaScript value inspection

Comments

d4rkn1ght Thursday, December 8, 2011 4:51:11 PM

Fantastic! yes cheers

BLOBO Thursday, December 8, 2011 5:35:40 PM

Good job :>

mubaidr Thursday, December 8, 2011 5:56:53 PM

spock

RobMintsoft Thursday, December 8, 2011 6:35:49 PM

A significant improvement!

I get a horizontal scrollbar on the stylesheets selector on this page (1280x800: http://files.myopera.com/Mintsoft/Screenies/HorizScrollWhy.png)

I can see there'll be issues if you include a file called the same thing on multiple servers, you can't tell between them without clicking on them (for example static.server.com/css/main.css and dyn.server.com/css/main.css) as they'll both show up as "main.css".

Is there any intention to address: http://my.opera.com/community/forums/topic.dml?id=1084772

Daniel Herzogdanfoooo Thursday, December 8, 2011 8:55:44 PM

Thanks for all the layout bugs, this is an early preview and it will be adressed.

Originally posted by Mintsoft:

I can see there'll be issues if you include a file called the same thing on multiple servers, you can't tell between them without clicking on them



The tooltips should help there quickly, no? This is currently done with those in mind that know the site they're debugging, but we might change it so its easier to distinguish.

Originally posted by Mintsoft:

Is there any intention to address: http://my.opera.com/community/forums/topic.dml?id=1084772



I didn't realize how popular that request is, it probably should then.

sirnh1 Thursday, December 8, 2011 10:10:11 PM

This dragonfly version is acting up a bit on http://ie.microsoft.com/testdrive/Views/SiteMap/

1) Go the http://ie.microsoft.com/testdrive/Views/SiteMap/
2) Go to the network tab
3) Click the 'reload' buton
4) dragonfly will reload the page, switch to the script tab and show this screen: screenshot
Clicking the 'reload' button, will reload the page and show the same message again...

This doesn't happen for me with the current stable version of dragonfly...

Unregistered user Friday, December 9, 2011 3:28:43 AM

匿名者 writes: please add image viewer and content viewer in network resource panel thank you

QuHno Friday, December 9, 2011 6:42:43 AM

... after the small buglets are gone I just need a script profiler that tells me which part of a script eats up the most time during execution (may be with set points for timers) to be perfectly happy bigsmile

JanGen Friday, December 9, 2011 10:38:11 AM

and make it run on Opera Next.



What are the drawbacks of making this run on Opera 11.60 stable?

RobMintsoft Friday, December 9, 2011 12:14:19 PM

Originally posted by danfoooo:

The tooltips should help there quickly, no? This is currently done with those in mind that know the site they're debugging, but we might change it so its easier to distinguish.

You're right, I didn't notice the tooltips. They only come up when the mouse is over the entire filename, is there any plan to make this when you're over the "cell" that contains it? It might make it a bit more obvious then?

Originally posted by danfoooo:

I didn't realize how popular that request is, it probably should then.

Wonderful smile

Constantine Vesnac69 Friday, December 9, 2011 11:27:02 PM

New network tab is VERY ugly bigsmile but even in such state it gives so much more data, and content groups are very nice, too.

.woff fonts have icon now! but data-uri images still don't have any status code. Same with cached content. Google.com network activity (with site image loading) - is logged in a very weird and wrong way. Code 204, 0 byte responses, and data-uri images from nowhere.

Live inspection of variables is simply great. (But now, i see even more reason to add js beautifier to script tab).

Search in Requests tab is ok, but a reducing Filter (like in Styles) instead - would fit way better.

As for hiding full urls ... dunno. From my experience, ability to see full request urls is needed very often, 'coz you can then compare substrings of GET requests.

Same with hiding status codes. Three symbols do not take much space.

QuHno Sunday, December 11, 2011 11:33:12 AM

Originally posted by c69:

(But now, i see even more reason to add js beautifier to script tab)


+1

Eli Mitchellcyberstream Saturday, December 17, 2011 7:23:46 PM

Very nice! I love the improvements you have been making.

However, is it necessary to use Opera Next? It seems to be working fine in 11.60.

Eli Mitchellcyberstream Sunday, December 18, 2011 5:02:06 AM

Something I find extremely annoying in the console is that when you enter multiple lines of code, a dotted box appears and there is no way that I've found to execute the code then. Am I missing something or is Dragonfly missing something?

David Håsätherhzr Monday, December 19, 2011 7:24:33 AM

Originally posted by cyberstream:

Something I find extremely annoying in the console is that when you enter multiple lines of code, a dotted box appears and there is no way that I've found to execute the code then. Am I missing something or is Dragonfly missing something?

That means that you are in multiline mode. You can switch this by Shift-Enter. While in multiline mode, you can submit by Ctrl/Cmd-Enter.

Eli Mitchellcyberstream Monday, December 19, 2011 6:55:40 PM

Thanks, that fixes my problem!

Unregistered user Wednesday, December 21, 2011 6:10:04 PM

CSS developer writes: Is there way to save changed CSS result to file? I can't work with dragonfly anymore because this ability disappeared.

Spadar ShutSpShut Friday, December 23, 2011 10:13:11 AM

Now in background and border properties there's no color picker.

Jimtoyotabedzrock Friday, December 30, 2011 2:13:56 AM

Firefox has a new set of built in developer tools with some unique features in the Nightly.

JanGen Tuesday, January 3, 2012 12:42:41 PM

What happened to the forum?
link in sidebar is dead:
http://dev.opera.com/forums/forum/11057

Constantine Vesnac69 Wednesday, January 4, 2012 7:38:19 PM

@JanGen
http://my.opera.com/community/forums/tgr.dml?id=2157

Patrick H. Laukepatrickhlauke Sunday, January 8, 2012 2:08:19 PM

Originally posted by JanGen:

What happened to the forum?
link in sidebar is dead:
http://dev.opera.com/forums/forum/11057

oops, it appears that was caused by the recent dev.opera redesign - a missing rewrite/redirection rule. i've fixed the sidebar in the meantime (but basically, the old dev.opera.com/forums have been moved back to their original location). the correct path to the Opera Dragonfly discussions is http://my.opera.com/community/forums/forum.dml?id=11057

Constantine Vesnac69 Tuesday, January 17, 2012 8:27:48 PM

Chinese New Year is coming soon. We need a new dose present drunk

p.s.: i must admit, being able to inspect live variables revolutionized bug hunting in my team.

5h4d0w Wednesday, February 8, 2012 4:57:49 PM

you know, i really like dragonfly but one thing that still keeps me from switching from using FF with firebug is the fact that one can't just hover over pretty much any variable and get the current value. that is the most essential feature of a debugging tool to me.

Write a comment

New comments have been disabled for this post.

Next builds

New features are added to the experimental branch as soon as they're ready. Once tested, they move to the cutting-edge branch as a release candidate. Unless any problems arise, they are then promoted to the stable branch.

To switch to these builds, enter the relevant URL in opera:config#DeveloperTools, save the configuration change and (re-)open Opera Dragonfly.

Useful resources

Source code

Bug reports / feature requests