建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)
成都創(chuàng)新互聯(lián)公司專注于豐城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供豐城營銷型網(wǎng)站建設(shè)，豐城網(wǎng)站制作、豐城網(wǎng)頁設(shè)計(jì)、豐城網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造豐城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供豐城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
應(yīng)用程序漏洞，前端調(diào)試人員的禿頭之源。如果您一直從事前端工作，就會(huì)知道修復(fù)應(yīng)用程序漏洞有多么困難。
特別是使用JavaScript時(shí)，一個(gè)很小錯(cuò)誤有時(shí)可能需要幾個(gè)小時(shí)來調(diào)試。然而，對(duì)于不同的瀏覽器、操作系統(tǒng)和設(shè)備而言，存在漏洞是不可避免的。
針對(duì)Bug的工具很多，但不是每一個(gè)都能稱得上是“Bug的噩夢(mèng)”，有些工具的性能比其他工具更好。本文就將為你介紹這些發(fā)現(xiàn)、診斷和修復(fù)漏洞的小幫手。
網(wǎng)頁瀏覽器的開發(fā)人員工具
任何現(xiàn)代的網(wǎng)頁瀏覽器都配備了強(qiáng)大的工具來幫助你調(diào)試應(yīng)用程序。它可以簡單到使用console.log()的控制臺(tái)語句、使用alert()的彈出窗口，甚至使用調(diào)試器語句來暫停代碼執(zhí)行。這些工具在調(diào)試任務(wù)中非常有用，特別是調(diào)試器語句。
還可以使用network inspector或CSS styles inspector使調(diào)試更加容易和順暢。你可以簡單地在谷歌上進(jìn)行搜索，了解一下有關(guān)瀏覽器的開發(fā)人員工具的更多信息。
CSS Lint
CSS Lint工具不僅可以用來驗(yàn)證代碼，還可以用來選擇要檢測的錯(cuò)誤和警告。它執(zhí)行基本的語法檢查，并將一個(gè)規(guī)則組應(yīng)用于代碼，查找存在問題的模式或低效跡象的代碼。
JSON格式化和校驗(yàn)工具
在無格式JSON中，我們很難發(fā)現(xiàn)語法錯(cuò)誤或鍵值不正確的情況，因?yàn)檫@很難閱讀。當(dāng)JSON文件缺少行返回和空格時(shí)，在壓縮的JSON文件中讀取和發(fā)現(xiàn)錯(cuò)誤則更有挑戰(zhàn)性。
你需要能夠快速掃描該對(duì)象并檢查格式或內(nèi)容中的錯(cuò)誤。如果展開每個(gè)對(duì)象并手動(dòng)格式化以修復(fù)此問題。這個(gè)過程會(huì)占用你很多寶貴的時(shí)間。
你可以使用JSON格式化和校驗(yàn)工具，簡單地插入經(jīng)過壓縮的JSON并獲得正確格式的版本作為輸出。該工具還可以根據(jù)RFC標(biāo)準(zhǔn)來驗(yàn)證JSON。
Postman
幾乎所有前端應(yīng)用程序都會(huì)發(fā)送和接收J(rèn)SON的響應(yīng)和請(qǐng)求。應(yīng)用程序與一個(gè)應(yīng)用程序接口連接，這個(gè)接口可以做許多事情，例如身份驗(yàn)證、用戶數(shù)據(jù)傳輸，甚至一些簡單的事情，例如獲取您位置的當(dāng)前天氣信息。
Postman是最好的JS工具之一，用于調(diào)試請(qǐng)求和響應(yīng)。它也為macOS系統(tǒng)、Windows系統(tǒng)和Linux系統(tǒng)提供軟件。它能快速、簡單地直接發(fā)送REST、SOAP和GraphQL請(qǐng)求。
使用Postman，可以調(diào)整請(qǐng)求、分析響應(yīng)和修復(fù)漏洞問題。當(dāng)不確定問題出在前端還是后端時(shí)，它很有用。
Sentry
一旦發(fā)布了某個(gè)應(yīng)用程序，它就會(huì)在各種設(shè)備上運(yùn)行。在任何軟件開發(fā)生命周期中，測試階段都是作為標(biāo)準(zhǔn)過程實(shí)現(xiàn)的。此階段包括單元測試、系統(tǒng)測試、集成測試等。
但是，你總是有可能忽視掉某個(gè)漏洞，并讓其繼續(xù)生產(chǎn)。即使在發(fā)布之后，如果沒有任何人通知，你也不會(huì)意識(shí)到任何還存在的漏洞。終端用戶很少會(huì)通過已提供的電子郵件報(bào)告相關(guān)漏洞。這就是Sentry發(fā)揮作用的地方。
基于云的錯(cuò)誤日志系統(tǒng)(如Sentry)可以幫助您記錄錯(cuò)誤實(shí)例，即使在發(fā)布之后也是如此。Sentry提供了涵蓋大多數(shù)可用框架的全面解決方案。
Sentry適用的語言和框架
BrowserStack
BrowserStack可以幫助模擬用戶遇到錯(cuò)誤時(shí)的準(zhǔn)確環(huán)境。設(shè)備+操作系統(tǒng)+瀏覽器的強(qiáng)大組合工具絕對(duì)是必備的。您可以通過使用Sentry之類的錯(cuò)誤日志工具來充分利用它。
當(dāng)您記錄錯(cuò)誤時(shí)，您可以通過引用環(huán)境并在BrowserStack中重新創(chuàng)建它來重現(xiàn)準(zhǔn)確的場景。
他們?yōu)樽杂陕殬I(yè)者提供更低的價(jià)格，為開源項(xiàng)目提供免費(fèi)許可。
JSHint
這是一個(gè)檢測JS代碼中的錯(cuò)誤和潛在問題的靜態(tài)代碼分析工具，可以幫助開發(fā)人員發(fā)現(xiàn)很難發(fā)現(xiàn)的問題。
JSHint掃描用JavaScript編寫的程序，報(bào)告常見的錯(cuò)誤和潛在的漏洞，可能是語法錯(cuò)誤、隱式類型轉(zhuǎn)換導(dǎo)致的漏洞、泄漏變量或其他一些問題。
下面是我用來觀察JSHint運(yùn)行的一個(gè)示例函數(shù)：
這些對(duì)付漏洞的神器，快點(diǎn)拿小本本記下來吧!
本文標(biāo)題：Bug的噩夢(mèng)：前端調(diào)試必備的7個(gè)“大殺器”
鏈接分享：http://m.5511xx.com/article/djhdiep.html
