前端！7个快速发现 bug 神仙调试工具

本文已通过原做者受权

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

若是你从事的是前端开发，就应该能理解调试代码仍是颇有难度的。特别是对于JavaScript，一个小错误有时会花费数小时来调试。对于不一样的浏览器、操做系统和设备，错误又是不可避免的。

本文主要列出一些调试工具，大家能够本身根据状况来选择。

Web浏览器中的开发工具

任何现代的 Web 浏览器都配有功能强大的工具来调试应用程序。 如使用控制台语句cconsole.log()，使用alert()的弹出窗口，还可使用debugger语句暂停代码执行，这些对于咱们的调试都颇有帮助。

咱们还可使用网络检查器或CSS样式检查器让调试变得更轻松流畅。

任何现代网络浏览器都配备了强大的工具来帮助调试您的应用程序。它能够简单到使用console.log()的控制台语句，使用alert()的弹出窗口，甚至使用调试器语句暂停代码执行。这些工具对咱们的调试任务很是有帮助，尤为是调试器语句。

Postman

地址：https://www.postman.com/

几乎全部前端应用程序都发送和接收JSON响应和请求。 应用程序经过请求 API 能够作不少事情，例如身份验证，用户数据传输，甚至是一些简单的事情，例如获取所在位置的当前天气。

Postman 是调试接口的最佳工具之一。 它适用于 MacOS，Windows 和Linux的系统， 能够快速轻松地直接发送REST，SOAP和GraphQL请求。

使用 Postman，咱们能够调整请求，分析响应和调试问题。 当不肯定问题出在前端仍是后端时，这是颇有帮助的。

CSS Lint

地址： http://csslint.net/

CSSLint 是一个用来帮你找出 CSS 代码中问题的工具，它可作基本的语法检查以及使用一套预设的规则来检查代码中的问题，规则是能够扩展的。

JSON Formatter & Validator

地址：https://jsonformatter.curiousconcept.com/

在未格式化的 JSON 中很难发现语法错误或键值不正确的键，由于它很难读取。 对于 压缩的 JSON 文件，要发现其中的错误是比较难的，因此咱们须要一种格式化的工具。

JSON Formatter & Validator tool 就是一个格式化 JSON 的工具，只需输入压缩的JSON格式，就能得到正确格式。该工具也能够验证 JSON 到 RFC 标准。

Sentry

地址：https://sentry.io/welcome/

不管测试如何完善的程序，bug老是免不了会存在的，有些bug不是每次都会出现，测试时运行好好的代码可能在某个用户使用时就歇菜了，但是当程序在用户面前崩溃时，你是看不到错误的，固然你会说:”Hey, 我有记日志呢”。 可是说实话，程序天天每时都在产生大量的日志，并且分布在各个服务器上，而且若是你有多个服务在维护的话，日志的数量之多你是看不过来的吧。等到某天某个用户实在受不了了，打电话来咆哮的时候，你再去找日志你又会发现日志其实没什么用：缺乏上下文，不知道用户什么操做致使的异常，异常太多（从不看日志的缘故）不知如何下手 等等。

Sentry就是来帮咱们解决这个问题的，它是是一个实时事件日志记录和聚合平台。它专门用于监视错误和提取执行适当的过后操做所需的全部信息, 而无需使用标准用户反馈循环的任何麻烦。

Sentry是一个日志平台, 它分为客户端和服务端，客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个web节目方便查看。Sentry 由 python 编写，源码开放，性能卓越，易于扩展，目前著名的用户有Disqus, Path, mozilla, Pinterest等。

JSHint

地址：https://jshint.com/

JSHint 是一个 Javascript 代码分析检测工具，不只能够帮助咱们检测到 JS 代码错误和潜在问题，也能帮助咱们规范代码开发。

JSHint 扫描一个用JavaScript编写的程序，并报告常见的错误和潜在的bug。潜在的问题多是语法错误、隐式类型转换致使的错误、泄漏变量或其余彻底的问题。

JSHint 扫描用 JavaScript 编写的程序，并报告常见的错误和潜在的错误。 潜在的问题多是语法错误，因为隐式类型转换致使的错误，变量泄漏或其余彻底缘由。

下面是一个示例函数，使用它来查看 JSHint 的运行状况:

BrowserStack

地址：https://www.browserstack.com/

如今拥有各自内核的浏览器愈来愈多，各自的特性也千差万别。若是做为一个前端攻城师想要检测网站在不一样的操做系统和移动平台下的各类浏览器的兼容性，那是至关痛苦不堪的。看到有在本身电脑上装虚拟机配置各类环境，有本身的电脑上组建好这样的环境，而后一一测试，但是人的精力毕竟有限，咱们无法在同一台电脑上装那么多系统，那么多浏览器的。幸亏出了个 BrowserStack 是前端的福音呀。

BrowserStack 是一款提供网站浏览器兼容性测试的在线云端测试工具，从而开发测试人员没必要再准备不少虚拟机或者手机模拟器。

BrowserStack 是一个提供网站浏览器兼容性测试的在线云端应用，支持9大操做系统上的100多款浏览器。支持本地测试，支持与Visual Studio集成。或者你也能够直接前往 http://modern.ie 在线测试，如今注册能够免费试用三个月，三个月后是收费的，三个月后要是你想用又不想付费做为天朝的开发者你懂得。

---

做者：Mahdhi Rezvi 译者：前端小智 来源：medium
原文： https://medium.com/better-pro...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。