目录
1.html
1. 结构错误调试:标签未正确嵌套
2. 语法问题调试:缺失引号
3. 断点调试:动态生成内容时的 JavaScript 错误
4. 网络调试:资源加载错误
5. 性能调试:页面加载性能
总结:
2.CSS
1. 定位布局问题:元素重叠或错位
调试方式:使用浏览器开发者工具中的 "元素" 面板
示例代码:
2. 调试 CSS 选择器
调试方式:使用开发者工具查看 “计算样式” 面板
示例代码:
3. 检查响应式布局问题
调试方式:使用开发者工具中的 “设备模式”
示例代码:
4. CSS 动画调试
调试方式:使用 “动画” 面板查看动画状态
示例代码:
3.javascript
1. Console 输出调试
调试方式:使用 console.log() 输出调试信息
示例代码:
2. 断点调试
调试方式:使用浏览器开发者工具的 断点 调试
示例代码:
3. 调试网络请求
调试方式:使用 “网络”(Network)面板调试网络请求
示例代码:
4. 捕获 JavaScript 错误
调试方式:使用 “控制台”(Console)面板查看 JavaScript 错误
示例代码:
5. 调试异步代码
调试方式:使用 断点 和 日志输出 调试异步代码
示例代码:
总结
我们把报错类型做个大分类 分为HTML、CSS、JavaScript三大类
我写的每个调试方式代码都是htm 结构 创建一个htm文件 把代码复制进去 就可以进行实践
这个示例包含一个嵌套错误,浏览器的开发者工具会自动高亮显示错误的 DOM 结构。
Structure Error Example
- Item 1
- Item 2
This paragraph is outside the div, but it’s inside the list (structure error).
调试方法:
打开浏览器开发者工具(按 F12)。
在 Elements 面板中查看页面结构,注意 标签的位置,它应该不在
标签内部。
你会发现浏览器自动对这个结构进行提示,发现问题后修复标签嵌套。
该示例包含一个属性值缺少引号的错误,这会在控制台中抛出语法错误。
Syntax Error Example
调试方法:
打开浏览器开发者工具(按 F12)。
在 Console 面板中,你会看到类似 Uncaught SyntaxError: Unexpected token
的错误提示,表示 src
属性的值缺少引号。
修复错误:将 src=missing-quotes.jpg
改为 src="missing-quotes.jpg"
。
该示例包含一个动态生成 HTML 内容的 JavaScript 错误,可以通过断点调试来定位问题。
Breakpoint Example
调试方法:
打开浏览器开发者工具(按 F12),进入 Sources 面板。
在 Sources 面板中找到包含 JavaScript 代码的文件,并在 createElement(null)
行设置一个断点。
刷新页面,代码会在该断点处暂停,查看变量状态和调用栈,发现错误是 createElement(null)
造成的。
修复错误:将 createElement(null)
改为有效的元素类型(如 createElement("div")
)。
该示例模拟一个图片加载失败的场景,浏览器的开发者工具的 Network 面板会显示图片加载的 404 错误。
Network Error Example
Image Loading Error Example
调试方法:
打开浏览器开发者工具(按 F12),进入 Network 面板。
刷新页面,查看是否有 404 错误,显示为 nonexistent-image.jpg
加载失败。
修复错误:确保图片路径正确或使用有效的图片 URL。
这个示例包含一个复杂的 JavaScript 动画,可能会影响页面加载性能。我们可以使用 Performance 面板来检查性能瓶颈。
Performance Test Example
调试方法:
打开浏览器开发者工具(按 F12),进入 Performance 面板。
点击 “Record” 按钮开始记录页面性能,然后刷新页面,观察 Frame Rate 和 CPU Usage,查看动画是否影响性能。
如果你看到页面性能下降(如帧率过低),可以优化动画,减少每帧计算的复杂度,或使用 requestAnimationFrame
替代 setInterval
来提高性能。
以上是五种常见的调试方法,每个例子都包含 HTML 代码和可以通过开发者工具调试和定位的错误。你可以通过打开浏览器的开发者工具(按 F12),使用 Elements, Console, Network, Sources, Performance 等面板来调试并修复代码中的问题。
问题:网页元素可能重叠或者不按预期排列。常见原因是 定位属性、浮动问题 或 宽高设置不当。
方法:
在浏览器开发者工具的 "元素" 面板中,你可以查看和修改页面中每个元素的 CSS 样式。
通过选择页面中的元素,查看它的盒模型(margin、border、padding、content)并且可以在右侧修改其 CSS 样式,看到效果立即反映在页面上。
CSS 调试示例
调试方法:
打开开发者工具(F12
)。
选择 "元素" 面板,查看 .box
和 .box2
元素。
修改它们的 top
和 left
值,看看如何调整元素的位置。
通过盒模型面板查看它们的 margin
、border
和 padding
是否影响布局。
问题:有时 CSS 样式没有生效,可能是选择器不够具体或被其他样式覆盖。
方法:
在 “元素” 面板中,选择一个元素后,切换到右侧的 “计算样式”(Computed Styles)面板,查看该元素的最终计算样式。
你可以看到哪些样式被应用,哪些被覆盖。通过查看 “被覆盖的样式”,可以帮助定位问题。
CSS 调试示例
这是一个盒子
调试方法:
打开开发者工具,右键点击 .box
元素,选择 “检查”。
在 “计算样式” 面板中,查看 .box
元素的样式,看看是否 .container .box
的样式覆盖了 .box
的样式。
问题:响应式设计没有正常工作,页面在不同尺寸下显示不一致。
方法:
在开发者工具中,点击左上角的设备图标,开启 “设备模式”。
你可以选择不同的设备尺寸,模拟不同设备的屏幕宽度和高度,查看网页的响应式效果。
响应式布局示例
Box 1
Box 2
Box 3
调试方法:
打开开发者工具,点击设备图标(手机图标),进入 “设备模式”。
切换不同设备,查看 .box
元素是否根据屏幕宽度变化布局。
问题:CSS 动画效果没有按预期执行。
方法:
在开发者工具的 “元素” 面板中,选择一个包含动画的元素。
然后切换到 “动画” 面板,你可以看到正在运行的动画,并可以暂停、恢复、查看每一帧的状态。
响应式布局示例
Box 1
Box 2
Box 3
调试方法:
打开开发者工具,选择 “元素” 面板,右侧查看 “动画” 面板。
你可以查看动画的详细信息,检查是否按预期执行,调整动画参数等。
问题:JavaScript 代码执行不符合预期,可以通过输出 console.log()
来查看变量值、函数调用过程等。
console.log()
输出调试信息方法:
在代码中插入 console.log()
来输出调试信息,这样可以快速检查变量的值和程序执行的状态。
Console Debug 示例
调试方法:
打开开发者工具,切换到 "控制台"(Console)面板。
点击按钮时,你会看到控制台输出的信息,帮助你检查程序逻辑是否符合预期。
问题:代码执行过程中需要逐步检查变量和程序执行的顺序。
方法:
在 “源代码”(Sources)面板中设置断点,逐行调试 JavaScript 代码,查看每个步骤的变量值和执行流程。
断点调试示例
调试方法:
打开开发者工具,切换到 “源代码”(Sources)面板。
在 calculate()
函数内的 let result = a + b;
这一行点击设置断点。
点击按钮时,浏览器会在该行暂停代码执行,你可以逐步查看变量值、执行流程,并单步调试(通过点击“逐步执行”按钮或 F10
)。
问题:需要调试 API 请求,查看请求和响应数据是否正确。
方法:
在浏览器的 “网络”(Network)面板中,查看网络请求的详情,包括请求头、响应数据、状态码等。
网络请求调试示例
调试方法:
打开开发者工具,切换到 “网络”(Network)面板。
点击 “获取数据” 按钮发起请求。
在 “网络” 面板中查看请求的详细信息,包括请求的 URL、响应的内容、状态码等。你可以查看请求是否成功(200 状态码)、返回的数据内容等。
问题:代码中有 JavaScript 错误,无法正常执行。
方法:
如果 JavaScript 中发生了错误,浏览器会在 “控制台”(Console)面板中显示错误信息,包括错误类型、行号和错误描述。
JavaScript 错误调试示例
调试方法:
打开开发者工具,切换到 “控制台”(Console)面板。
点击按钮时,控制台会显示 TypeError: Cannot read property 'length' of undefined
错误。你可以根据错误信息定位问题,查看是哪行代码导致的问题,并检查变量 a
是否为 undefined
。
问题:异步代码(如 setTimeout
、Promise
)的执行顺序不符合预期。
方法:
对于异步代码,可以通过 console.log()
打印日志,或设置断点查看代码的执行顺序。
异步调试示例
调试方法:
打开开发者工具,切换到 “控制台”(Console)面板。
点击按钮时,控制台会显示执行顺序:
“开始异步任务”
“异步任务已经开始”
等待 2 秒后,输出 “异步任务完成”。
你可以通过控制台输出和断点调试,检查异步代码的执行顺序是否符合预期。
通过使用浏览器的 控制台、源代码 面板、网络 面板等工具,你可以有效地调试 JavaScript 代码,定位常见的 逻辑错误、网络请求问题、JavaScript 异常 等。你可以通过输出日志、设置断点、查看网络请求等多种方法帮助你快速定位问题并解决。