程序员花费大量时间诊断和纠正代码中的错误和遗漏。调试会减慢 Javascript 的执行速度,并显示如何逐行修改数据。由于 Javascript 在运行时解释并在浏览器内部执行,因此使用浏览器内置的工具执行调试。
Javascript 中的错误
1️⃣ 语法错误
代码编写方式的错误会导致语法错误。当 Javascript 引擎在运行时解释代码时会发生此错误。
2️⃣ 类型错误
使用错误的数据类型时会发生此错误。例如,将 string.substring 方法应用于数字变量。
3️⃣ RangeError
当代码尝试使用超出可能值范围的数字时,Javascript 会检测到 RangeError
4️⃣ URI错误
某些字母数字字符不允许在 URL 中使用。当由于使用保留字符而对 URI 进行编码或解码时出现问题时,将引发 URlError。
5️⃣ 引用错误
当代码引用不存在或不在执行代码范围内的变量时,会发生此错误。
6️⃣ 评估错误
当 eval() 函数出现问题时会发生此错误。较新版本的 Javascript 不会引发此错误。
开发者工具
所有现代浏览器都包含一组开发人员工具,可帮助程序员使用 HTML、CSS 和 Javascript。开发人员工具包含调试 Javascript 和查看浏览器中 HTML 元素状态的功能。要打开 Google Chrome 浏览器的开发人员工具,请按 Command+Option+I (Mac) 和 Control+Shift+I(Windows、Linux)。
控制台
Web 开发人员可以将消息输出到控制台日志,以确保他们的代码按预期执行。 “控制台”选项卡包含两个区域:
1️⃣ 控制台输出日志:显示来自 Javascript 执行的系统和用户消息。
2️⃣ 控制台命令行界面:接受任何Javascript指令并立即执行。
Javascript 调试器
可以在 Sources 选项卡下找到 Javascript 调试器。调试器可以逐行单步执行代码,以查看代码执行时变量发生的情况。左侧是 HTML 文档使用的所有源文件的列表。从此列表中选择要调试的文件。
范围
在“源”选项卡中,右侧的窗口包含范围。其下的局部和全局部分显示了在当前作用域中定义的变量。范围窗格仅在调试脚本时填充变量。
断点
Javascript 引擎在遇到断点时会暂停代码的执行。这允许程序员检查它。执行可以按照以下方式进行。
1️⃣ 恢复脚本执行:恢复执行,直到程序遇到另一个断点或程序结束。
2️⃣ Step-Over:一步执行下一行代码,然后在下一行暂停。它跳过一个函数而不调试该函数的各个步骤。
3️⃣ Step into:执行下一行代码,然后在下一行暂停。它将逐行进入一个函数。
4️⃣ Step out:执行当前函数中剩余的代码,当runtime返回到函数调用后的代码行时暂停。
错误处理
在 Javascript 中,try…catch 语句允许程序员处理代码中的错误。通常,当 Javascript 引擎抛出错误时,程序执行会停止。但是,如果代码被包装在 try 块中,如果抛出异常,执行将跳转到 catch 块,并且程序将照常继续。也可以手动引发使用“throw”语句的错误。
Try…Catch 语句
try { noSuchCommand (); // This function does not exist } catch ( err ) { // The code jumps to the catch block instead of stopping the program execution console . error ( err . message ) } console . log ( " Script continues to run after the exception " ); // The error message displayed in the console
抛出语句
throw ( " Oops there was an error " ); // The throw operator generates an error
感谢您阅读
如果您喜欢这篇文章,请订阅我的时事通讯
永远不会错过我的博客、产品发布和科技新闻,并在Twitter 上关注我以获取有关 Web 开发资源的每日线程。