How to use attachInspector? Or other dev tools?

[emma]

While exploring the examples I came across attachInspector. See here.

What does the “inspector” do? I assume uncommenting that line attaches a debugger in some way or another, but I don’t see any docs on how to actually use it?

More generally, I’m looking for ways to debug (or visualize) a Lightning app. With the DOM, we can “inspect element” and see what’s going on. Would be great to have some dev tooling that meets that need in Lightning.

[eduardo.guzman]

This might be what you’re looking for. You could try giving it a shot.

How to test Lightning Application?

There is an option to make the items rendered on the canvas show in the DOM tree, but I’m uncertain of what’s the level of manipulation that can be done on them: Per the Settings documentation (https://rdkcentral.github.io/Lightning-SDK/#/plugins/settings): Key Type Description Default value inspector Boolean Whether or not initialize the Lightning Inspector (whch will render out a HTML structure inside the DOM to mimic the canvas) false This option should be enabled under the “pl…

Hope that helps!

[chiefcll]

The inspector adds this JS debugger

rdkcentral/Lightning/blob/master/devtools/lightning-inspect.js

That file converts all the canvas elements into HTML divs with corresponding w/h and x/y coordinates which are inspectable with the devtools. From there you can change properties which will be reflected in the canvas element and vice versa. You can also access the Lightning component by selecting the div and $0.element to manipulate it further.

To turn on inspector when using Lightning-SDK, add this to settings.json

"platformSettings": {
    "inspector": true
 }