目錄
第一章 前言
第二章 解決bug的方法
2.1 百度
2.2 有道翻譯
2.3?debugger
2.4 console.log 日志打印
2.5 請求體是否攜帶參數(shù)
2.6 注釋頁面渲染代碼
2.7 其他
第三章 尾聲
備注：該文章只是本人在工作/學(xué)習(xí)中常用的幾種方法，如果有不對大家“胃口”的地方，勿噴，可以在評論區(qū)提供新的方法，一起學(xué)習(xí)?。。?/strong>
第一章 前言
? ? ? ? 原因：bug對于我們前端來說在很多時候都是存在的，為什么這么說呢，因為我們前端用到的東西都比較雜亂，而且有的bug時在某些情況下才出現(xiàn)的，所以需要我們不定時的解決；我們會用到各種各樣的組件不同的方法、原生js、數(shù)據(jù)類型、獲取數(shù)據(jù)的時機、邏輯結(jié)構(gòu)、渲染層等等都會是我們最后問題出現(xiàn)的地方。那我們需要怎么定位問題呢，接下來看看我的幾個方案，如果你也是新手，或許也會有一定的收獲?。?/strong>
第二章 解決bug的方法
2.1 百度
? ? ? ? 別笑，百度對于我們程序員來說也是一個工具，我們可以將報的錯去百度上搜索，肯定會有人出現(xiàn)過類似的情況，那么我們就可以大致定位到在哪里出現(xiàn)的問題。
2.2 有道翻譯
? ? ? ? 為什么要用到有道翻譯呢，有的時候百度上的結(jié)果不一定對我們有用，那么我們在檢查bug之前必須知道這個報錯的大致意思是什么，才能方便我們定位
2.3?debugger
? ? ? ? 在我們想要打斷點的代碼后面寫debugger，然后我們在瀏覽器調(diào)試代碼，一步一步調(diào)試，然后看代碼的那一塊邏輯出現(xiàn)的問問題 （對于新手來說個人不是很推薦這個方法，需要耐心，調(diào)試過程中進入到了一些底層代碼的時候我們會不知所措，但也是一種方法吧）
- 想打斷點的代碼后面寫debugger
- ?瀏覽器上運行，注意要刷新瀏覽器
?留意代碼執(zhí)行順序：
2.4 console.log 日志打印
????????該方法不管是對于新手還是工作好幾年的人來說都是一個解決bug很方便的方法，很友好，通過打印結(jié)果來定位我們的代碼邏輯是在哪個點、哪一塊出現(xiàn)問題了。養(yǎng)成console.log打印日志的習(xí)慣，雖然麻煩在之后軟件發(fā)行的過程中我們需要刪除，但確實很好用。
例子：
?
2.5 請求體是否攜帶參數(shù)
? ? ? ? ?前面的方法基本上都是針對我們前端自身的，該方法就是針對我們與后端對接的時候了，我們傳參的時候要有攜帶的請求頭、請求體、Content-Type，看看是否都攜帶完全了、正確了，當(dāng)我們這些參數(shù)都攜帶上了然后報錯，再看是不是后端的問題
- 先了解一下用到的幾個模塊
- ?掌握響應(yīng)標(biāo)頭（理解框的這幾條就夠了）
- ?掌握請求標(biāo)頭（理解框的這幾條就夠了）
- ?掌握怎么看載荷（也就是請求攜帶的參數(shù)）
- 預(yù)覽和響應(yīng)都是后端給我們返回的數(shù)據(jù)（看其中一個就行?）
?
用響應(yīng)數(shù)據(jù)的時候，給大家一個看后端返回的數(shù)據(jù)結(jié)構(gòu)鏈接，很實用
JSON在線校驗格式化工具（Be JSON）
- ?必須知道的幾個請求數(shù)據(jù)報錯的狀態(tài)碼
200 ：這是一個最常見的狀態(tài)碼, 表示訪問成功
301 ：永久性重定向（被請求的資源已永久移動到新位置，重新定位路徑）
302 ：臨時重定向
401 ：未經(jīng)授權(quán)
403 ：表示訪問被拒絕. 有的頁面需要用戶具有一定的權(quán)限才能訪問(登陸后才能訪問)
404 ：沒有找到資源
405 ：方法不支持，服務(wù)器列表不包含請求方法
500 ：服務(wù)器內(nèi)部錯誤，一般是服務(wù)端出錯
----- 詳細(xì)可看我的另一個文章
AJAX及其相關(guān)知識應(yīng)用（很詳細(xì)）_ajax中間件_?VE?的博客-CSDN博客
2.6 注釋頁面渲染代碼
????????這個方法整體來說是比繁瑣的，意思就是當(dāng)報的錯不是特別明顯或者是內(nèi)部組件的錯誤，我們?nèi)庋壅也坏綄?yīng)的組件在哪，這個時候，我們把所有的頁面相關(guān)代碼(html)全部注釋掉，肯定就不會報錯了，然后我們再一步一步的展開每一個頁面塊，由父元素到子元素的展示，兄弟元素不影響，一點一點來，當(dāng)展示某一個元素時，控制臺報錯了，那么就說我bug很可能就在這個元素所用到的方法或者父元素用到的方法，我們逐層分析，看是哪一個方法導(dǎo)致的報錯，之后解決它就好了。
我遇到的例子：
看這篇文章：[Vue warn]: You may have an infinite update loop in a component render function_?VE?的博客-CSDN博客
2.7 其他
????????還有一些就是原生js方法的報錯、字符校驗、格式校驗、判斷、組件報錯、數(shù)據(jù)是否沒獲取到、配置問題……這些就需要我們慢慢的積累了。
第三章 尾聲
? ? ? ? 解決bug不是一下兩下我們就能定位到的，需要的是我們的耐心，逐步發(fā)現(xiàn)問題所在，解決問題。我們不是什么都會，是在學(xué)習(xí)中進步，加油吧！！
????????如果有哪位讀者也有什么想提供的方法，歡迎評論區(qū)留言??！文章來源：http://www.zghlxwxcb.cn/news/detail-442957.html
? ? ? ? 最后，給我們程序員一句話：最值得欣的景,其實是自己奮斗的足跡；最值得炫耀的是，我們通過奮斗所獲取的成果??！加油吧，少年！！文章來源地址http://www.zghlxwxcb.cn/news/detail-442957.html
到了這里，關(guān)于前端開發(fā)中，定位bug的幾種常用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
