Merge pull request #5254 from preco21/document-fixes-3
docs: Improve documentations
This commit is contained in:
Jessica Lord
commit
a4de40ec89
25 changed files with 167 additions and 94 deletions
|
|
@ -453,7 +453,7 @@ use this method to ensure single instance.
|
|||
An example of activating the window of primary instance when a second instance
|
||||
starts:
|
||||
|
||||
```js
|
||||
```javascript
|
||||
var myWindow = null;
|
||||
|
||||
var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
|
||||
|
|
@ -489,7 +489,7 @@ correctly when DWM composition is disabled).
|
|||
|
||||
Usage example:
|
||||
|
||||
```js
|
||||
```javascript
|
||||
let browserOptions = {width: 1000, height: 800};
|
||||
|
||||
// Make the window transparent only if the platform supports it.
|
||||
|
|
@ -523,8 +523,8 @@ This method returns `true` if the system is in Dark Mode, and `false` otherwise.
|
|||
* `result` Integer - Result of import.
|
||||
|
||||
Imports the certificate in pkcs12 format into the platform certificate store.
|
||||
`callback` is called with the `result` of import operation, a value of `0` indicates
|
||||
success while any other value indicates failure according to chromium [net_error_list](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h).
|
||||
`callback` is called with the `result` of import operation, a value of `0`
|
||||
indicates success while any other value indicates failure according to chromium [net_error_list](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h).
|
||||
|
||||
### `app.commandLine.appendSwitch(switch[, value])`
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@ This module provides an interface for the `Squirrel` auto-updater framework.
|
|||
You can quickly launch a multi-platform release server for distributing your
|
||||
application by using one of these projects:
|
||||
|
||||
- [electron-release-server][electron-release-server]: *A fully featured, self-hosted release server for electron applications, compatible with auto-updater*
|
||||
- [squirrel-updates-server][squirrel-updates-server]: *A simple node.js server for Squirrel.Mac and Squirrel.Windows which uses GitHub releases*
|
||||
- [electron-release-server][electron-release-server]: *A fully featured,
|
||||
self-hosted release server for electron applications, compatible with
|
||||
auto-updater*
|
||||
- [squirrel-updates-server][squirrel-updates-server]: *A simple node.js server
|
||||
for Squirrel.Mac and Squirrel.Windows which uses GitHub releases*
|
||||
|
||||
## Platform notices
|
||||
|
||||
|
|
|
|||
|
|
@ -311,10 +311,11 @@ Emitted when an [App Command](https://msdn.microsoft.com/en-us/library/windows/d
|
|||
is invoked. These are typically related to keyboard media keys or browser
|
||||
commands, as well as the "Back" button built into some mice on Windows.
|
||||
|
||||
Commands are lowercased with underscores replaced with hyphens and the `APPCOMMAND_` prefix stripped off.
|
||||
Commands are lowercased with underscores replaced with hyphens and the
|
||||
`APPCOMMAND_` prefix stripped off.
|
||||
e.g. `APPCOMMAND_BROWSER_BACKWARD` is emitted as `browser-backward`.
|
||||
|
||||
```js
|
||||
```javascript
|
||||
someWindow.on('app-command', function(e, cmd) {
|
||||
// Navigate the window back when the user hits their mouse back button
|
||||
if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) {
|
||||
|
|
@ -675,13 +676,13 @@ Returns the title of the native window.
|
|||
**Note:** The title of web page can be different from the title of the native
|
||||
window.
|
||||
|
||||
### `win.setSheetOffset(offset)`
|
||||
### `win.setSheetOffset(offset)` _OS X_
|
||||
|
||||
Changes the attachment point for sheets on Mac OS X. By default, sheets are attached
|
||||
just below the window frame, but you may want to display them beneath a HTML-rendered
|
||||
toolbar. For example:
|
||||
Changes the attachment point for sheets on Mac OS X. By default, sheets are
|
||||
attached just below the window frame, but you may want to display them beneath
|
||||
a HTML-rendered toolbar. For example:
|
||||
|
||||
```
|
||||
```javascript
|
||||
var toolbarRect = document.getElementById('toolbar').getBoundingClientRect();
|
||||
win.setSheetOffset(toolbarRect.height);
|
||||
```
|
||||
|
|
@ -823,8 +824,8 @@ cleared
|
|||
* `description` String - a description that will be provided to Accessibility
|
||||
screen readers
|
||||
|
||||
Sets a 16 x 16 pixel overlay onto the current taskbar icon, usually used to convey some
|
||||
sort of application status or to passively notify the user.
|
||||
Sets a 16 x 16 pixel overlay onto the current taskbar icon, usually used to
|
||||
convey some sort of application status or to passively notify the user.
|
||||
|
||||
### `win.setHasShadow(hasShadow)` _OS X_
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,8 @@ ID.
|
|||
|
||||
## crash-reporter Payload
|
||||
|
||||
The crash reporter will send the following data to the `submitURL` as a `multipart/form-data` `POST`:
|
||||
The crash reporter will send the following data to the `submitURL` as
|
||||
a `multipart/form-data` `POST`:
|
||||
|
||||
* `ver` String - The version of Electron.
|
||||
* `platform` String - e.g. 'win32'.
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ function getUserMediaError(e) {
|
|||
|
||||
When creating a constraints object for the `navigator.webkitGetUserMedia` call,
|
||||
if you are using a source from `desktopCapturer` your `chromeMediaSource` must
|
||||
be set to `"desktop"` and your `audio` must be set to `false`.
|
||||
be set to `"desktop"` and your `audio` must be set to `false`.
|
||||
|
||||
If you wish to
|
||||
capture the audio and video from the entire desktop you can set
|
||||
|
|
@ -72,7 +72,7 @@ captured screen or individual window, and has following properties:
|
|||
* `name` String - The described name of the capturing screen or window. If the
|
||||
source is a screen, the name will be `Entire Screen` or `Screen <index>`; if
|
||||
it is a window, the name will be the window's title.
|
||||
* `thumbnail` A thumbnail [native image](native-image.md).
|
||||
* `thumbnail` [NativeImage](native-image.md) - A thumbnail native image.
|
||||
|
||||
**Note:** There is no guarantee that the size of `source.thumbnail` is always
|
||||
the same as the `thumnbailSize` in `options`. It also depends on the scale of
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ const dialog = require('electron').dialog;
|
|||
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));
|
||||
```
|
||||
|
||||
The Dialog is opened from Electron's main thread. If you want to use the dialog object from a renderer process, remember to access it using the remote:
|
||||
The Dialog is opened from Electron's main thread. If you want to use the dialog
|
||||
object from a renderer process, remember to access it using the remote:
|
||||
|
||||
```javascript
|
||||
const dialog = require('electron').remote.dialog;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
# Frameless Window
|
||||
|
||||
A frameless window is a window that has no [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of the window, like toolbars, that are not a part of the web page. These are options on the [`BrowserWindow`](browser-window.md) class.
|
||||
A frameless window is a window that has no
|
||||
[chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of
|
||||
the window, like toolbars, that are not a part of the web page. These are
|
||||
options on the [`BrowserWindow`](browser-window.md) class.
|
||||
|
||||
## Create a frameless window
|
||||
|
||||
|
|
@ -38,7 +41,8 @@ var win = new BrowserWindow({ transparent: true, frame: false });
|
|||
### Limitations
|
||||
|
||||
* You can not click through the transparent area. We are going to introduce an
|
||||
API to set window shape to solve this, see [our issue](https://github.com/electron/electron/issues/1335) for details.
|
||||
API to set window shape to solve this, see
|
||||
[our issue](https://github.com/electron/electron/issues/1335) for details.
|
||||
* Transparent windows are not resizable. Setting `resizable` to `true` may make
|
||||
a transparent window stop working on some platforms.
|
||||
* The `blur` filter only applies to the web page, so there is no way to apply
|
||||
|
|
|
|||
|
|
@ -22,9 +22,10 @@ Create a new `MenuItem` with the following method:
|
|||
* `sublabel` String
|
||||
* `accelerator` [Accelerator](accelerator.md)
|
||||
* `icon` [NativeImage](native-image.md)
|
||||
* `enabled` Boolean - If false, the menu item will be greyed out and unclickable.
|
||||
* `enabled` Boolean - If false, the menu item will be greyed out and
|
||||
unclickable.
|
||||
* `visible` Boolean - If false, the menu item will be entirely hidden.
|
||||
* `checked` Boolean - Should only be specified for `checkbox` or `radio` type
|
||||
* `checked` Boolean - Should only be specified for `checkbox` or `radio` type
|
||||
menu items.
|
||||
* `submenu` Menu - Should be specified for `submenu` type menu items. If
|
||||
`submenu` is specified, the `type: 'submenu'` can be omitted. If the value
|
||||
|
|
@ -61,7 +62,8 @@ On OS X `role` can also have following additional values:
|
|||
* `help` - The submenu is a "Help" menu
|
||||
* `services` - The submenu is a "Services" menu
|
||||
|
||||
When specifying `role` on OS X, `label` and `accelerator` are the only options that will affect the MenuItem. All other options will be ignored.
|
||||
When specifying `role` on OS X, `label` and `accelerator` are the only options
|
||||
that will affect the MenuItem. All other options will be ignored.
|
||||
|
||||
## Instance Properties
|
||||
|
||||
|
|
@ -79,4 +81,3 @@ selected. You can add a `click` function to do additional work.
|
|||
A `radio` menu item will turn on its `checked` property when clicked, and
|
||||
will turn off that property for all adjacent items in the same menu. Again,
|
||||
you can add a `click` function for additional behavior.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ upstream node:
|
|||
* `process.resourcesPath` String - Path to JavaScript source code.
|
||||
* `process.mas` Boolean - For Mac App Store build, this value is `true`, for
|
||||
other builds it is `undefined`.
|
||||
* `process.windowsStore` Boolean - If the app is running as a Windows Store app (appx), this value is `true`, for
|
||||
other builds it is `undefined`.
|
||||
* `process.windowsStore` Boolean - If the app is running as a Windows Store app
|
||||
(appx), this value is `true`, for other builds it is `undefined`.
|
||||
|
||||
## Events
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ beginning to load the web page or the main script.
|
|||
It can be used by the preload script to add removed Node global symbols back to
|
||||
the global scope when node integration is turned off:
|
||||
|
||||
```js
|
||||
```javascript
|
||||
// preload.js
|
||||
var _setImmediate = setImmediate;
|
||||
var _clearImmediate = clearImmediate;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# screen
|
||||
|
||||
The `screen` module retrieves information about screen size, displays, cursor
|
||||
position, etc. You cannot not use this module until the `ready` event of the
|
||||
position, etc. You can not use this module until the `ready` event of the
|
||||
`app` module is emitted (by invoking or requiring it).
|
||||
|
||||
`screen` is an [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter).
|
||||
|
|
|
|||
|
|
@ -295,9 +295,9 @@ myWindow.webContents.session.setCertificateVerifyProc(function(hostname, cert, c
|
|||
|
||||
* `handler` Function
|
||||
* `webContents` Object - [WebContents](web-contents.md) requesting the permission.
|
||||
* `permission` String - Enum of 'media', 'geolocation', 'notifications', 'midiSysex',
|
||||
* `permission` String - Enum of 'media', 'geolocation', 'notifications', 'midiSysex',
|
||||
'pointerLock', 'fullscreen', 'openExternal'.
|
||||
* `callback` Function - Allow or deny the permission.
|
||||
* `callback` Function - Allow or deny the permission.
|
||||
|
||||
Sets the handler which can be used to respond to permission requests for the `session`.
|
||||
Calling `callback(true)` will allow the permission and `callback(false)` will reject it.
|
||||
|
|
@ -422,7 +422,7 @@ response are visible by the time this listener is fired.
|
|||
* `timestamp` Double
|
||||
* `requestHeaders` Object
|
||||
|
||||
#### `ses.webRequest.onHeadersReceived([filter,] listener)`
|
||||
#### `ses.webRequest.onHeadersReceived([filter,]listener)`
|
||||
|
||||
* `filter` Object
|
||||
* `listener` Function
|
||||
|
|
@ -447,8 +447,9 @@ The `callback` has to be called with an `response` object:
|
|||
* `cancel` Boolean
|
||||
* `responseHeaders` Object (optional) - When provided, the server is assumed
|
||||
to have responded with these headers.
|
||||
* `statusLine` String (optional) - Should be provided when overriding `responseHeaders`
|
||||
to change header status otherwise original response header's status will be used.
|
||||
* `statusLine` String (optional) - Should be provided when overriding
|
||||
`responseHeaders` to change header status otherwise original response
|
||||
header's status will be used.
|
||||
|
||||
#### `ses.webRequest.onResponseStarted([filter, ]listener)`
|
||||
|
||||
|
|
@ -466,7 +467,7 @@ and response headers are available.
|
|||
* `resourceType` String
|
||||
* `timestamp` Double
|
||||
* `responseHeaders` Object
|
||||
* `fromCache` Boolean - Indicates whether the response was fetched from disk
|
||||
* `fromCache` Boolean - Indicates whether the response was fetched from disk
|
||||
cache.
|
||||
* `statusCode` Integer
|
||||
* `statusLine` String
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ both processes.
|
|||
|
||||
The basic rule is: if a module is [GUI][gui] or low-level system related, then
|
||||
it should be only available in the main process. You need to be familiar with
|
||||
the concept of [main process vs. renderer process](../tutorial/quick-start.md#the-main-process) scripts to be
|
||||
able to use those modules.
|
||||
the concept of [main process vs. renderer process](../tutorial/quick-start.md#the-main-process)
|
||||
scripts to be able to use those modules.
|
||||
|
||||
The main process script is just like a normal Node.js script:
|
||||
|
||||
|
|
|
|||
|
|
@ -278,7 +278,8 @@ Emitted when media is paused or done playing.
|
|||
|
||||
### Event: 'did-change-theme-color'
|
||||
|
||||
Emitted when a page's theme color changes. This is usually due to encountering a meta tag:
|
||||
Emitted when a page's theme color changes. This is usually due to encountering
|
||||
a meta tag:
|
||||
|
||||
```html
|
||||
<meta name='theme-color' content='#ff0000'>
|
||||
|
|
@ -355,7 +356,8 @@ Returns whether web page is still loading resources.
|
|||
|
||||
### `webContents.isLoadingMainFrame()`
|
||||
|
||||
Returns whether the main frame (and not just iframes or frames within it) is still loading.
|
||||
Returns whether the main frame (and not just iframes or frames within it) is
|
||||
still loading.
|
||||
|
||||
### `webContents.isWaitingForResponse()`
|
||||
|
||||
|
|
@ -525,9 +527,10 @@ Inserts `text` to the focused element.
|
|||
uppercase letter followed by a lowercase or non-letter.
|
||||
Accepts several other intra-word matches, defaults to `false`.
|
||||
|
||||
Starts a request to find all matches for the `text` in the web page and returns an `Integer`
|
||||
representing the request id used for the request. The result of the request can be
|
||||
obtained by subscribing to [`found-in-page`](web-contents.md#event-found-in-page) event.
|
||||
Starts a request to find all matches for the `text` in the web page and returns
|
||||
an `Integer` representing the request id used for the request. The result of
|
||||
the request can be obtained by subscribing to
|
||||
[`found-in-page`](web-contents.md#event-found-in-page) event.
|
||||
|
||||
### `webContents.stopFindInPage(action)`
|
||||
|
||||
|
|
|
|||
|
|
@ -47,17 +47,17 @@ and displays a "loading..." message during the load time:
|
|||
|
||||
## CSS Styling Notes
|
||||
|
||||
Please note that the `webview` tag's style uses `display:flex;` internally to
|
||||
ensure the child `object` element fills the full height and width of its `webview`
|
||||
container when used with traditional and flexbox layouts (since v0.36.11). Please
|
||||
do not overwrite the default `display:flex;` CSS property, unless specifying
|
||||
Please note that the `webview` tag's style uses `display:flex;` internally to
|
||||
ensure the child `object` element fills the full height and width of its `webview`
|
||||
container when used with traditional and flexbox layouts (since v0.36.11). Please
|
||||
do not overwrite the default `display:flex;` CSS property, unless specifying
|
||||
`display:inline-flex;` for inline layout.
|
||||
|
||||
`webview` has issues being hidden using the `hidden` attribute or using `display: none;`.
|
||||
It can cause unusual rendering behaviour within its child `browserplugin` object
|
||||
and the web page is reloaded, when the `webview` is un-hidden, as opposed to just
|
||||
becoming visible again. The recommended approach is to hide the `webview` using
|
||||
CSS by zeroing the `width` & `height` and allowing the element to shrink to the 0px
|
||||
`webview` has issues being hidden using the `hidden` attribute or using `display: none;`.
|
||||
It can cause unusual rendering behaviour within its child `browserplugin` object
|
||||
and the web page is reloaded, when the `webview` is un-hidden, as opposed to just
|
||||
becoming visible again. The recommended approach is to hide the `webview` using
|
||||
CSS by zeroing the `width` & `height` and allowing the element to shrink to the 0px
|
||||
dimensions via `flex`.
|
||||
|
||||
```html
|
||||
|
|
@ -70,7 +70,7 @@ dimensions via `flex`.
|
|||
webview.hide {
|
||||
flex: 0 1;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ $ git clone https://github.com/electron/electron.git
|
|||
## Bootstrapping
|
||||
|
||||
The bootstrap script will download all necessary build dependencies and create
|
||||
the build project files. Notice that we're using [ninja](https://ninja-build.org/) to build Electron so
|
||||
there is no Xcode project generated.
|
||||
the build project files. Notice that we're using [ninja](https://ninja-build.org/)
|
||||
to build Electron so there is no Xcode project generated.
|
||||
|
||||
```bash
|
||||
$ cd electron
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ Follow the guidelines below for building Electron on Windows.
|
|||
* [Node.js](http://nodejs.org/download/)
|
||||
* [Git](http://git-scm.com)
|
||||
|
||||
If you don't currently have a Windows installation, [modern.ie](https://www.modern.ie/en-us/virtualization-tools#downloads)
|
||||
If you don't currently have a Windows installation,
|
||||
[modern.ie](https://www.modern.ie/en-us/virtualization-tools#downloads)
|
||||
has timebombed versions of Windows that you can use to build Electron.
|
||||
|
||||
Building Electron is done entirely with command-line scripts and cannot be done
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
# Build System Overview
|
||||
|
||||
Electron uses [gyp](https://gyp.gsrc.io/) for project generation and [ninja](https://ninja-build.org/) for building. Project
|
||||
configurations can be found in the `.gyp` and `.gypi` files.
|
||||
Electron uses [gyp](https://gyp.gsrc.io/) for project generation and
|
||||
[ninja](https://ninja-build.org/) for building. Project configurations can
|
||||
be found in the `.gyp` and `.gypi` files.
|
||||
|
||||
## Gyp Files
|
||||
|
||||
|
|
|
|||
|
|
@ -45,8 +45,10 @@ Electron APIs uses the same capitalization scheme as Node.js:
|
|||
|
||||
- When the module itself is a class like `BrowserWindow`, use `CamelCase`.
|
||||
- When the module is a set of APIs, like `globalShortcut`, use `mixedCase`.
|
||||
- When the API is a property of object, and it is complex enough to be in a separate chapter like `win.webContents`, use `mixedCase`.
|
||||
- For other non-module APIs, use natural titles, like `<webview> Tag` or `Process Object`.
|
||||
- When the API is a property of object, and it is complex enough to be in a
|
||||
separate chapter like `win.webContents`, use `mixedCase`.
|
||||
- For other non-module APIs, use natural titles, like `<webview> Tag` or
|
||||
`Process Object`.
|
||||
|
||||
When creating a new API, it is preferred to use getters and setters instead of
|
||||
jQuery's one-function style. For example, `.getText()` and `.setText(text)`
|
||||
|
|
|
|||
|
|
@ -1,38 +1,93 @@
|
|||
# Debugging Electron in Windows
|
||||
If you experience crashes or issues in Electron that you believe are not caused by your JavaScript application, but instead by Electron itself, debugging can be a little bit tricky, especially for developers not used to native/C++ debugging. However, using Visual Studio, GitHub's hosted Electron Symbol Server, and the Electron source code, it is fairly easy to enable step-through debugging with breakpoints inside Electron's source code.
|
||||
|
||||
### Requirements
|
||||
* **A debug build of Electron**: The easiest way is usually building it yourself, using the tools and prerequisites listed in the [build instructions for Windows](build-instructions-osx.md). While you can easily attach to and debug Electron as you can download it directly, you will find that it is heavily optimized, making debugging substantially more difficult: The debugger will not be able to show you the content of all variables and the execution path can seem strange because of inlining, tail calls, and other compiler optimizations.
|
||||
|
||||
* **Visual Studio with C++ Tools**: The free community editions of [Visual Studio 2013]() and [Visual Studio 2015]() both work.
|
||||
|
||||
Once installed, [configure Visual Studio to use GitHub's Electron Symbol server](setting-up-symbol-server.md). It will enable Visual Studio to gain a better understanding of what happens inside Electron, making it easier to present variables in a human-readable format.
|
||||
|
||||
* **ProcMon**: The [free SysInternals tool](https://technet.microsoft.com/en-us/sysinternals/processmonitor.aspx) allows you to inspect a processes parameters, file handles, and registry operations.
|
||||
|
||||
# Attaching to and Debugging Electron
|
||||
To start a debugging session, open up PowerShell/CMD and execute your debug build of Electron, using the application to open as a parameter.
|
||||
If you experience crashes or issues in Electron that you believe are not caused
|
||||
by your JavaScript application, but instead by Electron itself, debugging can
|
||||
be a little bit tricky, especially for developers not used to native/C++
|
||||
debugging. However, using Visual Studio, GitHub's hosted Electron Symbol Server,
|
||||
and the Electron source code, it is fairly easy to enable step-through debugging
|
||||
with breakpoints inside Electron's source code.
|
||||
|
||||
```
|
||||
./out/D/electron.exe ~/my-electron-app/
|
||||
## Requirements
|
||||
|
||||
* **A debug build of Electron**: The easiest way is usually building it
|
||||
yourself, using the tools and prerequisites listed in the
|
||||
[build instructions for Windows](build-instructions-osx.md). While you can
|
||||
easily attach to and debug Electron as you can download it directly, you will
|
||||
find that it is heavily optimized, making debugging substantially more
|
||||
difficult: The debugger will not be able to show you the content of all
|
||||
variables and the execution path can seem strange because of inlining,
|
||||
tail calls, and other compiler optimizations.
|
||||
|
||||
* **Visual Studio with C++ Tools**: The free community editions of Visual
|
||||
Studio 2013 and Visual Studio 2015 both work. Once installed,
|
||||
[configure Visual Studio to use GitHub's Electron Symbol server](setting-up-symbol-server.md).
|
||||
It will enable Visual Studio to gain a better understanding of what happens
|
||||
inside Electron, making it easier to present variables in a human-readable
|
||||
format.
|
||||
|
||||
* **ProcMon**: The [free SysInternals tool][sys-internals] allows you to inspect
|
||||
a processes parameters, file handles, and registry operations.
|
||||
|
||||
## Attaching to and Debugging Electron
|
||||
|
||||
To start a debugging session, open up PowerShell/CMD and execute your debug
|
||||
build of Electron, using the application to open as a parameter.
|
||||
|
||||
```powershell
|
||||
$ ./out/D/electron.exe ~/my-electron-app/
|
||||
```
|
||||
|
||||
## Setting Breakpoints
|
||||
Then, open up Visual Studio. Electron is not built with Visual Studio and hence does not contain a project file - you can however open up the source code files "As File", meaning that Visual Studio will open them up by themselves. You can still set breakpoints - Visual Studio will automatically figure out that the source code matches the code running in the attached process and break accordingly.
|
||||
### Setting Breakpoints
|
||||
|
||||
Relevant code files can be found in `./atom/` as well as in Brightray, found in `./vendor/brightray/browser` and `./vendor/brightray/common`. If you're hardcore, you can also debug Chromium directly, which is obviously found in `chromium_src`.
|
||||
Then, open up Visual Studio. Electron is not built with Visual Studio and hence
|
||||
does not contain a project file - you can however open up the source code files
|
||||
"As File", meaning that Visual Studio will open them up by themselves. You can
|
||||
still set breakpoints - Visual Studio will automatically figure out that the
|
||||
source code matches the code running in the attached process and break
|
||||
accordingly.
|
||||
|
||||
## Attaching
|
||||
You can attach the Visual Studio debugger to a running process on a local or remote computer. After the process is running, click Debug / Attach to Process (or press `CTRL+ALT+P`) to open the "Attach to Process" dialog box. You can use this capability to debug apps that are running on a local or remote computer, debug multiple processes simultaneously.
|
||||
Relevant code files can be found in `./atom/` as well as in Brightray, found in
|
||||
`./vendor/brightray/browser` and `./vendor/brightray/common`. If you're hardcore,
|
||||
you can also debug Chromium directly, which is obviously found in `chromium_src`.
|
||||
|
||||
If Electron is running under a different user account, select the `Show processes from all users` check box. Notice that depending on how many BrowserWindows your app opened, you will see multiple processes. A typical one-window app will result in Visual Studio presenting you with two `Electron.exe` entries - one for the main process and one for the renderer process. Since the list only gives you names, there's currently no reliable way of figuring out which is which.
|
||||
### Attaching
|
||||
|
||||
#### Which Process Should I Attach to?
|
||||
Code executed within the main process (that is, code found in or eventually run by your main JavaScript file) as well as code called using the remote (`require('electron').remote`) will run inside the main process, while other code will execute inside its respective renderer process.
|
||||
You can attach the Visual Studio debugger to a running process on a local or
|
||||
remote computer. After the process is running, click Debug / Attach to Process
|
||||
(or press `CTRL+ALT+P`) to open the "Attach to Process" dialog box. You can use
|
||||
this capability to debug apps that are running on a local or remote computer,
|
||||
debug multiple processes simultaneously.
|
||||
|
||||
You can be attached to multiple programs when you are debugging, but only one program is active in the debugger at any time. You can set the active program in the `Debug Location` toolbar or the `Processes window`.
|
||||
If Electron is running under a different user account, select the
|
||||
`Show processes from all users` check box. Notice that depending on how many
|
||||
BrowserWindows your app opened, you will see multiple processes. A typical
|
||||
one-window app will result in Visual Studio presenting you with two
|
||||
`Electron.exe` entries - one for the main process and one for the renderer
|
||||
process. Since the list only gives you names, there's currently no reliable
|
||||
way of figuring out which is which.
|
||||
|
||||
### Which Process Should I Attach to?
|
||||
|
||||
Code executed within the main process (that is, code found in or eventually run
|
||||
by your main JavaScript file) as well as code called using the remote
|
||||
(`require('electron').remote`) will run inside the main process, while other
|
||||
code will execute inside its respective renderer process.
|
||||
|
||||
You can be attached to multiple programs when you are debugging, but only one
|
||||
program is active in the debugger at any time. You can set the active program
|
||||
in the `Debug Location` toolbar or the `Processes window`.
|
||||
|
||||
## Using ProcMon to Observe a Process
|
||||
While Visual Studio is fantastic for inspecting specific code paths, ProcMon's strength is really in observing everything your application is doing with the operating system - it captures File, Registry, Network, Process, and Profiling details of processes. It attempts to log *all* events occurring and can be quite overwhelming, but if you seek to understand what and how your application is doing to the operating system, it can be a valuable resource.
|
||||
|
||||
For an introduction to ProcMon's basic and advanced debugging features, go check out [this video tutorial](https://channel9.msdn.com/shows/defrag-tools/defrag-tools-4-process-monitor) provided by Microsoft.
|
||||
While Visual Studio is fantastic for inspecting specific code paths, ProcMon's
|
||||
strength is really in observing everything your application is doing with the
|
||||
operating system - it captures File, Registry, Network, Process, and Profiling
|
||||
details of processes. It attempts to log **all** events occurring and can be
|
||||
quite overwhelming, but if you seek to understand what and how your application
|
||||
is doing to the operating system, it can be a valuable resource.
|
||||
|
||||
For an introduction to ProcMon's basic and advanced debugging features, go check
|
||||
out [this video tutorial][procmon-instructions] provided by Microsoft.
|
||||
|
||||
[sys-internals]: https://technet.microsoft.com/en-us/sysinternals/processmonitor.aspx
|
||||
[procmon-instructions]: https://channel9.msdn.com/shows/defrag-tools/defrag-tools-4-process-monitor
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Electron
|
|||
├── default_app - The default page to show when Electron is started without
|
||||
| providing an app.
|
||||
├── docs - Documentations.
|
||||
├── lib - JavaScript source code.
|
||||
├── lib - JavaScript source code.
|
||||
| ├── browser - Javascript main process initialization code.
|
||||
| | └── api - Javascript API implementation.
|
||||
| ├── common - JavaScript used by both the main and renderer processes
|
||||
|
|
|
|||
|
|
@ -77,8 +77,8 @@ app.on('ready', function() {
|
|||
## I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
|
||||
|
||||
Due to the Node.js integration of Electron, there are some extra symbols
|
||||
inserted into the DOM like `module`, `exports`, `require`. This causes problems for
|
||||
some libraries since they want to insert the symbols with the same names.
|
||||
inserted into the DOM like `module`, `exports`, `require`. This causes problems
|
||||
for some libraries since they want to insert the symbols with the same names.
|
||||
|
||||
To solve this, you can turn off node integration in Electron:
|
||||
|
||||
|
|
|
|||
|
|
@ -68,9 +68,10 @@ $ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin
|
|||
|
||||
### 7. Load the debugger UI
|
||||
|
||||
Open http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 in the Chrome browser. You may have to click pause if starting with debug-brk to see the entry line.
|
||||
Open http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 in the Chrome
|
||||
browser. You may have to click pause if starting with debug-brk to see the
|
||||
entry line.
|
||||
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
[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
|
||||
|
||||
|
|
|
|||
|
|
@ -53,8 +53,7 @@ GNOME, KDE.
|
|||
### OS X
|
||||
|
||||
Notifications are straight-forward on OS X, you should however be aware of
|
||||
[Apple's Human Interface guidelines regarding
|
||||
notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html).
|
||||
[Apple's Human Interface guidelines regarding notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html).
|
||||
|
||||
Note that notifications are limited to 256 bytes in size - and will be truncated
|
||||
if you exceed that limit.
|
||||
|
|
|
|||
|
|
@ -183,6 +183,5 @@ ERN)][ern-tutorial].
|
|||
[create-record]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/CreatingiTunesConnectRecord.html
|
||||
[submit-for-review]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/SubmittingTheApp.html
|
||||
[app-sandboxing]: https://developer.apple.com/app-sandboxing/
|
||||
[issue-3871]: https://github.com/electron/electron/issues/3871
|
||||
[ern-tutorial]: https://carouselapps.com/2015/12/15/legally-submit-app-apples-app-store-uses-encryption-obtain-ern/
|
||||
[temporary-exception]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AppSandboxTemporaryExceptionEntitlements.html
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ working as expected.
|
|||
|
||||
### electron-prebuilt
|
||||
|
||||
If you've installed `electron-prebuilt` globally with `npm`, then you will only need
|
||||
to run the following in your app's source directory:
|
||||
If you've installed `electron-prebuilt` globally with `npm`, then you will only
|
||||
need to run the following in your app's source directory:
|
||||
|
||||
```bash
|
||||
electron .
|
||||
|
|
|
|||
Loading…
Reference in a new issue