devtron
Version:
Electron DevTools Extension
511 lines (458 loc) • 20.8 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Devtron</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../vendor/photon/css/photon.css">
<link rel="stylesheet" href="../vendor/github.css">
<link rel="stylesheet" href="devtron.css">
<script src="../out/index.js" charset="utf-8"></script>
</head>
<body>
<div class="window">
<div class="window-content">
<div id="pane-group" class="pane-group">
</div>
</div>
</div>
<template id="requires-table-row">
<tr>
<td class="row-module" data-field="moduleName"></td>
<td class="row-version" data-field="moduleVersion"></td>
<td class="row-size" data-field="fileSize"></td>
<td class="row-file" data-field="pathSection">
<span class="disclosure-arrow" data-field="disclosure"></span>
<span data-field="fileName"></span>
<span class="row-directory" data-field="moduleDirectory"></span>
</td>
</tr>
</template>
<template id="ipc-table-row">
<tr>
<td class="row-event-name">
<div class="ipc-icon" data-field="eventIcon"></div>
<div class="ipc-icon ipc-icon-sync" data-field="syncIcon" title="Synchronous"></div>
<div data-field="eventName"></div>
</td>
<td class="row-event-listener-count" data-field="eventListenerCount"></td>
<td class="row-event-data">
<pre><code class="language-javascript" data-field="eventData"></code></pre>
</td>
</tr>
</template>
<template id="emitter-row">
<tr>
<td class="row-listener row-emitter">
<span class="disclosure-arrow" data-field="disclosure"></span>
<span data-field="emitterName"></span>
<span class="listener-count" data-field="listenerCount"></span>
</td>
</tr>
</template>
<template id="event-type-row">
<tr>
<td class="row-listener row-listener-event-name">
<span class="disclosure-arrow" data-field="disclosure"></span>
<span data-field="eventName"></span>
<span class="listener-count" data-field="listenerCount"></span>
</td>
</tr>
</template>
<template id="listener-code-row">
<tr>
<td class="row-listener row-listener-event-code">
<pre><code class="language-javascript" data-field="listenerValue"></code></pre>
</td>
</tr>
</template>
<template id="rule-row">
<tr>
<td data-field="status"></td>
<td data-field="severity"></td>
<td class="row-listener row-emitter">
<span class="disclosure-arrow" data-field="disclosure"></span>
<span data-field="ruleName"></span>
<span class="listener-count" data-field="elementCount"></span>
</td>
</tr>
</template>
<template id="element-row">
<tr>
<td></td>
<td></td>
<td class="row-element-path">
<a data-field="selectorPath" href="#"></a>
</td>
</tr>
</template>
<template id="modules-view">
<div class="pane" data-pane="graph">
<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<button data-field="loadButton" class="btn btn-default pull-right">
<span class="toolbar-icon toolbar-icon-cycle"></span>
Load Graph
</button>
<input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search modules">
</div>
</header>
<div class="tab-group">
<div data-field="renderProcessTab" class="tab-item active">
Renderer Process
</div>
<div data-field="mainProcessTab" class="tab-item">
Main Process
</div>
</div>
<div class="table-scroller table-scroller-with-tabs">
<table data-field="renderProcessTable" class="table-striped" tabindex="-1">
<thead>
<th>Module</th>
<th>Version</th>
<th>Size</th>
<th>File</th>
</thead>
<tbody data-field="renderRequireRows" tabindex="-1">
</tbody>
</table>
<table data-field="mainProcessTable" class="table-striped hidden" tabindex="-1">
<thead>
<th>Module</th>
<th>Version</th>
<th>Size</th>
<th>File</th>
</thead>
<tbody data-field="mainRequireRows" tabindex="-1">
</tbody>
</table>
<div class="table-description" data-field="tableDescription">
This table shows all of the JavaScript files loaded via <code>require</code>
starting from your application's main entry point.
<br>
Click Load Graph to generate a require graph for the renderer process
and the main process.
</div>
</div>
</div>
</template>
<template id="events-view">
<div class="pane hidden" data-pane="listeners">
<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<button data-field="loadButton" class="btn btn-default pull-right">
<span class="toolbar-icon toolbar-icon-cycle"></span>
Load Listeners
</button>
<input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search events">
</div>
</header>
<div class="table-scroller">
<table class="table-striped" tabindex="-1">
<thead>
<th>Event Listeners</th>
</thead>
<tbody data-field="listenersTable" tabindex="-1">
</tbody>
</table>
<div class="table-description" data-field="tableDescription">
This table shows the event names and listeners currently registered
on core Electron and node.js APIs.
<br>
Click Load Listeners to populate it.
</div>
</div>
</div>
</template>
<template id="ipc-view">
<div class="pane hidden" data-pane="ipc">
<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<div class="btn-group pull-right">
<button data-field="recordButton" class="btn btn-default" title="Record IPC events">
<span class="toolbar-icon toolbar-icon-record"></span>
Record
</button>
<button data-field="hideInternalButton" class="btn btn-default" title="Ignore internal IPC events">
<span class="toolbar-icon toolbar-icon-funnel"></span>
Ignore Internal
</button>
<button data-field="clearButton" class="btn btn-default" title="Clear events from table">
<span class="toolbar-icon toolbar-icon-block"></span>
Clear
</button>
<button data-field="docsButton" class="btn btn-default" title="Open Electron IPC docs">
<span class="toolbar-icon toolbar-icon-book"></span>
Docs
</button>
</div>
<input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search events">
</div>
</header>
<div class="table-scroller">
<table class="table-striped" tabindex="-1">
<thead>
<th>Channel</th>
<th>Listeners</th>
<th>Arguments</th>
</thead>
<tbody data-field="ipcTable">
</tbody>
</table>
<div class="table-description" data-field="tableDescription">
This table shows the inter-process communication (IPC) events sent
and received between the renderer process and the main process.
<br>
Click Record to start monitoring and displaying IPC traffic.
</div>
</div>
</div>
</template>
<template id="accessibility-view">
<div class="pane hidden" data-pane="accessibility">
<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<div class="btn-group pull-right">
<button data-field="accessibilityButton" class="btn btn-default">
<span class="toolbar-icon toolbar-icon-cycle"></span>
Audit App
</button>
<button data-field="docsButton" class="btn btn-default" title="Open accessibility docs">
<span class="toolbar-icon toolbar-icon-book"></span>
Docs
</button>
</div>
<input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search events">
</div>
</header>
<div class="table-scroller">
<table class="table-striped accessibility-table" tabindex="-1">
<thead>
<th>Status</th>
<th>Severity</th>
<th>Accessibility</th>
</thead>
<tbody data-field="accessibilityResultsTable" tabindex="-1">
</tbody>
</table>
<div class="table-description" data-field="tableDescription">
This pane shows errors and warnings from elements that do
not meet accessibility standards.
<br>
Click Audit App to inspect the running application.
</div>
</div>
</div>
</template>
<template id="lint-view">
<div class="pane hidden" data-pane="lint">
<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<button data-field="lintButton" class="btn btn-default pull-right">
<span class="toolbar-icon toolbar-icon-cycle"></span>
Lint App
</button>
</div>
</header>
<div class="table-scroller">
<table class="table-striped lint-table" tabindex="-1">
<thead>
<th>Lint Checks</th>
</thead>
<tbody>
<tr>
<td data-field="outdated" class="alert hidden" role="alert">
<p>
<span class="lint-icon"></span>
<strong class="lint-title">Using latest Electron version</strong>
</p>
<p data-field="outdatedDescription">
Your application is using version <span data-field="versionLabel"></span>
and the latest version released is <span data-field="latestLabel"></span>.
View the <a href="http://electron.atom.io/releases.html">Electron release notes</a>.
</p>
</td>
</tr>
<tr>
<td data-field="usingAsar" class="alert hidden" role="alert">
<p>
<span class="lint-icon"></span>
<strong class="lint-title">Using an asar archive</strong>
</p>
<p data-field="asarDescription">
Your application is not bundled in an <code>.asar</code> archive.
Asar bundles your entire application into a single file which
makes your app quicker to install/update as well as improves the
code loading performance in many environments. View the <a href="http://electron.atom.io/docs/tutorial/application-packaging">asar instructions</a>.
</p>
</td>
</tr>
<tr>
<td data-field="crashListener" class="alert hidden" role="alert">
<p>
<span class="lint-icon"></span>
<strong class="lint-title">Listening for crash events</strong>
</p>
<p data-field="crashDescription">
Your application is not listening for the <code>crashed</code> event on
the <code>webContents</code> property of the <code>BrowserWindow</code>.
It is important to listen for this event to report when it happens
and notify the user about what happened. View the <a href="http://electron.atom.io/docs/api/web-contents/#event-crashed"><code>webContents</code> docs</a>.
<br><br>
Listen for this event by adding the following to the <code>webContents</code>:
<pre class="lint-code "><code class="language-javascript" data-field="crashedExample">myWindow.webContents.on('crashed', function () { })</code></pre>
</p>
</td>
</tr>
<tr>
<td data-field="unresponsiveListener" class="alert hidden" role="alert">
<p>
<span class="lint-icon"></span>
<strong class="lint-title">Listening for unresponsive events</strong>
</p>
<p data-field="unresponsiveDescription">
Your application is not listening for the <code>unresponsive</code> event on
the <code>BrowserWindow</code>. It is important to listen for this
event to report when it happens and to notify the user about what
has happened. View the <a href="http://electron.atom.io/docs/api/browser-window/#event-unresponsive"><code>BrowserWindow</code> docs</a>.
<br><br>
Listen for this event by adding the following to the <code>BrowserWindow</code>:
<pre class="lint-code"><code class="language-javascript" data-field="unresponsiveExample">myWindow.on('unresponsive', function () { })</code></pre>
</p>
</td>
</tr>
<tr>
<td data-field="uncaughtListener" class="alert hidden" role="alert">
<p>
<span class="lint-icon"></span>
<strong class="lint-title">Listening for uncaughtException events</strong>
</p>
<p data-field="uncaughtDescription">
Your application is not listening for the <code>uncaughtException</code>
event on the main <code>process</code>. Electron shows a dialog with a
stack trace by default if you do not provide a listener for this event.
It is important to listen for this event to report when it happens
and possibly notify the user about what has happened. View the <a href="https://nodejs.org/api/process.html#process_event_uncaughtexception"><code>process</code> docs</a>.
<br><br>
Listen for this event by adding the following to the main <code>process</code>:
<pre class="lint-code"><code class="language-javascript" data-field="uncaughtExample">process.on('uncaughtException', function () { })</code></pre>
</p>
</td>
</tr>
</tbody>
</table>
<div class="table-description" data-field="tableDescription">
This pane shows warnings about potential issues or missing
functionality in your application.
<br>
Click Lint App to inspect the running application.
</div>
</div>
</div>
</template>
<template id="about-view">
<div class="pane hidden" data-pane="about">
<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<button data-field="issueButton" class="btn btn-default pull-right">
<span class="toolbar-icon toolbar-icon-bug"></span>
Report Issue
</button>
</div>
</header>
<div class="padded table-scroller">
<h3>Devtron <small data-field="versionLabel"></small></h3>
<p>A DevTools extension for Electron</p>
<p><a href="https://github.com/electron/devtron">https://github.com/electron/devtron</a></p>
<h4>Keyboard Shortcuts</h4>
<h5>Panes</h5>
<div class="keybinding"><kbd>Alt + Up Arrow</kbd> — Navigate to previous pane</div>
<div class="keybinding"><kbd>Alt + Down Arrow</kbd> — Navigate to next pane</div>
<div class="keybinding"><kbd>Ctrl + E / Cmd + E</kbd> — Reload the pane</div>
<h5>Tables</h5>
<div class="keybinding"><kbd>Left Arrow</kbd> — Collapse selected item</div>
<div class="keybinding"><kbd>Right Arrow</kbd> — Expand selected item</div>
<div class="keybinding"><kbd>Up Arrow</kbd> — Select previous item</div>
<div class="keybinding"><kbd>Down Arrow</kbd> — Select next item</div>
<h4>Chrome APIs</h4>
<ul>
<li>Tab ID: <span data-field="tabID"></span></li>
<li>Runtime ID: <span data-field="runtimeID"></span></li>
</ul>
<p>
This is the list of Chrome DevTools Extension APIs currently implemented by Electron.
<a href="https://developer.chrome.com/extensions/devtools">View the docs.</a>
</p>
<pre data-field="chromeAPIs"></pre>
</div>
</div>
</template>
<template id="sidebar-view">
<div class="pane pane-sm sidebar">
<ul class="list-group">
<li class="list-group-item active" data-field="requireLink" data-pane-link="graph">
<div class="sidebar-icon sidebar-icon-graph"></div>
Require Graph
</li>
<li class="list-group-item" data-field="eventsLink" data-pane-link="listeners">
<div class="sidebar-icon sidebar-icon-events"></div>
Event Listeners
</li>
<li class="list-group-item" data-field="ipcLink" data-pane-link="ipc">
<div class="sidebar-icon sidebar-icon-ipc"></div>
IPC
</li>
<li class="list-group-item" data-field="lintLink" data-pane-link="lint">
<div class="sidebar-icon sidebar-icon-lint"></div>
Lint
</li>
<li class="list-group-item" data-field="accessibilityLink" data-pane-link="accessibility">
<div class="sidebar-icon sidebar-icon-accessibility"></div>
Accessibility
</li>
<li class="list-group-item" data-field="aboutLink" data-pane-link="about">
<div class="sidebar-icon sidebar-icon-about"></div>
About
</li>
</ul>
</div>
</template>
<template id="node-integration-view">
<div class="pane" data-pane="nodeIntegration">
<div class="padded node-integration-view">
<h3 class="error-heading">Node Integration Disabled</h3>
<p>
It appears that this <code>BrowserWindow</code> was created with
<code>nodeIntegration</code> set to <code>false</code>.
</p>
<p>
Devtron accesses Electron APIs via <code>require</code> so you will
need to expose <code>require</code> and <code>process</code> via a
preload script in order to use Devtron.
</p>
<p>
You can specify a preload script to the <code>BrowserWindow</code> constructor:
</p>
<pre class="lint-code"><code class="language-javascript" data-field="browserWindowExample">var window = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})</code></pre>
<p>
Then add the following to the <code>preload.js</code> script:
</p>
<pre class="lint-code"><code class="language-javascript" data-field="devtronExample">window.__devtron = {require: require, process: process}</code></pre>
</p>
You may want to guard the previous code block with a <code>NODE_ENV</code>
check so that these variables are only exposed during development:
</p>
<pre class="lint-code"><code class="language-javascript" data-field="envCheckExample">if (process.env.NODE_ENV === 'development')</code></pre>
<p>
Restart your application once you've configured this preload script
and Devtron should then be enabled for your app.
</p>
</div>
</div>
</template>
</body>
</html>