Repl.it developer tools not responding

Every JavaScript file I add this bit of code: window.onkeydown = function() {}
the developer tool stop responding to my key input.

Hey @flebedev99!

Can you please send me the link to your repl and a screenshot of the issue (if possible)?

1 Like

instead of overriding the function, which probably breaks something in the devtools, try using

addEventListener("keydown", () => {/*...*/})
2 Likes

Thanks the developer tools work now with the window.onkeydown = function() {}

1 Like

:grimacing: That suggests that the developer tools aren’t set up well…

1 Like

Just realised that if you write window.onkeydown = function(e) { e.preventDefault() }
inside a script tag, then the developer tools don’t respond to input. I guess I’m blocking the input with the e.preventDefault() function, the default being the developer tools input.

2 Likes

Yep, just checked, the developer console is actually within the iframe that the HTML, CSS & JS is displayed (which is why it stops responding to input).

Replit clearly isn’t following the best practices, they should be using an event listener, not one of the on callback functions (which would mean that the first issue would never arise).

The developer tools should also be outside of the iframe (but still displayed on top), and should probably use postMessage within some short script within the iframe to pass logged content to the developer tools.

2 Likes