Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wanwu/devtools-pro
A web remote debugging tools, based on Chrome DevTools
https://github.com/wanwu/devtools-pro
chrome-devtools-frontend debugging-tool devtools inspector mitm-server mitmproxy remote-control remote-devtools
Last synced: 9 days ago
JSON representation
A web remote debugging tools, based on Chrome DevTools
- Host: GitHub
- URL: https://github.com/wanwu/devtools-pro
- Owner: wanwu
- Created: 2021-04-30T08:51:19.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T07:08:01.000Z (over 1 year ago)
- Last Synced: 2024-06-13T21:28:09.627Z (14 days ago)
- Topics: chrome-devtools-frontend, debugging-tool, devtools, inspector, mitm-server, mitmproxy, remote-control, remote-devtools
- Language: JavaScript
- Homepage:
- Size: 2.49 MB
- Stars: 190
- Watchers: 5
- Forks: 29
- Open Issues: 16
-
Metadata Files:
- Readme: readme.md
Lists
- awesome-github-star - devtools-pro
README
Devtools-Pro
A web remote debugging tools, based on Chrome DevTools.
## 🎉 Features
- 基于 Chrome DevTools
- 基于 WebSocket 远程调试
- 可扩展，支持[自定义插件](./docs/advanced.md)
- 可编程的[代理功能](./docs/foxy.md)，抛弃 Fiddler/Charles 🌟（我们叫它 Foxy）
## 📦 Installation
```shell
npm i -g devtools-pro
# OR
yarn global add devtools-pro
```
## 命令行配置项
```bash
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：配置插件，[介绍](./docs/advanced.md)
- https：如果要启用 https，可以设置`https=true`，DevTools-pro 会[自动生成 CA 证书供使用](./docs/rootCA.md)
- proxy：
- `proxy.port`：代理服务器的端口号，默认 8002
- `proxy.plugins`：Foxy 插件
- `proxy.blocking`：拦截配置，详见[Foxy 文档](./docs/foxy.md)
- `proxy.nonBlocking`：拦截配置，详见[Foxy 文档](./docs/foxy.md)
## 开发
1. clone
```bash
mkdir devtools-pro
git clone [email protected]:ksky521/devtools-pro.git devtools-pro
```
2. 安装依赖 & 初始化
```bash
yarn
# 初始化：将chrome-devtools-frontend/front_end复制出来
sh init.sh
```
3. 开始开发
```bash
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 原理](./docs/advanced.md)
- [代理功能使用和原理](./docs/foxy.md)
- [root CA 配置](./docs/rootCA.md)
> 注意：
>
> 1. 在现在新版本的浏览器中，HTTPS 页面如果访问 HTTP 的资源会报[Mixed Content 错误](https://developer.mozilla.org/en-US/docs/Web/Security/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