Early look at upcoming features: "pretty print", function return values, UPnP

, , , ,

The blog may have been a bit quiet in recent weeks, but the Opera Dragonfly team has certainly not been idly sitting around twiddling their thumbs. There are some nice little features being worked on behind the scenes, but unfortunately they're not quite ready to be pushed to the experimental channel just yet, as they require actual changes to the underlying browser architecture itself...but here's a short video teaser, where I run through some of the new features in what we call a GOGI build. You'll notice that the interface of these builds is very spartan, to say the least, but we use these builds internally at Opera to test core functionality, before any of the regular browser UI is applied.

The three features showcased in this video are:

  • "pretty print" functionality to reformat JavaScript – particularly useful when analysing and debugging minified scripts
  • an enhancement to the JavaScript inspection panel, which now shows any functions that executed – and their return values – when stepping through code in the debugger
  • improved remote debugging workflow using UPnP (Universal Plug and Play) to automatically find instances of Opera Dragonfly listening on the local network, without the need to enter manual IP addresses in opera:debug

We can't make any promises as to when you're going to start to see these features appearing in an experimental build, because of the underlying core browser changes that are required. Nonetheless we're very excited to be showing you these features at this early stage, and we'd really welcome your feedback and suggestions. Thank you.

Latest stable release with recent enhancementsNew stable release with improved color picker

Comments

Martin KadlecBS-Harou Friday, April 13, 2012 1:42:35 PM

Firstly, let me say that all these three new features are really really great and I'm looking forward to try them! party

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line and not on the new line. JavaScript is not C++. up

Also, it would be nice to have tooltip on the line numbers (when pretty print is active) to see the original line number. idea

Spadar ShutSpShut Friday, April 13, 2012 2:00:24 PM

Originally posted by BS-Harou:

Also, it would be nice to have tooltip on the line numbers (when pretty print is active) to see the original line number.


Probably this could be useful, but it seems to me that original line number most of the time will be equal to 1 smile

D1sasterp1ece Friday, April 13, 2012 2:12:54 PM

Awesome!
It's just that we may not see this in a regular build soon, because it certainly got my interest.

QuHno Friday, April 13, 2012 2:47:24 PM

Originally posted by BS-Harou:

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line and not on the new line. JavaScript s not C++.


+1
may be we can get the same settings for braces like in the classic Javascript beautifier?

Christian Krebsaleto Friday, April 13, 2012 3:48:59 PM

Also a feature which is not mentioned, i think: it has a smart pretty-print option, which means that only minified scripts will be pretty-printed, all other scripts will not be changed.

Rafald.i.z. Friday, April 13, 2012 4:00:45 PM

Originally posted by BS-Harou:

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line and not on the new line. JavaScript s not C++.


I don't understand that remark about Javascript not being C++. It's a matter of style; either one of them seems to be good for any of these languages, depending on taste. smile

Originally posted by BS-Harou:

Also, it would be nice to have tooltip on the line numbers (when pretty print is active) to see the original line number.


What Spadar Shut wrote will probably be the case most often.
There is also a feature in place (wasn't mentioned in the video) that makes it possible to define a user function which will be used to determine whether script appears to be minified. Depending on the outcome of this function, the script can not be pretty-printed even if that option is enabled. That should make sure that your own scripts or just scripts that are not minified stay in their original form.

[was too late smile]

Dmitriydevote Friday, April 13, 2012 4:26:01 PM

Originally posted by BS-Harou:

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line and not on the new line. JavaScript is not C++. up


+1
Or give the option to choose the desired option

Martin KadlecBS-Harou Friday, April 13, 2012 4:47:37 PM

Originally posted by aleto:

Also a feature which is not mentioned, i think: it has a smart pretty-print option, which means that only minified scripts will be pretty-printed, all other scripts will not be changed.


But we can still click the button to get pretty print of any script, right?

Originally posted by SpShut:

Probably this could be useful, but it seems to me that original line number most of the time will be equal to 1

Originally posted by d.i.z.:

What Spadar Shut wrote will probably be the case most often.


You are right, but sometimes I might want to use pretty print on badly written javascript just to make it more readable. Then it would be really useful smile

Originally posted by d.i.z.:

I don't understand that remark about Javascript not being C++. It's a matter of style; either one of them seems to be good for any of these languages, depending on taste.


Yes and no smile I mean discussion about what is better is never ending. No matter what argument, both ways can be used in both languages without bigger problem. That's why I want a option to choose what we prefer. Anyway, there are few reasons why I believe that the "brace on new line" style is more for C++ and the other for javascript:

1) C++ use lot's of keywords and options in fn argument definition:
int MyFn( struct Person ** myPersons[][300] = (struct Person **) defaultPersons, ..............)
So the function argument definitions are often on more lines anyway and the new line for opening brace doesn't harm anyone. In javascript I almost never use more lines for the fn arguments definition.
2) C++ doesn't use braces for objects definitions. At least not in a way javascript does. So in C++ you don't have to think about whether the braces are there for block or for object definition - unlike in js.
3) Also in this video: http://www.youtube.com/watch?v=hQVTIJBZook&feature=player_detailpage#t=1843s Crockford explains another reason why the opening braces should be in js at the end of the line.

