內容簡介
KineticHub Frontend Doctor 是一款針對前端問題的診斷工具，能夠幫助使用者快速找出網頁元素問題，提升網站使用體驗。它完全在使用者的瀏覽器中運行，無需上傳或儲存任何資料。
【主要功能】
• Viewport Doctor：找出導致頁面橫向滾動的元素
• Sticky Doctor：解釋為何固定標題或側邊欄無法固定
• Click Doctor：找出覆蓋在按鈕上的元素
• Floating UI Inspector：檢查浮動按鈕和小工具的重疊問題
• Anchor Doctor：檢查內部連結的實際位置
外掛標籤
開發者團隊
原文外掛簡介
Something on the page scrolls sideways. A sticky header stops sticking. A button
will not take a click. Frontend Doctor looks at the page as your browser has
actually laid it out, and shows you the element responsible.
It runs entirely in your browser, on the page you are already looking at.
Nothing is uploaded, nothing is stored, and nothing is sent anywhere. There is
no scan history, no dashboard of scores, and no database table – close the panel
and the plugin has left no trace but the file it was installed from.
Five checks
Viewport Doctor – finds the element making the page scroll sideways.
Sticky Doctor – explains why a sticky header or sidebar is not sticking.
Click Doctor – finds what is sitting on top of a button and swallowing the click.
Floating UI Inspector – finds floating buttons, bars and widgets sitting on top of each other.
Anchor Doctor – checks in-page links and where they actually land.
Built to stay out of the way
Only administrators see it. A logged-out visitor loads none of it – not a byte,
not a tag, not a request. An administrator browsing their own site carries a
launcher of well under two kilobytes, and the diagnostic engine is fetched only
when they ask for it.
Rebuilding the compiled JavaScript
The two files in assets/js are compiled. Everything they are compiled from
ships beside them, in assets/src, along with the script that compiles them.
With Node.js 18 or newer, in the plugin directory:
npm install – installs one dependency, the esbuild bundler.
npm run build
That rewrites assets/js/khfd-launcher.js and assets/js/khfd-runtime.js from
assets/src. The build is deterministic: on an unmodified copy of the plugin it
reproduces the two shipped files byte for byte.
The human-readable JavaScript source is in assets/src, and scripts/build.js
rebuilds the two compiled bundles from it; both ship in this package. The
public source repository contains the same source and the build material needed
to rebuild the distributed JavaScript. The internal test suites, linters and
release tooling are not part of this package or of the public source
repository.
