如果你從事的是前端開發(fā)，就應(yīng)該能理解調(diào)試代碼還是很有難度的。特別是對(duì)于JavaScript，一個(gè)小錯(cuò)誤有時(shí)會(huì)花費(fèi)數(shù)小時(shí)來調(diào)試。對(duì)于不同的瀏覽器、操作系統(tǒng)和設(shè)備，錯(cuò)誤又是不可避免的。

本文主要列出一些調(diào)試工具，你們可以自己根據(jù)情況來選擇。

Web瀏覽器中的開發(fā)工具

任何現(xiàn)代的 Web 瀏覽器都配有功能強(qiáng)大的工具來調(diào)試應(yīng)用程序。如使用控制臺(tái)語句cconsole.log()，使用alert()的彈出窗口，還可以使用debugger語句暫停代碼執(zhí)行，這些對(duì)于我們的調(diào)試都很有幫助。

我們還可以使用網(wǎng)絡(luò)檢查器或CSS樣式檢查器讓調(diào)試變得更輕松流暢。

任何現(xiàn)代網(wǎng)絡(luò)瀏覽器都配備了強(qiáng)大的工具來幫助調(diào)試您的應(yīng)用程序。它可以簡單到使用console.log()的控制臺(tái)語句，使用alert()的彈出窗口，甚至使用調(diào)試器語句暫停代碼執(zhí)行。這些工具對(duì)我們的調(diào)試任務(wù)非常有幫助，尤其是調(diào)試器語句。

Postman

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

幾乎所有前端應(yīng)用程序都發(fā)送和接收J(rèn)SON響應(yīng)和請(qǐng)求。應(yīng)用程序通過請(qǐng)求 API 可以做很多事情，例如身份驗(yàn)證，用戶數(shù)據(jù)傳輸，甚至是一些簡單的事情，例如獲取所在位置的當(dāng)前天氣。

Postman 是調(diào)試接口的最佳工具之一。它適用于 MacOS，Windows 和Linux的系統(tǒng)， 可以快速輕松地直接發(fā)送REST，SOAP和GraphQL請(qǐng)求。

使用 Postman，我們可以調(diào)整請(qǐng)求，分析響應(yīng)和調(diào)試問題。當(dāng)不確定問題出在前端還是后端時(shí)，這是很有幫助的。

CSS Lint

地址：http://csslint.net/

CSSLint 是一個(gè)用來幫你找出 CSS 代碼中問題的工具，它可做基本的語法檢查以及使用一套預(yù)設(shè)的規(guī)則來檢查代碼中的問題，規(guī)則是可以擴(kuò)展的。

JSON Formatter & Validator

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

在未格式化的 JSON 中很難發(fā)現(xiàn)語法錯(cuò)誤或鍵值不正確的鍵，因?yàn)樗茈y讀取。對(duì)于 壓縮的 JSON 文件，要發(fā)現(xiàn)其中的錯(cuò)誤是比較難的，所以我們需要一種格式化的工具。

JSON Formatter & Validator tool 就是一個(gè)格式化 JSON 的工具，只需輸入壓縮的JSON格式，就能獲得正確格式。該工具也可以驗(yàn)證 JSON 到 RFC 標(biāo)準(zhǔn)。

Sentry

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

無論測(cè)試如何完善的程序，bug總是免不了會(huì)存在的，有些bug不是每次都會(huì)出現(xiàn)，測(cè)試時(shí)運(yùn)行好好的代碼可能在某個(gè)用戶使用時(shí)就歇菜了，可是當(dāng)程序在用戶面前崩潰時(shí)，你是看不到錯(cuò)誤的，當(dāng)然你會(huì)說:”Hey, 我有記日志呢”。但是說實(shí)話，程序每天每時(shí)都在產(chǎn)生大量的日志，而且分布在各個(gè)服務(wù)器上，并且如果你有多個(gè)服務(wù)在維護(hù)的話，日志的數(shù)量之多你是看不過來的吧。等到某天某個(gè)用戶實(shí)在受不了了，打電話來咆哮的時(shí)候，你再去找日志你又會(huì)發(fā)現(xiàn)日志其實(shí)沒什么用：缺少上下文，不知道用戶什么操作導(dǎo)致的異常，異常太多(從不看日志的緣故)不知如何下手 等等。

