My Opera
More dynamic JavaScript value inspection
By Christian Krebsaleto. Tuesday, January 24, 2012 4:53:51 PM
In our latest experimental build we have improved the tooltips in the JavaScript source view. Normally, inspecting a value should not change the current state in any way. For that reason, we never included parentheses in the automatic detection and selection of a value to prevent function calls. Now you can control this behaviour: if you hold the
For example, for a code fragment of
With
Additionally you can select any text, hold down the
Selection now also works over several lines.
We have also added a new tooltip for all JavaScript inspections. For properties of type
If you hover the pretty-printed tooltip of an element, the according node in the document gets scrolled into view and highlighted.
This is all available on experimental now. Take a look and tell us what you think!
shift key while hovering over the JavaScript source, parentheses will be included.For example, for a code fragment of
ele.getElementsByTagName('ul')[0], you normally get a generic tooltip for the [0] array when hovering over the square bracket.With
shift, the automatic selection will also include the parentheses and you will now get a tooltip relating to the evaluated selection — in this case, the first ul element in the ele object.Additionally you can select any text, hold down the
shift key, and get a tooltip with the according evaluated value. Selection now also works over several lines.
We have also added a new tooltip for all JavaScript inspections. For properties of type
object we show the according class. If you now hover over the class name of any Element, Function, Date, RegExp, Error and Exception, you will get a tooltip with a pretty-printed representation. This also works on top of an other tooltip: If you hover the pretty-printed tooltip of an element, the according node in the document gets scrolled into view and highlighted.
This is all available on experimental now. Take a look and tell us what you think!
Eli Mitchellcyberstream # Tuesday, January 24, 2012 6:00:21 PM
Edit: I've been playing more with this, and it is AMAZING! It makes script debugging incredibly easier! Thank you so much!!!!
d4rkn1ght # Tuesday, January 24, 2012 6:03:15 PM
Unregistered user # Tuesday, January 24, 2012 6:48:33 PM
D1sasterp1ece # Wednesday, January 25, 2012 12:10:31 AM
Ayrton Nádgelayrtonnadgel92 # Wednesday, January 25, 2012 1:45:40 AM
Cutting Spoonhellspork # Wednesday, January 25, 2012 4:13:19 AM
Second, "Yo dawg I heard you like tooltips. So we put a tooltip in your tooltip." NICE
Third, I'm wondering if you folks have had a look at that crazy idea for a 3d debug view. Something the guys at Mozilla are trying to promise, like an exploded view for repairing an engine. Honestly it will just be gimmick most of the time....but it could be really nice in the context of idiotic transparent elements covering the part you want to select...I wonder how much work it would take to integrate that sort of WebGL rendering context.
svdb0 # Thursday, January 26, 2012 8:51:47 PM
Is there a way to reduce the time before the tooltips appear?
Also, it would be nice if we could also add pretty-printing for our own objects. Perhaps also call toString() when the shift is held?
Constantine Vesnac69 # Tuesday, January 31, 2012 7:58:09 PM
Daniel Herzogdanfoooo # Wednesday, February 1, 2012 10:04:46 AM
The network update also has it's own blogpost now: http://my.opera.com/dragonfly/blog/an-update-on-network-and-color-values-in-css
Constantine Vesnac69 # Wednesday, February 1, 2012 6:00:29 PM
Network thread became much more responsive now (it looks like there is now a delay before popup will follow the mouse).
Scrolling in JS inspection is still problematic. I am inspect google +1 script, presumably ( https://apis.google.com/_/apps-static/_/js/widget/gcm_ppb,googleapis_client,plusone/rt=j/ver= ... /d=1/ ). It is 30 KB of minified JS, though. So, i tested other pages. Same effect.
Once your live inspection popup has enough content and scrollbars appear - it start to lag. You rotate the wheel, slider slowly moves (0.3-0.5 seconds, visually), and then jumps to the place where it should be.
* this is nothing critical, just annoying.
Constantine Vesnac69 # Wednesday, February 1, 2012 6:05:14 PM
Unregistered user # Thursday, February 9, 2012 4:22:11 AM
Chairul Adli Muhammaddown2down # Saturday, March 3, 2012 4:33:38 AM
Cutting Spoonhellspork # Saturday, March 3, 2012 5:47:31 AM
Or if you press Shift-F12 and go into Buttons, you can put a Dragonfly button in the browser.
Dragonfly is built into Opera Desktop browser, but can also be used to control phones and TVs for testing. There are several versions but most people should use default (newest safe version downloads every time you open Dragonfly).