Merge pull request #5254 from preco21/document-fixes-3
docs: Improve documentations
This commit is contained in:
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
|
An example of activating the window of primary instance when a second instance
|
||||||
starts:
|
starts:
|
||||||
|
|
||||||
```js
|
```javascript
|
||||||
var myWindow = null;
|
var myWindow = null;
|
||||||
|
|
||||||
var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
|
var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
|
||||||
|
@ -489,7 +489,7 @@ correctly when DWM composition is disabled).
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
```js
|
```javascript
|
||||||
let browserOptions = {width: 1000, height: 800};
|
let browserOptions = {width: 1000, height: 800};
|
||||||
|
|
||||||
// Make the window transparent only if the platform supports it.
|
// 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.
|
* `result` Integer - Result of import.
|
||||||
|
|
||||||
Imports the certificate in pkcs12 format into the platform certificate store.
|
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
|
`callback` is called with the `result` of import operation, a value of `0`
|
||||||
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).
|
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])`
|
### `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
|
You can quickly launch a multi-platform release server for distributing your
|
||||||
application by using one of these projects:
|
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*
|
- [electron-release-server][electron-release-server]: *A fully featured,
|
||||||
- [squirrel-updates-server][squirrel-updates-server]: *A simple node.js server for Squirrel.Mac and Squirrel.Windows which uses GitHub releases*
|
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
|
## 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
|
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, 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`.
|
e.g. `APPCOMMAND_BROWSER_BACKWARD` is emitted as `browser-backward`.
|
||||||
|
|
||||||
```js
|
```javascript
|
||||||
someWindow.on('app-command', function(e, cmd) {
|
someWindow.on('app-command', function(e, cmd) {
|
||||||
// Navigate the window back when the user hits their mouse back button
|
// Navigate the window back when the user hits their mouse back button
|
||||||
if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) {
|
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
|
**Note:** The title of web page can be different from the title of the native
|
||||||
window.
|
window.
|
||||||
|
|
||||||
### `win.setSheetOffset(offset)`
|
### `win.setSheetOffset(offset)` _OS X_
|
||||||
|
|
||||||
Changes the attachment point for sheets on Mac OS X. By default, sheets are attached
|
Changes the attachment point for sheets on Mac OS X. By default, sheets are
|
||||||
just below the window frame, but you may want to display them beneath a HTML-rendered
|
attached just below the window frame, but you may want to display them beneath
|
||||||
toolbar. For example:
|
a HTML-rendered toolbar. For example:
|
||||||
|
|
||||||
```
|
```javascript
|
||||||
var toolbarRect = document.getElementById('toolbar').getBoundingClientRect();
|
var toolbarRect = document.getElementById('toolbar').getBoundingClientRect();
|
||||||
win.setSheetOffset(toolbarRect.height);
|
win.setSheetOffset(toolbarRect.height);
|
||||||
```
|
```
|
||||||
|
@ -823,8 +824,8 @@ cleared
|
||||||
* `description` String - a description that will be provided to Accessibility
|
* `description` String - a description that will be provided to Accessibility
|
||||||
screen readers
|
screen readers
|
||||||
|
|
||||||
Sets a 16 x 16 pixel overlay onto the current taskbar icon, usually used to convey some
|
Sets a 16 x 16 pixel overlay onto the current taskbar icon, usually used to
|
||||||
sort of application status or to passively notify the user.
|
convey some sort of application status or to passively notify the user.
|
||||||
|
|
||||||
### `win.setHasShadow(hasShadow)` _OS X_
|
### `win.setHasShadow(hasShadow)` _OS X_
|
||||||
|
|
||||||
|
|
|
@ -60,7 +60,8 @@ ID.
|
||||||
|
|
||||||
## crash-reporter Payload
|
## 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.
|
* `ver` String - The version of Electron.
|
||||||
* `platform` String - e.g. 'win32'.
|
* `platform` String - e.g. 'win32'.
|
||||||
|
|
|
@ -40,7 +40,7 @@ function getUserMediaError(e) {
|
||||||
|
|
||||||
When creating a constraints object for the `navigator.webkitGetUserMedia` call,
|
When creating a constraints object for the `navigator.webkitGetUserMedia` call,
|
||||||
if you are using a source from `desktopCapturer` your `chromeMediaSource` must
|
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
|
If you wish to
|
||||||
capture the audio and video from the entire desktop you can set
|
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
|
* `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
|
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.
|
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
|
**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
|
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' ]}));
|
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
|
```javascript
|
||||||
const dialog = require('electron').remote.dialog;
|
const dialog = require('electron').remote.dialog;
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
# Frameless Window
|
# 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
|
## Create a frameless window
|
||||||
|
|
||||||
|
@ -38,7 +41,8 @@ var win = new BrowserWindow({ transparent: true, frame: false });
|
||||||
### Limitations
|
### Limitations
|
||||||
|
|
||||||
* You can not click through the transparent area. We are going to introduce an
|
* 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
|
* Transparent windows are not resizable. Setting `resizable` to `true` may make
|
||||||
a transparent window stop working on some platforms.
|
a transparent window stop working on some platforms.
|
||||||
* The `blur` filter only applies to the web page, so there is no way to apply
|
* 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
|
* `sublabel` String
|
||||||
* `accelerator` [Accelerator](accelerator.md)
|
* `accelerator` [Accelerator](accelerator.md)
|
||||||
* `icon` [NativeImage](native-image.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.
|
* `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.
|
menu items.
|
||||||
* `submenu` Menu - Should be specified for `submenu` type menu items. If
|
* `submenu` Menu - Should be specified for `submenu` type menu items. If
|
||||||
`submenu` is specified, the `type: 'submenu'` can be omitted. If the value
|
`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
|
* `help` - The submenu is a "Help" menu
|
||||||
* `services` - The submenu is a "Services" 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
|
## 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
|
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,
|
will turn off that property for all adjacent items in the same menu. Again,
|
||||||
you can add a `click` function for additional behavior.
|
you can add a `click` function for additional behavior.
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,8 @@ upstream node:
|
||||||
* `process.resourcesPath` String - Path to JavaScript source code.
|
* `process.resourcesPath` String - Path to JavaScript source code.
|
||||||
* `process.mas` Boolean - For Mac App Store build, this value is `true`, for
|
* `process.mas` Boolean - For Mac App Store build, this value is `true`, for
|
||||||
other builds it is `undefined`.
|
other builds it is `undefined`.
|
||||||
* `process.windowsStore` Boolean - If the app is running as a Windows Store app (appx), this value is `true`, for
|
* `process.windowsStore` Boolean - If the app is running as a Windows Store app
|
||||||
other builds it is `undefined`.
|
(appx), this value is `true`, for other builds it is `undefined`.
|
||||||
|
|
||||||
## Events
|
## 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
|
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:
|
the global scope when node integration is turned off:
|
||||||
|
|
||||||
```js
|
```javascript
|
||||||
// preload.js
|
// preload.js
|
||||||
var _setImmediate = setImmediate;
|
var _setImmediate = setImmediate;
|
||||||
var _clearImmediate = clearImmediate;
|
var _clearImmediate = clearImmediate;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
# screen
|
# screen
|
||||||
|
|
||||||
The `screen` module retrieves information about screen size, displays, cursor
|
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).
|
`app` module is emitted (by invoking or requiring it).
|
||||||
|
|
||||||
`screen` is an [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter).
|
`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
|
* `handler` Function
|
||||||
* `webContents` Object - [WebContents](web-contents.md) requesting the permission.
|
* `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'.
|
'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`.
|
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.
|
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
|
* `timestamp` Double
|
||||||
* `requestHeaders` Object
|
* `requestHeaders` Object
|
||||||
|
|
||||||
#### `ses.webRequest.onHeadersReceived([filter,] listener)`
|
#### `ses.webRequest.onHeadersReceived([filter,]listener)`
|
||||||
|
|
||||||
* `filter` Object
|
* `filter` Object
|
||||||
* `listener` Function
|
* `listener` Function
|
||||||
|
@ -447,8 +447,9 @@ The `callback` has to be called with an `response` object:
|
||||||
* `cancel` Boolean
|
* `cancel` Boolean
|
||||||
* `responseHeaders` Object (optional) - When provided, the server is assumed
|
* `responseHeaders` Object (optional) - When provided, the server is assumed
|
||||||
to have responded with these headers.
|
to have responded with these headers.
|
||||||
* `statusLine` String (optional) - Should be provided when overriding `responseHeaders`
|
* `statusLine` String (optional) - Should be provided when overriding
|
||||||
to change header status otherwise original response header's status will be used.
|
`responseHeaders` to change header status otherwise original response
|
||||||
|
header's status will be used.
|
||||||
|
|
||||||
#### `ses.webRequest.onResponseStarted([filter, ]listener)`
|
#### `ses.webRequest.onResponseStarted([filter, ]listener)`
|
||||||
|
|
||||||
|
@ -466,7 +467,7 @@ and response headers are available.
|
||||||
* `resourceType` String
|
* `resourceType` String
|
||||||
* `timestamp` Double
|
* `timestamp` Double
|
||||||
* `responseHeaders` Object
|
* `responseHeaders` Object
|
||||||
* `fromCache` Boolean - Indicates whether the response was fetched from disk
|
* `fromCache` Boolean - Indicates whether the response was fetched from disk
|
||||||
cache.
|
cache.
|
||||||
* `statusCode` Integer
|
* `statusCode` Integer
|
||||||
* `statusLine` String
|
* `statusLine` String
|
||||||
|
|
|
@ -11,8 +11,8 @@ both processes.
|
||||||
|
|
||||||
The basic rule is: if a module is [GUI][gui] or low-level system related, then
|
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
|
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
|
the concept of [main process vs. renderer process](../tutorial/quick-start.md#the-main-process)
|
||||||
able to use those modules.
|
scripts to be able to use those modules.
|
||||||
|
|
||||||
The main process script is just like a normal Node.js script:
|
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'
|
### 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
|
```html
|
||||||
<meta name='theme-color' content='#ff0000'>
|
<meta name='theme-color' content='#ff0000'>
|
||||||
|
@ -355,7 +356,8 @@ Returns whether web page is still loading resources.
|
||||||
|
|
||||||
### `webContents.isLoadingMainFrame()`
|
### `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()`
|
### `webContents.isWaitingForResponse()`
|
||||||
|
|
||||||
|
@ -525,9 +527,10 @@ Inserts `text` to the focused element.
|
||||||
uppercase letter followed by a lowercase or non-letter.
|
uppercase letter followed by a lowercase or non-letter.
|
||||||
Accepts several other intra-word matches, defaults to `false`.
|
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`
|
Starts a request to find all matches for the `text` in the web page and returns
|
||||||
representing the request id used for the request. The result of the request can be
|
an `Integer` representing the request id used for the request. The result of
|
||||||
obtained by subscribing to [`found-in-page`](web-contents.md#event-found-in-page) event.
|
the request can be obtained by subscribing to
|
||||||
|
[`found-in-page`](web-contents.md#event-found-in-page) event.
|
||||||
|
|
||||||
### `webContents.stopFindInPage(action)`
|
### `webContents.stopFindInPage(action)`
|
||||||
|
|
||||||
|
|
|
@ -47,17 +47,17 @@ and displays a "loading..." message during the load time:
|
||||||
|
|
||||||
## CSS Styling Notes
|
## CSS Styling Notes
|
||||||
|
|
||||||
Please note that the `webview` tag's style uses `display:flex;` internally to
|
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`
|
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
|
container when used with traditional and flexbox layouts (since v0.36.11). Please
|
||||||
do not overwrite the default `display:flex;` CSS property, unless specifying
|
do not overwrite the default `display:flex;` CSS property, unless specifying
|
||||||
`display:inline-flex;` for inline layout.
|
`display:inline-flex;` for inline layout.
|
||||||
|
|
||||||
`webview` has issues being hidden using the `hidden` attribute or using `display: none;`.
|
`webview` has issues being hidden using the `hidden` attribute or using `display: none;`.
|
||||||
It can cause unusual rendering behaviour within its child `browserplugin` object
|
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
|
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
|
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
|
CSS by zeroing the `width` & `height` and allowing the element to shrink to the 0px
|
||||||
dimensions via `flex`.
|
dimensions via `flex`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
@ -70,7 +70,7 @@ dimensions via `flex`.
|
||||||
webview.hide {
|
webview.hide {
|
||||||
flex: 0 1;
|
flex: 0 1;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
|
@ -22,8 +22,8 @@ $ git clone https://github.com/electron/electron.git
|
||||||
## Bootstrapping
|
## Bootstrapping
|
||||||
|
|
||||||
The bootstrap script will download all necessary build dependencies and create
|
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
|
the build project files. Notice that we're using [ninja](https://ninja-build.org/)
|
||||||
there is no Xcode project generated.
|
to build Electron so there is no Xcode project generated.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ cd electron
|
$ cd electron
|
||||||
|
|
|
@ -11,7 +11,8 @@ Follow the guidelines below for building Electron on Windows.
|
||||||
* [Node.js](http://nodejs.org/download/)
|
* [Node.js](http://nodejs.org/download/)
|
||||||
* [Git](http://git-scm.com)
|
* [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.
|
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
|
Building Electron is done entirely with command-line scripts and cannot be done
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
# Build System Overview
|
# Build System Overview
|
||||||
|
|
||||||
Electron uses [gyp](https://gyp.gsrc.io/) for project generation and [ninja](https://ninja-build.org/) for building. Project
|
Electron uses [gyp](https://gyp.gsrc.io/) for project generation and
|
||||||
configurations can be found in the `.gyp` and `.gypi` files.
|
[ninja](https://ninja-build.org/) for building. Project configurations can
|
||||||
|
be found in the `.gyp` and `.gypi` files.
|
||||||
|
|
||||||
## Gyp 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 itself is a class like `BrowserWindow`, use `CamelCase`.
|
||||||
- When the module is a set of APIs, like `globalShortcut`, use `mixedCase`.
|
- 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`.
|
- When the API is a property of object, and it is complex enough to be in a
|
||||||
- For other non-module APIs, use natural titles, like `<webview> Tag` or `Process Object`.
|
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
|
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)`
|
jQuery's one-function style. For example, `.getText()` and `.setText(text)`
|
||||||
|
|
|
@ -1,38 +1,93 @@
|
||||||
# Debugging Electron in Windows
|
# 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
|
If you experience crashes or issues in Electron that you believe are not caused
|
||||||
* **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.
|
by your JavaScript application, but instead by Electron itself, debugging can
|
||||||
|
be a little bit tricky, especially for developers not used to native/C++
|
||||||
* **Visual Studio with C++ Tools**: The free community editions of [Visual Studio 2013]() and [Visual Studio 2015]() both work.
|
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
|
||||||
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.
|
with breakpoints inside Electron's source code.
|
||||||
|
|
||||||
* **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.
|
|
||||||
|
|
||||||
```
|
## Requirements
|
||||||
./out/D/electron.exe ~/my-electron-app/
|
|
||||||
|
* **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
|
### 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.
|
|
||||||
|
|
||||||
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
|
Relevant code files can be found in `./atom/` as well as in Brightray, found in
|
||||||
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.
|
`./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?
|
You can attach the Visual Studio debugger to a running process on a local or
|
||||||
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.
|
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
|
## 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
|
├── default_app - The default page to show when Electron is started without
|
||||||
| providing an app.
|
| providing an app.
|
||||||
├── docs - Documentations.
|
├── docs - Documentations.
|
||||||
├── lib - JavaScript source code.
|
├── lib - JavaScript source code.
|
||||||
| ├── browser - Javascript main process initialization code.
|
| ├── browser - Javascript main process initialization code.
|
||||||
| | └── api - Javascript API implementation.
|
| | └── api - Javascript API implementation.
|
||||||
| ├── common - JavaScript used by both the main and renderer processes
|
| ├── 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.
|
## I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
|
||||||
|
|
||||||
Due to the Node.js integration of Electron, there are some extra symbols
|
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
|
inserted into the DOM like `module`, `exports`, `require`. This causes problems
|
||||||
some libraries since they want to insert the symbols with the same names.
|
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:
|
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
|
### 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-inspector]: https://github.com/node-inspector/node-inspector
|
||||||
[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation
|
[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
|
[how-to-install-native-modules]: using-native-node-modules.md#how-to-install-native-modules
|
||||||
|
|
||||||
|
|
|
@ -53,8 +53,7 @@ GNOME, KDE.
|
||||||
### OS X
|
### OS X
|
||||||
|
|
||||||
Notifications are straight-forward on OS X, you should however be aware of
|
Notifications are straight-forward on OS X, you should however be aware of
|
||||||
[Apple's Human Interface guidelines regarding
|
[Apple's Human Interface guidelines regarding notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html).
|
||||||
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
|
Note that notifications are limited to 256 bytes in size - and will be truncated
|
||||||
if you exceed that limit.
|
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
|
[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
|
[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/
|
[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/
|
[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
|
[temporary-exception]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AppSandboxTemporaryExceptionEntitlements.html
|
||||||
|
|
|
@ -147,8 +147,8 @@ working as expected.
|
||||||
|
|
||||||
### electron-prebuilt
|
### electron-prebuilt
|
||||||
|
|
||||||
If you've installed `electron-prebuilt` globally with `npm`, then you will only need
|
If you've installed `electron-prebuilt` globally with `npm`, then you will only
|
||||||
to run the following in your app's source directory:
|
need to run the following in your app's source directory:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
electron .
|
electron .
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue