Christian Krebs by Christian Krebs in Blog

Post tags: dragonfly inspect

This post is licensed under a Creative Commons Attribution 3.0 Unported license.

More dynamic JavaScript value inspection

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 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!