주 프로세스 디버깅은 비교적 복잡하며 노드 검사관 지지대는 제한적입니다. vs 코드가 권장되며 리치 노드 애플리케이션 디버깅 도구를 제공합니다.
vs 코드는 사용자 정의 빌드 작업 및 디버그 구성을 지원하여 중단 점을 설정하고 통화 스택 확인, 변수보기 및 실시간 콘솔을 사용하여 오류를 쉽게 디버그하고 문제 해결할 수 있도록합니다. -
BrowserWindow.openDevTools()
렌더링 프로세스 디버깅
-
그림 1 : 크롬 개발자 도구는 렌더링 프로세스에서 브라우저 응용 프로그램과 동일하게 사용됩니다. -
그림 2 : 개발자 도구를 전자의 기본 메뉴에서 전환 할 수 있습니다.
또한 MACOS에서 또는 Windows/Linux에서 바로 가기 키를 사용하거나 인스턴스의
메소드를 통해 개발자 도구를 프로그래밍 방식으로 열 수 있습니다.
코드 예제 : 기본 창이로드 된 후 프로그래밍 방식으로 개발자 도구를 엽니 다.
메인 프로세스 디버깅
주 프로세스 디버깅은 어렵고 노드 검사관 지지대는 제한적입니다. 전자 앱은
매개 변수로 시작하여 원격 디버깅 (기본 포트 5858)을 활성화 할 수 있지만 공식 문서의 노드 검사관에 대한 지원은 완전히 개선되지 않았습니다.
vs 코드를 사용하여 기본 프로세스를 디버깅하여
vs 코드는 전자를 기반으로하는 무료 및 오픈 소스 IDE입니다.
빌드 작업을 신속하게 설정합니다. 빌드 작업 : Windows에서 를 누르고 MACOS에서
를 누르면 CODE가 빌드 작업을 생성하라는 메시지가 표시됩니다 (그림 3과 같이).
Cmd Opt I Ctrl Shift I
그림 3 : 빌드 작업이 없으면 빌드 작업을 트리거하면 생성이 발생합니다. BrowserWindow
파일을 엽니 다. <code>webContents.openDevTools()</code><setting> 각 플랫폼에서 빌드 및 디버깅 작업을 설정하는 방법은 비슷하지만 다른 운영 체제에서 생성 된 사전 제작 된 이진 파일의 이름은 다릅니다. 리눅스. <p>
<code>electron-prebuilt</code>
<code>electron.exe</code> vs code (tasks.json)에서 빌드 작업을 설정하십시오
<code>Electron.app</code>
<code>electron</code>
</p> <ul>를 해당 시스템 이름으로 교체하십시오. <li>
<you you> 이제 Windows/Linux에서 <strong>를 누르거나 MacOS에서 </strong>를 누르면 전자 앱이 시작됩니다. 이는 VS 코드에서 디버깅을 설정하는 데 중요 할뿐만 아니라 응용 프로그램을 시작하는 편리한 방법이기도합니다. 다음 단계는 앱을 시작하고 내장 디버거에 연결하기 위해 VS 코드를 설정하는 것입니다. </you>
</li>
디버거에 연결 </ul> <pre class="brush:php;toolbar:false"><code class="language-javascript">app.on('ready', () => {
mainWindow = new BrowserWindow();
mainWindow.loadURL(`file://${__dirname}/index.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
});</code>
<name-of-binary></name-of-binary>
그림 4 : 디버그 패널에서 기어 아이콘을 클릭하면 vs 코드가 디버거를 시작할 구성 파일을 만듭니다.
시작 작업을 만들려면 왼쪽 패널의 디버그 탭으로 이동하여 피니언을 클릭하십시오 (그림 4). vs Code는 어떤 유형의 구성 파일을 작성할 것인지 묻습니다. "node.js"를 선택하고 파일 내용을 다음 예제 구성으로 바꾸십시오.
Ctrl Shift B
Cmd Shift B
를 해당 시스템 이름으로 교체하십시오.
시작 구성에 대한 자세한 내용은 여기를 참조하십시오.
이 두 구성 파일을 사용하면 행의 왼쪽 마진을 클릭하여 중단 점을 설정하고 를 눌러 응용 프로그램을 실행할 수 있습니다. 실행은 중단 점에서 일시 중지되어 통화 스택을 확인하고 스코프 내에서 변수를보고 실시간 콘솔과 상호 작용할 수 있습니다. 브레이크 포인트가 코드를 디버깅하는 유일한 방법은 아닙니다. 특정 표현식을 모니터링하거나 끊임없는 예외가 발생하면 디버거로 이동할 수도 있습니다.
그림 5 : vs Code의 내장 디버거를 사용하면 응용 프로그램 실행을 일시 중지하고 오류를 심층적으로 조사 할 수 있습니다.
요약
이러한 디버깅 기술을 마스터하여 전자 응용 프로그램을보다 효율적으로 개발하고 유지할 수 있습니다.
(원래 FAQ와 주 텍스트가 복제되고 길이가 길기 때문에 FAQ 부품이 생략되었습니다. 중복을 피하기 위해 핵심 디버깅 방법의 도입 만 여기에 유지됩니다.) >
요약