vue 浏览器调试 样式如何定位样式_浏览器断点调试-程序员的必修课
一、源碼調(diào)試/debugger方法
1.1控制臺(tái)調(diào)試按鈕介紹
Resume script execution恢復(fù)斷點(diǎn)調(diào)試、常用在一個(gè)方法調(diào)用多個(gè)js文件(適用冗長js代碼使用)、點(diǎn)擊這個(gè)會(huì)直接跳轉(zhuǎn)到下一個(gè)斷點(diǎn)(逐過程執(zhí)行)
Pause script execution停止斷點(diǎn)調(diào)試
step over next function call逐語句執(zhí)行，每點(diǎn)擊它一次，js語句就會(huì)往后執(zhí)行一句，快捷鍵-F10
step into next function call進(jìn)入函數(shù)內(nèi)部、單步執(zhí)行下一個(gè)函數(shù)調(diào)用
step out of current function call跳出當(dāng)前函數(shù)調(diào)用
Step快捷F9
停用斷點(diǎn)Deactive breakpoints
暫停斷點(diǎn)Pause on exceptions
彩蛋：在控制臺(tái)中輸入$(this)，即可得到我們所點(diǎn)擊的對(duì)象——加載更多按鈕元素。
注：進(jìn)入jquery、vue這樣的文件時(shí)，用 加速跳出，同時(shí)注意到最好慢點(diǎn)點(diǎn)擊。不然出來之后點(diǎn)快了容易跳過要進(jìn)入的函數(shù)。跳出來之后應(yīng)繼續(xù)使用進(jìn)入函數(shù)按鈕跳進(jìn)函數(shù)內(nèi)部看信息。
1.2 逐過程執(zhí)行和逐語句執(zhí)行區(qū)別詳解
假設(shè)上圖我只在227行打了個(gè)斷點(diǎn)，然后一直點(diǎn)擊逐語句執(zhí)行”按鈕到229行，這時(shí)如果再點(diǎn)擊一次“逐語句執(zhí)行”
則會(huì)進(jìn)入下圖的js里：
我們不可能一直使用“逐語句執(zhí)行”按鈕，這樣你會(huì)發(fā)現(xiàn)你按了大半天還在庫文件里面繞，那就該用“逐過程執(zhí)行”按鈕。
我除了在227行打了一個(gè)斷點(diǎn)，同時(shí)還在237行打了一個(gè)斷點(diǎn)，當(dāng)我們運(yùn)行到229行時(shí)，直接單擊“逐過程執(zhí)行”按鈕， js直接跳過了庫文件，運(yùn)行到了237行。
二、打斷點(diǎn)的情況調(diào)試
2.1操作方法
1.在谷歌瀏覽器中用Command+option+F打開全局搜索，然后搜索對(duì)應(yīng)頁面/事件。
技巧：要看某個(gè)函數(shù)首先找到這個(gè)函數(shù)的入口，最好先找入口事件，從頁面最初渲染的函數(shù)進(jìn)去才好一步步往下走。打斷點(diǎn)時(shí)在函數(shù)內(nèi)部打，不要在外部打斷點(diǎn)！
初始化函數(shù)常為生成一個(gè)DOM...
全局搜索對(duì)應(yīng)函數(shù)之后，直接點(diǎn)進(jìn)去
2.在合適的地方打斷點(diǎn)后，即可刷新頁面了。注意是 狀態(tài)下
3.1會(huì)自動(dòng)跳到函數(shù)內(nèi)部，然后通過 按鈕不斷按函數(shù)順序執(zhí)行，每次執(zhí)行函數(shù)之后都能看到相應(yīng)函數(shù)的含義，直到函數(shù)執(zhí)行結(jié)束。
3.2有時(shí)候刷新無效，本質(zhì)是斷點(diǎn)沒有觸發(fā)事件，那個(gè)事件可以是鼠標(biāo)移入移出點(diǎn)擊或點(diǎn)擊事件等，所有要在界面中進(jìn)行對(duì)應(yīng)操作就會(huì)跳入斷點(diǎn)調(diào)試階段。當(dāng)然也可能上一個(gè)函數(shù)有錯(cuò)誤，導(dǎo)致程序不能執(zhí)行到斷點(diǎn)位置。
4.執(zhí)行到最底層時(shí)：執(zhí)行欄顯示為灰色無法點(diǎn)擊
2.2 斷點(diǎn)調(diào)試過程的收益
1.具體看某個(gè)變量的系數(shù)就把鼠標(biāo)放在上面
2.可看每次過程執(zhí)行之后對(duì)應(yīng)的提示
2.3 斷點(diǎn)調(diào)試案例
法一
1.在227行打上斷點(diǎn)
2.點(diǎn)擊加載更多按鈕
3.單擊一次“逐語句執(zhí)行“按鈕，js代碼執(zhí)行到228行
4.用鼠標(biāo)選中i++
5.選中以后，鼠標(biāo)懸浮在目標(biāo)上方，你就看到上圖的結(jié)果。
法二、在控制臺(tái)輸出i的值
1.按照第一種方法執(zhí)行到第三步
2.打開和sources同一級(jí)欄目的console
3.在console下方的輸入欄里輸入i
4.按enter回車鍵即可
三、不打斷點(diǎn)調(diào)試
1.沒打斷點(diǎn)的情況下，點(diǎn)擊入口函數(shù)，再點(diǎn)擊 按鈕進(jìn)入了函數(shù)內(nèi)部。
2.通過 按鈕不斷按函數(shù)順序執(zhí)行，每次執(zhí)行函數(shù)之后都能看到相應(yīng)函數(shù)的含義，直到函數(shù)執(zhí)行結(jié)束。
四、總結(jié)
4.1 有無打斷點(diǎn)的區(qū)別
1.沒打斷點(diǎn)時(shí)在console輸入i，i只是一個(gè)局部變量，瀏覽器會(huì)把所有的js全部解析完成，console并不能訪問到局部變量，只能訪問到全局變量，所以console會(huì)報(bào)錯(cuò)i未定義。
2.當(dāng)js打上斷點(diǎn)時(shí)，console解析到了局部變量i所在的函數(shù)內(nèi)，這時(shí)i能夠被訪問。
五、斷點(diǎn)調(diào)試實(shí)戰(zhàn)
小程序斷點(diǎn)調(diào)試實(shí)例(重點(diǎn)介紹--打斷點(diǎn)的思路)
1.首先看動(dòng)態(tài)效果圖、發(fā)現(xiàn)一個(gè)規(guī)律：第一次點(diǎn)擊的新聞詳情沒問題，控制臺(tái)正常輸出對(duì)應(yīng)的index，但是點(diǎn)擊的第二個(gè)卻會(huì)報(bào)錯(cuò)
。VM207:1 Setting data field "collected" to undefined is invalid.
2.全局搜索找到collected相關(guān)的代碼片段
3.通過打斷點(diǎn)找問題的方法很重要
4.分別在三處不同地點(diǎn)打斷點(diǎn)看效果
第一處：頁面初始化onLoad函數(shù)中(制作步驟效果、分析效果)
第二處：(制作步驟效果、分析效果)
進(jìn)入調(diào)試發(fā)現(xiàn)postCollected=undefined，這就是問題所在。
第三處：收藏按鈕函數(shù)中(制作步驟效果、分析效果)
4.分析問題：
postsCollected是一個(gè)緩存數(shù)組，其中每一個(gè)新聞的index數(shù)據(jù)在緩存狀態(tài)中是獨(dú)立的
使用if(postsCollected)會(huì)導(dǎo)致第一次點(diǎn)擊后緩存里面就被加入一個(gè)index的數(shù)值了，那么點(diǎn)擊另外一條新聞之前postsCollected就已經(jīng)為真了。
六、注意事項(xiàng)
Debugger實(shí)戰(zhàn)篇
Bug
復(fù)現(xiàn)Bug
配置界面，添加數(shù)值統(tǒng)計(jì)樣式，然后點(diǎn)擊背景顏色更換。觀察DOM結(jié)構(gòu)變化。
定位Bug對(duì)應(yīng)的函數(shù)方法
1.問同事這個(gè)功能寫的對(duì)應(yīng)頁面，頁面有功能注釋的話就搜索這個(gè)功能的注釋，這里通過搜索“數(shù)值統(tǒng)計(jì)”找到了相應(yīng)功能的函數(shù)。
2.沒人知道頁面的情況看這個(gè)頁面結(jié)構(gòu)，通過每一步操作頁面結(jié)構(gòu)的HTML變化來判斷這個(gè)功能的觸發(fā)引起了哪些頁面結(jié)構(gòu)的變化，通過變化產(chǎn)生或固有的id和class在項(xiàng)目中全局搜索，看到相關(guān)函數(shù)功能就在這個(gè)函數(shù)內(nèi)部debugger;
3.如果不在項(xiàng)目中全局搜索id和class，在開發(fā)者模式-Source-JS文件夾下的每一個(gè)JS文件中找功能函數(shù)
4.debugger之后點(diǎn)擊觸發(fā)這個(gè)界面上功能的位置，看debugger會(huì)不會(huì)跳進(jìn)去，不能跳進(jìn)去就在另外一個(gè)有可能的功能函數(shù)中debugger;
補(bǔ)充：實(shí)在沒有頭緒時(shí)在開發(fā)者模式-Source-JS文件夾下的每一個(gè)JS文件中搜索相應(yīng)函數(shù)做判斷，找到關(guān)鍵函數(shù)就在其內(nèi)部打斷點(diǎn)，看是否有效果。
看代碼在開發(fā)者模式中看會(huì)快很多，也方便做筆記。
注意：
debugger后點(diǎn)擊對(duì)應(yīng)樣式，如果樣式在界面沒出來，就點(diǎn)擊 為 復(fù)原界面樣式
在頁面中先點(diǎn)出對(duì)應(yīng)面貌
再進(jìn)入控制臺(tái)，點(diǎn)擊對(duì)應(yīng)debugger的功能位置就會(huì)跳入debugger;
比如這個(gè)例子中是點(diǎn)擊對(duì)應(yīng)的背景顏色更改才觸發(fā)這個(gè)功能；
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的vue 浏览器调试 样式如何定位样式_浏览器断点调试-程序员的必修课的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
