/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