Merge pull request #8343 from oukan/feature/translate-zh-CN
Debugging the Main Process to zh-CN
This commit is contained in:
Haojian Wu
GitHub
commit
0e5fc9c4e4
4 changed files with 166 additions and 51 deletions
|
|
@ -0,0 +1,123 @@
|
|||
# 使用 node-inspector 进行主进程调试
|
||||
|
||||
[`node-inspector`][node-inspector] 提供了一个熟悉的 DevTools GUI 即可
|
||||
在 Chrome 中来调试 Electron 的主进程，但是，因为根据你希望调试的 Electron 版本，
|
||||
`node-inspector` 依赖于一些必须重新编译的原生 Node 模块
|
||||
。你可以重新编译 `node-inspector` 依赖自己，或者让
|
||||
[`electron-inspector`][electron-inspector] 为你做，两种方法都
|
||||
涵盖在本文档中。
|
||||
|
||||
**备注**: 在编写的 `node-inspector` 最新版本
|
||||
（0.12.8）无法重新编译目标版本为 Electron 1.3.0 或者以上，没有修补
|
||||
它的一个依赖关系。在使用 `electron-inspector`时，需要注意这些。
|
||||
|
||||
## 使用 `electron-inspector` 来调试
|
||||
|
||||
### 1. 安装 [node-gyp required tools][node-gyp-required-tools]
|
||||
|
||||
### 2. 安装 [`electron-rebuild`][electron-rebuild]，如果你还没有这样做。
|
||||
|
||||
```shell
|
||||
npm install electron-rebuild --save-dev
|
||||
```
|
||||
|
||||
### 3. 安装 [`electron-inspector`][electron-inspector]
|
||||
|
||||
```shell
|
||||
npm install electron-inspector --save-dev
|
||||
```
|
||||
|
||||
### 4. 启动 Electron
|
||||
|
||||
用 `--debug` 参数来运行 Electron：
|
||||
|
||||
```shell
|
||||
electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
或者，在第一行暂停你的脚本：
|
||||
|
||||
```shell
|
||||
electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 5. 启动 electron-inspector
|
||||
|
||||
在 macOS / Linux:
|
||||
|
||||
```shell
|
||||
node_modules/.bin/electron-inspector
|
||||
```
|
||||
|
||||
在 Windows:
|
||||
|
||||
```shell
|
||||
node_modules\\.bin\\electron-inspector
|
||||
```
|
||||
`electron-inspector` 在首次运行时，或者更改了 Electron 的版本时
|
||||
需要重新编译 `node-inspector` 的依赖关系，
|
||||
重新编译的过程可能需要互联网连接，并花费一些时间才能下载 Node headers 和lib。
|
||||
|
||||
### 6. 加载 debugger UI
|
||||
|
||||
在 Chrome 浏览器中打开 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 。
|
||||
如果以 `--debug-brk` 开始强制UI更新，你可能需要点击 pause。
|
||||
|
||||
## 使用 `node-inspector` 来调试
|
||||
|
||||
### 1. 安装 [node-gyp required tools][node-gyp-required-tools]
|
||||
|
||||
### 2. 安装 [`node-inspector`][node-inspector]
|
||||
|
||||
```bash
|
||||
$ npm install node-inspector
|
||||
```
|
||||
|
||||
### 3. 安装 [`node-pre-gyp`][node-pre-gyp]
|
||||
|
||||
```bash
|
||||
$ npm install node-pre-gyp
|
||||
```
|
||||
|
||||
### 4. 为 Electron 重新编译 `node-inspector` `v8` 模块
|
||||
|
||||
**注意：** 将 target 参数修改为你的 Electron 的版本号
|
||||
|
||||
```bash
|
||||
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/atom-shell reinstall
|
||||
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall
|
||||
```
|
||||
|
||||
详见 [如何下载原生模块][how-to-install-native-modules]。
|
||||
|
||||
### 5. 打开 Electron 的调试模式
|
||||
|
||||
你也可以用调试参数来运行 Electron ：
|
||||
|
||||
```bash
|
||||
$ electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
或者，在第一行暂停你的脚本：
|
||||
|
||||
```bash
|
||||
$ electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 6. 使用 Electron 开启 [`node-inspector`][node-inspector] 服务
|
||||
|
||||
```bash
|
||||
$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js
|
||||
```
|
||||
|
||||
### 7. 加载调试器界面
|
||||
|
||||
在 Chrome 浏览器中打开 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 。
|
||||
如果以 `--debug-brk` 开始看到输入行，你可能需要点击 pause。
|
||||
|
||||
[electron-inspector]: https://github.com/enlight/electron-inspector
|
||||
[electron-rebuild]: https://github.com/electron/electron-rebuild
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
|
||||
[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation
|
||||
[how-to-install-native-modules]: using-native-node-modules.md#how-to-install-native-modules
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# 使用 VSCode 进行主进程调试
|
||||
|
||||
### 1. 在 VSCode 中打开一个 Electron 工程。
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:electron/electron-quick-start.git
|
||||
$ code electron-quick-start
|
||||
```
|
||||
|
||||
### 2. 添加一个文件 `.vscode/launch.json` 并使用一下配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug Main Process",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceRoot}",
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
|
||||
"program": "${workspaceRoot}/main.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**注意：** 在 Windows 中，`runtimeExecutable` 的参数是 `"${workspaceRoot}/node_modules/.bin/electron.cmd"`。
|
||||
|
||||
### 3. 调试
|
||||
|
||||
在 `main.js` 设置断点， 并在 [Debug View](https://code.visualstudio.com/docs/editor/debugging) 中启动调试。你应该能够捕获断点信息。
|
||||
|
||||
|
||||
这是一个预配置的项目，你可以下载并直接在 VSCode 调试： https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start
|
||||
|
|
@ -16,56 +16,10 @@
|
|||
|
||||
就像 `--debug` 一样，但是会在第一行暂停脚本运行。
|
||||
|
||||
## 使用 node-inspector 来调试
|
||||
## 外部调试器
|
||||
|
||||
__备注：__ Electron 目前对 node-inspector 支持的不是特别好，
|
||||
如果你通过 node-inspector 的 console 来检查 `process` 对象，主进程就会崩溃。
|
||||
你将需要使用一个支持 V8 调试器的调试协议，
|
||||
下面的指南将会帮助你开始：
|
||||
|
||||
### 1. 确认你已经安装了 [node-gyp 所需工具](https://github.com/nodejs/node-gyp#installation)
|
||||
|
||||
### 2. 安装 [node-inspector][node-inspector]
|
||||
|
||||
```bash
|
||||
$ npm install node-inspector
|
||||
```
|
||||
|
||||
### 3. 安装 `node-pre-gyp` 的一个修订版
|
||||
|
||||
```bash
|
||||
$ npm install git+https://git@github.com/enlight/node-pre-gyp.git#detect-electron-runtime-in-find
|
||||
```
|
||||
|
||||
### 4. 为 Electron 重新编译 `node-inspector` `v8` 模块（将 target 参数修改为你的 Electron 的版本号）
|
||||
|
||||
```bash
|
||||
$ node_modules/.bin/node-pre-gyp --target=0.36.2 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/electron reinstall
|
||||
$ node_modules/.bin/node-pre-gyp --target=0.36.2 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/electron reinstall
|
||||
```
|
||||
|
||||
[How to install native modules][how-to-install-native-modules].
|
||||
|
||||
### 5. 打开 Electron 的调试模式
|
||||
|
||||
你也可以用调试参数来运行 Electron ：
|
||||
|
||||
```bash
|
||||
$ electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
或者，在第一行暂停你的脚本：
|
||||
|
||||
```bash
|
||||
$ electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 6. 使用 Electron 开启 [node-inspector][node-inspector] 服务
|
||||
|
||||
```bash
|
||||
$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js
|
||||
```
|
||||
|
||||
### 7. 加载调试器界面
|
||||
|
||||
在 Chrome 中打开 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
||||
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
- [使用 VSCode 进行主进程调试](debugging-main-process-vscode.md)
|
||||
- [使用 node-inspector 进行主进程调试](debugging-main-process-node-inspector.md)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
为了使调试更容易，Electron 原生支持 [Chrome DevTools Extension][devtools-extension]。
|
||||
|
||||
## 如何加载 DevTools 扩展
|
||||
|
||||
对于大多数DevTools的扩展，你可以直接下载源码，然后通过 `BrowserWindow.addDevToolsExtension` API 加载它们。Electron会记住已经加载了哪些扩展，所以你不需要每次创建一个新window时都调用 `BrowserWindow.addDevToolsExtension` API。
|
||||
|
||||
** 注：React DevTools目前不能直接工作，详情留意 [https://github.com/electron/electron/issues/915](https://github.com/electron/electron/issues/915) **
|
||||
|
|
@ -43,3 +45,4 @@ Electron 目前并不支持 chrome 扩展里的后台运行(background pages)功
|
|||
考虑到并非所有的 `chrome.*`APIs 都实现完毕，如果 DevTools 正在使用除了 `chrome.devtools.*` 之外的其它 APIs，这个扩展很可能无法正常工作。你可以通过报告这个扩展的异常信息，这样做方便我们对该扩展的支持。
|
||||
|
||||
[devtools-extension]: https://developer.chrome.com/extensions/devtools
|
||||
[react-devtools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
|
||||
|
|
|
|||
Loading…
Reference in a new issue