本文轉載自公眾號“讀芯術”(ID：AI_Discovery)

應用程序漏洞，前端調試人員的禿頭之源。如果您一直從事前端工作，就會知道修復應用程序漏洞有多么困難。

特別是使用JavaScript時，一個很小錯誤有時可能需要幾個小時來調試。然而，對于不同的瀏覽器、操作系統和設備而言，存在漏洞是不可避免的。

針對Bug的工具很多，但不是每一個都能稱得上是“Bug的噩夢”，有些工具的性能比其他工具更好。本文就將為你介紹這些發現、診斷和修復漏洞的小幫手。

[[328792]]

網頁瀏覽器的開發人員工具

任何現代的網頁瀏覽器都配備了強大的工具來幫助你調試應用程序。它可以簡單到使用console.log()的控制臺語句、使用alert()的彈出窗口，甚至使用調試器語句來暫停代碼執行。這些工具在調試任務中非常有用，特別是調試器語句。

還可以使用network inspector或CSS styles inspector使調試更加容易和順暢。你可以簡單地在谷歌上進行搜索，了解一下有關瀏覽器的開發人員工具的更多信息。

CSS Lint

CSS Lint工具不僅可以用來驗證代碼，還可以用來選擇要檢測的錯誤和警告。它執行基本的語法檢查，并將一個規則組應用于代碼，查找存在問題的模式或低效跡象的代碼。

JSON格式化和校驗工具

在無格式JSON中，我們很難發現語法錯誤或鍵值不正確的情況，因為這很難閱讀。當JSON文件缺少行返回和空格時，在壓縮的JSON文件中讀取和發現錯誤則更有挑戰性。

你需要能夠快速掃描該對象并檢查格式或內容中的錯誤。如果展開每個對象并手動格式化以修復此問題。這個過程會占用你很多寶貴的時間。

你可以使用JSON格式化和校驗工具，簡單地插入經過壓縮的JSON并獲得正確格式的版本作為輸出。該工具還可以根據RFC標準來驗證JSON。

Postman

幾乎所有前端應用程序都會發送和接收JSON的響應和請求。應用程序與一個應用程序接口連接，這個接口可以做許多事情，例如身份驗證、用戶數據傳輸，甚至一些簡單的事情，例如獲取您位置的當前天氣信息。

Postman是最好的JS工具之一，用于調試請求和響應。它也為macOS系統、Windows系統和Linux系統提供軟件。它能快速、簡單地直接發送REST、SOAP和GraphQL請求。

使用Postman，可以調整請求、分析響應和修復漏洞問題。當不確定問題出在前端還是后端時，它很有用。

Sentry

一旦發布了某個應用程序，它就會在各種設備上運行。在任何軟件開發生命周期中，測試階段都是作為標準過程實現的。此階段包括單元測試、系統測試、集成測試等。

但是，你總是有可能忽視掉某個漏洞，并讓其繼續生產。即使在發布之后，如果沒有任何人通知，你也不會意識到任何還存在的漏洞。終端用戶很少會通過已提供的電子郵件報告相關漏洞。這就是Sentry發揮作用的地方。

基于云的錯誤日志系統(如Sentry)可以幫助您記錄錯誤實例，即使在發布之后也是如此。Sentry提供了涵蓋大多數可用框架的全面解決方案。

BrowserStack

BrowserStack可以幫助模擬用戶遇到錯誤時的準確環境。設備+操作系統+瀏覽器的強大組合工具絕對是必備的。您可以通過使用Sentry之類的錯誤日志工具來充分利用它。

當您記錄錯誤時，您可以通過引用環境并在BrowserStack中重新創建它來重現準確的場景。

他們為自由職業者提供更低的價格，為開源項目提供免費許可。

JSHint

這是一個檢測JS代碼中的錯誤和潛在問題的靜態代碼分析工具，可以幫助開發人員發現很難發現的問題。

JSHint掃描用JavaScript編寫的程序，報告常見的錯誤和潛在的漏洞，可能是語法錯誤、隱式類型轉換導致的漏洞、泄漏變量或其他一些問題。

下面是我用來觀察JSHint運行的一個示例函數：

這些對付漏洞的神器，快點拿小本本記下來吧!