electron/docs-translations/zh-TW/tutorial/debugging-main-process-node-inspector.md

117 lines
3.8 KiB
Markdown
Raw Normal View History

# 在 node-inspector 裡為主程序除錯
[`node-inspector`][node-inspector] 提供一個大家熟悉的圖形介面開發工具,可以在 Chrome 使用這個工具為 Electron 的主程序除錯。然而因為 `node-inspector` 依靠依些原生的 Node 模組,他必須為你想除錯的 Electron 版本重新建制。你可以自己重新建置 `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
```
或者在第1行 JavaScript 暫停執行:
```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 標頭檔和函式庫,且需要一段時間。
### 6. 載入除錯工具介面
在 Chrome 瀏覽器中打開 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858。如果有使用 `--debug-brk` 選項,你有可能需要按暫停鍵強制更新介面。
## 使用 `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][how-to-install-native-modules].
### 5. 啟用 Electron 除錯模式
你可以使用 debug 標籤啟動 Electron
```bash
$ electron --debug=5858 your/app
```
或是在第1行暫停程式
```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` 啟動 Electron ,你有可能要點擊暫停鍵才能看到進入點。
[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