Webkit WebInspector 前端独立项目使用教程

1. 项目介绍

webkit-webinspector 是一个从 Webkit 源码中提取的独立 WebInspector 前端项目。该项目主要用于本地调试需求，特别是针对 iOS 设备的调试。如果你正在寻找一个更用户友好的解决方案，可以查看 ios-safari-remote-debug-kit 项目。

2. 项目快速启动

2.1 环境准备

在开始之前，确保你已经安装了 ios-webkit-debug-proxy 并运行它。

2.2 安装依赖

首先，克隆项目到本地：

git clone https://github.com/artygus/webkit-webinspector.git
cd webkit-webinspector

然后，安装项目依赖：

yarn install

2.3 启动 WebInspectorUI

启动 WebInspectorUI 服务：

yarn start

默认情况下，服务器会在 8080 端口启动。你可以通过提供命令行参数来更改端口，例如：

yarn start 8000

启动后，打开浏览器并访问以下地址：

http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1

ws= 部分可以从 http://localhost:9222 的 "frontend" 页面中获取。

3. 应用案例和最佳实践

3.1 调试 iOS 设备

webkit-webinspector 主要用于调试 iOS 设备上的 Web 应用。通过 ios-webkit-debug-proxy，你可以将 iOS 设备的 Web 调试信息转发到本地，然后使用 webkit-webinspector 进行调试。

3.2 自定义调试协议

你可以通过以下命令列出所有可用的命令协议：

yarn start -P list

默认情况下，项目会使用最新的命令协议。如果你需要更新 WebInspectorUI，可以按照以下步骤操作：

# 克隆 WebInspectorUI 到临时目录
rm -rf tmp/
git clone https://github.com/WebKit/WebKit.git --depth 1 tmp/webkit

# 复制 WebInspectorUI 到服务目录
cp -R tmp/webkit/Source/WebInspectorUI/UserInterface lib/WebInspectorUI/latest

4. 典型生态项目

4.1 ios-webkit-debug-proxy

ios-webkit-debug-proxy 是一个用于将 iOS 设备的 Web 调试信息转发到本地的工具。它是 webkit-webinspector 的重要依赖。

4.2 ios-safari-remote-debug-kit

如果你需要一个更用户友好的调试解决方案，可以考虑使用 ios-safari-remote-debug-kit。它提供了更丰富的功能和更好的用户体验。

---

通过以上步骤，你可以快速上手并使用 webkit-webinspector 进行 iOS 设备的 Web 应用调试。希望这篇教程对你有所帮助！