轉(zhuǎn)載的文章集合


javascript調(diào)試工具

一.Companion.JS

js程序的調(diào)試是相當郁悶的，因為首先這種語言語法比較靈活，它是一種弱類型的腳本語言，很多錯誤是無法控制的，這些不談，最痛苦的是沒有什么好的調(diào)試工具，現(xiàn)在的情況比以前稍好，在Firefox下還有firebug，這的確是一個不錯的js調(diào)試工具，但在IE下使用就很


麻煩，而且效果很不好，鄙人一直苦于尋找一個很好的IE下的js調(diào)試工具，能夠自動捕獲錯誤，并定位位置和原因，沒想到今天竟在無意中尋找到了這么個好工具，不敢私藏，共享出來，希望能為各位web開發(fā)者帶來方便 這個工具的名字叫Companion.JS，請注意，這


可不是一個js文件，而是一個名字，它是作為ie的插件來安裝使用的，而且需要結(jié)合Microsoft Script Debugger使用，通過安裝這個工具，但頁面出現(xiàn)錯誤時會在左上角彈出一個小錯誤提示，點擊會在IE下面顯示出一個錯誤控制臺，就如FF下的 firebug控制臺一樣。錯誤


信息提示很詳細。 如下是官網(wǎng)的一個錯誤提示示例圖：點擊在新窗口中瀏覽此圖片?
官網(wǎng)地址：http://www.my-debugbar.com/wiki/CompanionJS/HomePage?
具體使用方法為：?
1、先下載Companion.JS安裝文件，然后安裝。?
2、下載安裝Microsoft Script Debugger，如果您的機器已經(jīng)安裝過了就可以免過這一步。?
3、打開IE菜單“工具”--“Internet選項”--“高級”，找到“禁用腳本調(diào)試(Internet Explorer)”和“禁用腳本調(diào)試(在Internet Explorer之外)”，將兩個選項前面的對鉤都去掉，然后重啟IE。?
4、在Ie中輸入：http://www.my-debugbar.com/wiki/uploads/CompanionJS/dummy.htm，然后點擊click me鏈接，如果左上角彈出一個小錯誤提示或下面控制臺出現(xiàn)了錯誤信息提示，就說明您已經(jīng)安裝成功了。 提示：Microsoft Script Debugger 下載 Microsoft Script?


Debugger 有兩個下載版本可用，請按您的操作系統(tǒng)選擇相應(yīng)的下載版本。 - dbg10chs.exe 需要 Microsoft Windows 98 或 Millennium Edition (Me) - scd10chs.exe 需要 Windows XP、2000 或 NT 4.0。?
dbg10chs.exe: http://download.microsoft.com/download/winscript56/Install/1.0/W9XMe/CN/dbg10chs.exe?
scd10chs.exe: http://download.microsoft.com/download/winscript56/Install/1.0/W9XMe/CN/scd10chs.exe

二.10個基于瀏覽器的JavaScript調(diào)試工具分享

調(diào)試Javascript可能是web開發(fā)中最讓人郁悶的事情,這里是10款我們精選的基于瀏覽器的JS在線調(diào)試工具,感興趣的朋友可以參考下，或許對你有所幫助


1.PastebinPastebin是一個協(xié)作式的調(diào)試工具，幫助你在IRC，IM或者消息版上對話來分享和修改代碼片段1.jpg


2.JSON Formatter and ValidatorJSON格式化工具用來幫助打來調(diào)試JSON。因為JSON數(shù)據(jù)格式經(jīng)常沒有換行，可能非常難于閱讀。這個工具可以幫助你解決這個問題2.jpg?


3.JS Bin – Collaborative JavaScript Debugging這個工具類似于jsfiddle，可以幫助大家來在線分享和協(xié)作調(diào)試JS和CSS代碼片段， ? 你不需要關(guān)注上下文。它允許你編輯和測試JS和HTML。3.jpg?
Browser-based Debugging Tools


4.Blackbird JavaScript Debug Helperalert()可能是大家使用比較多的調(diào)試手段。blackbird提供了一個樣式化的console來幫助大家記錄，查看和過濾js信息，很大程度幫助開發(fā)人員避免處理程序的時候被alert中止，使得分析更加流暢4.jpg?


5.JavaScript ShellJS和DOM的命令行界面5.jpg?


