electron-quick-inspect

Quickly inspect an element at mouse position via webContents.inspectElement(x,y).

Why?

This is similar to Chrome's inspect element tools. You can achieve it by several ways such as:

• open the devtools and click the icon
• open the devtools and press ctrl/command + shift + c
• call win.devToolsWebContents.executeJavaScript('DevToolsAPI.enterInspectElementMode()') in the main process when devtools opened.

However, all these methods needs you open the devtools first. Sometimes I just want to check the element quickly regardless the devtools, and that's the reason this module here.

Install

npm install --save electron-quick-inspect

Run the example:

npm start example

Usage

In your main process:

const quickInspect = require('electron-quick-inspect');

quickInspect.inspect(browserWindow);

Even better, you can add a accelerator to quickly start it by registering a menu item:

const {app, BrowserWindow, Menu, MenuItem} = require('electron');
const quickInspect = require('electron-quick-inspect');

let win;

app.on('ready', function () {
  // win
  win = new BrowserWindow({
    center: true,
    width: 400,
    height: 600,
    x: 100,
    y: 100,
  });
  win.loadURL('file://' + __dirname + '/index.html');

  let appMenu = Menu.getApplicationMenu();
  appMenu.append(new MenuItem({
    label: 'Develop',
    submenu: Menu.buildFromTemplate([
      {
        label: 'Inspect Element',
        accelerator: 'CmdOrCtrl+Shift+C',
        click () {
          let focusedWin = BrowserWindow.getFocusedWindow();
          quickInspect.inspect(focusedWin);
        }
      }
    ])
  }));

  Menu.setApplicationMenu(appMenu);
});

License

MIT © 2017 Johnny Wu