/devtools-pro

A web remote debugging tools, based on Chrome DevTools

Primary LanguageJavaScript

Devtools-Pro

A web remote debugging tools, based on Chrome DevTools.

image

🎉 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 git@github.com:ksky521/devtools-pro.git devtools-pro
  1. 安装依赖 & 初始化
yarn
# 初始化：将chrome-devtools-frontend/front_end复制出来
sh init.sh
  1. 开始开发
yarn dev

访问：

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

深入阅读

注意：

  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