6.JSDT – JavaScript Debug ToolkitJSDT是一個可以在IE，FF，Safari，Chrome，Opera，Mobile IE中用來debug javascript的工具。能在所有支持AJAX的瀏覽器中使用6.jpg?


7.CJS – Companion.JS JavaScript Debugger一個IE上Javascript的debugger。詳細報告JS錯誤，并且擁有類似firebug的console API特性7.jpg?


8.DebugBar – IE Extension for Web Developers以前文章中有介紹過這個工具，可以幫助你查看DOM tree并且修改標簽屬性和CSS屬性，很方便的來查看及其debug JS方法8.jpg?


9.Opera Dragonfly一個Opera browser的跨設(shè)備及其平臺的debugging環(huán)境 ，檢查和編輯CSS和DOM，并且可以查看相關(guān)錯誤9.jpg?


10.Venkman JavaScript DebuggerVenkman是Mozilla的JS debugger代碼名字 。主要為基于Mozilla的瀏覽器提供強大的JS調(diào)試環(huán)境

三. js在線調(diào)試工具

http://jsbin.com?
這個功能比較簡單, 左邊輸入js, 右邊輸入html, 點擊Render就可以看到效果了?

四. js調(diào)試控制臺使用技巧

目錄：
一、什么是 Console
二 、什么瀏覽器支持 Console
三、為什么不直接使用 alert 或自己寫的 log
四、console.log(object[,object,.....])
五、console.debug，info，warn，error
六、console.assert(expression[, object, ...])
七、console.clear()
八、console.dirxml(node)
九、console.trace()
十、console.group(object[, object, ...]), groupCollapsed, groupEnd
十一、console.time(name)/console.timeEnd(name)
十二、console.profile(name)/console.profileEnd()
十三、console.count([title])
十四、console.table(data)
十五、console.dir(function)
十五、tab鍵代碼補全
十五、百度首頁的彩蛋！
一 ?什么是 Console


Console 是用于顯示 JS和 DOM 對象信息的單獨窗口。并且向 JS 中注入1個 console 對象，使用該對象 可以輸出信息到 Console 窗口中。
二 ?什么瀏覽器支持 Console


?Chrome 和 FireFox(FireBug)中都支持 Console。而其他瀏覽器都支 持不好。比如 IE8 自帶的開發(fā)工具雖然支持 Console，但功能比較單調(diào)，顯示對象的時候都是顯示 [Object,Object]，而且不能點擊查看對象里面的屬性。IE6、IE7 雖然可以安裝 Developer Toolbar，但也?


不支持 console。Safari、Opera 都支持 Console，但使用上都沒有 FireBug和 Chrome 的方便。 現(xiàn)在firebug推出了 firebuglite工具，可以讓所有瀏覽器都支持Console功能，而且使用上和FireBug 幾乎一樣。詳見http://getfirebug.com/firebuglite
三 ?為什么不直接使用 alert 或自己寫的 log


使用 alert 不是一樣可以顯示信息，調(diào)試程序嗎？alert 彈出窗口會中斷程序， 如果要在循環(huán)中顯示信息，手點擊關(guān)閉窗口都累死。而且 alert 顯示對象永遠顯示為[object ]。 自己寫的 log 雖然可以顯示一些 object 信息，但很多功能支持都沒有 console 好，看完后面?


console 的介紹就知道了。
（部分比較雞肋的方法沒有列出來，用粗藍標出來的是常用的方法）
四、console.log(object[,object,.....])


Console.log 是最簡單輸出信息到 console 窗口的方法，支持多個參數(shù)，該方法會把 這些參數(shù)組合在一起顯示
我們首先來寫一段倒計時的代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
? <title>倒計時</title>
? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
?</head>
?<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
? <h1>倒計時：<span>10</span></h1>
? <script type="text/javascript">
? ? $(document).ready(function(){
? ? ? ? var num = $("h1 span").first();
? ? ? ? var i = 9;
? ? ? ? var interval = setInterval(function(){
? ? ? ? ? ? num.text(i);
? ? ? ? ? ? i--;
? ? ? ? ? ? console.log("當前數(shù)值："+i);
? ? ? ? ? ? if(i < 0){
? ? ? ? ? ? ? ? clearInterval(interval);
? ? ? ? ? ? }
? ? ? ? },1000);
? ? });
?</script>
</body>
</html>
我們在line:16加入console.log("當前數(shù)值："+i); 那么在控制臺中將輸出每次i的值：