Christian Krebsaleto Friday, April 13, 2012 5:02:05 PM

Originally posted by BS-Harou:

But we can still click the button to get pretty print of any script, right?


Smart pretty-print will be an additional setting. Pretty-print on will be smart or not depending on that setting.

IllusionMH109th Friday, April 13, 2012 5:44:44 PM

Very nice changes.
Can't wait to use new inspection panel enhancement

Originally posted by BS-Harou:

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line and not on the new line.


It would be very useful

DitherDitherSky Friday, April 13, 2012 6:15:13 PM

Yay. Kudos for those new things. Was waiting for ages for something like this to appear in Opera Dragonfly.

Martin RauscherHades32 Friday, April 13, 2012 7:20:50 PM

sooo looking forward to pretty print! bigsmile

Michael A. Puls IIburnout426 Saturday, April 14, 2012 5:10:11 AM

Originally posted by BS-Harou:

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line

Hell Yeh! + 1

Constantine Vesnac69 Saturday, April 14, 2012 4:52:05 PM

+1 for 1TBS

All the new features are nice. up
Looking forward to see them in experimental builds.


p.s.: any update on Profiler build ? Chrome-like edit and ability to save changes to files ? any possibility of Animation debugger ? should we hope for a gradient editor (something like existing css color editor) ? simple wysiwyg transform editor (Adobe style) ? any debuggers for other new APIs like FileAPI, WebGL, video/audio or getUserMedia ?

MaximSailorMax Saturday, April 14, 2012 5:53:48 PM

Originally posted by BS-Harou:

BUT! Please, please give as at least option (if not default) to make the pretty print put the opening brace to the end of the line and not on the new line. JavaScript is not C++.



I am not C programmer, but I like when closing-brace is under open brace (with same count of tabs from start of line). Please, as option, not default! smile
But, based on statistic here, I am in the minority... smile

MaximSailorMax Saturday, April 14, 2012 6:06:14 PM

Originally posted by BS-Harou:

3) Also in this video: http://www.youtube.com/watch?v=hQVTIJBZook&feature=player_detailpage#t=1843s Crockford explains another reason why the opening braces should be in js at the end of the line.



Interesting, but, for me, it is just specific case... In my 10 year history I never had any problem with "bad" style in JavaScript.

Martin KadlecBS-Harou Saturday, April 14, 2012 9:58:27 PM

Originally posted by c69:

p.s.: any update on Profiler build ?


I'm also wondering. Are you waiting for some Core changes, or are you actively working on it? Some update would be nice smile

Originally posted by SailorMax:

In my 10 year history I never had any problem with "bad" style in JavaScript.


As far as you are programming alone it is ok, but you might have some trouble when you'll be programming with some else, because today most of javascript programmers are using the 1TBS style. Just look at any JS guru:

Dmitry Soshnikov, kangax, WebReflections, John Resig, Remy Sharp, Brucel Lawson, Anne van Kesteren, Nicholas Zakas, ....

Spadar ShutSpShut Sunday, April 15, 2012 6:32:34 AM

I guess the thing is filed already, but I'd welcome seeing media queries in the CSS inspector. And most important - live DOM changes like in Firebug.

FransFrenzie Sunday, April 15, 2012 9:58:08 AM

Originally posted by Spadar Shut:

