749 lines
31 KiB
JavaScript
749 lines
31 KiB
JavaScript
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 导入和常量
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
import { extensionFolderPath } from "../../core/constants.js";
|
|||
|
|
import { postToIframe, isTrustedMessage } from "../../core/iframe-messaging.js";
|
|||
|
|
|
|||
|
|
const STORAGE_EXPANDED_KEY = "xiaobaix_debug_panel_pos_v2";
|
|||
|
|
const STORAGE_MINI_KEY = "xiaobaix_debug_panel_minipos_v2";
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 状态变量
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
let isOpen = false;
|
|||
|
|
let isExpanded = false;
|
|||
|
|
let panelEl = null;
|
|||
|
|
let miniBtnEl = null;
|
|||
|
|
let iframeEl = null;
|
|||
|
|
let dragState = null;
|
|||
|
|
let pollTimer = null;
|
|||
|
|
let lastLogId = 0;
|
|||
|
|
let frameReady = false;
|
|||
|
|
let messageListenerBound = false;
|
|||
|
|
let resizeHandler = null;
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 性能监控状态
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
let perfMonitorActive = false;
|
|||
|
|
let originalFetch = null;
|
|||
|
|
let longTaskObserver = null;
|
|||
|
|
let fpsFrameId = null;
|
|||
|
|
let lastFrameTime = 0;
|
|||
|
|
let frameCount = 0;
|
|||
|
|
let currentFps = 0;
|
|||
|
|
|
|||
|
|
const requestLog = [];
|
|||
|
|
const longTaskLog = [];
|
|||
|
|
const MAX_PERF_LOG = 50;
|
|||
|
|
const SLOW_REQUEST_THRESHOLD = 500;
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 工具函数
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
|
|||
|
|
const isMobile = () => window.innerWidth <= 768;
|
|||
|
|
const countErrors = (logs) => (logs || []).filter(l => l?.level === "error").length;
|
|||
|
|
const maxLogId = (logs) => (logs || []).reduce((m, l) => Math.max(m, Number(l?.id) || 0), 0);
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 存储
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function readJSON(key) {
|
|||
|
|
try {
|
|||
|
|
const raw = localStorage.getItem(key);
|
|||
|
|
return raw ? JSON.parse(raw) : null;
|
|||
|
|
} catch { return null; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function writeJSON(key, data) {
|
|||
|
|
try { localStorage.setItem(key, JSON.stringify(data)); } catch {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 页面统计
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function getPageStats() {
|
|||
|
|
try {
|
|||
|
|
return {
|
|||
|
|
domCount: document.querySelectorAll('*').length,
|
|||
|
|
messageCount: document.querySelectorAll('.mes').length,
|
|||
|
|
imageCount: document.querySelectorAll('img').length
|
|||
|
|
};
|
|||
|
|
} catch {
|
|||
|
|
return { domCount: 0, messageCount: 0, imageCount: 0 };
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 性能监控：Fetch 拦截
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function startFetchInterceptor() {
|
|||
|
|
if (originalFetch) return;
|
|||
|
|
originalFetch = window.fetch;
|
|||
|
|
window.fetch = async function(input, init) {
|
|||
|
|
const url = typeof input === 'string' ? input : input?.url || '';
|
|||
|
|
const method = init?.method || 'GET';
|
|||
|
|
const startTime = performance.now();
|
|||
|
|
const timestamp = Date.now();
|
|||
|
|
try {
|
|||
|
|
const response = await originalFetch.apply(this, arguments);
|
|||
|
|
const duration = performance.now() - startTime;
|
|||
|
|
if (url.includes('/api/') && duration >= SLOW_REQUEST_THRESHOLD) {
|
|||
|
|
requestLog.push({ url, method, duration: Math.round(duration), timestamp, status: response.status });
|
|||
|
|
if (requestLog.length > MAX_PERF_LOG) requestLog.shift();
|
|||
|
|
}
|
|||
|
|
return response;
|
|||
|
|
} catch (err) {
|
|||
|
|
const duration = performance.now() - startTime;
|
|||
|
|
requestLog.push({ url, method, duration: Math.round(duration), timestamp, status: 'error' });
|
|||
|
|
if (requestLog.length > MAX_PERF_LOG) requestLog.shift();
|
|||
|
|
throw err;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopFetchInterceptor() {
|
|||
|
|
if (originalFetch) {
|
|||
|
|
window.fetch = originalFetch;
|
|||
|
|
originalFetch = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 性能监控：长任务检测
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function startLongTaskObserver() {
|
|||
|
|
if (longTaskObserver) return;
|
|||
|
|
try {
|
|||
|
|
if (typeof PerformanceObserver === 'undefined') return;
|
|||
|
|
longTaskObserver = new PerformanceObserver((list) => {
|
|||
|
|
for (const entry of list.getEntries()) {
|
|||
|
|
if (entry.duration >= 200) {
|
|||
|
|
let source = '主页面';
|
|||
|
|
try {
|
|||
|
|
const attr = entry.attribution?.[0];
|
|||
|
|
if (attr) {
|
|||
|
|
if (attr.containerType === 'iframe') {
|
|||
|
|
source = 'iframe';
|
|||
|
|
if (attr.containerSrc) {
|
|||
|
|
const url = new URL(attr.containerSrc, location.href);
|
|||
|
|
source += `: ${url.pathname.split('/').pop() || url.pathname}`;
|
|||
|
|
}
|
|||
|
|
} else if (attr.containerName) {
|
|||
|
|
source = attr.containerName;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch {}
|
|||
|
|
longTaskLog.push({
|
|||
|
|
duration: Math.round(entry.duration),
|
|||
|
|
timestamp: Date.now(),
|
|||
|
|
source
|
|||
|
|
});
|
|||
|
|
if (longTaskLog.length > MAX_PERF_LOG) longTaskLog.shift();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
longTaskObserver.observe({ entryTypes: ['longtask'] });
|
|||
|
|
} catch {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopLongTaskObserver() {
|
|||
|
|
if (longTaskObserver) {
|
|||
|
|
try { longTaskObserver.disconnect(); } catch {}
|
|||
|
|
longTaskObserver = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 性能监控：FPS 计算
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function startFpsMonitor() {
|
|||
|
|
if (fpsFrameId) return;
|
|||
|
|
lastFrameTime = performance.now();
|
|||
|
|
frameCount = 0;
|
|||
|
|
const loop = (now) => {
|
|||
|
|
frameCount++;
|
|||
|
|
if (now - lastFrameTime >= 1000) {
|
|||
|
|
currentFps = frameCount;
|
|||
|
|
frameCount = 0;
|
|||
|
|
lastFrameTime = now;
|
|||
|
|
}
|
|||
|
|
fpsFrameId = requestAnimationFrame(loop);
|
|||
|
|
};
|
|||
|
|
fpsFrameId = requestAnimationFrame(loop);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopFpsMonitor() {
|
|||
|
|
if (fpsFrameId) {
|
|||
|
|
cancelAnimationFrame(fpsFrameId);
|
|||
|
|
fpsFrameId = null;
|
|||
|
|
}
|
|||
|
|
currentFps = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 性能监控：内存
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function getMemoryInfo() {
|
|||
|
|
if (typeof performance === 'undefined' || !performance.memory) return null;
|
|||
|
|
const mem = performance.memory;
|
|||
|
|
return {
|
|||
|
|
used: mem.usedJSHeapSize,
|
|||
|
|
total: mem.totalJSHeapSize,
|
|||
|
|
limit: mem.jsHeapSizeLimit
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 性能监控：生命周期
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function startPerfMonitor() {
|
|||
|
|
if (perfMonitorActive) return;
|
|||
|
|
perfMonitorActive = true;
|
|||
|
|
startFetchInterceptor();
|
|||
|
|
startLongTaskObserver();
|
|||
|
|
startFpsMonitor();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopPerfMonitor() {
|
|||
|
|
if (!perfMonitorActive) return;
|
|||
|
|
perfMonitorActive = false;
|
|||
|
|
stopFetchInterceptor();
|
|||
|
|
stopLongTaskObserver();
|
|||
|
|
stopFpsMonitor();
|
|||
|
|
requestLog.length = 0;
|
|||
|
|
longTaskLog.length = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 样式注入
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function ensureStyle() {
|
|||
|
|
if (document.getElementById("xiaobaix-debug-style")) return;
|
|||
|
|
const style = document.createElement("style");
|
|||
|
|
style.id = "xiaobaix-debug-style";
|
|||
|
|
style.textContent = `
|
|||
|
|
#xiaobaix-debug-btn {
|
|||
|
|
display: inline-flex !important;
|
|||
|
|
align-items: center !important;
|
|||
|
|
gap: 6px !important;
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-btn .dbg-light {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #555;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
transition: background 0.2s, box-shadow 0.2s;
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-btn .dbg-light.on {
|
|||
|
|
background: #4ade80;
|
|||
|
|
box-shadow: 0 0 6px #4ade80;
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-mini {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10000;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
background: rgba(28, 28, 32, 0.96);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: rgba(255,255,255,0.9);
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
touch-action: none;
|
|||
|
|
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
|
|||
|
|
transition: box-shadow 0.2s;
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-mini:hover {
|
|||
|
|
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-mini .badge {
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255,80,80,0.18);
|
|||
|
|
border: 1px solid rgba(255,80,80,0.35);
|
|||
|
|
color: #fca5a5;
|
|||
|
|
font-size: 10px;
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-mini .badge.hidden { display: none; }
|
|||
|
|
#xiaobaix-debug-mini.flash {
|
|||
|
|
animation: xbdbg-flash 0.35s ease-in-out 2;
|
|||
|
|
}
|
|||
|
|
@keyframes xbdbg-flash {
|
|||
|
|
0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
|
|||
|
|
50% { box-shadow: 0 0 0 4px rgba(255,80,80,0.4); }
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-panel {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10001;
|
|||
|
|
background: rgba(22,22,26,0.97);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.10);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 12px 36px rgba(0,0,0,0.5);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
@media (min-width: 769px) {
|
|||
|
|
#xiaobaix-debug-panel {
|
|||
|
|
resize: both;
|
|||
|
|
min-width: 320px;
|
|||
|
|
min-height: 260px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
#xiaobaix-debug-panel {
|
|||
|
|
left: 0 !important;
|
|||
|
|
right: 0 !important;
|
|||
|
|
top: 0 !important;
|
|||
|
|
width: 100% !important;
|
|||
|
|
border-radius: 0;
|
|||
|
|
resize: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-titlebar {
|
|||
|
|
user-select: none;
|
|||
|
|
padding: 8px 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 8px;
|
|||
|
|
background: rgba(30,30,34,0.98);
|
|||
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
@media (min-width: 769px) {
|
|||
|
|
#xiaobaix-debug-titlebar { cursor: move; }
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-titlebar .left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: rgba(255,255,255,0.88);
|
|||
|
|
}
|
|||
|
|
#xiaobaix-debug-titlebar .right {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
.xbdbg-btn {
|
|||
|
|
width: 28px;
|
|||
|
|
height: 24px;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.10);
|
|||
|
|
background: rgba(255,255,255,0.05);
|
|||
|
|
color: rgba(255,255,255,0.85);
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 12px;
|
|||
|
|
transition: background 0.15s;
|
|||
|
|
}
|
|||
|
|
.xbdbg-btn:hover { background: rgba(255,255,255,0.12); }
|
|||
|
|
#xiaobaix-debug-frame {
|
|||
|
|
flex: 1;
|
|||
|
|
border: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
document.head.appendChild(style);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 定位计算
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function getAnchorRect() {
|
|||
|
|
const anchor = document.getElementById("nonQRFormItems");
|
|||
|
|
if (anchor) return anchor.getBoundingClientRect();
|
|||
|
|
return { top: window.innerHeight - 60, right: window.innerWidth, left: 0, width: window.innerWidth };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getDefaultMiniPos() {
|
|||
|
|
const rect = getAnchorRect();
|
|||
|
|
const btnW = 90, btnH = 32, margin = 8;
|
|||
|
|
return { left: rect.right - btnW - margin, top: rect.top - btnH - margin };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyMiniPosition() {
|
|||
|
|
if (!miniBtnEl) return;
|
|||
|
|
const saved = readJSON(STORAGE_MINI_KEY);
|
|||
|
|
const def = getDefaultMiniPos();
|
|||
|
|
const pos = saved || def;
|
|||
|
|
const w = miniBtnEl.offsetWidth || 90;
|
|||
|
|
const h = miniBtnEl.offsetHeight || 32;
|
|||
|
|
miniBtnEl.style.left = `${clamp(pos.left, 0, window.innerWidth - w)}px`;
|
|||
|
|
miniBtnEl.style.top = `${clamp(pos.top, 0, window.innerHeight - h)}px`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveMiniPos() {
|
|||
|
|
if (!miniBtnEl) return;
|
|||
|
|
const r = miniBtnEl.getBoundingClientRect();
|
|||
|
|
writeJSON(STORAGE_MINI_KEY, { left: Math.round(r.left), top: Math.round(r.top) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyExpandedPosition() {
|
|||
|
|
if (!panelEl) return;
|
|||
|
|
if (isMobile()) {
|
|||
|
|
const rect = getAnchorRect();
|
|||
|
|
panelEl.style.left = "0";
|
|||
|
|
panelEl.style.top = "0";
|
|||
|
|
panelEl.style.width = "100%";
|
|||
|
|
panelEl.style.height = `${rect.top}px`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const saved = readJSON(STORAGE_EXPANDED_KEY);
|
|||
|
|
const defW = 480, defH = 400;
|
|||
|
|
const w = saved?.width >= 320 ? saved.width : defW;
|
|||
|
|
const h = saved?.height >= 260 ? saved.height : defH;
|
|||
|
|
const left = saved?.left != null ? clamp(saved.left, 0, window.innerWidth - w) : 20;
|
|||
|
|
const top = saved?.top != null ? clamp(saved.top, 0, window.innerHeight - h) : 80;
|
|||
|
|
panelEl.style.left = `${left}px`;
|
|||
|
|
panelEl.style.top = `${top}px`;
|
|||
|
|
panelEl.style.width = `${w}px`;
|
|||
|
|
panelEl.style.height = `${h}px`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveExpandedPos() {
|
|||
|
|
if (!panelEl || isMobile()) return;
|
|||
|
|
const r = panelEl.getBoundingClientRect();
|
|||
|
|
writeJSON(STORAGE_EXPANDED_KEY, { left: Math.round(r.left), top: Math.round(r.top), width: Math.round(r.width), height: Math.round(r.height) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 数据获取与通信
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
async function getDebugSnapshot() {
|
|||
|
|
const { xbLog, CacheRegistry } = await import("../../core/debug-core.js");
|
|||
|
|
const { EventCenter } = await import("../../core/event-manager.js");
|
|||
|
|
const pageStats = getPageStats();
|
|||
|
|
return {
|
|||
|
|
logs: xbLog.getAll(),
|
|||
|
|
events: EventCenter.getEventHistory?.() || [],
|
|||
|
|
eventStatsDetail: EventCenter.statsDetail?.() || {},
|
|||
|
|
caches: CacheRegistry.getStats(),
|
|||
|
|
performance: {
|
|||
|
|
requests: requestLog.slice(),
|
|||
|
|
longTasks: longTaskLog.slice(),
|
|||
|
|
fps: currentFps,
|
|||
|
|
memory: getMemoryInfo(),
|
|||
|
|
domCount: pageStats.domCount,
|
|||
|
|
messageCount: pageStats.messageCount,
|
|||
|
|
imageCount: pageStats.imageCount
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function postToFrame(msg) {
|
|||
|
|
try { postToIframe(iframeEl, { ...msg }, "LittleWhiteBox-DebugHost"); } catch {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendSnapshotToFrame() {
|
|||
|
|
if (!frameReady) return;
|
|||
|
|
const snapshot = await getDebugSnapshot();
|
|||
|
|
postToFrame({ type: "XB_DEBUG_DATA", payload: snapshot });
|
|||
|
|
updateMiniBadge(snapshot.logs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleAction(action) {
|
|||
|
|
const { xbLog, CacheRegistry } = await import("../../core/debug-core.js");
|
|||
|
|
const { EventCenter } = await import("../../core/event-manager.js");
|
|||
|
|
switch (action?.action) {
|
|||
|
|
case "refresh": await sendSnapshotToFrame(); break;
|
|||
|
|
case "clearLogs": xbLog.clear(); await sendSnapshotToFrame(); break;
|
|||
|
|
case "clearEvents": EventCenter.clearHistory?.(); await sendSnapshotToFrame(); break;
|
|||
|
|
case "clearCache": if (action.moduleId) CacheRegistry.clear(action.moduleId); await sendSnapshotToFrame(); break;
|
|||
|
|
case "clearAllCaches": CacheRegistry.clearAll(); await sendSnapshotToFrame(); break;
|
|||
|
|
case "clearRequests": requestLog.length = 0; await sendSnapshotToFrame(); break;
|
|||
|
|
case "clearTasks": longTaskLog.length = 0; await sendSnapshotToFrame(); break;
|
|||
|
|
case "cacheDetail":
|
|||
|
|
postToFrame({ type: "XB_DEBUG_CACHE_DETAIL", payload: { moduleId: action.moduleId, detail: CacheRegistry.getDetail(action.moduleId) } });
|
|||
|
|
break;
|
|||
|
|
case "exportLogs":
|
|||
|
|
postToFrame({ type: "XB_DEBUG_EXPORT", payload: { text: xbLog.export() } });
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function bindMessageListener() {
|
|||
|
|
if (messageListenerBound) return;
|
|||
|
|
messageListenerBound = true;
|
|||
|
|
// eslint-disable-next-line no-restricted-syntax
|
|||
|
|
window.addEventListener("message", async (e) => {
|
|||
|
|
// Guarded by isTrustedMessage (origin + source).
|
|||
|
|
if (!isTrustedMessage(e, iframeEl, "LittleWhiteBox-DebugFrame")) return;
|
|||
|
|
const msg = e?.data;
|
|||
|
|
if (msg.type === "FRAME_READY") { frameReady = true; await sendSnapshotToFrame(); }
|
|||
|
|
else if (msg.type === "XB_DEBUG_ACTION") await handleAction(msg);
|
|||
|
|
else if (msg.type === "CLOSE_PANEL") closeDebugPanel();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// UI 更新
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function updateMiniBadge(logs) {
|
|||
|
|
if (!miniBtnEl) return;
|
|||
|
|
const badge = miniBtnEl.querySelector(".badge");
|
|||
|
|
if (!badge) return;
|
|||
|
|
const errCount = countErrors(logs);
|
|||
|
|
badge.classList.toggle("hidden", errCount <= 0);
|
|||
|
|
badge.textContent = errCount > 0 ? String(errCount) : "";
|
|||
|
|
const newMax = maxLogId(logs);
|
|||
|
|
if (newMax > lastLogId && !isExpanded) {
|
|||
|
|
miniBtnEl.classList.remove("flash");
|
|||
|
|
// Force reflow to restart animation.
|
|||
|
|
// eslint-disable-next-line no-unused-expressions
|
|||
|
|
miniBtnEl.offsetWidth;
|
|||
|
|
miniBtnEl.classList.add("flash");
|
|||
|
|
}
|
|||
|
|
lastLogId = newMax;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateSettingsLight() {
|
|||
|
|
const light = document.querySelector("#xiaobaix-debug-btn .dbg-light");
|
|||
|
|
if (light) light.classList.toggle("on", isOpen);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 拖拽：最小化按钮
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function onMiniDown(e) {
|
|||
|
|
if (e.button !== undefined && e.button !== 0) return;
|
|||
|
|
dragState = {
|
|||
|
|
startX: e.clientX, startY: e.clientY,
|
|||
|
|
startLeft: miniBtnEl.getBoundingClientRect().left,
|
|||
|
|
startTop: miniBtnEl.getBoundingClientRect().top,
|
|||
|
|
pointerId: e.pointerId, moved: false
|
|||
|
|
};
|
|||
|
|
try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onMiniMove(e) {
|
|||
|
|
if (!dragState || dragState.pointerId !== e.pointerId) return;
|
|||
|
|
const dx = e.clientX - dragState.startX, dy = e.clientY - dragState.startY;
|
|||
|
|
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragState.moved = true;
|
|||
|
|
const w = miniBtnEl.offsetWidth || 90, h = miniBtnEl.offsetHeight || 32;
|
|||
|
|
miniBtnEl.style.left = `${clamp(dragState.startLeft + dx, 0, window.innerWidth - w)}px`;
|
|||
|
|
miniBtnEl.style.top = `${clamp(dragState.startTop + dy, 0, window.innerHeight - h)}px`;
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onMiniUp(e) {
|
|||
|
|
if (!dragState || dragState.pointerId !== e.pointerId) return;
|
|||
|
|
const wasMoved = dragState.moved;
|
|||
|
|
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
|
|||
|
|
dragState = null;
|
|||
|
|
saveMiniPos();
|
|||
|
|
if (!wasMoved) expandPanel();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 拖拽：展开面板标题栏
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function onTitleDown(e) {
|
|||
|
|
if (isMobile()) return;
|
|||
|
|
if (e.button !== undefined && e.button !== 0) return;
|
|||
|
|
if (e.target?.closest?.(".xbdbg-btn")) return;
|
|||
|
|
dragState = {
|
|||
|
|
startX: e.clientX, startY: e.clientY,
|
|||
|
|
startLeft: panelEl.getBoundingClientRect().left,
|
|||
|
|
startTop: panelEl.getBoundingClientRect().top,
|
|||
|
|
pointerId: e.pointerId
|
|||
|
|
};
|
|||
|
|
try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onTitleMove(e) {
|
|||
|
|
if (!dragState || isMobile() || dragState.pointerId !== e.pointerId) return;
|
|||
|
|
const dx = e.clientX - dragState.startX, dy = e.clientY - dragState.startY;
|
|||
|
|
const w = panelEl.offsetWidth, h = panelEl.offsetHeight;
|
|||
|
|
panelEl.style.left = `${clamp(dragState.startLeft + dx, 0, window.innerWidth - w)}px`;
|
|||
|
|
panelEl.style.top = `${clamp(dragState.startTop + dy, 0, window.innerHeight - h)}px`;
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onTitleUp(e) {
|
|||
|
|
if (!dragState || isMobile() || dragState.pointerId !== e.pointerId) return;
|
|||
|
|
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
|
|||
|
|
dragState = null;
|
|||
|
|
saveExpandedPos();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 轮询与 resize
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function startPoll() {
|
|||
|
|
stopPoll();
|
|||
|
|
pollTimer = setInterval(async () => {
|
|||
|
|
if (!isOpen) return;
|
|||
|
|
try { await sendSnapshotToFrame(); } catch {}
|
|||
|
|
}, 1500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopPoll() {
|
|||
|
|
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onResize() {
|
|||
|
|
if (!isOpen) return;
|
|||
|
|
if (isExpanded) applyExpandedPosition();
|
|||
|
|
else applyMiniPosition();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 面板生命周期
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
function createMiniButton() {
|
|||
|
|
if (miniBtnEl) return;
|
|||
|
|
miniBtnEl = document.createElement("div");
|
|||
|
|
miniBtnEl.id = "xiaobaix-debug-mini";
|
|||
|
|
miniBtnEl.innerHTML = `<span>监控</span><span class="badge hidden"></span>`;
|
|||
|
|
document.body.appendChild(miniBtnEl);
|
|||
|
|
applyMiniPosition();
|
|||
|
|
miniBtnEl.addEventListener("pointerdown", onMiniDown, { passive: false });
|
|||
|
|
miniBtnEl.addEventListener("pointermove", onMiniMove, { passive: false });
|
|||
|
|
miniBtnEl.addEventListener("pointerup", onMiniUp, { passive: false });
|
|||
|
|
miniBtnEl.addEventListener("pointercancel", onMiniUp, { passive: false });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeMiniButton() {
|
|||
|
|
miniBtnEl?.remove();
|
|||
|
|
miniBtnEl = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createPanel() {
|
|||
|
|
if (panelEl) return;
|
|||
|
|
panelEl = document.createElement("div");
|
|||
|
|
panelEl.id = "xiaobaix-debug-panel";
|
|||
|
|
const titlebar = document.createElement("div");
|
|||
|
|
titlebar.id = "xiaobaix-debug-titlebar";
|
|||
|
|
titlebar.innerHTML = `
|
|||
|
|
<div class="left"><span>小白X 监控台</span></div>
|
|||
|
|
<div class="right">
|
|||
|
|
<button class="xbdbg-btn" id="xbdbg-min" title="最小化" type="button">—</button>
|
|||
|
|
<button class="xbdbg-btn" id="xbdbg-close" title="关闭" type="button">×</button>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
iframeEl = document.createElement("iframe");
|
|||
|
|
iframeEl.id = "xiaobaix-debug-frame";
|
|||
|
|
iframeEl.src = `${extensionFolderPath}/modules/debug-panel/debug-panel.html`;
|
|||
|
|
panelEl.appendChild(titlebar);
|
|||
|
|
panelEl.appendChild(iframeEl);
|
|||
|
|
document.body.appendChild(panelEl);
|
|||
|
|
applyExpandedPosition();
|
|||
|
|
titlebar.addEventListener("pointerdown", onTitleDown, { passive: false });
|
|||
|
|
titlebar.addEventListener("pointermove", onTitleMove, { passive: false });
|
|||
|
|
titlebar.addEventListener("pointerup", onTitleUp, { passive: false });
|
|||
|
|
titlebar.addEventListener("pointercancel", onTitleUp, { passive: false });
|
|||
|
|
panelEl.querySelector("#xbdbg-min")?.addEventListener("click", collapsePanel);
|
|||
|
|
panelEl.querySelector("#xbdbg-close")?.addEventListener("click", closeDebugPanel);
|
|||
|
|
if (!isMobile()) {
|
|||
|
|
panelEl.addEventListener("mouseup", saveExpandedPos);
|
|||
|
|
panelEl.addEventListener("mouseleave", saveExpandedPos);
|
|||
|
|
}
|
|||
|
|
frameReady = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removePanel() {
|
|||
|
|
panelEl?.remove();
|
|||
|
|
panelEl = null;
|
|||
|
|
iframeEl = null;
|
|||
|
|
frameReady = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function expandPanel() {
|
|||
|
|
if (isExpanded) return;
|
|||
|
|
isExpanded = true;
|
|||
|
|
if (miniBtnEl) miniBtnEl.style.display = "none";
|
|||
|
|
if (panelEl) {
|
|||
|
|
panelEl.style.display = "";
|
|||
|
|
} else {
|
|||
|
|
createPanel();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function collapsePanel() {
|
|||
|
|
if (!isExpanded) return;
|
|||
|
|
isExpanded = false;
|
|||
|
|
saveExpandedPos();
|
|||
|
|
if (panelEl) panelEl.style.display = "none";
|
|||
|
|
if (miniBtnEl) {
|
|||
|
|
miniBtnEl.style.display = "";
|
|||
|
|
applyMiniPosition();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function openDebugPanel() {
|
|||
|
|
if (isOpen) return;
|
|||
|
|
isOpen = true;
|
|||
|
|
ensureStyle();
|
|||
|
|
bindMessageListener();
|
|||
|
|
const { enableDebugMode } = await import("../../core/debug-core.js");
|
|||
|
|
enableDebugMode();
|
|||
|
|
startPerfMonitor();
|
|||
|
|
createMiniButton();
|
|||
|
|
startPoll();
|
|||
|
|
updateSettingsLight();
|
|||
|
|
if (!resizeHandler) { resizeHandler = onResize; window.addEventListener("resize", resizeHandler); }
|
|||
|
|
try { window.registerModuleCleanup?.("debugPanel", closeDebugPanel); } catch {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function closeDebugPanel() {
|
|||
|
|
if (!isOpen) return;
|
|||
|
|
isOpen = false;
|
|||
|
|
isExpanded = false;
|
|||
|
|
stopPoll();
|
|||
|
|
stopPerfMonitor();
|
|||
|
|
frameReady = false;
|
|||
|
|
lastLogId = 0;
|
|||
|
|
try { const { disableDebugMode } = await import("../../core/debug-core.js"); disableDebugMode(); } catch {}
|
|||
|
|
removePanel();
|
|||
|
|
removeMiniButton();
|
|||
|
|
updateSettingsLight();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
// 导出
|
|||
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
export async function toggleDebugPanel() {
|
|||
|
|
if (isOpen) await closeDebugPanel();
|
|||
|
|
else await openDebugPanel();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export { openDebugPanel as openDebugPanelExplicit, closeDebugPanel as closeDebugPanelExplicit };
|
|||
|
|
|
|||
|
|
if (typeof window !== "undefined") {
|
|||
|
|
window.xbDebugPanelToggle = toggleDebugPanel;
|
|||
|
|
window.xbDebugPanelClose = closeDebugPanel;
|
|||
|
|
}
|