14款優秀的JavaScript調試工具大盤點

avaScript是一種非常簡單的語言，一般說來任何人都可以在幾小時內掌握它的基本知識。

然而就像其他任何語言一樣，JavaScript存在著一些可以輕易避免的常見錯誤和不好的做法。開發人員喜歡使用這個腳本語言來改善用戶界面，提供豐富多彩的功能，或者在網站上制作各種互動元素。

不過，調試JavaScript對正在開發web開發人員而言可以說是一項相當痛苦又艱巨的任務。因此我們收集了一些最好的JavaScript調試工具，希望可以幫助你調試腳本，以實現更精確的結果。誠摯地希望這些我們推薦的工具能為你帶來方便，祝你編程愉快！

1.Json Formatter & Validator

JSON Formatter是用來協助調試的。JSON的數據輸出為了節省空間，通常無需換行，所以實際閱讀和理解的時候就會非常的困難。此款小工具有望通過格式化JSON數據，從而使得它能便于我們人腦的閱讀和調試。

官方網站：http://jsonformatter.curiousconcept.com/

2.Debug

Debug是一個小型的用于記錄調試消息的庫。由于它只對console.log周圍進行封裝，所以在Node和瀏覽器上都可以工作。它可以讓你過濾日志輸出而不改變你的源，同時還可以輸出時間差，讓你輕松知道日志信息用了多少時間。

官方網站：http://smalljs.org/logging/debug/

3. JS Hint

JSHint是一款社區驅動工具，用于檢測JavaScript代碼中的錯誤和潛在問題，以及強制執行團隊的編碼約定。它適應性非常好，能輕松適合你需要的特定的編碼規則和環境。

官方網站：http://www.jshint.com/

4.Grunt

Grunt是一款適合JavaScript項目的基于任務的命令行構建工具。它允許你在項目中使用下列預定義的任務：連接文件，使用JSHint驗證文件，使用UglifyJS壓縮文件，使用節點單元運行單元測試，等等。

官方網站：http://gruntjs.com/

5. JS Bin

JS Bin是一款專為協助avaScript和CSS代碼的分支測試片段而設計的web應用程序，在給定環境下，調試代碼進行和諧工作。 JS Bin允許編輯和測試JavaScript和HTML。你如果覺得ok的話，還可以保存并發送URL給小伙伴進行審查或尋求幫助。

官方網站：http://jsbin.com/

6. JavaScript Shell

一個支持JavaScript和DOM的命令行界面。

官方網站：http://www.squarefree.com/shell/

7. JavaScript Debugger

Venkman是Mozilla的JavaScript Debugger的代號。Venkman旨在為Mozilla提供一個基于的瀏覽器的強大的JavaScript調試環境。

官方網站：https://addons.mozilla.org/en-US/firefox/addon/javascript-debugger/

8. JSdt

JavaScript Debug Toolkit是一款允許你在IE、火狐、Safari、chrome、opera、移動IE瀏覽器、手機Opera瀏覽器等瀏覽器上調試JavaScript 的軟件。它適用于所有支持ajax的瀏覽器。

官方網站：https://code.google.com/p/jsdt/

9. DebugBar

Companion.JS是一款適用于IE的JavaScript調試器，它具備很多功能，如詳細的JavaScript錯誤報告、控制API功能的firebug，打開Companion.JS面板的工具欄圖標。

官方網站：http://www.my-debugbar.com/wiki/CompanionJS/HomePage

10.Simple State Manage

Simple State Manage（SSM）是一款適用于響應式網站的輕量級、易于使用的JavaScript狀態管理器。它不需要任何JavaScript框架，就可以用一種干凈利落的方式處理特定的布局代碼。你也可以定義斷點，并封裝所有的JavaScript在該斷點處執行。一旦到達另一個斷點，SSM將禁用以前所有的自定義代碼，并觸發新的代碼。此外，該管理器還配備了完整的API、調試器和插件用于支持進一步的擴展。

官方網站：http://www.simplestatemanager.com/

11. Uninson.js

