目录
3. 断点调试：动态生成内容时的 JavaScript 错误
调试方式：使用 “控制台”（Console）面板查看 JavaScript 错误
我们把报错类型做个大分类 分为HTML、CSS、JavaScript三大类
我写的每个调试方式代码都是htm 结构 创建一个htm文件 把代码复制进去 就可以进行实践
1.html
1. 结构错误调试：标签未正确嵌套
这个示例包含一个嵌套错误，浏览器的开发者工具会自动高亮显示错误的 DOM 结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structure Error Example</title>
</head>
<body>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<p>This paragraph is outside the div, but it’s inside the list (structure error).</p>
</body>
</html>
调试方法：
-
打开浏览器开发者工具（按 F12）。
-
在 Elements 面板中查看页面结构，注意
<p>标签的位置，它应该不在<ul>标签内部。 -
你会发现浏览器自动对这个结构进行提示，发现问题后修复标签嵌套。
2. 语法问题调试：缺失引号
该示例包含一个属性值缺少引号的错误，这会在控制台中抛出语法错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Syntax Error Example</title>
</head>
<body>
<img src=missing-quotes.jpg alt="Missing Quotes">
</body>
</html>
调试方法：
-
打开浏览器开发者工具（按 F12）。
-
在 Console 面板中，你会看到类似
Uncaught SyntaxError: Unexpected token的错误提示，表示src属性的值缺少引号。 -
修复错误：将
src=missing-quotes.jpg改为src="missing-quotes.jpg"。
3. 断点调试：动态生成内容时的 JavaScript 错误
该示例包含一个动态生成 HTML 内容的 JavaScript 错误，可以通过断点调试来定位问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoint Example</title>
</head>
<body>
<div id="container"></div>
<script>
let container = document.getElementById("container");
let itemCount = 5;
for (let i = 0; i <= itemCount; i++) {
let item = document.createElement("div");
item.textContent = "Item " + i;
container.appendChild(item);
}
// Introduce an error by passing null to createElement (we'll debug it)
let wrongElement = document.createElement(null); // Error here
wrongElement.textContent = "This will throw an error!";
container.appendChild(wrongElement);
</script>
</body>
</html>
调试方法：
-
打开浏览器开发者工具（按 F12），进入 Sources 面板。
-
在 Sources 面板中找到包含 JavaScript 代码的文件，并在
createElement(null)行设置一个断点。 -
刷新页面，代码会在该断点处暂停，查看变量状态和调用栈，发现错误是
createElement(null)造成的。 -
修复错误：将
createElement(null)改为有效的元素类型（如createElement("div")）。
4. 网络调试：资源加载错误
该示例模拟一个图片加载失败的场景，浏览器的开发者工具的 Network 面板会显示图片加载的 404 错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Error Example</title>
</head>
<body>
<h1>Image Loading Error Example</h1>
<img src="nonexistent-image.jpg" alt="Image Not Found">
</body>
</html>
调试方法：
-
打开浏览器开发者工具（按 F12），进入 Network 面板。
-
刷新页面，查看是否有 404 错误，显示为
nonexistent-image.jpg加载失败。 -
修复错误：确保图片路径正确或使用有效的图片 URL。
5. 性能调试：页面加载性能
这个示例包含一个复杂的 JavaScript 动画，可能会影响页面加载性能。我们可以使用 Performance 面板来检查性能瓶颈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Performance Test Example</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
let box = document.getElementById("box");
// Simulate an animation that could cause performance issues
let moveBox = () => {
let pos = 0;
let interval = setInterval(() => {
if (pos >= 500) {
clearInterval(interval);
} else {
pos += 10;
box.style.transform = `translateX(${pos}px)`;
}
}, 16); // 60 frames per second
};
moveBox();
</script>
</body>
</html>
调试方法：
-
打开浏览器开发者工具（按 F12），进入 Performance 面板。
-
点击 “Record” 按钮开始记录页面性能，然后刷新页面，观察 Frame Rate 和 CPU Usage，查看动画是否影响性能。
-
如果你看到页面性能下降（如帧率过低），可以优化动画，减少每帧计算的复杂度，或使用
requestAnimationFrame替代setInterval来提高性能。
总结：
以上是五种常见的调试方法，每个例子都包含 HTML 代码和可以通过开发者工具调试和定位的错误。你可以通过打开浏览器的开发者工具（按 F12），使用 Elements, Console, Network, Sources, Performance 等面板来调试并修复代码中的问题。
2.CSS
1. 定位布局问题：元素重叠或错位
问题：网页元素可能重叠或者不按预期排列。常见原因是 定位属性、浮动问题 或 宽高设置不当。
调试方式：使用浏览器开发者工具中的 "元素" 面板
方法：
-
在浏览器开发者工具的 "元素" 面板中，你可以查看和修改页面中每个元素的 CSS 样式。
-
通过选择页面中的元素，查看它的盒模型（margin、border、padding、content）并且可以在右侧修改其 CSS 样式，看到效果立即反映在页面上。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 调试示例</title>
<style>
.container {
width: 500px;
height: 300px;
background-color: lightblue;
position: relative;
}
.box {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
top: 50px;
left: 50px;
}
/* 故意设置错位 */
.box2 {
width: 200px;
height: 200px;
background-color: lightgreen;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box2"></div>
</div>
</body>
</html>
调试方法：
-
打开开发者工具（
F12）。 -
选择 "元素" 面板，查看
.box和.box2元素。 -
修改它们的
top和left值，看看如何调整元素的位置。 -
通过盒模型面板查看它们的
margin、border和padding是否影响布局。
2. 调试 CSS 选择器
问题：有时 CSS 样式没有生效，可能是选择器不够具体或被其他样式覆盖。
调试方式：使用开发者工具查看 “计算样式” 面板
方法：
-
在 “元素” 面板中，选择一个元素后，切换到右侧的 “计算样式”（Computed Styles）面板，查看该元素的最终计算样式。
-
你可以看到哪些样式被应用，哪些被覆盖。通过查看 “被覆盖的样式”，可以帮助定位问题。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 调试示例</title>
<style>
/* 更具体的选择器 */
.container .box {
background-color: lightblue;
}
/* 一般的选择器 */
.box {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这是一个盒子</div>
</div>
</body>
</html>
调试方法：
-
打开开发者工具，右键点击
.box元素，选择 “检查”。 -
在 “计算样式” 面板中，查看
.box元素的样式，看看是否.container .box的样式覆盖了.box的样式。
3. 检查响应式布局问题
问题：响应式设计没有正常工作，页面在不同尺寸下显示不一致。
调试方式：使用开发者工具中的 “设备模式”
方法：
-
在开发者工具中，点击左上角的设备图标，开启 “设备模式”。
-
你可以选择不同的设备尺寸，模拟不同设备的屏幕宽度和高度，查看网页的响应式效果。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
padding: 20px;
margin: 10px;
background-color: lightblue;
box-sizing: border-box;
}
@media (min-width: 600px) {
.box {
width: 48%;
}
}
@media (min-width: 900px) {
.box {
width: 30%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
调试方法：
-
打开开发者工具，点击设备图标（手机图标），进入 “设备模式”。
-
切换不同设备，查看
.box元素是否根据屏幕宽度变化布局。
4. CSS 动画调试
问题：CSS 动画效果没有按预期执行。
调试方式：使用 “动画” 面板查看动画状态
方法：
-
在开发者工具的 “元素” 面板中，选择一个包含动画的元素。
-
然后切换到 “动画” 面板，你可以看到正在运行的动画，并可以暂停、恢复、查看每一帧的状态。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
padding: 20px;
margin: 10px;
background-color: lightblue;
box-sizing: border-box;
}
@media (min-width: 600px) {
.box {
width: 48%;
}
}
@media (min-width: 900px) {
.box {
width: 30%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
调试方法：
-
打开开发者工具，选择 “元素” 面板，右侧查看 “动画” 面板。
-
你可以查看动画的详细信息，检查是否按预期执行，调整动画参数等。
3.javascript
1. Console 输出调试
问题：JavaScript 代码执行不符合预期，可以通过输出 console.log() 来查看变量值、函数调用过程等。
调试方式：使用 console.log() 输出调试信息
方法：
-
在代码中插入
console.log()来输出调试信息，这样可以快速检查变量的值和程序执行的状态。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Console Debug 示例</title>
</head>
<body>
<button id="btn">点击我</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
let a = 5;
let b = 10;
console.log("a 和 b 的初始值：", a, b);
let result = a + b;
console.log("计算结果：", result);
if(result > 10) {
console.log("结果大于10");
} else {
console.log("结果小于或等于10");
}
});
</script>
</body>
</html>
调试方法：
-
打开开发者工具，切换到 "控制台"（Console）面板。
-
点击按钮时，你会看到控制台输出的信息，帮助你检查程序逻辑是否符合预期。
2. 断点调试
问题：代码执行过程中需要逐步检查变量和程序执行的顺序。
调试方式：使用浏览器开发者工具的 断点 调试
方法：
-
在 “源代码”（Sources）面板中设置断点，逐行调试 JavaScript 代码，查看每个步骤的变量值和执行流程。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>断点调试示例</title>
</head>
<body>
<button id="btn">点击我</button>
<script>
function calculate(a, b) {
let result = a + b;
console.log("结果：", result);
return result;
}
document.getElementById('btn').addEventListener('click', function() {
let a = 10;
let b = 20;
let sum = calculate(a, b);
console.log("最终结果：", sum);
});
</script>
</body>
</html>
调试方法：
-
打开开发者工具，切换到 “源代码”（Sources）面板。
-
在
calculate()函数内的let result = a + b;这一行点击设置断点。 -
点击按钮时，浏览器会在该行暂停代码执行，你可以逐步查看变量值、执行流程，并单步调试（通过点击“逐步执行”按钮或
F10）。
3. 调试网络请求
问题：需要调试 API 请求，查看请求和响应数据是否正确。
调试方式：使用 “网络”（Network）面板调试网络请求
方法：
-
在浏览器的 “网络”（Network）面板中，查看网络请求的详情，包括请求头、响应数据、状态码等。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网络请求调试示例</title>
</head>
<body>
<button id="fetchData">获取数据</button>
<script>
document.getElementById('fetchData').addEventListener('click', function() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log('返回数据：', data))
.catch(error => console.error('请求错误：', error));
});
</script>
</body>
</html>
调试方法：
-
打开开发者工具，切换到 “网络”（Network）面板。
-
点击 “获取数据” 按钮发起请求。
-
在 “网络” 面板中查看请求的详细信息，包括请求的 URL、响应的内容、状态码等。你可以查看请求是否成功（200 状态码）、返回的数据内容等。
4. 捕获 JavaScript 错误
问题：代码中有 JavaScript 错误，无法正常执行。
调试方式：使用 “控制台”（Console）面板查看 JavaScript 错误
方法：
-
如果 JavaScript 中发生了错误，浏览器会在 “控制台”（Console）面板中显示错误信息，包括错误类型、行号和错误描述。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 错误调试示例</title>
</head>
<body>
<button id="errorBtn">触发错误</button>
<script>
document.getElementById('errorBtn').addEventListener('click', function() {
let a = undefined;
console.log(a.length); // 这里会报错，因为 a 是 undefined
});
</script>
</body>
</html>
调试方法：
-
打开开发者工具，切换到 “控制台”（Console）面板。
-
点击按钮时，控制台会显示
TypeError: Cannot read property 'length' of undefined错误。你可以根据错误信息定位问题，查看是哪行代码导致的问题，并检查变量a是否为undefined。
5. 调试异步代码
问题：异步代码（如 setTimeout、Promise）的执行顺序不符合预期。
调试方式：使用 断点 和 日志输出 调试异步代码
方法：
-
对于异步代码，可以通过
console.log()打印日志，或设置断点查看代码的执行顺序。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步调试示例</title>
</head>
<body>
<button id="asyncBtn">执行异步任务</button>
<script>
document.getElementById('asyncBtn').addEventListener('click', function() {
console.log('开始异步任务');
setTimeout(function() {
console.log('异步任务完成');
}, 2000);
console.log('异步任务已经开始');
});
</script>
</body>
</html>
调试方法：
-
打开开发者工具，切换到 “控制台”（Console）面板。
-
点击按钮时，控制台会显示执行顺序：
-
“开始异步任务”
-
“异步任务已经开始”
-
等待 2 秒后，输出 “异步任务完成”。
-
你可以通过控制台输出和断点调试，检查异步代码的执行顺序是否符合预期。
总结
通过使用浏览器的 控制台、源代码 面板、网络 面板等工具，你可以有效地调试 JavaScript 代码，定位常见的 逻辑错误、网络请求问题、JavaScript 异常 等。你可以通过输出日志、设置断点、查看网络请求等多种方法帮助你快速定位问题并解决。
扫一扫
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
