зеркало из https://github.com/electron/electron.git
Update the korean docs up to '379c347' commit.
Swap two debugging tutorials with each other.
This commit is contained in:
tinydew4
Родитель
721924b749
Коммит
691ad97abe
|
|
@ -185,14 +185,7 @@ Returns:
|
|||
* `webContents` [WebContents](web-contents.md)
|
||||
* `url` URL
|
||||
* `error` String - 에러 코드
|
||||
* `certificate` Object
|
||||
* `data` String - PEM 인코딩된 데이터
|
||||
* `issuerName` String - 인증서 발급자의 공통 이름
|
||||
* `subjectName` String - 대상의 공통 이름
|
||||
* `serialNumber` String - 문자열로 표현된 hex 값
|
||||
* `validStart` Integer - 초 단위의 인증서가 유효하기 시작한 날짜
|
||||
* `validExpiry` Integer - 초 단위의 인증서가 만료되는 날짜
|
||||
* `fingerprint` String - 인증서의 지문
|
||||
* `certificate` [Certificate](structures/certificate.md)
|
||||
* `callback` Function
|
||||
* `isTrusted` Boolean - 인증서를 신뢰할지 여부
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,316 @@
|
|||
# net
|
||||
|
||||
> Chromium 의 네이티브 네트워크 라이브러리를 사용한 HTTP/HTTPS 요청 실행.
|
||||
|
||||
`net` 모듈은 HTTP(S) 요청을 실행하기 위한 클라이언트 측 API 입니다. 이것은
|
||||
Node.js 의 [HTTP](https://nodejs.org/api/http.html) 와
|
||||
[HTTPS](https://nodejs.org/api/https.html) 모듈과 유사합니다. 하지만 Node.js
|
||||
구현 대신 Chromium 의 네이티브 네트워크 라이브러리를 사용하는 것은, 웹 프록시에
|
||||
대한 더 나은 지원을 제공합니다.
|
||||
|
||||
다음은 왜 네이티브 Node.js 모듈대신 `net` 모듈 사용을 고려해야하는지에 대한
|
||||
대략적인 이유입니다:
|
||||
|
||||
* WPAD 프로토콜과 프록시 PAC 환경설정 파일 지원을 통한 시스템 프록시 구성 자동
|
||||
관리.
|
||||
* HTTPS 요청의 자동 터널링.
|
||||
* 기본, digest, NTLM, Kerberos, 협상 인증 스킴을 사용한 프록시 인증 지원.
|
||||
* 트래픽 모니터링 프록시 지원: 접근 제어와 모니터링에 사용되는 Fiddler 같은
|
||||
프록시.
|
||||
|
||||
`net` 모듈 API 는 Node.js API 와 최대한 가까워 보이도록 설계되었습니다. 클래스,
|
||||
메소드, 속성, 이벤트를 포함하는 API 컴포넌트는 일반적으로 Node.js 에서 사용되는
|
||||
것과 유사합니다.
|
||||
|
||||
예를 들면, 다음 예제는 `net` API 가 사용될 수 있는 방법을 빠르게 보여줍니다:
|
||||
|
||||
```javascript
|
||||
const {app} = require('electron')
|
||||
app.on('ready', () => {
|
||||
const {net} = require('electron')
|
||||
const request = net.request('https://github.com')
|
||||
request.on('response', (response) => {
|
||||
console.log(`STATUS: ${response.statusCode}`)
|
||||
console.log(`HEADERS: ${JSON.stringify(response.headers)}`)
|
||||
response.on('data', (chunk) => {
|
||||
console.log(`BODY: ${chunk}`)
|
||||
})
|
||||
response.on('end', () => {
|
||||
console.log('No more data in response.')
|
||||
})
|
||||
})
|
||||
request.end()
|
||||
})
|
||||
```
|
||||
|
||||
그런데, 일반적으로 Node.js 의 [HTTP](https://nodejs.org/api/http.html)/
|
||||
[HTTPS](https://nodejs.org/api/https.html) 모듈을 사용하는 방법과 거의
|
||||
동일합니다.
|
||||
|
||||
`net` API 는 애플리케이션이 `ready` 이벤트를 발생한 이후부터 사용할 수 있습니다.
|
||||
`ready` 이벤트 전에 모듈을 사용하려고 하면 오류가 발생할 것 입니다.
|
||||
|
||||
## Methods
|
||||
|
||||
`net` 모듈은 다음의 메소드를 가지고 있습니다:
|
||||
|
||||
### `net.request(options)`
|
||||
|
||||
* `options` (Object | String) - `ClientRequest` 생성자 옵션.
|
||||
|
||||
Returns `ClientRequest`
|
||||
|
||||
주어진 `options` 을 사용해 `ClientRequest` 인스턴스를 생성합니다.
|
||||
`ClientRequest` 생성자에 직접 전달됩니다. `net.request` 메소드는 `options`
|
||||
객체의 명시된 프로토콜 스킴에 따라 보안 및 비보안 HTTP 요청을 실행하는데
|
||||
사용됩니다.
|
||||
|
||||
## Class: ClientRequest
|
||||
|
||||
> HTTP/HTTPS 요청을 합니다.
|
||||
|
||||
`ClientRequest` 는
|
||||
[Writable Stream](https://nodejs.org/api/stream.html#stream_writable_streams)
|
||||
인터페이스를 구현하였고 따라서
|
||||
[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)
|
||||
입니다.
|
||||
|
||||
### `new ClientRequest(options)`
|
||||
|
||||
* `options` (Object | String) - `options` 이 문자열이면, 요청 URL 로 해석됩니다.
|
||||
객체라면, 다음 속성을 통해 HTTP 요청을 완전히 명시한 것으로 예상됩니다:
|
||||
* `method` String (optional) - TheHTTP 요청 방법. 기본값은 GET 방법입니다.
|
||||
* `url` String (optional) - 요청 URL. HTTP 또는 HTTPS 로 지정된 프로토콜
|
||||
스킴과 함께 절대적인 형식으로 제공되어야 합니다.
|
||||
* `session` Object (optional) - 요청과 연관된 [`Session`](session.md)인스턴스.
|
||||
* `partition` String (optional) - 요청과 연관된 [`partition`](session.md) 의
|
||||
이름. 기본값은 빈 문자열입니다. `session` 옵션은 `partition` 에 우선합니다.
|
||||
그러므로 `session` 이 명시적으로 지정된 경우, `partition` 은 무시됩니다.
|
||||
* `protocol` String (optional) - 'scheme:' 형식의 프로토콜 스킴. 현재 지원되는
|
||||
값은 'http:' 또는 'https:' 입니다. 기본값은 'http:' 입니다.
|
||||
* `host` String (optional) - 호스트명과 포트번호의 연결로 제공되는 서버 호스트
|
||||
'호스트명:포트'
|
||||
* `hostname` String (optional) - 서버 호스트명.
|
||||
* `port` Integer (optional) - 서버의 리스닝 포트 번호.
|
||||
* `path` String (optional) - 요청 URL 의 경로 부분.
|
||||
|
||||
`protocol`, `host`, `hostname`, `port`, `path` 같은 `options` 속성은
|
||||
[URL](https://nodejs.org/api/url.html) 모듈에 설명 된대로 Node.js 모델을 엄격히
|
||||
따릅니다.
|
||||
|
||||
예를 들어, 다음과 같이 'github.com' 에 대한 같은 요청을 만들 수 있습니다:
|
||||
|
||||
```JavaScript
|
||||
const request = net.request({
|
||||
method: 'GET',
|
||||
protocol: 'https:',
|
||||
hostname: 'github.com',
|
||||
port: 443,
|
||||
path: '/'
|
||||
})
|
||||
```
|
||||
|
||||
### Instance Events
|
||||
|
||||
#### Event: 'response'
|
||||
|
||||
Returns:
|
||||
|
||||
* `response` IncomingMessage - HTTP 응답 메시지를 나타내는 객체.
|
||||
|
||||
#### Event: 'login'
|
||||
|
||||
Returns:
|
||||
|
||||
* `authInfo` Object
|
||||
* `isProxy` Boolean
|
||||
* `scheme` String
|
||||
* `host` String
|
||||
* `port` Integer
|
||||
* `realm` String
|
||||
* `callback` Function
|
||||
|
||||
인증 프록시가 사용자 자격 증명을 요구하는 경우 발생됩니다.
|
||||
|
||||
`callback` 함수는 사용자 자격 증명으로 다시 호출될 것으로 예상됩니다:
|
||||
|
||||
* `username` String
|
||||
* `password` String
|
||||
|
||||
```JavaScript
|
||||
request.on('login', (authInfo, callback) => {
|
||||
callback('username', 'password')
|
||||
})
|
||||
```
|
||||
|
||||
빈 자격증명을 제공하면 요청이 취소되고 응답 객체에서 인증 오류가 보고될 것
|
||||
입니다:
|
||||
|
||||
```JavaScript
|
||||
request.on('response', (response) => {
|
||||
console.log(`STATUS: ${response.statusCode}`);
|
||||
response.on('error', (error) => {
|
||||
console.log(`ERROR: ${JSON.stringify(error)}`)
|
||||
})
|
||||
})
|
||||
request.on('login', (authInfo, callback) => {
|
||||
callback()
|
||||
})
|
||||
```
|
||||
|
||||
#### Event: 'finish'
|
||||
|
||||
`request` 객체에 `request` 데이터의 마지막 덩어리가 기록된 후 발생됩니다.
|
||||
|
||||
#### Event: 'abort'
|
||||
|
||||
`request` 가 취소된 경우 발생됩니다. `request` 가 이미 닫힌 경우 `abort`
|
||||
이벤트는 발생되지 않습니다.
|
||||
|
||||
#### Event: 'error'
|
||||
|
||||
Returns:
|
||||
|
||||
* `error` Error - 실패에 대한 몇가지 정보를 제공하는 오류 객체입니다.
|
||||
|
||||
`net` 모듈이 네트워크 요청 실행을 실패한 경우 발생됩니다. 일반적으로 `request`
|
||||
객체가 `error` 이벤트를 발생할 때, `close` 이벤트가 연속적으로 발생하고 응답
|
||||
객체는 제공되지 않습니다.
|
||||
|
||||
#### Event: 'close'
|
||||
|
||||
HTTP 요청-응답 처리의 마지막 이벤트로써 발생됩니다. `close` 이벤트는 `request`
|
||||
또는 `reponse` 객체에서 더이상 이벤트가 발생되지 않을 것임을 나타냅니다.
|
||||
|
||||
### Instance Properties
|
||||
|
||||
#### `request.chunkedEncoding`
|
||||
|
||||
HTTP 덩어리 전송 인코딩을 사용할지 여부를 명시하는 불 값입니다. 기본값은 `false`
|
||||
입니다. 속성은 읽고 쓸 수 있습니다. 그러나 HTTP 헤더가 아직 네트워크 선에
|
||||
쓰여지지 않은 첫 쓰기 작업 전에만 쓸 수 있습니다. 첫 쓰기 이후에
|
||||
`chunkedEncoding` 을 쓰려고 하면 오류가 발생합니다.
|
||||
|
||||
Electron 프로세스 메모리에서 내부적으로 버퍼링하는 대신 작은 덩어리로 데이터로써
|
||||
큰 요청 본문을 전송하려면 덩어리 인코딩을 사용하는 것이 좋습니다.
|
||||
|
||||
### Instance Methods
|
||||
|
||||
#### `request.setHeader(name, value)`
|
||||
|
||||
* `name` String - 추가 HTTP 헤더 이름.
|
||||
* `value` String - 추가 HTTP 헤더 값.
|
||||
|
||||
추가 HTTP 헤더를 추가합니다. 헤더 이름은 소문자화 되지 않고 실행됩니다. 첫 쓰기
|
||||
전까지만 호출할 수 있습니다. 첫 쓰기 후 이 메소드를 호출하면 오류가 발생합니다.
|
||||
|
||||
#### `request.getHeader(name)`
|
||||
|
||||
* `name` String - 추가 헤더 이름을 명시합니다.
|
||||
|
||||
Returns String - 이전에 설정된 추가 헤더 이름에 대한 값.
|
||||
|
||||
#### `request.removeHeader(name)`
|
||||
|
||||
* `name` String - 추가 헤더 이름을 명시합니다.
|
||||
|
||||
이전에 설정된 추가 헤더 이름을 삭제합니다. 이 메소드는 첫 쓰기 전까지만 호출할
|
||||
수 있습니다. 첫 쓰기 후 호출하면 오류가 발생합니다.
|
||||
|
||||
#### `request.write(chunk[, encoding][, callback])`
|
||||
|
||||
* `chunk` (String | Buffer) - 요청 본문 데이터의 덩어리. 문자열이라면, 지정된
|
||||
인코딩을 사용한 버퍼로 변환됩니다.
|
||||
* `encoding` String (optional) - 버퍼 객체로 문자열을 변환하는데 사용됩니다.
|
||||
기본값은 'utf-8' 입니다.
|
||||
* `callback` Function (optional) - 쓰기 작업이 끝난 이후 호출됩니다.
|
||||
|
||||
`callback` 은 근본적으로 Node.js API 와의 유사성을 유지하는 목적으로 도입된 더미
|
||||
함수입니다. 그것은 `chunk` 내용이 Chromium 네트워크 계층에 전달 된 후 다음
|
||||
틱에서 비동기적으로 호출됩니다. Node.js 구현과 달리, `callback` 호출 이전에
|
||||
`chunk` 내용이 네트워크 선에 내보내진 것을 보장하지 않습니다.
|
||||
|
||||
요청 본문에 데이터의 덩어리를 추가합니다. 첫 쓰기 작업은 네트워크 선에 요청
|
||||
헤더를 쓸 것 입니다. 첫 쓰기 작업 이후, 사용자 정의 헤더 추가 또는 삭제는
|
||||
허용되지 않습니다.
|
||||
|
||||
#### `request.end([chunk][, encoding][, callback])`
|
||||
|
||||
* `chunk` (String | Buffer) (optional)
|
||||
* `encoding` String (optional)
|
||||
* `callback` Function (optional)
|
||||
|
||||
요청 데이터의 마지막 덩어리를 보냅니다. 이후 쓰기 또는 종료 명령은 허용되지
|
||||
않습니다. `finish` 이벤트는 `end` 명령 이후에 발생합니다.
|
||||
|
||||
#### `request.abort()`
|
||||
|
||||
현재 진행중인 HTTP 처리를 취소합니다. 요청이 이미 `close` 이벤트를 발생했다면,
|
||||
취소 명령은 적용되지 않습니다. 그렇지 않으면 진행중인 이벤트는 `abort` 와
|
||||
`close` 이벤트를 발생시킵니다. 또한, 현재 진행중인 응답 객체가 있다면, `aborted`
|
||||
이벤트를 발생할 것 입니다.
|
||||
|
||||
## Class: IncomingMessage
|
||||
|
||||
> HTTP/HTTPS 요청에 대한 응답을 처리합니다.
|
||||
|
||||
`IncomingMessage` 는
|
||||
[Readable Stream](https://nodejs.org/api/stream.html#stream_readable_streams)
|
||||
인터페이스를 구현하였고 따라서
|
||||
[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)
|
||||
입니다.
|
||||
|
||||
### Instance Events
|
||||
|
||||
#### Event: 'data'
|
||||
|
||||
Returns:
|
||||
|
||||
* `chunk` Buffer - 응답 본문 데이터의 덩어리.
|
||||
|
||||
`data` 이벤트는 응용 코드에 응답 데이터를 전송하는 통상적인 방법입니다.
|
||||
|
||||
#### Event: 'end'
|
||||
|
||||
응답 본문이 종료되었음을 나타냅니다.
|
||||
|
||||
#### Event: 'aborted'
|
||||
|
||||
요청이 계속 진행중인 HTTP 처리 도중 취소되었을 때 발생합니다.
|
||||
|
||||
#### Event: 'error'
|
||||
|
||||
Returns:
|
||||
|
||||
`error` Error - 일반적으로 실패 원인을 식별하는 오류 문자열을 가지고 있습니다.
|
||||
|
||||
스트리밍 응답 데이터 이벤트를 처리하는 동안 오류가 발생했을 때 발생됩니다.
|
||||
예를 들어, 응답이 여전히 스트리밍되는 동안 서버가 닫히는 경우, 응답 객체에서
|
||||
`error` 이벤트가 발생할 것이며 그 후에 요청 객체에서 `close` 이벤트가 발생할 것
|
||||
입니다.
|
||||
|
||||
### Instance Properties
|
||||
|
||||
`IncomingMessage` 인스턴스는 다음의 읽을 수 있는 속성을 가지고 있습니다:
|
||||
|
||||
#### `response.statusCode`
|
||||
|
||||
HTTP 응답 상태 코드를 나타내는 정수.
|
||||
|
||||
#### `response.statusMessage`
|
||||
|
||||
HTTP 상태 메시지를 나타내는 문자열.
|
||||
|
||||
#### `response.headers`
|
||||
|
||||
응답 HTTP 헤더를 나타내는 객체. `headers` 객체는 다음 형식입니다:
|
||||
|
||||
* 모든 헤더 이름은 소문자입니다.
|
||||
* 각 헤더 이름은 헤더 객체에 배열-값 속성을 생성합니다.
|
||||
* 각 헤더 값은 헤더 이름과 연관된 배열에 푸시됩니다.
|
||||
|
||||
#### `response.httpVersion`
|
||||
|
||||
HTTP 프로토콜 버전 번호를 나타내는 문자열. 일반적으로 '1.0' 또는 '1.1' 입니다.
|
||||
또한 `httpVersionMajor` 와 `httpVersionMinor` 는 각각 HTTP 메이저와 마이너 버전
|
||||
번호를 반환하는 두개의 정수값 형태로 읽을 수 있는 속성입니다.
|
||||
|
|
@ -1,38 +1,128 @@
|
|||
# VSCode 에서 메인 프로세스 디버깅하기
|
||||
# node-inspector 에서 메인 프로세스 디버깅하기
|
||||
|
||||
### 1. VS Code 에서 Electron 프로젝트 열기.
|
||||
[`node-inspector``][node-inspector] 는 Electron 의 메인 프로세스를 디버깅하기
|
||||
위해 크롬에서 사용할 수 있는 익숙한 개발도구 GUI 를 제공합니다. 그러나,
|
||||
`node-inspector` 가 네이티브 Node 모듈에 의존적이기 때문에 디버깅하려는
|
||||
Electron 버전에 맞춰 다시 빌드해야 합니다. `node-inspector` 다시 빌드하여
|
||||
의존성을 재구성하거나 [`electron-inspector`] 가 대신 하게 할 수 있으며, 두
|
||||
방식이 이 문서에 나와있습니다.
|
||||
|
||||
**참고**: 글쓴 시점 현재 `node-inspector` 최종버전 (0.12.8) 은 Electron 1.3.0
|
||||
이상에서 해당 의존성 중 하나를 패치하지 않고 빌드 할 수 없습니다.
|
||||
`electron-inspector` 을 사용한다면 알아서 처리될 것 입니다.
|
||||
|
||||
|
||||
## 디버깅에 `electron-inspector` 사용하기
|
||||
|
||||
### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치
|
||||
|
||||
### 2. [`electron-rebuild`][electron-rebuild]가 없다면, 설치
|
||||
|
||||
```shell
|
||||
npm install electron-rebuild --save-dev
|
||||
```
|
||||
|
||||
### 3. [`electron-inspector`][electron-inspector] 설치
|
||||
|
||||
```shell
|
||||
npm install electron-inspector --save-dev
|
||||
```
|
||||
|
||||
### 4. Electron 시작
|
||||
|
||||
`--debug` 스위치와 함께 Electron 실행:
|
||||
|
||||
```shell
|
||||
electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
또는, 스크립트의 첫번째 줄에서 실행 중단:
|
||||
|
||||
```shell
|
||||
electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 5. electron-inspector 시작
|
||||
|
||||
macOS / Linux:
|
||||
|
||||
```shell
|
||||
node_modules/.bin/electron-inspector
|
||||
```
|
||||
|
||||
Windows:
|
||||
|
||||
```shell
|
||||
node_modules\\.bin\\electron-inspector
|
||||
```
|
||||
|
||||
`electron-inspector` 는 첫 실행과 Electron 버전 변경시에 `node-inspector`
|
||||
의존성을 다시 빌드 할 것 입니다. 다시 빌드하는 과정에 Node 헤더와 라이브러리를
|
||||
다운받기 위해 인터넷 연결이 필요하며, 이 작업은 몇 분 정도 시간이 소요됩니다.
|
||||
|
||||
### 6. 디버거 UI 로드
|
||||
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
||||
주소에 접속합니다. `--debug-brk` 로 시작한 경우 UI 갱신을 위해 일시정지 버튼을
|
||||
클릭해야 할 수도 있습니다.
|
||||
|
||||
|
||||
## 디버깅에 `node-inspector` 사용하기
|
||||
|
||||
### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치
|
||||
|
||||
### 2. [`node-inspector`][node-inspector] 설치
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:electron/electron-quick-start.git
|
||||
$ code electron-quick-start
|
||||
$ npm install node-inspector
|
||||
```
|
||||
|
||||
### 2. 다음 설정으로 `.vscode/launch.json` 파일 추가하기:
|
||||
### 3. [`node-pre-gyp`][node-pre-gyp] 설치
|
||||
|
||||
```javascripton
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug Main Process",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceRoot}",
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
|
||||
"program": "${workspaceRoot}/main.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
```bash
|
||||
$ npm install node-pre-gyp
|
||||
```
|
||||
|
||||
**참고:** 윈도우에서, `runtimeExecutable` 을 위해
|
||||
`"${workspaceRoot}/node_modules/.bin/electron.cmd"` 를 사용하세요.
|
||||
### 4. Electron 용 `node-inspector` `v8` 모듈 재 컴파일
|
||||
|
||||
### 3. 디버깅
|
||||
**참고:** 사용하는 Electron의 버전에 맞춰 target 인수를 변경하세요.
|
||||
|
||||
`main.js` 에 중단점을 설정하고,
|
||||
[Debug View](https://code.visualstudio.com/docs/editor/debugging) 에서 디버깅을
|
||||
시작하세요. 중단점을 만나게 될 것 입니다.
|
||||
```bash
|
||||
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/atom-shell reinstall
|
||||
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall
|
||||
```
|
||||
|
||||
VSCode 에서 바로 디버깅 할 수 있는 프로젝트를 미리 준비했습니다:
|
||||
https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start
|
||||
또한 [네이티브 모듈 설치 방법][how-to-install-native-modules] 문서도 참고해보세요.
|
||||
|
||||
### 5. Electron 디버그 모드 활성화
|
||||
|
||||
다음과 같이 debung 플래그로 Electron 을 실행할 수 있습니다:
|
||||
|
||||
```bash
|
||||
$ electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
또는 스크립트 첫번째 줄에서 일시 정지할 수 있습니다:
|
||||
|
||||
```bash
|
||||
$ electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 6. Electron을 사용하는 [`node-inspector`][node-inspector] 서버 시작하기
|
||||
|
||||
```bash
|
||||
$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js
|
||||
```
|
||||
|
||||
### 7. 디버거 UI 로드
|
||||
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
||||
주소에 접속합니다. `--debug-brk` 로 시작한 경우 엔트리 라인을 보기 위해
|
||||
일시정지 버튼을 클릭해야 할 수도 있습니다.
|
||||
|
||||
[electron-inspector]: https://github.com/enlight/electron-inspector
|
||||
[electron-rebuild]: https://github.com/electron/electron-rebuild
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
|
||||
[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
|
||||
|
|
|
|||
|
|
@ -1,128 +1,38 @@
|
|||
# node-inspector 에서 메인 프로세스 디버깅하기
|
||||
# VSCode 에서 메인 프로세스 디버깅하기
|
||||
|
||||
[`node-inspector``][node-inspector] 는 Electron 의 메인 프로세스를 디버깅하기
|
||||
위해 크롬에서 사용할 수 있는 익숙한 개발도구 GUI 를 제공합니다. 그러나,
|
||||
`node-inspector` 가 네이티브 Node 모듈에 의존적이기 때문에 디버깅하려는
|
||||
Electron 버전에 맞춰 다시 빌드해야 합니다. `node-inspector` 다시 빌드하여
|
||||
의존성을 재구성하거나 [`electron-inspector`] 가 대신 하게 할 수 있으며, 두
|
||||
방식이 이 문서에 나와있습니다.
|
||||
|
||||
**참고**: 글쓴 시점 현재 `node-inspector` 최종버전 (0.12.8) 은 Electron 1.3.0
|
||||
이상에서 해당 의존성 중 하나를 패치하지 않고 빌드 할 수 없습니다.
|
||||
`electron-inspector` 을 사용한다면 알아서 처리될 것 입니다.
|
||||
|
||||
|
||||
## 디버깅에 `electron-inspector` 사용하기
|
||||
|
||||
### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치
|
||||
|
||||
### 2. [`electron-rebuild`][electron-rebuild]가 없다면, 설치
|
||||
|
||||
```shell
|
||||
npm install electron-rebuild --save-dev
|
||||
```
|
||||
|
||||
### 3. [`electron-inspector`][electron-inspector] 설치
|
||||
|
||||
```shell
|
||||
npm install electron-inspector --save-dev
|
||||
```
|
||||
|
||||
### 4. Electron 시작
|
||||
|
||||
`--debug` 스위치와 함께 Electron 실행:
|
||||
|
||||
```shell
|
||||
electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
또는, 스크립트의 첫번째 줄에서 실행 중단:
|
||||
|
||||
```shell
|
||||
electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 5. electron-inspector 시작
|
||||
|
||||
macOS / Linux:
|
||||
|
||||
```shell
|
||||
node_modules/.bin/electron-inspector
|
||||
```
|
||||
|
||||
Windows:
|
||||
|
||||
```shell
|
||||
node_modules\\.bin\\electron-inspector
|
||||
```
|
||||
|
||||
`electron-inspector` 는 첫 실행과 Electron 버전 변경시에 `node-inspector`
|
||||
의존성을 다시 빌드 할 것 입니다. 다시 빌드하는 과정에 Node 헤더와 라이브러리를
|
||||
다운받기 위해 인터넷 연결이 필요하며, 이 작업은 몇 분 정도 시간이 소요됩니다.
|
||||
|
||||
### 6. 디버거 UI 로드
|
||||
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
||||
주소에 접속합니다. `--debug-brk` 로 시작한 경우 UI 갱신을 위해 일시정지 버튼을
|
||||
클릭해야 할 수도 있습니다.
|
||||
|
||||
|
||||
## 디버깅에 `node-inspector` 사용하기
|
||||
|
||||
### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치
|
||||
|
||||
### 2. [`node-inspector`][node-inspector] 설치
|
||||
### 1. VS Code 에서 Electron 프로젝트 열기.
|
||||
|
||||
```bash
|
||||
$ npm install node-inspector
|
||||
$ git clone git@github.com:electron/electron-quick-start.git
|
||||
$ code electron-quick-start
|
||||
```
|
||||
|
||||
### 3. [`node-pre-gyp`][node-pre-gyp] 설치
|
||||
### 2. 다음 설정으로 `.vscode/launch.json` 파일 추가하기:
|
||||
|
||||
```bash
|
||||
$ npm install node-pre-gyp
|
||||
```javascripton
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug Main Process",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceRoot}",
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
|
||||
"program": "${workspaceRoot}/main.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Electron 용 `node-inspector` `v8` 모듈 재 컴파일
|
||||
**참고:** 윈도우에서, `runtimeExecutable` 을 위해
|
||||
`"${workspaceRoot}/node_modules/.bin/electron.cmd"` 를 사용하세요.
|
||||
|
||||
**참고:** 사용하는 Electron의 버전에 맞춰 target 인수를 변경하세요.
|
||||
### 3. 디버깅
|
||||
|
||||
```bash
|
||||
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/atom-shell reinstall
|
||||
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall
|
||||
```
|
||||
`main.js` 에 중단점을 설정하고,
|
||||
[Debug View](https://code.visualstudio.com/docs/editor/debugging) 에서 디버깅을
|
||||
시작하세요. 중단점을 만나게 될 것 입니다.
|
||||
|
||||
또한 [네이티브 모듈 설치 방법][how-to-install-native-modules] 문서도 참고해보세요.
|
||||
|
||||
### 5. Electron 디버그 모드 활성화
|
||||
|
||||
다음과 같이 debung 플래그로 Electron 을 실행할 수 있습니다:
|
||||
|
||||
```bash
|
||||
$ electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
또는 스크립트 첫번째 줄에서 일시 정지할 수 있습니다:
|
||||
|
||||
```bash
|
||||
$ electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 6. Electron을 사용하는 [`node-inspector`][node-inspector] 서버 시작하기
|
||||
|
||||
```bash
|
||||
$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js
|
||||
```
|
||||
|
||||
### 7. 디버거 UI 로드
|
||||
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
||||
주소에 접속합니다. `--debug-brk` 로 시작한 경우 엔트리 라인을 보기 위해
|
||||
일시정지 버튼을 클릭해야 할 수도 있습니다.
|
||||
|
||||
[electron-inspector]: https://github.com/enlight/electron-inspector
|
||||
[electron-rebuild]: https://github.com/electron/electron-rebuild
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
|
||||
[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
|
||||
VSCode 에서 바로 디버깅 할 수 있는 프로젝트를 미리 준비했습니다:
|
||||
https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ Electron 브라우저 창의 개발자 도구는 웹 페이지 같은 창에서
|
|||
이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다.
|
||||
기본 `port`는 `5858` 입니다.
|
||||
|
||||
```shell
|
||||
electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
### `--debug-brk=[port]`
|
||||
|
||||
`--debug`와 비슷하지만 스크립트의 첫번째 라인에서 일시정지합니다.
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ your-app/
|
|||
파일을 지정하면 메인 프로세스의 엔트리 포인트로 사용합니다. 예를 들어 사용할 수 있는
|
||||
`package.json`은 다음과 같습니다:
|
||||
|
||||
```javascripton
|
||||
```json
|
||||
{
|
||||
"name" : "your-app",
|
||||
"version" : "0.1.0",
|
||||
|
|
@ -76,11 +76,9 @@ __알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으
|
|||
다음과 같이 작성할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron')
|
||||
// 애플리케이션 생명주기를 조작 하는 모듈.
|
||||
const {app} = electron
|
||||
// 네이티브 브라우저 창을 만드는 모듈.
|
||||
const {BrowserWindow} = electron
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
const path = require('path')
|
||||
const url = require('url')
|
||||
|
||||
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
|
||||
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
|
||||
|
|
@ -91,7 +89,11 @@ function createWindow () {
|
|||
win = new BrowserWindow({width: 800, height: 600})
|
||||
|
||||
// 그리고 현재 디렉터리의 index.html을 로드합니다.
|
||||
win.loadURL(`file://${__dirname}/index.html`)
|
||||
win.loadURL(url.format({
|
||||
pathname: path.join(__dirname, 'index.html'),
|
||||
protocol: 'file:',
|
||||
slashes: true
|
||||
}))
|
||||
|
||||
// 개발자 도구를 엽니다.
|
||||
win.webContents.openDevTools()
|
||||
|
|
@ -234,8 +236,10 @@ $ ./Electron.app/Contents/MacOS/Electron your-app/
|
|||
$ git clone https://github.com/electron/electron-quick-start
|
||||
# 저장소 안으로 들어갑니다
|
||||
$ cd electron-quick-start
|
||||
# 애플리케이션의 의존성 모듈을 설치한 후 실행합니다
|
||||
$ npm install && npm start
|
||||
# 의존성 모듈을 설치합니다
|
||||
$ npm install
|
||||
# 앱을 실행합니다
|
||||
$ npm start
|
||||
```
|
||||
|
||||
더 많은 예시 앱을 보려면 대단한 Electron 커뮤니티에 의해 만들어진
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче