Menu
Debug frontend vanilla JS issues - console errors, rendering bugs, SPA navigation, WebSocket
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Automates the process of setting up the first admin user or adding new admins via the bootstrap endpoint. Includes a Python script for easy execution.
Push to remote and wait for CI to pass. If CI fails, read logs, fix bugs, and re-push. Repeat until green.
Use when building or debugging LangGraph multi-agent systems - eval-first execution, task decomposition, model routing by complexity, and cost discipline
Use when AI agent modifies API routes or backend logic - catch systematic blind spots where the same model writes and reviews code
Use when making or recording significant architectural decisions - capture context, alternatives, and rationale as structured ADRs
Use when you have a written implementation plan to execute with review checkpoints between tasks
| name | frontend-debug |
| description | Debug frontend vanilla JS issues - console errors, rendering bugs, SPA navigation, WebSocket |
web/js/web/js/spa.jsweb/js/i18n.js with data-i18n attributesweb/js/market-ws.jsindex.htmlCannot read property of null → element not in DOM yetspa.js handles page switchingtabsWithSidebar controls chat sidebar visibilityindex.html for correct script loading orderwindow.I18n ? window.I18n.t('key') : 'fallback'data-i18n="key" attributesweb/js/i18n/en.json and zh-TW.json for missing keysmarket-ws.js for connection handlingescapeHtml()sanitizeUrl()safetyTab.js for clipboard XSS patternsmarket-screener.js is the ACTIVE file (not market.js which was deleted)market-status.jsmarkSynced() called before fetch to prevent time jumpconsole.warn("DEBUG:", value) in JSpage.evaluate() in Playwright for automated debuggingindex.html for correct file references| File | Purpose |
|---|---|
web/js/spa.js | SPA router, page switching |
web/js/components.js | Shared UI components |
web/js/i18n.js | i18n library |
web/js/market-screener.js | Market screener (active) |
web/js/market-chart.js | Chart rendering |
web/js/market-ws.js | WebSocket handler |
web/js/market-status.js | Live clock, sync status |
web/js/friends.js | Friends page |
web/js/messages.js | Messages page |
web/js/safetyTab.js | Safety/reporting |
所有需要用戶認證的頁面都必須載入 Pi SDK！
<head> 中加入：<!-- Pi Network SDK (REQUIRED for Pi Browser authentication) -->
<script src="https://sdk.minepi.com/pi-sdk.js"></script>
| 頁面類型 | 需要載入 | 原因 |
|---|---|---|
主應用入口 (index.html) | ✅ 是 | 登入/認證 |
論壇頁面 (forum/*.html) | ✅ 是 | 發文/評論/支付 |
治理頁面 (governance/*.html) | ✅ 是 | PRO 會員功能 |
詐騙追蹤 (scam-tracker/*.html) | ✅ 是 | 提交報告 |
法律頁面 (legal/*.html) | ❌ 否 | 靜態內容，無需認證 |
// auth.js Line 39-54
const PiEnvironment = {
isSafeSdkContext() {
// 必須是 HTTPS 且非 localhost
return window.location.protocol === 'https:' && !this.isLocalhost();
},
hasPiSdk() {
// Pi SDK 必須已載入
return typeof window.Pi !== 'undefined' &&
typeof window.Pi.authenticate === 'function' &&
typeof window.Pi.init === 'function';
},
isPiBrowser() {
return this.isSafeSdkContext() && this.hasPiSdk();
}
};
| 問題 | 原因 | 解決方案 |
|---|---|---|
| 「請使用 Pi Browser」但已在 Pi Browser 中 | Pi SDK 未載入 | 確認 HTML 有 <script src="https://sdk.minepi.com/pi-sdk.js"></script> |
window.Pi is undefined | SDK script 未執行 | 檢查 CSP 是否允許 sdk.minepi.com |
| 認證後無反應 | SDK 載入但 Pi.init() 未呼叫 | 確認 auth.js 正確初始化 |
建立新 HTML 頁面時，確認：
</head> 之前window.Pi 存在