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有一些參數）