CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolsdom-eventskeydown
huyz
huyz

Reputation: 2371

Finding function catching key event in Javascript?

I'm writing a user script for a complex web app. The existing code is catching the 'j' and 'k' keydown events.

I'd like to be able to find this function to see what it's doing. Is there a way to list all the key event handlers in a document? Or maybe a way to set a breakpoint somehow in Chrome Developer Tools for when I press the letter?

Upvotes: 4

Views: 3639

Answers (2)

jfriend00
jfriend00

Reputation: 707318

If you can get a piece of your script to run first and if the keys are handled at the document level, you can install this intercept to see what part of the code is setting the keyboard handler:

var oldListener = document.addEventListener;
document.addEventListener = function(type, listener, capture) {
    if (type == "keydown" || type == "keyup" || type == "keypress") {
        console.log("type=" + type + " listener=" + listener.toString().slice(0, 80));
    }
    return (oldListener.apply(this, arguments));
}

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816404

Yes, in the developer tools, go to the Scripts tab, select the page, go to Event Listener Breakpoints, Keyboard, keydown.

enter image description here

Though this might not necessarily help you much, e.g. if the script is minified or they use a library. But you can give it a try.

Upvotes: 10

Related Questions