Changing default JS function in chromium

[Asmit]

Hi all,

I am new to Chromium and trying to log every time the `document.querySelector` is called or executed in JS. 

In short, I want to display a console log message saying "querySelector called" every time a JS function executes that command.

Could anyone please guide me on how to do this? I would appreciate any help!

Thanks,

Asmit 

[PhistucK]

You might be able to add the log here -

https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:third_party/blink/renderer/core/dom/container_node.cc;drc=f7ad0c97ab13f1ba4836f3019e728e62e4f98cff;l=1272

☆PhistucK

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/0673538f-edcb-4851-850f-2527ed4f73a1n%40chromium.org.

[Asmit]

Thanks for the suggestion. But I was wondering if I could maybe change the native JS function altogether, maybe in V8!

Do you have any suggestions on that?

[PhistucK]

What do you mean by "native JS function"? It is not a native JavaScript function, it is a C++ function that is being called from the JavaScript "world".

There is something called Web IDL which is the definition of the interfaces and objects that are exposed to JavaScript, but those bindings (the exposure of those objects to JavaScript) are automatically generated from the IDL files, written in C++. Not sure if this would help you.

V8 does not know about querySelector specifically because querySelector is a web/HTML/DOM/CSSOM concept, not a JavaScript concept (this is why it does not exist in Node.js or Rhino).

IDL - https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/parent_node.idl?q=file:idl%20file:blink%20queryselector

Automatically generated bindings - https://source.chromium.org/search?q=file:bindings%20file:blink%20queryselector%20file:win

☆PhistucK

[Asmit]

Gotcha. Yes this was pretty much what I wanted. 

I did implement it but I realize that the logging statement is being called everytime something is being rendered. Which makes sense!

I was wondering if you would have any suggestion on how to limit that so that it logs only when an external JS file (eg. the website's external JS function)  calls queryselector!

Thanks a ton.

[PhistucK]

Weird that it got called on every render, maybe it is being used internally by something.

Are the automatically generated bindings more helpful? Are you still having that issue?

☆PhistucK

[Demetrios Papadopoulos]

You could inject the following code (or similar) in the page that you are interested in logging.

const orig = Document.prototype.querySelector;
Document.prototype.querySelector = function(query) {
    console.log('querySelector called');
    return orig.apply(this, arguments);
}

Could also create a similar snippet for HTMLElement.prototype.querySelector, if interested in calls to querySelector that are not happening on 'document'.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/CABc02_%2BMDJUmubNCs7j9HjGk5jWJQ04aDLaqTyD%2BtFafOrKMXw%40mail.gmail.com.

[Mathias Bynens]

If you only want this for debugging purposes, you could just open DevTools and run

monitor(document.querySelectorAll);

Screenshot:

--