Sentry就是來幫我們解決這個(gè)問題的，它是是一個(gè)實(shí)時(shí)事件日志記錄和聚合平臺(tái)。它專門用于監(jiān)視錯(cuò)誤和提取執(zhí)行適當(dāng)?shù)氖潞蟛僮魉璧乃行畔? 而無需使用標(biāo)準(zhǔn)用戶反饋循環(huán)的任何麻煩。

Sentry是一個(gè)日志平臺(tái), 它分為客戶端和服務(wù)端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應(yīng)用程序中間，程序出現(xiàn)異常就向服務(wù)端發(fā)送消息，服務(wù)端將消息記錄到數(shù)據(jù)庫中并提供一個(gè)web節(jié)目方便查看。Sentry 由 python 編寫，源碼開放，性能卓越，易于擴(kuò)展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等。

JSHint

地址：https://jshint.com/

JSHint 是一個(gè) Javascript 代碼分析檢測(cè)工具，不僅可以幫助我們檢測(cè)到 JS 代碼錯(cuò)誤和潛在問題，也能幫助我們規(guī)范代碼開發(fā)。

JSHint 掃描一個(gè)用JavaScript編寫的程序，并報(bào)告常見的錯(cuò)誤和潛在的bug。潛在的問題可能是語法錯(cuò)誤、隱式類型轉(zhuǎn)換導(dǎo)致的錯(cuò)誤、泄漏變量或其他完全的問題。

JSHint 掃描用 JavaScript 編寫的程序，并報(bào)告常見的錯(cuò)誤和潛在的錯(cuò)誤。潛在的問題可能是語法錯(cuò)誤，由于隱式類型轉(zhuǎn)換導(dǎo)致的錯(cuò)誤，變量泄漏或其他完全原因。

下面是一個(gè)示例函數(shù)，使用它來查看 JSHint 的運(yùn)行情況:

BrowserStack

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

現(xiàn)在擁有各自內(nèi)核的瀏覽器越來越多，各自的特性也千差萬別。如果作為一個(gè)前端攻城師想要檢測(cè)網(wǎng)站在不同的操作系統(tǒng)和移動(dòng)平臺(tái)下的各種瀏覽器的兼容性，那是相當(dāng)痛苦不堪的?？吹接性谧约弘娔X上裝虛擬機(jī)配置各種環(huán)境，有自己的電腦上組建好這樣的環(huán)境，然后一一測(cè)試，可是人的精力畢竟有限，我們沒法在同一臺(tái)電腦上裝那么多系統(tǒng)，那么多瀏覽器的。幸好出了個(gè) BrowserStack 是前端的福音呀。

BrowserStack 是一款提供網(wǎng)站瀏覽器兼容性測(cè)試的在線云端測(cè)試工具，從而開發(fā)測(cè)試人員不必再準(zhǔn)備很多虛擬機(jī)或者手機(jī)模擬器。

BrowserStack 是一個(gè)提供網(wǎng)站瀏覽器兼容性測(cè)試的在線云端應(yīng)用，支持9大操作系統(tǒng)上的100多款瀏覽器。支持本地測(cè)試，支持與Visual Studio集成?；蛘吣阋部梢灾苯忧巴?http://modern.ie 在線測(cè)試，現(xiàn)在注冊(cè)可以免費(fèi)試用三個(gè)月，三個(gè)月后是收費(fèi)的，三個(gè)月后要是你想用又不想付費(fèi)作為天朝的開發(fā)者你懂得。

作者：Mahdhi Rezvi 譯者：前端小智 來源：medium

原文：https://medium.com/better-programming/7-must-use-front-end-debugging-tools-53ab1807ad68

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。