Inspect element support on flutter web apps

Question

I have been trying to integrate a web based product tour/on-boarding plugin which will help a new user to understand the application without any external intervention. I cam across this plugin : https://getuserflow.com/ which works well with html websites, I tried integrating this with flutter web app and it fails to detect any element as flutter doesnt support inspect using chrome for some reason.

Whenever I try to inspect a flutter web app it shows this:

It is almost impossible to inspect individual elements same as we can do on other web apps developed in angular or php.

Is there a way on flutter web to enable web inspect so that the plugin will be supported?

Solution

Inspect element works with HTML and CSS files. And flutter converts your dart code to JS, that's why we can't do inspect element.

And I don't think it is possible as of version 2.

Comments

[ch271828n]

does the devtools work? flutter.dev/docs/development/tools/devtools/inspector

[crimson suv]

Thanks for reply, Devtools is for internal inspecting, It wont solve the issue unfortunately.

[Abhilash Chandran]

No this is not possible in its current form in flutter for web. Because flutter converts your widgets into different forms of canvas and svg tags in them. It is difficult to precisely locate your respective element for a widget say a button, if thats what you are looking for. But I do believe there are such tools specifically designed for flutter. Should google it out a bit.

[Abhilash Chandran]

There are some as I found in fluttergems.dev here

[crimson suv]

Thank you guys for the suggestions and information