1 | # <img src="https://cloud.githubusercontent.com/assets/378023/15063285/cf554e40-1383-11e6-9b9c-45d381b03f9f.png" width="60px" align="center" alt="Devtron icon"> Devtron
|
2 |
|
3 | An [Electron](http://electron.atom.io) [DevTools](https://developer.chrome.com/devtools) extension.
|
4 |
|
5 | ![screenshot](https://cloud.githubusercontent.com/assets/378023/15036521/e3e7cd06-12ca-11e6-8054-ed0455015f05.png)
|
6 |
|
7 | ## Features
|
8 |
|
9 | * **Require graph** to help you visualize your app's internal and external
|
10 | library dependencies in both the main and renderer processes.
|
11 | * **IPC monitor** to track and inspect the messages sent and received
|
12 | between the renderer and main processes in your app.
|
13 | * **Event inspector** that shows the events and listeners that are registered
|
14 | in your app on the core Electron APIs such as the window, the app, and the
|
15 | processes.
|
16 | * **App Linter** that checks your apps for possible issues and missing
|
17 | functionality.
|
18 |
|
19 | ## Installing
|
20 |
|
21 | ```sh
|
22 | npm install --save-dev devtron
|
23 | ```
|
24 |
|
25 | Then execute the following from the Console tab of your running Electron app's
|
26 | developer tools:
|
27 |
|
28 | ```js
|
29 | require('devtron').install()
|
30 | ```
|
31 |
|
32 | You should then see a `Devtron` tab added.
|
33 |
|
34 | ## Developing locally
|
35 |
|
36 | ```
|
37 | git clone https://github.com/electron/devtron
|
38 | cd devtron
|
39 | npm install
|
40 | npm start
|
41 | ```
|
42 |
|
43 | This will start a process that watches and compiles the extension as files
|
44 | are modified.
|
45 |
|
46 | Then open the Console tab of your Electron app and run the following with the
|
47 | path updated for the location that you've cloned devtron to:
|
48 |
|
49 | ```js
|
50 | require('/Users/me/code/devtron').install()
|
51 | ```
|
52 |
|
53 | Then a Devtron tab should appear and it will now be enabled for that
|
54 | application.
|
55 |
|
56 | You can reload the extension by closing and reopening the dev tools.
|
57 |
|
58 | ### Running in a browser
|
59 |
|
60 | To make developing and debugging the extension easier, you can run it in a
|
61 | Chrome tab that will talk remotely to a running Electron app over HTTP.
|
62 |
|
63 | - Set the `DEVTRON_DEBUG_PATH` environment variable to the path of the cloned
|
64 | devtron repository.
|
65 | - Start your Electron application.
|
66 | - Click the **Devtron** tab.
|
67 | - You should then see the following messages logged to the **Console** tab:
|
68 |
|
69 | > Devtron server listening on http://localhost:3948
|
70 | >
|
71 | > Open file:///Users/me/devtron/static/index.html to view
|
72 |
|
73 | - Then open `/Users/me/devtron/static/index.html` in Chrome
|
74 | - The page there will talk remotely to the running Electron app so you'll
|
75 | be able to fully interact with each pane with real data.
|
76 |
|
77 | ## Contributing
|
78 |
|
79 | Have an idea for something this extension could do to make debugging Electron
|
80 | apps easier? Please [open an issue](https://github.com/electron/devtron/issues/new).
|
81 |
|
82 | Pull requests are also welcome and appreciated. Run `npm test` to run the
|
83 | existing tests. This project uses the [standard JavaScript style](http://standardjs.com).
|