Devtools-Pro
A web remote debugging tools, based on Chrome DevTools.
🎉 Features
📦 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:
开发
- clone
mkdir devtools-pro
git clone git@github.com:ksky521/devtools-pro.git devtools-pro
- 安装依赖 & 初始化
yarn
# 初始化:将chrome-devtools-frontend/front_end复制出来
sh init.sh
- 开始开发
yarn dev
访问:
-
- 打开 home 页面:127.0.0.1:8001
-
- 打开 demo 测试页面:点击 home 页面上测试页面链接 127.0.0.1:8001/demo.html
-
- 打开 inspector:点击 home 页面上的【Open Chrome DevTools】
深入阅读
注意:
- 在现在新版本的浏览器中,HTTPS 页面如果访问 HTTP 的资源会报Mixed Content 错误,所以 HTTPS 页面要进行调试需要建立 WSS 的 Websocket 连接,一般内核/Webview 可以在创建 Webview 的时候默认关闭该安全配置,用于线下包的开发调试。
- iOS15+ Safari 在使用 https 的 URL,如果要链接 WSS 协议的 Websocket,需要关闭「NSURLSession WebSocket」(iOS15-默认是关闭的),路径 「iOS 设置 -> Safari -> 高级 -> Experimental Features -> NSURLSession WebSocket」 设置为关闭。详细:https://developer.apple.com/forums/thread/685403