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小时内与您取得联系。

整合营销服务商