And most important - live DOM changes like in Firebug.


Perhaps I misunderstand you, but isn't that what double clicking does?

Spadar ShutSpShut Sunday, April 15, 2012 6:46:07 PM

Originally posted by Frenzie:

Perhaps I misunderstand you, but isn't that what double clicking does?


I mean update and highlight the code in Dragonfly when it changes dynamically, like changing classes or style attributes.

FransFrenzie Sunday, April 15, 2012 6:56:44 PM

Ok, thanks.

MaximSailorMax Monday, April 16, 2012 8:10:59 AM

Originally posted by BS-Harou:

As far as you are programming alone it is ok, but you might have some trouble when you'll be programming with some else


Already. No problem in command smile

I think if you know the language, highlighted case is not the problem. Your choice can make your editor. But if you not fully understand the language and write your code -- yes, better use strict syntax smile This is like "Yoda conditions"...

About gurus: We don't know _when_ our gurus start using this syntax... wink

SteveKong Monday, April 16, 2012 8:12:21 PM

Great changes! I am looking forward to see them appear in public!

Question: Being familiar with Smalltalk Debuggers I wonder whether some of their features could make it in some form to Dragonfly:
1. Step execution that performs only one function invocation / operator execution at a time instead of a complete line of code.
2. Current execution stack that shows all stack values, i.e. function arguments, and thus (together with 1.) all intermediate results of nested calls.

However, keep up the great work! up

Witold Barylukmovax Wednesday, April 25, 2012 3:42:14 AM

Cool!

