菜单
Debug frontend vanilla JS issues - console errors, rendering bugs, SPA navigation, WebSocket
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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 存在