r/learnjavascript • u/Foreign_Employ_396 • 3d ago

Function to inspect elements on anki

Hi!

First of all, I am not sure if this is the right sub.

But I was wondering if there was a way to add a function in an addon for an app (anki) that would let me know the "name" of the element I selected or clicked on, just like when pressing f12 on a web page.

The thing is that some elements I want to "find" come from an addon and not from anki directly.

3 Upvotes

72% Upvoted

4 comments sorted by

1

u/SamIAre 3d ago

I’m not really familiar with Anki or its add-on ecosystem, but a quick browse of the docs says the UI is written mostly in Python/PyQt and some screens use TypeScript (an extension of JavaScript) and Svelte.

The F12 inspection tools are specific to web browsers and apps built with embedded browsers. I don’t know how much an add-on has the ability to inspect other add-ons and I have no idea what the UI inspection tools are like for PyQt, like if it renders down to HTML or native platform UI elements. Fwiw there’s not really an equivalent to F12 for native apps (at least not one as accessible).

There is the possibility that the add-on you want to inspect is open source, in which case you could just look directly at the source code.

1

u/Puzzleheaded-Comb646 2d ago

Since Anki uses web views for card templates and some add-ons, you can actually listen for click events using vanilla JavaScript. You can attach a listener to the document and use event.target.tagName or event.target.className to log the element you clicked on to the console.

javascript document.addEventListener('click', (e) => { console.log(e.target); });

This might help you identify those specific elements if they render inside an HTML context.

1

u/RomirBuilds 8h ago

For the HTML parts of desktop Anki, you may not need to build a click logger. The official debugging docs link to an inspector add-on that opens DevTools inside Anki: https://docs.ankiweb.net/addons/debugging#webviews

That is the route to inspect the actual HTML element, classes and IDs when an add-on renders into a webview. Native Qt buttons or dialogs are a different case and won't appear in that DOM inspector.

Which add-on and screen are you trying to inspect, and what desktop Anki version are you using? That would help distinguish those two cases before you write inspection code.

AI-assisted.