Personally would rather like to have opening curly brace {, on same line as whetever is before it (for,while,do,function,try,if,else,catch,finaly). I hate { on separate line (with some very rare exceptions, like long function argument list). I think having { on same line is standard in Java and JavaScript, so keep it so.


Really like UPnP. If you have time please make sure IPv6 works! smile

David Håsätherhzr Wednesday, April 25, 2012 12:03:38 PM

Originally posted by c69:

p.s.: any update on Profiler build ?

It's being worked on again.

And braces are now on the same line!

JanGen Friday, May 4, 2012 3:15:18 PM

Nice to see DF improve.

I still want get some attention to some requests I once made:
http://my.opera.com/community/forums/topic.dml?id=903831
and
http://my.opera.com/community/forums/topic.dml?id=903851

Would be nice to be able to select/deselect any resource for reloading or set a wait (load after ? second) on it, to test performance and see what's happening when a resource is not available, or change/force the order of loading of resources.

That will cover things like:
https://twitter.com/#!/drewm/status/194141273572114433
or what happens when a resource is not available.

The possibility to block remote and add local resources (hope the file-api will make this possible) will help enormously in debugging, with problems like here:
http://my.opera.com/hallvors/blog/2012/03/20/debugging-maps-google-maps

Because you could stop loading from the web but instead load the file (reformatted/corrected) locally. And you can inject jquery or whatever.
In general most technology is there, userJS, userCSS, content-blocking, but to manage it on the fly from Dragonfly would be really powerful IMHO.

What do you think?

Martin KadlecBS-Harou Friday, May 4, 2012 4:08:19 PM

Constantine Vesnac69 Friday, May 4, 2012 5:01:50 PM

Lol, it have been just 1 year. This kid is quite dangerous! Happy Birthday, Musical Insect ! Evolve further, evolve faster cheers

Saidkumo99 Friday, May 4, 2012 6:11:12 PM

I'm working mainly on css files and I would like more feature to make working on css files fast and easy.

Two features that I like in Firefox firebug and Chrome is you can add a new css property easily by just double clicking under the last property, and the ability to create a new style for an element.

Also Firebug style colors are more visible:
- ID/Class in black,
- css properties in green,
- css values in blue
in Dragonfly you use blue for both id/class and properties which is bit confusing. The tabs grey color looks fancier but in terms of visibility it is not a good choice.

I would like also if I could disable many features I do not use or rarely use like "Utilities" or "Console" or the "filter" option under "Styles" tab.

thanks

QuHno Friday, May 4, 2012 9:54:25 PM

Originally posted by kumo99:

(...) add a new css property easily by just double clicking under the last property, and the ability to create a new style for an element.


just double click the property of the element where you want to add something and hit return: voilà, a new line and you can type what you want.
clicking somewhere else leaves the edit mode, afterwards you can hover over the property and set or unset the checkbox to activate or deactivate the new rule(s).

FransFrenzie Saturday, May 5, 2012 7:21:28 AM

Originally posted by Said:

the ability to create a new style for an element.


Do you mean that some kind of selector should be automatically filled out? Or simply that "new style" at the bottom is too far off?

Originally posted by QuHno:

just double click the property of the element where you want to add something and hit return: voilà, a new line and you can type what you want.
clicking somewhere else leaves the edit mode, afterwards you can hover over the property and set or unset the checkbox to activate or deactivate the new rule(s).


In my version of DF you can also hover slightly underneath and click +?

QuHno Saturday, May 5, 2012 11:18:24 AM

Originally posted by Frenzie:

In my version of DF you can also hover slightly underneath and click +?


Yes, that too - it seems I always moved the trackball too fast, so I didn't see it (but hitting an element and double-clicking is faster for me than fine positioning the pointer anyway) ...

Like for almost all things in Opera there is more than one way to do it bigsmile

FransFrenzie Saturday, May 5, 2012 11:36:02 AM

Originally posted by QuHno:

Yes, that too - it seems I always moved the trackball too fast, so I didn't see it (but hitting an element and double-clicking is faster for me than fine positioning the pointer anyway) ...


Same here.

Saidkumo99 Saturday, May 5, 2012 1:15:45 PM

Originally posted by Frenzie:

Do you mean that some kind of selector should be automatically filled out? Or simply that "new style" at the bottom is too far off?

yes that exactly what I mean a selector should be automatically filled out. It would be better also if we could have an option to "add new style" when you right-click on a tag element in the html tree. thanks

JanGen Thursday, May 17, 2012 11:34:36 AM

Originally posted by JanGen:

The possibility to block remote and add local resources (hope the file-api will make this possible) will help enormously in debugging, with problems like here:



Well something is in the pipeline smile:
http://dev.opera.com/articles/view/new-extension-apis-screenshot-resource-loader-url-filter/

Martin KadlecBS-Harou Thursday, June 14, 2012 2:15:43 PM

What c-i do you need for the features? smile

Christian Krebsaleto Sunday, June 17, 2012 2:23:23 PM

Originally posted by BS-Harou:

What c-i do you need for the features? smile


- return values: ci 287
- UPnP: ci 316
- pretty print: ci 318

Martin KadlecBS-Harou Sunday, June 17, 2012 3:07:14 PM

Originally posted by aleto:

- return values: ci 287- UPnP: ci 316- pretty print: ci 318


Thank you for the info! smile
Waiting for return values then wink

Unregistered user Sunday, July 8, 2012 6:41:02 AM

Anonymous kid writes: good

Unregistered user Sunday, July 8, 2012 6:45:23 AM

kid writes: best on leani

Ask and i may tell anonyy Wednesday, July 11, 2012 1:07:59 PM

FAO OPERA: what can i used instead of fileshare, i needed to share some pics, that take all day to upload.?

Unregistered user Friday, August 10, 2012 12:51:24 PM

Anonymous writes: It does seem that prettification and defuscation of JavaScript is missing from most devtools. Great job for adding them!

QuHno Sunday, August 19, 2012 11:26:28 AM

Originally posted by BS-Harou:

Also, it would be nice to have tooltip on the line numbers (when pretty print is active) to see the original line number.


Always showing "Line 1" lol SCNR

But with a char/column count it would be really helpful, e.g. the error occurred in
"line 1, column 1733"
of the original script ...

Unregistered user Tuesday, August 21, 2012 4:05:08 PM

The Fity P writes: So I have a serious request. When using Dragonfly, if I select Network then chose XHR, I want to be able to see the JSON object response formated in an easily readable way in stead of a ridiculously long string.

Constantine Vesnac69 Saturday, August 25, 2012 6:46:47 PM

Originally posted by anonymous:

So I have a serious request. When using Dragonfly, if I select Network then chose XHR, I want to be able to see the JSON object response formated in an easily readable way in stead of a ridiculously long string.


its being formatted in experimental dragonfly, O12.50.
And maybe its even working in 12.01 - check it yourself.

Write a comment

New comments have been disabled for this post.