當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript调试工具

發布時間：2025/4/14 javascript 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript调试工具小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉載的文章集合

javascript調試工具

一.Companion.JS

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

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

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

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

Debugger 有兩個下載版本可用，請按您的操作系統選擇相應的下載版本。 - 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調試工具分享

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

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

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

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

4.Blackbird JavaScript Debug Helperalert()可能是大家使用比較多的調試手段。blackbird提供了一個樣式化的console來幫助大家記錄，查看和過濾js信息，很大程度幫助開發人員避免處理程序的時候被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的跨設備及其平臺的debugging環境，檢查和編輯CSS和DOM，并且可以查看相關錯誤9.jpg?

10.Venkman JavaScript DebuggerVenkman是Mozilla的JS debugger代碼名字。主要為基于Mozilla的瀏覽器提供強大的JS調試環境

三. js在線調試工具

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

四. js調試控制臺使用技巧

目錄：
一、什么是 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 自帶的開發工具雖然支持 Console，但功能比較單調，顯示對象的時候都是顯示 [Object,Object]，而且不能點擊查看對象里面的屬性。IE6、IE7 雖然可以安裝 Developer Toolbar，但也?

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

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

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

Console.log 是最簡單輸出信息到 console 窗口的方法，支持多個參數，該方法會把這些參數組合在一起顯示
我們首先來寫一段倒計時的代碼
<!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("當前數值："+i);
? ? ? ? ? ? if(i < 0){
? ? ? ? ? ? ? ? clearInterval(interval);
? ? ? ? ? ? }
? ? ? ? },1000);
? ? });
?</script>
</body>
</html>
我們在line:16加入console.log("當前數值："+i); 那么在控制臺中將輸出每次i的值：

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

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

console.log("%d年%d月%d日"，2014,6,25);
2014年06月25日 - 月上西樓 - 月上西樓
比如，我們要把月份“6月”變成“06月”，那么可以使用“%s”，在傳入參數的時候要用引號：
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 方法可以查看當前函數的調用堆棧信息，即當前函數是如何調用的

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

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

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

而在fireBug中只會顯示最后一次最終的次數：test被執行次數：4。

十四 ?console.table(data)

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

十五 ?console.dir(function)

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： webservice获取天气预报异常
下一篇： JSP要点总结