?log 方法第一個參數(shù)支持類似 C 語言 printf 字符串替換模式，Log 支持下面幾種替換模式：


%s ?代替字符串
%d ?代替整數(shù)
%f ?代替浮點值
%o ?代替 Object
例如，我們輸出一個時間日期：


console.log("%d年%d月%d日"，2014,6,25);
2014年06月25日 - 月上西樓 - 月上西樓
比如，我們要把月份“6月”變成“06月”，那么可以使用“%s”，在傳入?yún)?shù)的時候要用引號：
console.log("%d年%s月%d日",2014,'06',25);
2014年06月25日 - 月上西樓 - 月上西樓
五 ?console.debug，info，warn，error
這 4 種方法與 log 方法使用一模一樣，只是顯示的圖標和文字顏色不一樣.


2014年06月25日 - 月上西樓 - 月上西樓
六 ?console.assert(expression[, object, ...])


assert 方法類似于單元測試中的斷言，當 expression 表達式為 false 的時候，輸出后面的信息,e.g：
2014年06月25日 - 月上西樓 - 月上西樓
注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持
七 ?console.clear()


該方法清空 console 中的所有信息 (Chrome中不支持)
八 ?console.dirxml(node)


把 html 元素的html 代碼打印出來,等同于log.
九 ?console.trace()


trace 方法可以查看當前函數(shù)的調(diào)用堆棧信息，即當前函數(shù)是如何調(diào)用的


?
十 ?console.group(object[, object, ...]), groupCollapsed, groupEnd
這 3 個函數(shù)用于把 log 等輸出的信息進行分組，方便閱讀查看。
groupCollapsed 方法與 group 方法一樣，只是顯示的分組默認是折疊的.
注意：如果后面不跟console.groupEnd()，則第二個分組默認是第一個分組的子節(jié)點。


十一 ?console.time(name)/console.timeEnd(name)
我們經(jīng)常需要測試 js 函數(shù)的執(zhí)行時間，可能我們自己寫代碼在第1 條語句和 最后 1 條語句取當前時間相減。這組函數(shù)其實就實現(xiàn)了這樣的功能，time(name)根據(jù) name 創(chuàng)建 1 個新 的計時器。timeEnd(name)停止給定name 的計時器，并顯示時間。
下面給個空的for循環(huán)，打印0-1000的i的值，用時124.61ms：
2014年06月25日 - 月上西樓 - 月上西樓
十二 ?console.profile(name)/console.profileEnd()
這組方法用于打開瀏覽器的分析器，用于分析這組函數(shù)之間的 js 執(zhí)行情況
注：firebuglite 不支持 profile 功能，Chrome 支持 profile，但分析的內(nèi)容不詳。
十三 ?console.count([title])


count 方法用于統(tǒng)計當前代碼被執(zhí)行過多少次，title 參數(shù)可以在次數(shù)前面輸出額外的標題以幫助閱讀。e.g:
$(function(){
? ?test();
? ?test();
? ?test();
? ?test();
});
?
var test = function(){
? ? console.count("test被執(zhí)行次數(shù)：");
};
在Chrome中的結(jié)果，會打印出累積次數(shù)：


而在fireBug中只會顯示最后一次最終的次數(shù)：test被執(zhí)行次數(shù)：4。


十四 ?console.table(data)


table 方法把data 對象用表格的方式顯示出來，這在顯示數(shù)組或者格式一樣的JSON 對象的時候非常有用。
注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。
此內(nèi)容將單獨開一篇博客，請見《利用console.table()做高級JS調(diào)試、Console用法總結(jié)（2）》


十五 ?console.dir(function)


dir方法是把列出對象的所有方法。比如，我們顯示console對象下都些什么方法：
console.dir(console);
2014年06月25日 - 月上西樓 - 月上西樓
十五 ?tab鍵代碼補全


此功能只針對fireBug下，在Chrome下自帶代碼提示功能
在fireBug下輸入co再按Tab鍵，將會出現(xiàn)代碼提示：
2014年06月25日 - 月上西樓 - 月上西樓
而在Chrome下邊輸入邊出現(xiàn)代碼提示，很強大。
十五 ?百度首頁的彩蛋！


打開百度首頁，查看Javascript輸出控制臺，呵呵，你發(fā)現(xiàn)了什么？百度的招聘啟事：

總結(jié)

以上是生活随笔為你收集整理的javascript调试工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。