cd8b7f5219
* 📝 zh_TW translation of tutorial docs-translations/zh-TW/tutorial/debugging-main-process- node-inspector.md * 📝 zh_TW translation of tutorial [ci skip] debugging-main-process-vscode.md * 📝 Translate zh_TW DE integration desktop-environment-integration.md * 📝 Translate zh_TW DE integration [ci skip] desktop-environment-integration.md
116 lines
3.8 KiB
Markdown
116 lines
3.8 KiB
Markdown
# 在 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
|