控制台日志（）；如何调试 javascript

Console.log(); How to & Debugging javascript

提问by Danferth

Ok so I hope this is a question that isn't to basic for you guys.

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

I know enough jQuery to get myself into trouble, meaning I can grab elements and do stuff with it, write my own little functions for interactivity and such. But then something doesn't go as expected, before I post questions to stackoverflow and get answers that make me slap myself in the forehead I would like to debug it myself and am sick of inserting alert();into my code. In reading up on the subject there is mention of console.log();, console.info();and the such but I can not find any resource that explains how to use these in real world scenarios for debugging.

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

Do any of you know of a good resource or tutorial (not afraid to read a book) that can explain how to use these functions for the layman. It seems that the tutorials and such I am finding are either way to advanced or just skim the surface and don't show you how to use them. I understand I can insert console.log();and it will spit out information in the console for firebugor element inspector. But what if my hand baked function is doing something unexpected somewhere up the line, how do I find the problem as the browser parses the javascript.

你们中的任何人都知道可以解释如何为外行使用这些功能的好资源或教程（不怕看书）。似乎我发现的教程和类似的东西要么是高级方法，要么只是略过表面而没有向您展示如何使用它们。我知道我可以插入console.log();，它会在控制台中为firebugor吐出信息element inspector。但是，如果我的手工烘焙函数在生产线上的某个地方做了一些意想不到的事情，我如何在浏览器解析 javascript 时找到问题。

Any help would be greatly appreciated as I feel learning this will help me understand what is going on in my code, so I can stop staring at the screen going “Why isn't this working, it worked in the jsfiddle!”

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

采纳答案by Marc B

console.log() just takes whatever you pass to it and writes it to a console's log window. If you pass in an array, you'll be able to inspect the array's contents. Pass in an object, you can examine the object's attributes/methods. pass in a string, it'll log the string. Basically it's "document.write" but can intelligently take apart its arguments and write them out elsewhere.

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

It's useful to outputting occasional debugging information, but not particularly useful if you have a massive amount of debugging output.

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

To watch as a script's executing, you'd use a debugger instead, which allows you step through the code line-by-line. console.log's used when you need to display what some variable's contents were for later inspection, but do not want to interrupt execution.

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

回答by tkone

Learn to use a javascript debugger. Venkman (for Firefox) or the Web Inspector (part of Chome & Safari) are excellent tools for debugging what's going on.

学习使用 javascript 调试器。Venkman（用于 Firefox）或 Web Inspector（Chome 和 Safari 的一部分）是用于调试正在发生的事情的出色工具。

You can set breakpoints and interrogate the state of the machine as you're interacting with your script; step through parts of your code to make sure everything is working as planned, etc.

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

Here is an excellent write up from WebMonkey on JavaScript Debugging for Beginners. It's a great place to start.

这是WebMonkey 关于初学者 JavaScript 调试的优秀文章。这是一个很好的起点。

回答by Andy Gee

I like to add these functions in the head.

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

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;};

Now log won't break IE I can enable it or disable it in one place I can log inline

现在登录不会破坏 IE 我可以在一个地方启用或禁用它我可以在线登录

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

回答by jondavidjohn

Essentially console.log()allows you to output variables in your javascript debugger of choice instead of flashing an alert()every time you want to inspect something... additionally, for more complex objects it will give you a tree view to inspect the object further instead of having to convert elements to strings like an alert().

基本上console.log()允许你在你选择的 javascript 调试器中输出变量，而不是alert()每次你想检查某些东西时都闪烁......此外，对于更复杂的对象，它会给你一个树视图来进一步检查对象，而不必转换元素到像alert().

回答by Dima Vidmich

Breakpoints and especially conditional breakpoints are your friends.

断点，尤其是条件断点是您的朋友。

Also you can write small assert like function which will check values and throw exceptions if needed in debug version of site (some variable is set to true or url has some parameter)

您也可以编写类似断言的小函数，该函数将在站点的调试版本中检查值并在需要时抛出异常（某些变量设置为 true 或 url 具有某些参数）