As is known to all#
On Android, you can use adb to connect to a computer and use Chrome Inspect to debug web pages (QQ/WeChat's x5 kernel can also be used). But since I switched to iPhone, I haven't had this fun anymore, so I started to explore how to use Chrome Inspect to debug Safari browser (because QQ/WeChat on iPhone does not have x5 kernel, so I can only debug Safari).
Preparation#
- Windows 10/11 - Of course, Windows is also possible, provided that the PowerShell version is greater than 3.
- Scoop - The best package manager for Windows.
- iPhone - It is recommended to use iPhone 14 Pro Max 1TB. If not, Safari is also fine.
- Data cable - I don't need to say much about this. You need a wired connection.
Installation Environment#
First, open PowerShell on Windows. We need to install Scoop first. Since Scoop's repository is on Github, you should know what to do.
set-executionpolicy remotesigned -scope currentuser
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
If everything goes well, it should be installed now, and a line of small green text will appear, like this. If it is red, you can find the reason by yourself.
Scoop was installed successfully!
Since it is inconvenient to access Scoop's repository on Github, we need to change the repository address to a domestic platform (Gitee), so that the speed can take off. Of course, if you believe in your scientific Internet access, you can also not change it.
scoop config SCOOP_REPO https://gitee.com/glsnames/scoop-installer
If successful, you will see the following prompt.
'SCOOP_REPO' has been set to 'https://gitee.com/glsnames/scoop-installer'
Then update the dependencies, just like using apt-get update.
scoop update
At this point, if there are no problems, Scoop has been installed. Next, you can install the dependencies needed for remote debugging. The commands are also very simple, just two lines.
scoop bucket add extras
scoop install ios-webkit-debug-proxy
Next, we need a Node.js environment. Since I have it, I believe most people have it too, so I won't write the installation and changing to a domestic source steps. Just use npm to install remotedebug-ios-webkit-adapter.
npm install remotedebug-ios-webkit-adapter -g
At this point, all the environment has been installed.
Remote Debugging#
Open the settings on your iPhone, find "Safari browser", scroll to the bottom, select "Advanced", and then enable "Web Inspector". Then use a data cable to connect your iPhone to the computer. In the pop-up window on the phone, select "Trust this computer". If there is no prompt, it may be because you have not installed iTunes. If you don't know how to install it, please search for it, or you can directly install iTools.
Then, in your PowerShell, start remotedebug_ios_webkit_adapter.
remotedebug_ios_webkit_adapter --port=9000
Then open your Chrome browser (if you don't have it, Edge is also fine), enter the URL chrome://inspect/#devices (if it is Edge, it is edge://inspect/#devices), click "Configure...", and enter "localhost:9000".
At this time, open the web page you want to debug in your Safari browser, and you will be able to see it in the Remote Target. I don't need to say more about the rest.