Расширение DevTools

Electron поддерживает расширения Chrome DevTools, которые могут быть использованы для расширения возможностей инструментов разработчика Chrome для отладки популярных веб-фреймворков.

Загрузка расширения DevTools с помощью инструментов​

Самый простой способ загрузить расширение DevTools — использовать сторонние инструменты для автоматизации этого процесса. electron-devtools-installer — популярный пакет NPM, который делает именно это.

Ручная загрузка расширения DevTools​

Если вы не хотите использовать подход с инструментами, вы также можете выполнить все необходимые операции вручную. Чтобы загрузить расширение в Electron, необходимо загрузить его через Chrome, найти его путь в файловой системе и затем загрузить его в свою сессию вызвав API [ses.loadExtension].

В качестве примера рассмотрим React Developer Tools:

1. Установите расширение в Google Chrome.

2. Перейдите в chrome://extensions, найдите его идентификатор расширения, который представляет собой строку хэша, например fmkadmapgofadopljbjfkapdkoienihi.

3. Определите расположение файловой системы, используемое Chrome для хранения расширений:

   • в Windows это %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.

4. Передайте расположение расширения API ses.loadExtension. Для React Developer Tools v4.9.0, это выглядит примерно так:

    const { app, session } = require('electron')
    const path = require('path')
    const os = require('os')
   
    // on macOS
    const reactDevToolsPath = path.join(
      os.homedir(),
      '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
    )
   
    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(reactDevToolsPath)
    })

Примечания:

• loadExtension возвращает Promise с объектом Расширение, который содержит метаданные о загруженном расширении. Эта promise должна разрешиться (например, с помощью выражения await), прежде чем загружать страницу. В противном случае расширение не гарантированно загрузится.
• loadExtension нельзя вызывать до момента выдачи события ready модуля app, также нельзя вызывать его для сессий в оперативной памяти (неперсистентных).
• loadExtension необходимо вызывать при каждом запуске приложения, если вы хотите загрузить расширение.

Удаление расширения DevTools​

Вы можете передать идентификатор расширения API ses.removeExtension, чтобы удалить его из вашей сессии. Загруженные расширения не сохраняются между запусками приложения.

Поддержка расширений DevTools​

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

Следующие расширения DevTools были протестированы и работают в Electron:

• Ember Inspector
• React Developer Tools
• Backbone Debugger
• jQuery Debugger
• AngularJS Batarang
• Vue.js devtools
• Cerebral Debugger
• Redux DevTools Extension
• MobX Developer Tools

Что делать, если расширение DevTools не работает?​

Сначала убедитесь, что расширение по-прежнему поддерживается и совместимо с последней версией Google Chrome. Мы не можем предоставить дополнительную поддержку для неподдерживаемых расширений.

Если расширение работает в Chrome, но не в Electron, создайте ошибку в трекере проблем Electron трекере ошибок и опишите, какая часть расширения не работает должным образом.