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