Electron 환경 구축 및 Visual Studio Code로 디버깅하는 방법

개요

환경 구축에서 샘플 앱을 Visual Studio Code로 디버깅하는 단계

사전 준비

Node.js가 설치되었습니다

절차

디렉토리 만들기

mkdir sample
cd sample

package.json 만들기

npm init

electron 설치

npm install electron --save-dev

기본이 되는 파일 만들기

mkdir src
cd src
touch index.html
touch main.js
touch package.json

[파일 구성]

/node_modules

/src

index.html

main.js

package.json

index.html

<html>
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>

<body>
  <h1>Sample</h1>
</body>
</html>

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var config = require('../package.json');

const path = require('path');
const url = require('url');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow(
    {
      title: config.name,
      width: 800, 
      height: 600
    });

  mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, '/index.html'),
      protocol: 'file:',
      slashes: true
  }));

  mainWindow.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

package.json

{
  "main": "main.js"
}

명령으로 앱 실행

Windows

./node_modules/.bin/electron src

Mac

npx electron src

Visual Studio Code 빌드 설정(Windows/Mac 공통)

1 왼쪽 메뉴의 벌레 마크를 눌러 빌드 화면을 엽니다.

2 구성 추가...를 누릅니다.

3 명령 팔레트에 Node.js를 입력하십시오.
launch.json의 병아리 형이 가능

4 launch.json 편집

"configurations": [
   {
      "name": "Debug",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "${workspaceRoot}/src/main.js",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "runtimeArgs": [
          "--enable-logging"
      ],
      "args": [
          "."
      ],
      "windows": {
          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "console":"integratedTerminal",
   }
]

5 디버깅
"Debug"로 설정되어 있는지 확인하고 재생 버튼을 누르십시오.

Reference

이 문제에 관하여(Electron 환경 구축 및 Visual Studio Code로 디버깅하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/H-A-L/items/657d4dc75b17918a31e8

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다