imze / devtools-pro

A web remote debugging tools, based on Chrome DevTools

Devtools-Pro

A web remote debugging tools, based on Chrome DevTools.

🎉 Features

• 基于 Chrome DevTools
• 基于 WebSocket 远程调试
• 可扩展，支持自定义插件
• 可编程的代理功能，抛弃 Fiddler/Charles 🌟（我们叫它 Foxy）

📦 Installation

npm i -g devtools-pro
# OR
yarn global add devtools-pro

命令行配置项

devtools-pro -h
# or
dp -h

Options:
  -h, --help      Show help                                            [boolean]
      --plugins   Add plugins                                            [array]
      --config    Provide path to a devtools configuration file e.g.
                  ./devtools.config.js     [string] [default: "devtools.config"]
  -o, --open      Open browser when server start       [boolean] [default: true]
      --https     Use HTTPS protocol.                                  [boolean]
  -p, --port      Port to use [8001]                                    [number]
  -proxyPort      Proxy server port to use [8002]                       [number]
      --verbose   Displays verbose logging            [boolean] [default: false]
      --hostname  Address to use [0.0.0.0]                              [string]
  -v, --version   Show version number                                  [boolean]

配置文件devtools.config.js

为了方便项目统一配置，DevTools-pro 支持配置文件，可以在项目中创建一个名为devtools.config.js的文件，支持的配置项如下：

• logLevel：日志级别，支持silent verbose
• sslCaDir：ca 证书目录，默认在findcachedir('ssl')中生成
• port：server 端口号，默认 8001
• hostname：默认 0.0.0.0
• plugins：配置插件，介绍
• https：如果要启用 https，可以设置https=true，DevTools-pro 会自动生成 CA 证书供使用
• proxy：
  • proxy.port：代理服务器的端口号，默认 8002
  • proxy.plugins：Foxy 插件
  • proxy.blocking：拦截配置，详见Foxy 文档
  • proxy.nonBlocking：拦截配置，详见Foxy 文档

开发

1. clone

mkdir devtools-pro
git clone [email protected]:ksky521/devtools-pro.git devtools-pro

2. 安装依赖 & 初始化

yarn
# 初始化：将chrome-devtools-frontend/front_end复制出来
sh init.sh

3. 开始开发

yarn dev

访问：

• 1. 打开 home 页面：127.0.0.1:8001
• 2. 打开 demo 测试页面：点击 home 页面上测试页面链接 127.0.0.1:8001/demo.html
• 3. 打开 inspector：点击 home 页面上的【Open Chrome DevTools】

深入阅读

• DevTools-pro 原理
• 代理功能使用和原理
• root CA 配置

注意：

1. 在现在新版本的浏览器中，HTTPS 页面如果访问 HTTP 的资源会报Mixed Content 错误，所以 HTTPS 页面要进行调试需要建立 WSS 的 Websocket 连接，一般内核/Webview 可以在创建 Webview 的时候默认关闭该安全配置，用于线下包的开发调试。
2. iOS15+ Safari 在使用 https 的 URL，如果要链接 WSS 协议的 Websocket，需要关闭「NSURLSession WebSocket」（iOS15-默认是关闭的），路径 「iOS 设置 -> Safari -> 高级 -> Experimental Features -> NSURLSession WebSocket」 设置为关闭。详细：https://developer.apple.com/forums/thread/685403