Dart Dev Tools allow optional exposure to Internet

[sionicion]

Unless it is already possible to do, can we get an option to expose Dart DevTools to the Internet? Right now I'm using code-server which works great for me, but Dart DevTools will open a random port on localhost that I can't access. So I specified a port into VSCode, but unfortunately I can't see the port outside the localhost, and I'm not entirely sure on this, but I think I also need the hostname to be declared. All the links inside DevTools specify 127.0.0.1:port/.. so even if I got it exposed, I think it wouldn't work still.

It'd be great to be able to access it in use-cases where you are working remotely.

[DanTup]

Thanks for the request! This is something that would need to be supported by DevTools so this would need to be raised at https://github.com/flutter/devtools.

Some things to be aware of though:

1. Exposing the DevTools app would not allow you to debug anything remotely, as it's just a static website. All the interaction comes from connecting it to a VM service, so you would need to also have exposed the VM service.
2. There are security implications in exposing the VM service as anyone that can connect to it can execute arbitrary code on the machine/device hosting the VM.
3. The VM service protocol won't accept connections from any origin other than localhost so if DevTools was running on a host other than localhost

The easiest way to handle this would be to tunnel ports (this is how things work on ChromeOS), but it's hard to give any specifics without knowing more about your use case.

Are you doing Dart or Flutter? What OSes are your local/remotes? How are you connecting them? Would VS Code's remote dev work? (there are some issues right now, but I hope to fully support that for running connected to a remote machine).

[sionicion]

Ah, I see I posted in the wrong place, I also see they have raised the same issue over there. But to provide some info, my current configuration is newly in place.

I have a local Ubuntu system that hosts code-server, I can connect to it right from the browser. I also have the Ubuntu system setup to host a VPN, which comes handy to debug Flutter apps. I can turn on the VPN on my phone, and then ADB into it right from code-server in the browser, since the phone is now on the VPN network (as long as ADB stayed in WiFi mode).

I'm not too familiar with tunneling ports but if a VPN is involved and the VPN is running on the remote system itself, I guess there probably is a way to get that to work.

[sionicion]

I was able to tunnel ports through SSH for using code-server, and I did get it to work, but only once, and then it stopped working oddly. I don't know if it's because I was using the ports and it made dev tools confused when it tried using the ports, not really sure. It doesn't help that it randomizes ports and I tried setting the ports in the extension settings but I don't think it respected that so maybe there was an error, I didn't manually start dev tools in the command line to see one.

I tried VS Code's remote SSH, which was really easy to get setup, and it does easily let you tunnel ports right through VS Code. But I wasn't able to figure out the VM port. And clicking on open dev tools didn't do anything, I had to hover over it to see the port in the link but it didn't show the full URL. Since you said you plan to support it, I did some digging and found something that hopefully could be of help. I linked to it, but it says it is possible to do automatic port forwarding, I think this might simplify opening Dev Tools from within VS Code.

https://code.visualstudio.com/api/advanced-topics/remote-extensions#opening-something-in-a-local-browser-or-application

[DanTup]

I think VS Code remoting is probably the way to go. It would definitely make more sense for us to officially support that than to start exposing things that might have security implications.

Right now you'll likely need to run the "forward port" command and select the VMs port to forward too (I think the command lists all bound ports, so it should show up in the list). I've opened microsoft/vscode#74258 to try and get an API to map ports so we can do this automatically, but no response yet (add a 👍 !).

Let me know if there's anything you think we should do here, or whether the above works for you (except for the niggle of having to manually forward the VM port). If not, I can do some testing.

[DanTup]

@sionicion if the issue linked above is done, and we can fix things so that the VM and DevTools are correctly mapped when using VS Code remoting, do you think that supports your use case, or do you think we still need something else?

(Also, are you doing Flutter or just Dart? If Flutter, how are you dealing with connecting to a device/emulator from the remote?)

[sionicion]

Yes I think it would support it, personally an integrated Flutter Outline would be great but as DevTools grows, I'm sure it'll make up for it. Do you think DevTools could ever be embedded in like a web frame in VSCode?

Right now I'm able to VPN my phone in, as long as ADB has stayed in wireless mode, I can access it by starting a terminal in the VSCode and ADBing in, then I can debug. My phone is Android though, I'll have an iPad here soon so I thumbs-upped #15072 because Flutter can't currently wirelessly debug on iOS like it can with Android. Until that gets resolved, I'll have to plug the iPad into my MacBook instead of using my dev server to do the heavy lifting.

[DanTup]

personally an integrated Flutter Outline would be great but as DevTools grows

I think Outline would fit better inside the editor, since you'd probably want it without having to have a debug session. There are two ways of delivering Flutter Outline in VS Code, but both are blocked by VS Code issues. Building our own tree is blocked on several issues (see #605) and adding it to the native Outline view is blocked by it messing with the symbol list (see microsoft/vscode#51332).

Do you think DevTools could ever be embedded in like a web frame in VSCode?

Potentially. It's something in our mind. Right now it's less useful because you can't tear iframes out onto a second monitor, however if VS Code gets multi-mon support it'll become significantly more attractive. I've done a little testing with this, but not much. I'm also aware someone on the VS Code team is playing around with using headless Chrome to make the experience of web views work better.

Right now I'm able to VPN my phone in, as long as ADB has stayed in wireless mode, I can access it by starting a terminal in the VSCode and ADBing in, then I can debug.

Waaaait, ADB supports WiFi? This might unblock a few things using containers - I will have to do some testing!

iOS is a bit more complicated, as VS Code remote doesn't support it as an SSH target (see microsoft/vscode-remote-release#24).

I'll close this since I think VS Code remote is the way to go, and we should push on the outstanding issues/blockers for that to support this. Feel free to shout if you think there's something else to do here (and feel free to raise issues against the Remote support if we don't already have them if you try it out).