本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)

應(yīng)用程序漏洞，前端調(diào)試人員的禿頭之源。如果您一直從事前端工作，就會知道修復(fù)應(yīng)用程序漏洞有多么困難。

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

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

[[328792]]

網(wǎng)頁瀏覽器的開發(fā)人員工具

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

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

CSS Lint

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

JSON格式化和校驗工具

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

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

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

Postman

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

Postman是最好的JS工具之一，用于調(diào)試請求和響應(yīng)。它也為macOS系統(tǒng)、Windows系統(tǒng)和Linux系統(tǒng)提供軟件。它能快速、簡單地直接發(fā)送REST、SOAP和GraphQL請求。

使用Postman，可以調(diào)整請求、分析響應(yīng)和修復(fù)漏洞問題。當不確定問題出在前端還是后端時，它很有用。

Sentry

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

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

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

BrowserStack

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

當您記錄錯誤時，您可以通過引用環(huán)境并在BrowserStack中重新創(chuàng)建它來重現(xiàn)準確的場景。

他們?yōu)樽杂陕殬I(yè)者提供更低的價格，為開源項目提供免費許可。

JSHint

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

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

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

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