Electron 의 debugging
기본적으로 electron 은 chrome browser 의 inspection tool 을 가지고 있다. 그래서 renderer process(page 에 대한 process) 는 debugging 을 하는데 어렵지 않다.그런데 main process 의 script 를 debug 할 수 없다. 그래서 이부분에 대한 debugging 을 알아보자. 여기의 내용은 ref. 1 의 내용을 참고한 것이다.
electron app 의 실행
기본적으로 electron 의 실행은 help 의 내용처럼 처럼 아래와 같이 electron.exe 에 parameter 를 줘서 실행한다.- <root>\node-modules\electron-prebuilt\dist\electron.exe [index.js]
Usage: electron [options] [path]
A path to an Electron application may be specified.
The path must be one of the following:
- index.js file.
- Folder containing a package.json file.
- Folder containing an index.js file.
- .html/.htm file.
- http://, https://, or file:// URL.
debug mode
debug 는 여기에 --debug 옵션을 추가하면 된다.- <root>\node-modules\electron-prebuilt\dist\electron.exe --debug=5858 [index.js]
--debug option 은 "port 번호" 를 넣어주는데 기본설정이 5858 이다. 이렇게 실행을 해 놓고, 이 port 로 debugger 를 붙이면 된다.
그리고 "--debug-brk" option 이 있는데, 이녀석으로 시작하면 첫 line 에 멈춰있게 된다.
Visual Studio Code
Visual Studio Code 를 이용해서 debug mode 로 실행한 Electron application 에 간단히 attach 를 할 수 있다.- 설치 : Visual Studio Code(vscode) 를 설치하자. 설치는 간단하다. homepage 에 가서 다운로드 받아서 설치하면 된다.
- Open folder > project directory : 그리고 open Folder 로 electron project 를 연다.
- debug 모드로 Electron application 실행 : 이제 debug 모드로 electron application 을 실행하자.
.../electron-prebuilt/dist/electron.exe --debug-brk=5858 ./build
이러면 application 이 실행되고 바로 첫 line 에서 멈춘다. - F5 > launch.js 저장 : 이 때 vscode 에서 F5 를 눌러보자. 그러면 launch.json 이 만들어진다. 여기에 보면 "Attach" 가 있다. 이 녀석이 우리가 사용할 내용이다. 일단 특별히 편집할 내용은 없으니 그냥 저장하고 빠져나오자.
- debug 창에서 Attach 설정 선택 :
그리고 debug 화면으로 가자. 그러면 Attach 를 선택할 수 있다.(아래 그림 참고) 이 Attach 를 선택하고, 이제 F5 를 누르자. 그러면 debugger 가 첫 line 으로 간다. - 끝: 이제 debugger 설정은 끝났다. 원하는 곳에 breakpoint 를 설정하고 F5 를 누르면 된다.
댓글 없음:
댓글 쓰기