Free Code Camp 练习总结(六) ——Introduction to the Debugging Challenges 调试基础知识

Introduction to the Debugging Challenges

对程序员来说,调试是一种非常有用并且必不可少到技能。在测试阶段,通过调试检查代码是否按预期执行。调试就是找 bug 然后修复 bug 的过程。你花时间写了一段漂亮的代码,感觉良好很难看出有错误。 代码中的错误通常有三种情形:1)语法错误导致程序停止运行,2)代码无法执行或具有意外行为导致运行时错误,以及 3)代码有语义(逻辑)错误,没有实现原来的意图。

主流的代码编辑器(还有你的经验)可以帮你发现语法错误。语义和运行时错误会难找一点。这些错误可能会导致程序崩溃,死循环,或者输出错误的结果。调试就是去理解代码为什么会出现这样的错误。

#1 调试:使用控制台检查变量值

Chrome 和 Firefox 都有出色的 JavaScript 控制台(也称为 DevTools),可以用来调试你的 JavaScript 代码

你可以在 Chrome 的菜单中找到“开发者工具”或 FireFox 的菜单中的 “Web 控制台”。如果你使用其他浏览器或手机,我们强烈建议你切换到桌面版 Firefox 或 Chrome。

console.log()方法可能是最有用的调试工具,它可以将括号中的内容输出到控制台,将它放在代码中的关键点可以显示变量在当时的值。在查看输出之前,最好先想清楚输出应该是什么。在整个代码中使用检查点来查看计算状态将有助于缩小问题所在。

下面是输出 'Hello world!' 到控制台的示例:

console.log('Hello world!');

#2  调试:了解 freeCodeCamp 和浏览器控制台之间的差异

你可能已经注意到一些 freeCodeCamp JavaScript 的挑战有自己的控制台。这些控制台的行为与你在上一次挑战中使用的浏览器控制台略有不同。

以下挑战旨在强调 freeCodeCamp 控制台与浏览器控制台之间的一些差异。

对于浏览器控制台。当你在浏览器中加载并运行 JavaScript 文件时,console.log()语句会在控制台中按照你调用的次数准确地打印出你要求的内容。然而,在 freeCodeCamp 的代码编辑器中使用console.log()会略有不同,一开始可能会让你感到困惑。

在 freeCodeCamp 代码编辑器中,传给console.log()的值会在每组测试执行的时候输出。另外,如果你在代码中还手动调用过挑战题目的函数,调用几次就会增加几次传入值的输出。

这就产生了一些有趣的行为,并可能在一开始就让你感到困惑,因为你觉得只会输出一次的值可能会输出多次,具体次数取决于挑战题目本身测试的数量以及这些测试调用挑战函数的方式。

如果你不打算执行挑战的测试,而只想查看自己调用console.log()的输出,可以使用console.clear()

#3  调试:使用 type of 检查变量的类型

你可以使用typeof检查变量的数据结构或类型。在处理多种数据类型时,typeof会对调试很有帮助。如果你想计算两数之和,但实际传入了一个字符串参数,则结果可能是错误的。类型错误可能隐藏在计算或函数调用中。当你以 JavaScript 对象(JSON)的形式访问和使用外部数据时尤其要小心。

下面是使用typeof的一些示例:

console.log(typeof ""); // 输出 "string"
console.log(typeof 0); // 输出 "number"
console.log(typeof []); // 输出 "object"
console.log(typeof {}); // 输出 "object"

JavaScript 有六种原始(不可变)数据类型:Boolean,Null,Undefined,Number,String, 和Symbol(ES6 新增)和一种可变的数据类型:Object。注意,在 JavaScript 中,数组在本质上是一种对象


添加两个console.log()语句来检查代码中的两个变量seventhree的 code>typeof值。

#4   调试:捕获拼错的变量名和函数名

console.log()typeof方法是检查中间值和程序输出类型的两种主要方法。 现在是时候了解一下 bug 出现的常见的情形。一个语法级别的问题是打字太快带来的低级拼写错误。

变量或函数名的错写、漏写或大小写弄混都会让浏览器尝试查找并不存在的东西,并报出“引用错误”。JavaScript 变量和函数名称区分大小写。

猜你喜欢

转载自blog.csdn.net/youyouxiong/article/details/84959771
今日推荐