translate zh-TW tutorial devtools-extension.md

This commit is contained in:
fbukevin 2016-01-28 23:23:19 +08:00
parent 93f268cbd1
commit 15ce59be64

View file

@ -1,62 +1,46 @@
# DevTools Extension
# DevTools 擴充套件
To make debugging easier, Electron has basic support for the
[Chrome DevTools Extension][devtools-extension].
要使除錯更簡單Electron 有對 [Chrome DevTools(開發人員工具) Extension][devtools-extension] 基本的支援。
For most DevTools extensions you can simply download the source code and use
the `BrowserWindow.addDevToolsExtension` API to load them. The loaded extensions
will be remembered so you don't need to call the API every time when creating
a window.
多數的 DevTools 擴充可以簡單地透過下載原始碼然後使用 `BrowserWindow.addDevToolsExtension` API 來載入它們,已載入的擴充套件會被記住,如此一來你就不用每次建立一個視窗的時候就要呼叫 API。
** NOTE: React DevTools does not work, follow the issue here https://github.com/atom/electron/issues/915 **
** 注意: React DevTools 無法使用,參考 [issue](https://github.com/atom/electron/issues/915) **
For example, to use the [React DevTools Extension](https://github.com/facebook/react-devtools)
, first you need to download its source code:
例如使用 [React DevTools Extension](https://github.com/facebook/react-devtools),首先你需要下載它的原始碼:
```bash
$ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git
```
Follow the instructions in [`react-devtools/shells/chrome/Readme.md`](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md) to build the extension.
照著 [`react-devtools/shells/chrome/Readme.md`](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md) 的指示來建置擴充套件。
Then you can load the extension in Electron by opening DevTools in any window,
and running the following code in the DevTools console:
接著你就可以在 Electron 中打開任何視窗來載入擴充套件了,然後在 DevTools console 執行以下的程式碼:
```javascript
const BrowserWindow = require('electron').remote.BrowserWindow;
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');
```
To unload the extension, you can call the `BrowserWindow.removeDevToolsExtension`
API with its name and it will not load the next time you open the DevTools:
要卸載擴充套件,你可以呼叫 `BrowserWindow.removeDevToolsExtension`
API,並帶入套件的名稱,則套件就不會在下次起打開 DevTools 的時候載入了:
```javascript
BrowserWindow.removeDevToolsExtension('React Developer Tools');
```
## Format of DevTools Extension
## DevTools 擴充套件的格式
Ideally all DevTools extensions written for the Chrome browser can be loaded by
Electron, but they have to be in a plain directory. For those packaged with
`crx` extensions, there is no way for Electron to load them unless you find a
way to extract them into a directory.
理想上,所有寫給 Chrome 瀏覽器用的 DevTools 擴充套件都要能夠被 Electron 載入,但它們需要是在一個普通的目錄下,那些以 `crx` 包裝的擴充套件Electron 沒有辦法載入它們除非你找到一個解壓縮他們到目錄的方法。
## Background Pages
Currently Electron doesn't support the background pages feature in Chrome
extensions, so some DevTools extensions that rely on this feature may
not work in Electron.
目前 Electron 沒有支援 Chrome 擴充套件的 background pages所以一些會用到 background pages 的 DevTools 擴充套件可能會無法在 Electron 中運作。
## `chrome.*` APIs
Some Chrome extensions may use `chrome.*` APIs for features and while there has
been some effort to implement those APIs in Electron, not all have been
implemented.
一些 Chrome 擴充套件可能使用到 `chrome.*` API而儘管在 Electron 中有一些這種 API 的實作,還是沒有所有的部分都被實作到。
Given that not all `chrome.*` APIs are implemented if the DevTools extension is
using APIs other than `chrome.devtools.*`, the extension is very likely not to
work. You can report failing extensions in the issue tracker so that we can add
support for those APIs.
因為並非所有 `chrome.*` API 都有實作,如果一個 DevTools 擴充套件有使用到而非 `chrome.devtools.*`,這個套件非常有可能無法運作,你可以回報失敗的擴充套件到 issue tracker那我們就可以把這些 API 加入支援。
[devtools-extension]: https://developer.chrome.com/extensions/devtools