fails if page loaded by safari is served by webpack devserver

[hbinkle]

When loading the page from a real web server (nginx) everyting is fine.
But when loading the page from a local webpack devserver it can't be debugged.
The page uses https and is hosted by the devserver on the same PC running inspect.
I get loaded by my iPhone using the IP address of my PC.
Inspect shows the instance of the page on the phone, but when clicking on that instance all tabs stay empty.
When trying to use remotedebug-ios-webkit-adapter I get the same behavior. The page shows up in the list of chrome, but when clicking on inspect the proxy repeats logging No websocket endpoint found and nothing is loaded into the debug window.

inspect: 0.6.8
ios: 14.6
webpack-dev-server: ^3.1.4
webpack: ^4.10.0

[auchenberg]

@hbinkle Thanks for the report.

To understand:

1. The website loads correctly on your phone. How are you accessing your devserver? Via your local machines IP? Selfsigned SSL?
2. Inspect renders all tabs blank when you try to attach the DevTool to the particular Safari instance?

Right?

[harrybin]

Exactly right.

• using IP
• the selfsigned SSL cert created by the devserver
• Safari renders the site correctly, but inspect shows blank tabs

[hbinkle]

@auchenberg, if you need any further information or any assistance feel free to contact me.

[auchenberg]

@hbinkle Can you try to connect Inspect let's say 5 times in a row to your browser tab, and see if you get consistent results? I'm asking as I have another issue caused by a flaky connection that sometimes mangles the connection and leaves the tabs empty.

[hbinkle]

I already tried that and got the same result. No matter if I do the re-connection by just clicking on the tabs entry on the left or even reconnecting the phone by unplugging and re-plugging the cable.
Only when loading the page from nginx with a real certificate instead of the local devserver there is content loaded.

[hbinkle]

my-app.zip
Here is an hello world cra app which reproduces the issue.

• Unpack
• install modules using npm i
• run with HTTPs
• load on the iPhone in safari (https://<>:3000)
• start inspect for that safari tab --> empty tabs in inspect

I need to admit that with this hello world project inspect works after trying to connect the second or third time.

[auchenberg]

@hbinkle What iOS device are you debugging, and what is the device frame to the left on your screenshot? You using another tool to screencast from the device? Trying to understand what's going on since you are loosing the connection to the device.

[hbinkle]

@auchenberg, I'm debugging an iPhone 8. The screencast to the PC is done using TeamViewer.
Hey, very good question!
When the teamviewer screencast is not running it works!
But strange that this only occurs when using the devserver.

[hbinkle]

@auchenberg, for me this issue is solved. But for others may running into this there would some error or hint be nice pointing that there is another app/communication may blocking the inspect connection. Aren't there any logs inspect creates at least in cases some is going wrong?