Module 04 · Debugging and Troubleshooting调试与故障排除

Introduction to Debugging Tools调试工具简介

学习目标

观看完本视频后，您将能够：

描述调试工具
识别一些常见的调试工具

浏览器调试工具概述

如今，浏览器配备了各种网页开发工具，通常被称为附加组件或扩展。这些工具不仅广泛用于网页开发，还可以执行多种任务，其中调试是最重要的一项。
这些工具通过分析代码中使用的 CSS、HTML 和 JavaScript 的潜在问题来简化您的工作。
在本视频中，我们将讨论一些浏览器调试工具，这些工具不仅可以帮助您调试和分析代码，还能检查 HTTP 头、访问其他 FTP 源文件，并评估网页的可访问性。

调试工具定义

调试工具是一种软件程序，允许您在不重新编译或修改源代码的情况下调试程序。
程序员使用调试工具来解决编程错误，或在程序发布前进行更改。
这些工具使程序员能够在不修改源代码的情况下尝试修复问题。
调试工具也可以用于排除其他应用程序（如网页浏览器和操作系统）中的问题。

常见的调试工具

1.Chrome 开发者工具 (Chrome Developer Tools)

Chrome 开发者工具是一组内建于 Chrome 浏览器中的工具，帮助开发者快速调试 JavaScript 代码。
许多开发者依赖这些工具，因为它们是业内最好的工具之一。
默认的 JavaScript 控制台已包含在 Chrome 开发者工具中，同时还提供网络和性能监控、以及安全功能。
在 Chrome 中打开开发者工具的快捷键：

macOS: CMD + OPT + I
Windows: CTRL + SHIFT + I

2.Firefox 开发者工具 (Firefox Developer Tools)

过去，Firefox 用户依赖 Firebug，这是一个为 Firefox 提供开发者工具的扩展。
Firebug 的功能已被集成到 Firefox 开发者工具中，最新版 Firefox 中已包含此功能。
要在 Firefox 中访问开发者工具，打开浏览器，点击右上角的 Firefox 菜单，选择“更多工具”，然后选择“Web 开发者工具”并点击“控制台”。
Firefox 提供的开发工具包括 JavaScript 控制台、网络监控、调试器、页面元素检查器等。

Safari 的开发者工具可以与 Chrome 和 Firefox 的开发工具媲美。
若要启用 Safari 的内建开发者工具，用户需要激活 Safari 的开发菜单：

首先点击 “Safari” 标签，然后点击“设置”
接着点击“高级”
最后选中“在菜单栏显示开发菜单”。
这样开发菜单就会出现在菜单栏中。

4.React Developer Tools

React Developer Tools 是 Chrome DevTools 的一个扩展，对于需要检查 React 构建的应用中的 props 或 state 值时非常有用。
如果您访问一个使用 React 创建的网站并添加了该扩展，开发者控制台中将会出现一个新的 React 标签，显示任何您点击的元素的属性和状态值。

5.JavaScript 控制台调试 (Console Debugging)

console.log() 是 JavaScript 中最常用的调试方法之一。
这种方法并不用于错误处理，而是用来在控制台中打印语句，帮助开发者调试代码。

6.Visual Studio Code (VS Code)

虽然在调试 Javascript 应用时不总是需要使用 IDE，但 Visual Studio Code（微软的跨平台源代码编辑器）也支持通过 Javascript 扩展进行调试。
如果您已经使用 VS Code 进行开发，并需要一个简洁且用户友好的 Javascript 调试工具，Visual Studio Code 是一个很好的选择。
尽管 IDE 的调试器提供了更多复杂的功能，但 Visual Studio Code 提供的功能足以进行快速的调试会话。

总结

浏览器 配备了多种开发工具，这些工具通常是 附加组件 或扩展。
调试工具 是一种软件程序，能够帮助开发者在不重新编译或修改源代码的情况下调试程序。
一些常见的调试工具包括 Chrome 开发者工具、Firefox 开发者工具、Safari 开发者菜单、React 开发者工具、控制台调试 以及 Visual Studio Code。

通过了解这些调试工具，您能够更高效地发现和修复代码中的问题，提升开发效率。