POSTS / Debug Vue App Deployed on WSL in Mobile Device

Noticed the swipe-up handler in my Vue application doesn’t work with Microsoft Edge Mobile and WeChat Built-in Browser, I’m going to debug it on my phone.

There’s an obvious and complex flow: modify the code, compile the image, deploy the image and debug the webpage, so I went to internet for some help.

Forward Port to Mobile Device

Firstly, I want to enable my phone to access the local Vue application that is run by ‘npm run dev’, which monitors code changes and performs hot reloading.

ADB (Android Debug Bridge) is the first tool I thought up, which does have the ablility to forward socket connections. After connecting the phone with a USE cable, run this command to let the phone can access Vue application webpage running on WSL2:

adb reverse tcp:5173 tcp:5173

That works, but how? There are two questions:

1. Why the Vue application running on WSL2 with port 5173 can be forwarded like port of host machine does?
2. Why use adb reverse but not adb forward?

Question 1: WSL2 Localhost Forwarding

As WSL Networking says:

If you are building a networking app (for example an app running on a NodeJS or SQL server) in your Linux distribution, you can access it from a Windows app (like your Edge or Chrome internet browser) using localhost (just like you normally would).

So maybe the WSL2 ports are automatically forwarded to host Windows machine. 😄

Question 2: ADB Reverse vs. Forward

I thought at first adb forward is to forward a host port to device which enable the latter one to access service running on the host, but it’s just the opposite: adb reverse does the mentioned things above.

Finally I realized that adb is not forwarding ‘port’ but ‘request’, then everything comes clear.

I asked Github Copilot and got those knowledges. You may refer to this page ADB: Set up port forwarding for some detailed information.

Debug Webpage on Device

Go to edge://inspect/#devices. If you connected the device correctly, you will see your phone in the Remote Target list. Then you can inspect one of the pages like what you can do in PC Browser.

WeChat Built-in Browser

It’s tricky to debug a built-in browser, especially WeChat’s. I found a page on WeChat Technical Community saying that after connecting the device, you should open a link http://debugxweb.qq.com/?inspector=true in WeChat and then the page will jump to the home page of WeChat, which means it’s OK to debug a page inside the WeChat Built-in Browser.

I tried the method and it really worked. Opening the link shown me a toast ‘执行成功’, then the flow is like debugging the normal webpage on mobile phone.

Solve the Issues

I use the following code to check if the current page reach the bottom:

const { scrollHeight, scrollTop, clientHeight } = document.documentElement
const tolerance = 20
if (scrollTop + clientHeight + tolerance >= scrollHeight) {
  // do something ...
}

I found that in MS Edge Mobile, the tolerance is far from enough to let the condition come true, so I set the tolerance to 120.

From this page talking about banning swipe-down gesture I found that in WeChat Built-in Browser I need to check document.body.scrollTop instead of document.documentElement.scrollTop.

Finally the code comes like this:

const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const { scrollHeight, clientHeight } = document.documentElement
const tolerance = 120
if (scrollTop + clientHeight + tolerance >= scrollHeight) {
  // do something ...
}

Using document.body.scrollTop || document.documentElement.scrollTop will not affect other situations because the document.body.scrollTop is always 0 normally.