前端！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和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。