Skip to content

A web remote debugging tools, based on Chrome DevTools

Notifications You must be signed in to change notification settings

wanwu/devtools-pro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7b33aab · Dec 22, 2021
Nov 19, 2021
Nov 10, 2021
Dec 22, 2021
Dec 9, 2021
Nov 10, 2021
Nov 4, 2021
May 13, 2021
Dec 22, 2021
Nov 9, 2021
Apr 30, 2021
Apr 30, 2021
Apr 30, 2021
Apr 30, 2021
Nov 8, 2021
Nov 10, 2021
Nov 10, 2021
Jun 23, 2021
Nov 2, 2021
May 14, 2021
Dec 22, 2021
Apr 30, 2021
Dec 9, 2021
Dec 8, 2021
Dec 13, 2021

Repository files navigation

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 [email protected]: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