Unison.js是一個很小的腳本（壓縮后小于1KB），只允許我們聲明一次斷點，但是這些斷點既可用于JavaScript也能用于標記。它需要預處理器，如SASS、LESS和Stylus來執行功能。而且，在后臺，它會使用位于頁面頭部的font-family屬性和標題標簽來存儲信息。它的調試功能允許你打印斷點以方便查閱。

官方網站：http://bjork24.github.io/Unison/

12.Tutti

Tutti是一款開源Web應用，能讓你在同一時間在多個Web瀏覽器上交互執行JavaScript。使用也非常簡單，你只需要創建一個會話，然后通過復制粘貼瀏覽器生成的URL，連接到那個房間就可以了。然后，當你執行來自shell的JavaScript命令時，通過技術，如Socket.IO、Node.js和WebSocket的幫助，該命令就能在每個相連的瀏覽器上被執行。簡單地說，這是一個用于調試JavaScript和分析瀏覽器間不同的非常方便的資源。

官方網站：http://tutti.tobyho.com/

13.Firebug

Firebug集成了Firefox，當你在瀏覽的時候，大量的開發工具隨時待命。你可以實時地在任何網頁編輯、調試和監控CSS、HTML和JavaScript。

官方網站：https://addons.mozilla.org/en-US/firefox/addon/firebug/

14.Dragonfly

這是一個你可以掌控的完整的工具套件。逐句通過代碼，操作DOM、監控網絡流量、搜索、過濾、等等等等。無論你是開發人員抑或是設計師，Opera Dragonfly都能為你提供全面的工具。

官方網站：http://www.opera.com/dragonfly/

譯文鏈接：http://www.codeceo.com/article/14-javascript-debug-tools.html

英文原文：Best JavaScript Debugging Tools for Developers

翻譯作者：碼農網 – 小峰

為一名有著十多年經驗的前端工程師，我深知瀏覽器調試工具在日常開發中的重要性。它們不僅能幫助我們追蹤bug，優化性能，還能提升我們的開發效率。在本文中，我將通過幾個實例詳細介紹如何使用瀏覽器的調試工具。

調試JavaScript

示例1：使用console進行輸出

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Console 示例</title>
</head>
<body>
    <script>
        // 輸出文本信息
        console.log('這是一個普通的日志信息。');

        // 輸出警告信息
        console.warn('這是一個警告信息。');

        // 輸出錯誤信息
        console.error('這是一個錯誤信息。');

        // 使用console.assert進行斷言
        console.assert(document.getElementById('myElement'), '元素不存在！');
    </script>
</body>
</html>

在這個例子中，我們使用了console對象的不同方法來輸出信息。這些信息將直接顯示在瀏覽器的控制臺（Console）中，幫助我們進行調試。

示例2：使用斷點調試

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>斷點調試示例</title>
</head>
<body>
    <button id="myButton">點擊我</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            var a=1;
            var b=2;
            var c=a + b;
            console.log(c); // 在這里設置斷點
        });
    </script>
</body>
</html>

在這個例子中，我們可以在瀏覽器的開發者工具中的Sources標簽頁設置斷點，當點擊按鈕時，代碼執行會在console.log(c);這一行暫停，我們可以查看變量a、b、c的值，單步執行代碼，或者繼續執行代碼。

調試CSS樣式

