https://github.com/electron-utils/electron-quick-inspect
Quickly inspect an element at mouse position via `webContents.inspectElement(x,y)`.
https://github.com/electron-utils/electron-quick-inspect
devtools electron
Last synced: 2 months ago
JSON representation
Quickly inspect an element at mouse position via `webContents.inspectElement(x,y)`.
- Host: GitHub
- URL: https://github.com/electron-utils/electron-quick-inspect
- Owner: electron-utils
- License: mit
- Created: 2017-01-12T05:44:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-19T02:41:25.000Z (about 8 years ago)
- Last Synced: 2024-11-16T01:43:03.708Z (7 months ago)
- Topics: devtools, electron
- Language: JavaScript
- Size: 20.5 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# electron-quick-inspect
[](https://david-dm.org/electron-utils/electron-quick-inspect)
[](https://david-dm.org/electron-utils/electron-quick-inspect#info=devDependencies)
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
```bash
npm install --save electron-quick-inspect
```
## Run the example:
```bash
npm start example
```
## Usage
In your main process:
```javascript
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:
```javascript
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