How can I generate a lighthouse report for my card template?

Anki Card Design
1

Background

I’m using the webview inspector addon and noticed there is a Lighthouse feature to test Performance, Accessibility, Best Practices, SEO and PWA.

I never used such tools and am more of a novice programmer but i’d like to see what the report could give me – especially regarding performance, accessibility and best practices.

What I did

  1. I open my card in the previewer (and in second try in the template editor)
  2. Right click → Inspect.
  3. Go to Lighthouse.
  4. Press analyze page load.

anki
anki1815×546 69.2 KB

Result

It loads while claiming “Auditing 127.0.0.1…” and then fails with the following:

anki
anki1816×360 47.8 KB

The page in the previewer and template editor gets blank during this run. I also had the browser window in the foreground at all times.

Inspecting webview after lighthouse run

After running lighthouse (anki page being blank) I can see that the body shows this:

<div id="qa"></div>

That’s not right though as this div normally would contain the card content.

Simply closing and opening the previewer (or switching from front preview to back preview in the template editor) makes the card content reappear again.

Desired result

I’d like to be able to generate an actual report with the addon.

Question

How can I properly generate this lighthouse report using the webview inspect addon?

2

you can’t really use lighthouse inside anki like this, because it treats the webview like a regular webpage when Anki performs things differently to display the front or back side of a card. I’m guessing that when emulating the page load, lighthouse doesn’t have a way to tell Anki to populate the #qa element and thus it’s empty.

Alternatively, you can try pulling out your card template into a HTML file and use chrome devtools from there. Though, this doesn’t reflect everything that Anki has does when displaying. e.g. you miss out on Anki desktop’s default styles injected in <head> and <body>. And how MathJax is loaded to render math. And apparently JQuery and Fabric which I have no idea what it’s used for. Oh and pycmd isn’t available too.

I think you can skip trying to use lighthouse for the moment. if you’re still adamant, try to grok it and solve the issue.

1 Like
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.