docs: Add docs on how to use chrome devtools extension.

docs/README.md

@@ -4,6 +4,7 @@
 * [Application distribution](tutorial/application-distribution.md)
 * [Use native node modules](tutorial/use-native-node-modules.md)
 * [Debugging browser process](tutorial/debugging-browser-process.md)
+* [DevTools extension](tutorial/devtools-extension.md)
 
 ## API references
 

docs/api/browser-window.md

@@ -166,6 +166,21 @@ Find a window according to the `webContents` it owns
 
 Find a window according to its ID.
 
+### Class Method: BrowserWindow.addDevToolsExtension(path)
+
+* `path` String
+
+Adds devtools extension located at `path`, and returns extension's name.
+
+The extension will be remembered so you only need to call this API once, this
+API is not for programming use.
+
+### Class Method: BrowserWindow.removeDevToolsExtension(name)
+
+* `name` String
+
+Remove the devtools extension whose name is `name`.
+
 ### BrowserWindow.webContents
 
 The `WebContents` object this window owns, all web page related events and

docs/tutorial/devtools-extension.md

@@ -0,0 +1,56 @@
+# DevTools extension
+
+To make debugging more easy, atom-shell has added basic support for
+[Chrome DevTools Extension][devtools-extension].
+
+For most devtools extensions, you can simply download their source codes 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.
+
+For example to use the React DevTools Extension, first you need to download its
+source code:
+
+```bash
+$ cd /some-directory
+$ git clone --recursive https://github.com/facebook/react-devtools.git
+```
+
+Then you can load it in atom-shell by opening the devtools in arbitray window,
+and run this code in the console of devtools:
+
+```javascript
+require('remote').require('browser-window').addDevToolsExtension('/some-directory/react-devtools')
+```
+
+To unload the extension, you can call `BrowserWindow.removeDevToolsExtension`
+API with its name and it will disappear the next time you open the devtools:
+
+```javascript
+require('remote').require('browser-window').removeDevToolsExtension('React Developer Tools')
+```
+
+## Format of devtools extension
+
+Ideally all devtools extension written for Chrome browser can be loaded by
+atom-shell, but they have to be in a plain directory, for those packaged `crx`
+extensions, there is no way in atom-shell to load them unless you find a way to
+extract them into a directory.
+
+## Background pages
+
+Currently atom-shell doesn't support the background pages of chrome extensions,
+so for some devtools extensions that rely on this feature, they may not work
+well in atom-shell
+
+## `chrome.*` APIs
+
+Some chrome extensions use `chrome.*` APIs for some features, there is some
+effort to implement those APIs in atom-shell to make them work, but we have
+only implemented few for now.
+
+So if the devtools extension is using APIs other than `chrome.devtools.*`, it is
+very likely to fail, but you can report those extensions in the issues tracker
+so we can add support for those APIs.
+
+[devtools-extension]: https://developer.chrome.com/extensions/devtools