在 macOS 上使用 Chrome 调试 Safari iOS 网页

前情提要

macOS 需要安装 Google ChromeHomebrewNode.js

iOS 需要在「设置」>「Safari 浏览器」>「高级」中将「Web 检查器」打开

开始

安装 ios-webkit-debug-proxy
brew install ios-webkit-debug-proxy
证书相关提示
A CA file has been bootstrapped using certificates from the SystemRoots
keychain. To add additional certificates (e.g. the certificates added in
the System keychain), place .pem files in
  /usr/local/etc/openssl/certs

and run
  /usr/local/opt/openssl/bin/c_rehash

openssl is keg-only, which means it was not symlinked into /usr/local,
because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries.

If you need to have openssl first in your PATH run:
  echo 'export PATH="/usr/local/opt/openssl/bin:$PATH"' >> ~/.bash_profile

For compilers to find openssl you may need to set:
  export LDFLAGS="-L/usr/local/opt/openssl/lib"
  export CPPFLAGS="-I/usr/local/opt/openssl/include"
运行 ios-webkit-debug-proxy
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

大概率会看到这么一个报错

Listing devices on :9221
Could not connect to lockdownd, error code -19. Exiting.
Unable to attach 65015cd029589ffbbd6ffeaf64392a330b7933eb inspector

则需要重新安装

brew uninstall --force libimobiledevice ios-webkit-debug-proxy
brew install --HEAD libimobiledevice ios-webkit-debug-proxy

若看到如下报错

Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10

则使用以下方式安装

brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice ios-webkit-debug-proxy

接着在浏览器中打开 localhost:9221 即可看到连接设备

如上图点击已连接的设备

会看到提示需要手动复制打开链接

可以看到已经可以调试了,但是会发现无法修改「Styles」

安装 remotedebug-ios-webkit-adapter
npm install remotedebug-ios-webkit-adapter -g
remotedebug_ios_webkit_adapter --port=9222

使用 remotedebug-ios-webkit-adapter 后就不用再手动开启 ios-webkit-debug-proxy 了会自动运行的。

接着 Chrome 打开 chrome://inspect/#devices

可以看到远程设备中打开的网页,点击「inspect」进行调试

发现可以修改了,完成。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注