用console.table()調試javascript，javascriptconsole

用console.table()調試javascript，javascriptconsole

用CONSOLE.LOG()展示數組

想象下你構造了如下數組
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];

console.log(languages);

console.log() 會這樣展示數組

這樣的展示形式對於開發很有用，但是我發現這樣還要手動去點每個Object有些笨重。這時候我覺得console.table()有點意思。

用CONSOLE.TABLE()展示數組

現在我們用console.table()試試：

非常小巧有木有？

當然，console.table()更適合，扁平 列成表格式的資料，展現的更完美，否組你在 如果每個數組元素都是不同結構，你的表格很多格子都是 undefined。

用CONSOLE.TABLE() 展示object

console.table()另一個特性就是展示 object。

var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

妥妥的。

CONSOLE.TABLE() 的過濾功能

如果你想限制console.table()顯示某一列， 你可以在在參數中傳入關鍵字列表 如下：
// Multiple property keys
console.table(languages, ["name", "paradigm"]);

如果你想訪問一個屬性的話，一個參數就夠了，

// A single property keyconsole.table(languages, "name");

我曾經以為我已經瞭解了 Chrome 開發人員工具絕大部分的功能，但是現在顯然我錯了， 騷年沒事去看看Chrome DevTools文檔吧！

怎調試javascript

VS2005以及一下就調試不了了，VS2008 中有一個調試js的外掛程式，把這個外掛程式插入到VS2008裡面，調試js代碼就像調試C＃代碼一樣,總共有三個檔案，把其中的DLL檔案附加到VS2008裡面就行了，如果懶得到網上找，給我一個你的郵箱我發給你一份吧。
PluginForJS.dll
PluginForJS.AddIn
Microsoft.JScript.Compiler.dll

java的...這個沒有，我是.net程式員 --!

對了，FF瀏覽器有一個firebug的工具，這個能跟蹤調試js
 
說明怎調試javascript

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的指令碼調試功能。我們先來看IE的：

1、在F12開發人員工具中進行調試
開啟IE瀏覽器，按下F12鍵，就會開啟開發人員工具，這是IE內建的開發人員開發工具，方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。

如果你開啟的時候沒有固定在網頁底部，可以點擊右上方功能表列中的按鈕來完成。

我們看到在這個工具視窗裡面有幾個標籤頁，分別是：HTML、CSS、控制台、指令碼、探查器和網路，點開每一個標籤，可以執行相應的任務。
在HTML標籤視窗中，工具列中的按鈕所執行的操作如：

CSS標籤是用來查看樣式的；控制台顯示網頁中JS的各種輸出資訊，包括錯誤資訊、使用者日誌等；開啟指令碼標籤頁，這裡面才是我們想要的內容。

我在圖中用黃色矩形選中連個控制項，左側的下拉式清單用來選擇檔案，右側的按鈕用來啟動調試。當點擊啟動調試後，偵錯工具會將視窗最大化，我們在選中的檔案中找到需要調試的位置，點擊左側邊欄添加斷點即可進行調試。

當有程式運行到我們的斷點處時，就可以進行調試了：

在這裡，我們可以使用快速鍵進行操作，常用的快速鍵如下：
F9：添加/移除 斷點
F10：逐過程，即跳過該語句中的方法、運算式等
F11：逐語句調試，即單步調試，會跳入方法、運算式，進行逐語句的跟蹤調試

在執行過程中，如果我們要執行即時的代碼，我們就需要在右側的窗格中輸入代碼，按斷行符號即可：

如果要執行多行代碼，點擊運行按鈕右側的雙箭頭，就會開啟多行模式。我就不再片了。

這種直接在瀏覽器中調試的方法同樣適用於Google瀏覽器Chrome和FireFox FireDebug，只不過在細枝末葉上面有些不同罷了，主體的功能都是一樣的。
按F12鍵進入開發人員工具，可以查看原始碼、樣式和js：

點擊Scripts按鈕，可以開啟這個調試視窗，裡麵包含了網頁中指令檔源碼，點擊左側的按鈕可以開啟選擇檔案的側視窗。

2、使用debugger關鍵字進行調試
這種方法很簡單，我們只需要在進行調試的地方加入debugger關鍵字，然後當瀏覽器運行到這個關鍵字的時候，就會中斷：

設定以後就可以使用debugger關鍵字進行調試了；進過這樣的設定，我們還可以捕獲到意外的錯誤，進行跟蹤調試。