Как использовать инструменты React Dev в Electron Framework

Содержание

1 А. легкий путь
- 1.1 Как это работает?
- 1.2 Установка других расширений
2 B. долгий путь

Проверять элементы DOM с помощью инспектора элементов Google Chrome довольно просто и просто. Однако, когда вы работаете с React, это может быть очень сложно, поэтому ребята из Facebook разработали широко известное расширение React Dev Tools для браузера. Инструменты разработчика React позволяют вам проверять иерархию компонентов React, включая реквизиты и состояние компонентов. Он существует как расширение браузера (для Хром а также Fire Fox) и как автономное приложение (работает с другими средами, включая Safari, IE и React Native).

ReactJS и Electron — это отличная комбинация для создания чрезвычайно быстрых приложений для рабочего стола, поэтому, если вы используете эти технологии, вы можете захотеть отлаживать их с помощью инструментов React Dev в Electron. Это может быть легко достигнуто, и мы покажем вам, как в этой статье. Вы можете использовать любой из двух способов сделать это:

Важный

Помните, что вы увидите только вкладку Реакт если ваш проект реализует реакцию, в противном случае вкладка React не будет отображаться так же, как в браузере Chrome.

А. легкий путь

Если вы хотите реализовать эту функцию настолько просто и быстро, насколько это возможно, вы можете использовать electron-devtools-installer модуль написан @MarshallOfSound. Это простой способ установить расширения DevTool в Electron, так что вам не придется возиться с загрузкой расширения, поиском нужной папки и настройкой пути для всех компьютеров.

Установите установщик devtools, используя следующую команду на вашем терминале:

npm install electron-devtools-installer --save-dev

В качестве альтернативы, если вы используете пряжу вместо NPM, выполните тогда:

yarn add electron-devtools-installer -D

Как только модуль будет установлен, вы сможете потребовать его в электронных скриптах. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

Как это работает?

На самом деле, вам нужно выполнить пару шагов, если вы хотите установить расширение в Electron (см. Шаг B в этом случае), однако этот модуль сделает все за вас автоматически. Он загружает расширение Chrome прямо из онлайн-магазина Chrome, а затем извлекает его в ваши приложения. userData каталог перед загрузкой в Electron. Если вы хотите узнать, что библиотека делает в фоновом режиме, см. Шаг B.

Все, что вам нужно сделать, чтобы установить расширение с этим модулем, это выполнить следующий код после запуска события Electron:

// using import
import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';
installExtension(REACT_DEVELOPER_TOOLS).then((name) => {
console.log(`Added Extension:  ${name}`);
})
.catch((err) => {
console.log('An error occurred: ', err)
});

В качестве альтернативы, если вы используете require вместо importтогда код будет выглядеть так:

// Using require
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
installExtension(REACT_DEVELOPER_TOOLS).then((name) => {
console.log(`Added Extension:  ${name}`);
})
.catch((err) => {
console.log('An error occurred: ', err);
});

Этот код (любой из предыдущих фрагментов) может быть выполнен, как правило, только в основном процессе, в противном случае в процессе рендеринга он, скорее всего, потерпит неудачу и покажет много ошибок в консоли. Это означает, что вам нужно выполнить его, например, в электронном приложении по умолчанию в main.js файл:

function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600 })
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
// Install React Dev Tools
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
installExtension(REACT_DEVELOPER_TOOLS).then((name) => {
console.log(`Added Extension:  ${name}`);
})
.catch((err) => {
console.log('An error occurred: ', err);
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

При успешной реализации запустите приложение, и вы увидите сообщение в консоли (которое запускает Electron) следующее сообщение: Added Extension: React Developer Tools,

Установка других расширений

Благодаря процессу, которому следует модуль, вы сможете технически установить любое расширение Chrome в свое приложение Electron. Поскольку он был специально создан для разработки, он уже сохранил некоторые идентификаторы наиболее используемых инструментов разработчика в виде констант, которые вы можете просто импортировать:

import installExtension, {
EMBER_INSPECTOR, REACT_DEVELOPER_TOOLS,
BACKBONE_DEBUGGER, JQUERY_DEBUGGER,
ANGULARJS_BATARANG, VUEJS_DEVTOOLS,
REDUX_DEVTOOLS, REACT_PERF,
CYCLEJS_DEVTOOL,
} from 'electron-devtools-installer';

И установить так же, как мы сделали с React Dev Tools.

B. долгий путь

Если вы не хотите устанавливать модуль для этого, вы можете установить расширение вручную следуя спецификациям Electron:

B.1 Установите расширение в браузере Chrome и получите идентификатор расширения

Первое, что вам нужно сделать, это установите React Developer Tools в качестве расширения в браузере Chrome. Это установит его в вашей системе, и вы сможете получить к нему доступ позже из Electron, так как сначала включите режим разработчика в этом представлении, и вы увидите идентификатор любых расширений, идентификатор расширения React: fmkadmapgofadopljbjfkapdkoienihi:

Запомните идентификатор, так как он понадобится вам на следующем шаге.

B.2 Получить расширение абсолютного пути

Теперь вам нужно выяснить расположение файловой системы, используемой Chrome для хранения расширений, которые, очевидно, различны в каждой операционной системе:

на винде это %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;
в Linux это может быть:
- ~/.config/google-chrome/Default/Extensions/
- ~/.config/google-chrome-beta/Default/Extensions/
- ~/.config/google-chrome-canary/Default/Extensions/
- ~/.config/chromium/Default/Extensions/
на macOS это ~/Library/Application Support/Google/Chrome/Default/Extensions,

В этом случае мы находимся на платформе Windows, поэтому она находится в C:\Users\sdkca\AppData\Local\Google\Chrome\User Data\Default\Extensions, Здесь вы найдете в соответствии с установленными расширениями папки с идентификатором в качестве имени:

Наш интерес представляет расширение React, идентифицированное с указанным идентификатором, откройте его и скопировать название версии что вы хотите (в случае, если есть более 2 папок). В этом случае у нас есть только 1 версия, а именно 2.5.0_0:

Теперь мы можем построить абсолютный путь к расширению, которое будет в этом случае: C:\Users\sdkca\AppData\Local\Google\Chrome\User Data\Default\Extensions\fmkadmapgofadopljbjfkapdkoienihi\2.5.0_0,

B.3 Установить расширение по абсолютному пути

Наконец, вы можете установить расширение, используя метод addDevToolsExtension в BrowserWindow. В качестве первого аргумента метод ожидает путь к папке расширения. Реализация может быть сделано в main.js файл, где инициализируется электрон:

// As we are in windows, escape the slash with another
BrowserWindow.addDevToolsExtension(
"C:\\Users\\sdkca\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\fmkadmapgofadopljbjfkapdkoienihi\\2.5.0_0"
);

Как уже упоминалось, расширение может быть установлено только после события готовности Electron:

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
// As we are in windows, escape the slash with another
BrowserWindow.addDevToolsExtension(
"C:\\Users\\sdkca\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\fmkadmapgofadopljbjfkapdkoienihi\\2.5.0_0"
);
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

Теперь вы можете использовать React Dev Tools в вашем проекте так же, как в браузере.