Browse Source

Merge pull request #8343 from oukan/feature/translate-zh-CN

Debugging the Main Process to zh-CN
Haojian Wu 8 years ago
parent
commit
0e5fc9c4e4

+ 123 - 0
docs-translations/zh-CN/tutorial/debugging-main-process-node-inspector.md

@@ -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

+ 35 - 0
docs-translations/zh-CN/tutorial/debugging-main-process-vscode.md

@@ -0,0 +1,35 @@
+# 使用 VSCode 进行主进程调试
+
+### 1. 在 VSCode 中打开一个 Electron 工程。
+
+```bash
+$ git clone [email protected]: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

+ 5 - 51
docs-translations/zh-CN/tutorial/debugging-main-process.md

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

+ 3 - 0
docs-translations/zh-CN/tutorial/devtools-extension.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