原文链接：https://medium.com/better-programming/7-must-use-front-end-debugging-tools-53ab1807ad68作者：Mahdhi Rezvi如有翻译禁绝确，请多指正。如果你一直从事前端事情，那你就会知道调试应用法式有多灾。特别是在JavaScript中，一个小错误就可能会泯灭数小时的调试时间，可是对于差别的浏览器、操作系统和设备，错误总是不行制止的。所以，本文概述了一些可以资助大家发现、诊断和修复问题的工具。

大家可以凭据自己的情况，选择满足自己需求的工具。Web浏览器中的开发工具任何现代的web浏览器都配备了强大的工具来资助大家调试应用法式。它可以像console语句一样简朴，使用log()、弹出alert()，甚至使用调试器语句暂停代码来执行。

这些工具在我们的调试任务中很是有用，特别是调试器语句。你还可以使用网络检查器或CSS样式检查器来简化调试。

想要相识更多有关你的浏览器的开发工具，大家可以使用谷歌举行搜索。Postman险些所有的前端应用法式都发送和吸收JSON响应和请求。您的应用法式与用于许多事情的API毗连，好比身份验证、用户数据传输，甚至是一些简朴的事情，好比获取您所在位置的当前天气。Postman是最好的JS工具之一，调试您的请求和响应。

它提供macOS、Windows和Linux的软件。它允许你快速、轻松地直接发送REST、SOAP和GraphQL请求。使用Postman，你可以调整请求、分析响应和调试问题，尤其是当你不确定问题出在哪儿的时候，可以有效资助你找到问题所在。

CSS Lint你不仅可以使用CSS Lint工具验证代码，还可以使用它选择要测试的错误和警告。它执行基本的语法检查，并对代码应用一组规则，以查找有问题的模式或低效的迹象。JSON花样和验证器在未花样化的JSON中，很难发现语法错误或值不正确的键，因为它很难读取。

当缩小的JSON文件中有缺行返回沙空格时，读取和发现错误可能很有挑战性。你需要能够快速扫描该工具并检查花样或内容中的错误。

你可能会展开每个工具并手动花样化它以修复此问题。这个行动会占用你许多名贵的时间。因此，你可以使用JSON Formatter & Validator工具，并简朴地插入缩小JSON和获得一个正确的花样化版本作为输出。这个工具还可以验证JSON是否切合RFC尺度。

Sentry一旦你公布了你的应用法式，它将会运行在一系列的设备上。在任何软件开发生命周期中，测试阶段都是作为一个尺度历程实现的。该阶段包罗单元测试、系统测试、集成测试等。

但你总是有可能错过一个bug并进入生产情况。部署之后，可能直到有人告诉你之前，你都不会发现有任何BUG的存在。终端用户很少会通过提供的支持电子邮件陈诉错误，这就是Sentry发挥作用的地方。Sentry等基于云的错误记载系统可以资助你记载错误实例，纵然在部署之后也是如此，同时还可以为你提供一个全面的解决方案，其中涵盖了大多数可用的框架。

JSHint这是一个在JS代码中检测错误和潜在问题的工具,静态代码分析工具(如JSHint)可以资助开发人员发现很难发现的问题。JSHint扫描一个用JavaScript编写的法式，并陈诉常见的错误和潜在的bug。

潜在的问题可能是语法错误、隐式类型转换导致的错误、泄漏变量或其他完全的问题。下面是一个示例函数，我用它来检察JSHint的运行情况。

BrowserStackBrowserStack是一组工具，可以资助你模拟用户所履历错误简直切情况。设备+操作系统+浏览器是一个很是大的组合，这时这个工具的使用就显得十分须要了。辅助使用Sentry等错误记载工具，你可以充实发挥该工具的作用。当你记载一个错误时，可以引用情况并在BrowserStack中重新建立它来重现准确的场景。

另外他们为自由职业者提供较低的价钱，并为开源项目提供免费许可证。写在最后：以上是我必用的前端调试工具列表。如果你有更多更好的建议，可以在评论中告诉我哦。

本文来源：海德体育-www.yinuomenchuang.com