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 * 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使我陷入麻烦，这意味着我可以抓取元素并使用它做一些事情，为交互性编写我自己的小函数等等。但是，在我向*发布问题并得到答案之前，有些事情并没有像我预期的那样顺利，我想自己调试一下，我讨厌插入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 firebug or 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();它会在控制台中为firebug或元素检查器提供信息。但是，如果我的手烤函数做了一些意想不到的事情，我如何在浏览器解析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是起作用的!”
5 个解决方案
#1
9
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.
log()只是将你传递给它的任何东西写入到一个控制台的日志窗口中。如果传入数组，就可以检查数组的内容。传入对象后，可以检查对象的属性/方法。传入一个字符串，它会记录这个字符串。基本上它的“文档。写“但是可以聪明地把它的论点分开，写在别的地方。”
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.
要查看脚本的执行情况，您应该使用调试器，它允许您逐行执行代码。控制台。当您需要显示一些变量的内容以供以后检查时，但是不希望中断执行时，使用log。
#2
2
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调试的优秀文章。这是一个很好的开始。
#3
2
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
#4
1
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()那样将元素转换为字符串。
#5
0
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)
您还可以编写类似assert的小函数，该函数将在站点的调试版本中检查值并抛出异常(一些变量被设置为true或url有一些参数)
#1
9
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.
log()只是将你传递给它的任何东西写入到一个控制台的日志窗口中。如果传入数组，就可以检查数组的内容。传入对象后，可以检查对象的属性/方法。传入一个字符串，它会记录这个字符串。基本上它的“文档。写“但是可以聪明地把它的论点分开，写在别的地方。”
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.
要查看脚本的执行情况，您应该使用调试器，它允许您逐行执行代码。控制台。当您需要显示一些变量的内容以供以后检查时，但是不希望中断执行时，使用log。
#2
2
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调试的优秀文章。这是一个很好的开始。
#3
2
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
#4
1
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()那样将元素转换为字符串。
#5
0
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)
您还可以编写类似assert的小函数，该函数将在站点的调试版本中检查值并抛出异常(一些变量被设置为true或url有一些参数)