Nextron 기본 환경설정이 끝나고 npm run dev로 실행을 시켰다.
그런데 실행된 환경에서 개발자도구를 이용해서 디버깅을 해야하는데 F12를 눌러도 작동을 하지않았던 것이다.
두가지 방법을 통해 해결을 할 수 있었고 두번째 방법을 사용하는 것을 추천한다.
1. 렌더러 프로세스에서 메인 프로세스로 요청
아래는 렌더러 프로세스(renderer.js)에서 키보드를 감지하고 F12가 발생되면 메인 프로세스(main.js)에 메시지를 보내 디버그 툴을 On/Off 하는 코드이다.
- main/helpers/background.ts (메인 프로세스)
import { app, ipcMain } from 'electron';
import serve from 'electron-serve';
import { createWindow } from './helpers';
const isProd: boolean = process.env.NODE_ENV === 'production';
if (isProd) {
serve({ directory: 'app' });
} else {
app.setPath('userData', `${app.getPath('userData')} (development)`);
}
(async () => {
await app.whenReady();
const mainWindow = createWindow('main', {
width: 1000,
height: 600,
});
if (isProd) {
await mainWindow.loadURL('app://./home.html');
} else {
const port = process.argv[2];
await mainWindow.loadURL(`http://localhost:${port}/home`);
mainWindow.webContents.openDevTools();
}
//렌더러프로세스에서 보내는 메시지 처리
ipcMain.on('toggle-debug', () => {
//디버기 툴 토글(on/off)
mainWindow.webContents.toggleDevTools();
});
})();
app.on('window-all-closed', () => {
app.quit();
});
- renderer/pages/home.tsx
import React, { useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { ipcRenderer } from 'electron';
function Home() {
useEffect(() => {
document.addEventListener('keydown', event => {
if (event.code == 'F12') {
//메인프로세스로 toggle-debug 메시지 전송
ipcRenderer.send('toggle-debug');
}
});
}, []);
return (
<>
<Head>
<title>Home - Nextron (with-typescript)</title>
</Head>
<div>
<p>
⚡ Electron + Next.js ⚡ -
<Link href='/next'>
<a>Go to next page</a>
</Link>
</p>
<img src='/images/logo.png' />
</div>
</>
);
}
export default Home;
위와 같이 설정하면 렌더러 프로세스에서 toggle-debug 메세지를 보내고 메인 프로세스에서 toggle-debug를 받아서 최종적으로 mainWindow.webContents.toggleDevTools()가 실행 된다.
2. 메인 프로세스 자체적으로 처리
1) 패키치 설치
npm install electron-localshortcut2) 사용 방법
import { app, ipcMain } from 'electron';
import serve from 'electron-serve';
import { createWindow } from './helpers';
import electronLocalshortcut from 'electron-localshortcut';
const isProd: boolean = process.env.NODE_ENV === 'production';
if (isProd) {
serve({ directory: 'app' });
} else {
app.setPath('userData', `${app.getPath('userData')} (development)`);
}
(async () => {
await app.whenReady();
const mainWindow = createWindow('main', {
width: 1000,
height: 600,
});
if (isProd) {
await mainWindow.loadURL('app://./home.html');
} else {
const port = process.argv[2];
await mainWindow.loadURL(`http://localhost:${port}/home`);
mainWindow.webContents.openDevTools();
}
electronLocalshortcut.register(mainWindow, 'F12', () => {
console.log('F12 is pressed');
mainWindow.webContents.toggleDevTools();
});
})();
app.on('window-all-closed', () => {
app.quit();
});
'electron-localshortcut' 모듈을 이용해 메인 프로세스 자체적으로 키 입력받는 방법이다.
이 방법을 선호하는 이유는 렌더러 프로세스에 오류가 발생하면 아무런 동작을 하지않고, 무엇보다 관리해야하는 코드가 적어지기 때문이다.
이렇게 하면 정상적으로 개발자 도구를 On/Off 할 수가 있다.
기록하는 습관을 기르자