Remote connection to localhost iso address of the remote server

[louisvangeldrop]

I have started from a chromebook a remote tunnel session to my pc "louis" with ip-address 192.168.0.126. Using the Devicescript extension I want to connect to my mcu-board connected to my chromebook. As a result it opens a web-site with URL: localhost:8081/connect?dark=1 I assume it should be something like: 192.168.0.126:8081/connect?dark=1

If I replace localhost with 192.168.0.126 it doesn't connect. It looks like the localhost:8081 webserver is opened with "localhost" iso "internet"

[pelikhan]

Looks like i forgot to resolve the external uri.

[pelikhan]

Try again with v2.14.13. It should already resolve a better URI from the start and try to connect. If the devtools server does not connect yet, you can try to enable the "Devtools - Internet" option in the settings.

[louisvangeldrop]

I have tried with v2.14.13, but unfortunately it still opens with localhost. Starting devs devtools src/main with --internet allows me to open the remote server, but there is no "Connect" button

[pelikhan]

Do you have repro steps for this issue?

The current solution relies on the port forwarding that gets put in place automatically when using WSL/Codespaces. I am not sure yet how to support this scenario.

Could you open the connect page JavaScript console and look at the error messages? If the icon does not load, it sounds like the jacdac-docs page failed to be downloaded.

[pelikhan]

We use asExternalUri which should take care of port forwarding; so something is going on.

[louisvangeldrop]

Started remote tunnel session. devs devtools src/main.ts --internet Open 192.168.0.126:8081 and opened the Chrome developer tab =>

Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff'. This request has been blocked; the content must be served over HTTPS. microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401:74 Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff'. This request has been blocked; the content must be served over HTTPS. Sender.js:568 POST https://dc.services.visualstudio.com/v2/track 400 _xhrSender @ Sender.js:568 _self. @ Sender.js:322 dynProtoProxy @ dynamicproto-js.js:374 _self.flush @ Sender.js:108 dynProtoProxy @ dynamicproto-js.js:374 (anoniem) @ ChannelController.js:168 _iterateChain @ ProcessTelemetryContext.js:161 (anoniem) @ ChannelController.js:163 (anoniem) @ ChannelController.js:51 HelperFuncs_arrForEach @ HelperFuncs.js:343 _processChannelQueue @ ChannelController.js:44 flush @ ChannelController.js:162 _flushChannels @ BaseCore.js:572 dynProtoProxy @ dynamicproto-js.js:374 _flushChannels @ PageViewManager.js:26 (anoniem) @ PageViewManager.js:51 setInterval (asynchroon) _addQueue @ PageViewManager.js:32 _self. @ PageViewManager.js:113 dynProtoProxy @ dynamicproto-js.js:374 _self. @ AnalyticsPlugin.js:196 dynProtoProxy @ dynamicproto-js.js:374 (anoniem) @ HelperFuncs.js:641 dynProtoProxy @ dynamicproto-js.js:374 92513 @ useAnalytics.tsx:58 webpack_require @ bootstrap:19 37862 @ useServices.ts:17 webpack_require @ bootstrap:19 5355 @ wifiserver.ts:31 webpack_require @ bootstrap:19 28926 @ TransportIcon.tsx:42 webpack_require @ bootstrap:19 49501 @ strip-prefix.js:20 webpack_require @ bootstrap:19 13165 @ api-runner-browser-plugins.js:23 webpack_require @ bootstrap:19 80064 @ api-runner-browser.js:1 webpack_require @ bootstrap:19 55309 @ page-renderer.js:59 webpack_require @ bootstrap:19 webpack_exec @ index.modern.mjs:3 (anoniem) @ index.modern.mjs:3 webpack_require.O @ chunk loaded:25 (anoniem) @ index.modern.mjs:3 webpackJsonpCallback @ jsonp chunk loading:74 (anoniem) @ app-4d30d40291f810e06489.js:1 Sender.js:568 POST https://dc.services.visualstudio.com/v2/track 400 _xhrSender @ Sender.js:568 _self. @ Sender.js:322 _self.flush @ Sender.js:108 (anoniem) @ ChannelController.js:168 _iterateChain @ ProcessTelemetryContext.js:161 (anoniem) @ ChannelController.js:163 (anoniem) @ ChannelController.js:51 HelperFuncs_arrForEach @ HelperFuncs.js:343 _processChannelQueue @ ChannelController.js:44 flush @ ChannelController.js:162 _flushChannels @ BaseCore.js:572 _flushChannels @ PageViewManager.js:26 (anoniem) @ PageViewManager.js:51 setInterval (asynchroon) _addQueue @ PageViewManager.js:32 _self. @ PageViewManager.js:113 _self. @ AnalyticsPlugin.js:196 (anoniem) @ HelperFuncs.js:641 push.92513.page @ useAnalytics.tsx:62 (anoniem) @ gatsby-browser.js:51 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:25 (anoniem) @ asyncToGenerator.js:32 (anoniem) @ asyncToGenerator.js:21 onRouteUpdate @ gatsby-browser.js:50 (anoniem) @ api-runner-browser.js:26 push.80064.exports.h @ api-runner-browser.js:17 onRouteUpdate @ navigation.js:44 componentDidMount @ navigation.js:224 lk @ react-dom.production.min.js:261 jk @ react-dom.production.min.js:260 ik @ react-dom.production.min.js:259 Xk @ react-dom.production.min.js:283 Qk @ react-dom.production.min.js:281 Hk @ react-dom.production.min.js:270 J @ scheduler.production.min.js:13 R @ scheduler.production.min.js:14 InstrumentHooks.js:97 POST https://dc.services.visualstudio.com/v2/track 400 (anoniem) @ InstrumentHooks.js:97 _doFetchSender @ Sender.js:646 _fetchKeepAliveSender @ Sender.js:578 _doUnloadSend @ Sender.js:489 _self. @ Sender.js:319 _self.onunloadFlush @ Sender.js:119 dynProtoProxy @ dynamicproto-js.js:374 (anoniem) @ Initialization.js:128 HelperFuncs_arrForEach @ HelperFuncs.js:343 (anoniem) @ Initialization.js:126 HelperFuncs_arrForEach @ HelperFuncs.js:343 _self. @ Initialization.js:125 dynProtoProxy @ dynamicproto-js.js:374 performHousekeeping @ Initialization.js:231 _handlePageVisibility @ EventHelpers.js:414

