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 fine, as long as 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 acceptable.
- 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 be faster. Of course, if you believe in your ability to bypass the Great Firewall, 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 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 steps to install and switch to a domestic source. Just use npm to install remotedebug-ios-webkit-adapter.
npm install remotedebug-ios-webkit-adapter -g
At this point, all the necessary environments have been installed.
Remote Debugging#
Open the settings on your iPhone, find "Safari browser", scroll to the bottom, go to "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, you can 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 (or Edge if you don't have Chrome), enter the URL chrome://inspect/#devices (or edge://inspect/#devices for Edge), click "Configure...", and enter "localhost:9000" to complete.
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 explain the rest, right?