${element.outerHTML}
${JSON.stringify(window.getComputedStyle(element), null, 2)}
`;
}
document.addEventListener('mousemove', (e) => {
if (!elementsPanel.classList.contains('active')) return;
const element = document.elementFromPoint(e.clientX, e.clientY);
if (element && !element.closest('.devtools-container')) {
updateHighlight(element);
highlight.style.display = 'block';
}
});
document.addEventListener('click', (e) => {
if (!elementsPanel.classList.contains('active')) return;
const element = document.elementFromPoint(e.clientX, e.clientY);
if (element && !element.closest('.devtools-container')) {
e.preventDefault();
showElementInfo(element);
}
});
}
// 控制台功能
function initConsole(consolePanel) {
const input = consolePanel.querySelector('.console-input');
const outputContainer = consolePanel.querySelector('.console-output-container');
function log(message, type = 'log') {
const output = document.createElement('div');
output.className = `console-output ${type}`;
output.textContent = message;
outputContainer.appendChild(output);
outputContainer.scrollTop = outputContainer.scrollHeight;
}
const originalConsole = {
log: console.log,
error: console.error,
warn: console.warn
};
console.log = function(...args) {
log(args.join(' '));
originalConsole.log.apply(console, args);
};
console.error = function(...args) {
log(args.join(' '), 'error');
originalConsole.error.apply(console, args);
};
console.warn = function(...args) {
log(args.join(' '), 'warn');
originalConsole.warn.apply(console, args);
};
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
try {
const result = eval(input.value);
log(`> ${input.value}`);
log(result);
} catch (error) {
log(error.message, 'error');
}
input.value = '';
}
});
}
// 网络请求监控
function initNetworkMonitor(networkPanel) {
const originalFetch = window.fetch;
const originalXHR = window.XMLHttpRequest.prototype.open;
function formatHeaders(headers) {
if (headers instanceof Headers) {
return Array.from(headers.entries())
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
} else if (typeof headers === 'string') {
// 处理XMLHttpRequest的getAllResponseHeaders()返回的字符串
return headers.split('\r\n').filter(line => line.trim()).join('\n');
} else if (headers && typeof headers === 'object') {
return Object.entries(headers)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
}
return 'No headers available';
}
function formatBody(body, contentType) {
if (contentType && contentType.includes('application/json')) {
try {
return JSON.stringify(JSON.parse(body), null, 2);
} catch (e) {
return body;
}
}
return body;
}
function createNetworkLogItem(requestInfo, responseInfo) {
const item = document.createElement('div');
item.className = 'network-item';
item.innerHTML = `
Request URL: ${requestInfo.url}
Request Method: ${requestInfo.method}
Status Code: ${responseInfo.status}
Remote Address: ${location.hostname}
Referrer Policy: ${document.referrer}
${formatHeaders(responseInfo.headers)}
${formatHeaders(requestInfo.headers)}
${formatBody(responseInfo.body, responseInfo.headers['content-type'] || responseInfo.headers.get('content-type'))}
${rules.map(rule => rule.cssText).join('\n')}
无法访问样式表 ${index + 1} (CORS限制)
`; } }); stylesPanel.innerHTML = html; } updateStyles(); } // 初始化开发者工具 function initDevTools() { addStyle(styles); const {container, toggleButton} = createDevToolsUI(); const elementsPanel = container.querySelector('.elements-panel'); const consolePanel = container.querySelector('.console-panel'); const networkPanel = container.querySelector('.network-panel'); const stylesPanel = container.querySelector('.styles-panel'); const expandCollapseBtn = container.querySelector('.expand-collapse'); initElementInspector(elementsPanel); initConsole(consolePanel); initNetworkMonitor(networkPanel); initStylesPanel(stylesPanel); // 标签切换 container.querySelector('.devtools-header').addEventListener('click', (e) => { if (e.target.classList.contains('devtools-tab')) { const panelName = e.target.dataset.panel; container.querySelectorAll('.devtools-tab').forEach(tab => tab.classList.remove('active')); container.querySelectorAll('.devtools-panel').forEach(panel => panel.classList.remove('active')); e.target.classList.add('active'); container.querySelector(`.${panelName}-panel`).classList.add('active'); } }); // 展开/收起面板 expandCollapseBtn.addEventListener('click', () => { container.classList.toggle('expanded'); expandCollapseBtn.textContent = container.classList.contains('expanded') ? '收起' : '展开'; }); // 显示/隐藏开发者工具 toggleButton.addEventListener('click', () => { container.style.display = container.style.display === 'none' ? 'flex' : 'none'; if (container.style.display === 'flex') { container.classList.add('expanded'); expandCollapseBtn.textContent = '收起'; } }); } // 页面加载完成后初始化 window.addEventListener('load', initDevTools); })();