当前位置：首页 > ds >正文

前端技术分享～谷歌调试工具

ds 2025/5/5 7:47:37

Chrome DevTools 调试演示页面

下面是一个专门为技术分享设计的演示页面HTML代码，包含了各种常见的调试场景，可以帮助展示Chrome开发者工具的不同功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chrome DevTools 调试演示</title><style>/* 基础样式 */body {font-family: 'Arial', sans-serif;line-height: 1.6;margin: 0;padding: 20px;color: #333;}header {background-color: #4285f4;color: white;padding: 20px;border-radius: 5px;margin-bottom: 20px;}h1, h2 {color: #4285f4;}/* 调试目标区域 */.debug-section {border: 1px solid #ddd;padding: 15px;margin-bottom: 20px;border-radius: 5px;}/* 布局问题示例 */.layout-container {display: flex;margin: 20px 0;}.box {width: 100px;height: 100px;margin: 10px;background-color: #f1c40f;transition: all 0.3s;}.box:hover {transform: scale(1.1);}/* 性能问题示例 */.performance-issue {padding: 10px;background-color: #e74c3c;color: white;cursor: pointer;}/* 内存泄漏示例按钮 */#leaky-button {padding: 10px 15px;background-color: #2ecc71;color: white;border: none;border-radius: 4px;cursor: pointer;margin: 10px 0;}/* 控制台日志示例按钮 */#console-log-button {padding: 10px 15px;background-color: #9b59b6;color: white;border: none;border-radius: 4px;cursor: pointer;margin: 10px 0;}/* 网络请求示例按钮 */#fetch-data {padding: 10px 15px;background-color: #3498db;color: white;border: none;border-radius: 4px;cursor: pointer;margin: 10px 0;}/* 动画示例 */@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}.spinner {width: 50px;height: 50px;border: 5px solid rgba(0,0,0,0.1);border-radius: 50%;border-top-color: #4285f4;animation: spin 1s linear infinite;margin: 20px auto;}/* 隐藏的内容 - 用于演示元素检查 */.hidden-content {display: none;padding: 10px;background-color: #f8f8f8;border: 1px dashed #ccc;margin-top: 10px;}</style>
</head>
<body><header><h1>Chrome DevTools 调试演示</h1><p>此页面专为Chrome开发者工具技术分享设计，包含各种调试场景示例</p></header><section class="debug-section"><h2>1. 元素检查与样式调试</h2><p>尝试使用Elements面板检查以下元素并修改样式：</p><div class="layout-container"><div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div></div><button id="toggle-content">显示/隐藏内容</button><div class="hidden-content">这个内容可以通过按钮切换显示/隐藏，也可以在Elements面板中强制显示。</div></section><section class="debug-section"><h2>2. 控制台使用示例</h2><p>尝试在Console面板中执行一些命令：</p><button id="console-log-button">生成控制台日志</button><p>尝试在控制台输入：</p><ul><li><code>document.querySelector('.box').style.backgroundColor = 'red'</code></li><li><code>monitorEvents(document.getElementById('console-log-button'), 'click')</code></li><li><code>console.table([{name: 'Alice', age: 25}, {name: 'Bob', age: 30}])</code></li></ul></section><section class="debug-section"><h2>3. 断点调试</h2><p>在Sources面板中为下面的按钮点击事件设置断点：</p><button id="debug-button">调试我</button><div id="debug-result"></div></section><section class="debug-section"><h2>4. 网络请求监控</h2><p>点击按钮发送网络请求，观察Network面板：</p><button id="fetch-data">获取数据</button><div id="data-result"></div></section><section class="debug-section"><h2>5. 性能问题示例</h2><p>点击下面的元素触发性能问题，然后使用Performance面板记录分析：</p><div class="performance-issue">点击我触发性能问题</div></section><section class="debug-section"><h2>6. 内存泄漏示例</h2><p>多次点击按钮创建对象，使用Memory面板记录堆快照分析内存泄漏：</p><button id="leaky-button">创建泄漏对象</button><p>已创建对象数: <span id="leak-count">0</span></p></section><section class="debug-section"><h2>7. 动画调试</h2><p>使用Animation面板检查下面的旋转动画：</p><div class="spinner"></div><button id="toggle-animation">切换动画</button></section><script>// 控制台日志示例document.getElementById('console-log-button').addEventListener('click', function() {console.log('普通日志信息');console.warn('警告信息');console.error('错误信息');console.info('提示信息');console.debug('调试信息');// 复杂对象输出const complexObj = {name: '测试对象',date: new Date(),nested: {prop1: '值1',prop2: '值2'},method: function() { return '方法调用'; }};console.log('复杂对象:', complexObj);// 组输出console.group('用户信息');console.log('姓名: 张三');console.log('年龄: 30');console.groupEnd();});// 断点调试示例document.getElementById('debug-button').addEventListener('click', function() {let result = '';for (let i = 0; i < 5; i++) {result += processItem(i);}document.getElementById('debug-result').textContent = result;});function processItem(index) {// 这里可以设置断点const processed = index * 10;return `项目 ${index} 处理后: ${processed}\n`;}// 网络请求示例document.getElementById('fetch-data').addEventListener('click', function() {fetch('https://jsonplaceholder.typicode.com/todos/1').then(response => response.json()).then(data => {document.getElementById('data-result').textContent = JSON.stringify(data, null, 2);}).catch(error => {console.error('请求失败:', error);});});// 性能问题示例document.querySelector('.performance-issue').addEventListener('click', function() {// 故意创建性能问题let result = '';for (let i = 0; i < 10000; i++) {for (let j = 0; j < 1000; j++) {result += i * j;}}this.textContent = '计算完成';});// 内存泄漏示例const leakedObjects = [];document.getElementById('leaky-button').addEventListener('click', function() {for (let i = 0; i < 1000; i++) {leakedObjects.push({id: Date.now() + i,data: new Array(1000).join('x')});}document.getElementById('leak-count').textContent = leakedObjects.length;});// 显示/隐藏内容document.getElementById('toggle-content').addEventListener('click', function() {document.querySelector('.hidden-content').style.display = document.querySelector('.hidden-content').style.display === 'none' ? 'block' : 'none';});// 动画控制document.getElementById('toggle-animation').addEventListener('click', function() {const spinner = document.querySelector('.spinner');if (spinner.style.animationPlayState === 'paused') {spinner.style.animationPlayState = 'running';this.textContent = '暂停动画';} else {spinner.style.animationPlayState = 'paused';this.textContent = '播放动画';}});</script>
</body>
</html>