CONSOLE.LOG（）;如何和调试JavaScript

Question

好的，我希望这个问题对你们来说不是基本的。

我知道足够的jQuery让自己陷入困境，这意味着我可以抓住元素并用它做些事情，编写我自己的小功能来实现交互性等等。 但是在我将问题发布到stackoverflow并获得让我在额头上拍打自己的答案之前，有些事情没有按预期进行，我想自己调试它并且厌倦了插入alert(); 进入我的代码。 在阅读这个主题时，提到了console.log(); ， console.info(); 这样但我找不到任何解释如何在现实场景中使用这些资源进行调试的资源。

你们中的任何人都知道一个好的资源或教程（不怕读书）可以解释如何将这些功能用于外行 。 似乎我找到的教程和其他方法是高级或只是略过表面，而不是告诉你如何使用它们。 我明白我可以插入console.log(); 它会在控制台中为firebug或element inspector吐出信息。 但是，如果我的手工烘焙功能在某个地方做了一些意想不到的事情，那么当浏览器解析javascript时如何找到问题呢。

任何帮助将不胜感激，因为我觉得学习这将有助于我理解我的代码中发生了什么，所以我可以停止盯着屏幕“为什么这不起作用，它在jsfiddle ！”

Answer 1

console.log（）只接受传递给它的任何内容并将其写入控制台的日志窗口。 如果传入数组，则可以检查数组的内容。 传入一个对象，可以检查对象的属性/方法。 传入一个字符串，它将记录字符串。 基本上它是“document.write”，但可以智能地拆分其参数并将其写入其他地方。

输出偶尔的调试信息很有用，但如果你有大量的调试输出则不是特别有用。

要观察脚本的执行情况，您可以使用调试器，它允许您逐行逐步执行代码。 当您需要显示某些变量的内容以供以后检查但不想中断执行时，使用console.log。

Answer 2

我喜欢在头脑中添加这些功能。

window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};

现在日志不会破坏IE我可以启用它或在​​一个我可以内联登录的地方禁用它

$(".classname").log(); //show an array of all elements with classname class

Answer 3

学习使用javascript调试器。 Venkman（适用于Firefox）或Web Inspector（Chome和Safari的一部分）是用于调试正在进行的操作的绝佳工具。

您可以在与脚本交互时设置断点并查询机器的状态; 逐步执行部分代码以确保一切按计划运行，等等。

以下是WebMonkey在JavaScript Debugging for Beginners上的精彩编写 。 这是一个很好的起点。

Answer 4

本质上， console.log()允许您在您选择的javascript调试器中输出变量，而不是每次要检查某些内容时闪烁alert() ...此外，对于更复杂的对象，它将为您提供树视图以检查而不是必须将元素转换为字符串，如alert() 。

Answer 5

断点，特别是条件断点是你的朋友。

你也可以写一个小的断言函数，它会检查值并在站点的调试版本中需要时抛出异常（某些变量设置为true或url有一些参数）