How to make Developer Tools appear?


#1

I just downloaded Electron and created a simple window with some simple HTML. I want to open the Developer Tools now, but Ctrl + Alt + I don’t work to open it. Is there another key combination I should use? Do I need to write some code to manually enable it? What am I doing wrong? Thanks.


#2

I use Ctrl+Shift+I


#3

That also does nothing. Neither does F12.


#4

I think the way I did it was to create a Menu with a MenuItem that toggles the dev-tools and set a keybinding on the menu item.


#5

I added this to my code which makes F12 open dev tools and F5 reload:

<script>
	document.addEventListener("keydown", function (e) {
		if (e.which === 123) {
			require('remote').getCurrentWindow().toggleDevTools();
		} else if (e.which === 116) {
			location.reload();
		}
	});
</script>

#6

This packet is very handy for making that work :slight_smile:


#7

Keavon, It was happening to me too (not to work the key´s combination), but I have used the same combination (Ctrl+Shift+I) two times. It worked.


#8

The Electron Quick Start repository has a main.js that contains the following:

mainWindow.webContents.openDevTools()

const electron = require(‘electron’)
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL(file://${__dirname}/index.html)
mainWindow.webContents.openDevTools()


#9

On Mac “Cmd+Alt+I” works for me