How to see card preview's browser console

If I’m editing a card type and add a script tag, how can I see the chromium browser console for the preview window? I’m trying to debug errors and see the output of console.log.
I know it’s possible because I’ve seen kleinerpirat do it in this guide

Mac Anki Desktop Version ⁨2.1.49

There are two ways to get dev tools for Anki.

AnkiWebView Inspector (easiest method)

Install this add-on: AnkiWebView Inspector - AnkiWeb
and then right-click on any webview (in your example, the preview window) to bring up the context menu and hit “Inspect”.

Note: In the current version of the add-on, this will open a dev tools pane on the main window of Anki. In the next version, it will open directly in the window you clicked “Inspect” on.

Remote debugging

Start Anki with the environment variable

QTWEBENGINE_REMOTE_DEBUGGING=8080

and then open an external browser (e.g. Chrome) and navigate to http://localhost:8080/. There, you’ll find all open webviews.

4 Likes

Thanks very much for your reply!

I got it to work best with the second option as the windows blocked each other. If anyone else using mac needs the info, I ran the following in shell:

export QTWEBENGINE_REMOTE_DEBUGGING=8080;
open /Applications/Anki.app;
open -a "Google Chrome" "http://localhost:8080/";

Then, once the Anki window you want to inspect is open, you need to refresh the dev tools page and click on the box with the right name. Full details of startup commands here.

3 Likes