示例3：檢查和修改元素樣式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS調試示例</title>
    <style>
        .my-element {
            color: blue;
            border: 1px solid black;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="my-element">我是一個可調試的元素</div>
    <script>
        // 這里可以添加JavaScript代碼，但本例主要演示CSS調試
    </script>
</body>
</html>

在這個例子中，我們可以在瀏覽器的開發者工具中的Elements標簽頁檢查.my-element類的樣式。我們可以實時修改其CSS屬性，比如顏色、邊框等，并立即在頁面上看到效果。

性能分析

示例4：使用Performance進行性能分析

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>性能分析示例</title>
</head>
<body>
    <script>
        performance.mark('start-loading');
        // 假設這里有一些影響頁面加載的代碼
        setTimeout(function() {
            performance.mark('end-loading');
            performance.measure('page-loading', 'start-loading', 'end-loading');
            var performanceEntries=performance.getEntriesByType('measure');
            performanceEntries.forEach(function(performanceEntry) {
                console.log("頁面加載耗時: " + performanceEntry.duration + "ms");
            });
        }, 1000);
    </script>
</body>
</html>

在這個例子中，我們使用了performance API來標記時間點，并測量頁面加載的耗時。通過瀏覽器的開發者工具中的Performance標簽頁，我們可以記錄和分析頁面在不同階段的性能表現。

網絡請求分析

示例5：檢查網絡請求

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>網絡請求分析示例</title>
</head>
<body>
    <script>
        fetch('https://api.example.com/data')
            .then(response=> response.json())
            .then(data=> console.log(data))
            .catch(error=> console.error('請求失敗:', error));
    </script>
</body>
</html>

在這個例子中，我們使用fetch API發起一個網絡請求。我們可以在瀏覽器的開發者工具中的Network標簽頁查看這個請求的詳細信息，包括請求頭、響應頭、響應體等。

家好，我是 Echa。

前段時間，老鐵們私信我有么有又免費又好用的在線代碼編輯器，最近找了找。終于找到了。給老鐵們安排上。創作不易，喜歡的老鐵們轉發加個關注，點個贊，速速收藏，謝謝！

今天來推薦六個好用又免費的在線代碼編輯器！

CodeSandbox

在線地址：https://codesandbox.io/

CodeSandbox 是一個在線代碼編輯器，主要用于創建 Web 應用項目，其提供了多種模塊：

CodeSandbox 為前端開發提供了完整的代碼編輯器體驗和沙盒環境。其包含了很多實用功能：

Npm 支持：可以添加幾乎任何 npm 上可用的包；
支持 TypeScript、熱更新、GitHub 導出、靜態文件托管等；
使用 Monaco 編輯器構建，Monaco 是為 VSCode 的提供支持的代碼編輯器，有很多相似的體驗；
集成的 DevTools、linting、錯誤覆蓋、測試框架 (Jest)等；
強大的 CLI 可以直接將本地項目導入 CodeSandbox。

Codepen

在線地址：https://codepen.io/

CodePen 是一個在線的HTML、CSS 和 JavaScript 代碼編輯器，能夠編寫代碼并即時預覽效果，可以利用它來構建和分享代碼。CodePen 支持使用 Less、Sass、PostCSS 等來編寫CSS。CodePen 不僅是一個在線編輯器，還是一個龐大的前端社區，上面有來自全球開發者分享的各種各樣炫酷的效果，并且這些代碼都是開源和共享的。

Stackblitz

在線地址：https://stackblitz.com/

Stackblitz 和 VSCode 非常像，使用簡單可以一鍵創建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等項目：

Stackblitz 具有以下特性：

在瀏覽器中集成了一個 Dev Server，在離線的情況下仍然可以進行開發；
除了支持前端項目外，還支持在瀏覽器中運行 Node.js 環境；
支持連接 GIthub 倉庫，可以直接將代碼 push 到 Github 上，也可以拉取 Github 項目進行查看和編輯；
所有應用程序都會自動部署在其服務器上。

JSFiddle

在線地址：http://jsfiddle.net/

JSFiddle 是一個在線代碼編輯器，允許用戶在單個頁面上編輯和運行 HTML、JavaScript 和 CSS 代碼。JSFiddle 使用 CodeMirror 構建，其提供了多游標、語法高亮、語法驗證（linter）、大括號匹配、自動縮進、自動完成、代碼/文本折疊、搜索和替換以協助開發人員的操作。JSFiddle 被廣泛用于共享簡單的測試和演示。

JS Bin

在線地址：https://jsbin.com/

JS Bin 是一個開源的協同 web 開發調試工具。主要用于幫助測試 JavaScript 和 CSS 的代碼片段，功能與 jsFiddle 類似。可以實時分享在 JS Bin 中輸入的內容，在任何平臺上的任何設備上查看 JS Bin 的輸出，都是實時更新的。

碼上掘金

在線地址：https://code.juejin.cn/

碼上掘金是一個為廣大開發者提供代碼在線 Playground 的平臺，具備輕量簡單、易使用、現代標準、模塊化、實時編輯，所見即所得等特性。內置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。

在線咨詢

上一篇：CSS border-bottom-color 屬性
下一篇：建設產品網站的6個基本內容及具體的工作內容

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商