[louisvangeldrop]

I have started a Chromebook remote tunnel session again and in the console I run: devs devtools src/main.ts --internet -s. On my pc - where the code tunnel service runs, with address 192.168.0.126 the url: http: //localhost:8081/connect works and shows the connect button. However on the same pc the url: http://192.168.0.126:8081/connect doesn't show the connect button

[louisvangeldrop]

BTW: if one enters a special character e.g. "?" in the filter field it returns: Something went wrong. Please reload the page.

[pelikhan]

(? ... there seems to be some parsing issues in the console ui)

I suspect that since you are not going through vscode and using the cli directly, the port forwarding is not put in place.

[louisvangeldrop]

I have also used the vscode extension, but then only the url: localhost:8081/connect is supported. It will not find e.g. 192.168.0.126:8081/connect

[pelikhan]

Did you try to enable the "internet" flag in the developer tools settings in vscode?

It should add the --internet flag when starting the devtools server

[louisvangeldrop]

Used command: devs devtools src/main.ts --internet -s

[pelikhan]

Try enabling this flag in vscode

[louisvangeldrop]

Now I can open url: 192.168.0.126:8081/connect, but the "Connect" button is missing

[pelikhan]

What browser are you using? Is there any error in the JavaScript console?

[louisvangeldrop]

At my chromebook Chrome. At my latop Edge. Error in the browser development window:

Unrecognized feature: 'vr'. about:blank:1 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing. Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'. ServiceManagerContext.tsx:110 starting hosted services

[louisvangeldrop]

With Chromebook Chrome browser I do get after starting devs devtools .......

the error: microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.5838419806994697:74 Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.5838419806994697' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff'. This request has been blocked; the content must be served over HTTPS.