一、源碼調試/debugger方法

1.1控制臺調試按鈕介紹

Resume script execution恢復斷點調試、常用在一個方法調用多個js文件(適用冗長js代碼使用)、點擊這個會直接跳轉到下一個斷點(逐過程執行)

Pause script execution停止斷點調試

step over next function call逐語句執行，每點擊它一次，js語句就會往后執行一句，快捷鍵-F10

step into next function call進入函數內部、單步執行下一個函數調用

step out of current function call跳出當前函數調用

Step快捷F9

停用斷點Deactive breakpoints

暫停斷點Pause on exceptions

彩蛋：在控制臺中輸入$(this)，即可得到我們所點擊的對象——加載更多按鈕元素。

注：進入jquery、vue這樣的文件時，用 加速跳出，同時注意到最好慢點點擊。不然出來之后點快了容易跳過要進入的函數。跳出來之后應繼續使用進入函數按鈕跳進函數內部看信息。

1.2 逐過程執行和逐語句執行區別詳解

假設上圖我只在227行打了個斷點，然后一直點擊逐語句執行”按鈕到229行，這時如果再點擊一次“逐語句執行”

則會進入下圖的js里：

我們不可能一直使用“逐語句執行”按鈕，這樣你會發現你按了大半天還在庫文件里面繞，那就該用“逐過程執行”按鈕。

我除了在227行打了一個斷點，同時還在237行打了一個斷點，當我們運行到229行時，直接單擊“逐過程執行”按鈕， js直接跳過了庫文件，運行到了237行。

二、打斷點的情況調試

2.1操作方法

1.在谷歌瀏覽器中用Command+option+F打開全局搜索，然后搜索對應頁面/事件。

技巧：要看某個函數首先找到這個函數的入口，最好先找入口事件，從頁面最初渲染的函數進去才好一步步往下走。打斷點時在函數內部打，不要在外部打斷點！

初始化函數常為生成一個DOM...

全局搜索對應函數之后，直接點進去

2.在合適的地方打斷點后，即可刷新頁面了。注意是 狀態下

3.1會自動跳到函數內部，然后通過 按鈕不斷按函數順序執行，每次執行函數之后都能看到相應函數的含義，直到函數執行結束。

3.2有時候刷新無效，本質是斷點沒有觸發事件，那個事件可以是鼠標移入移出點擊或點擊事件等，所有要在界面中進行對應操作就會跳入斷點調試階段。當然也可能上一個函數有錯誤，導致程序不能執行到斷點位置。

4.執行到最底層時：執行欄顯示為灰色無法點擊

2.2 斷點調試過程的收益

1.具體看某個變量的系數就把鼠標放在上面

2.可看每次過程執行之后對應的提示

2.3 斷點調試案例

法一

1.在227行打上斷點

2.點擊加載更多按鈕

3.單擊一次“逐語句執行“按鈕，js代碼執行到228行

4.用鼠標選中i++

5.選中以后，鼠標懸浮在目標上方，你就看到上圖的結果。

法二、在控制臺輸出i的值

1.按照第一種方法執行到第三步

2.打開和sources同一級欄目的console

3.在console下方的輸入欄里輸入i

4.按enter回車鍵即可

三、不打斷點調試

1.沒打斷點的情況下，點擊入口函數，再點擊 按鈕進入了函數內部。

2.通過 按鈕不斷按函數順序執行，每次執行函數之后都能看到相應函數的含義，直到函數執行結束。

四、總結

4.1 有無打斷點的區別

1.沒打斷點時在console輸入i，i只是一個局部變量，瀏覽器會把所有的js全部解析完成，console并不能訪問到局部變量，只能訪問到全局變量，所以console會報錯i未定義。

2.當js打上斷點時，console解析到了局部變量i所在的函數內，這時i能夠被訪問。

五、斷點調試實戰

小程序斷點調試實例(重點介紹--打斷點的思路)

1.首先看動態效果圖、發現一個規律：第一次點擊的新聞詳情沒問題，控制臺正常輸出對應的index，但是點擊的第二個卻會報錯

。VM207:1 Setting data field "collected" to undefined is invalid.

2.全局搜索找到collected相關的代碼片段

3.通過打斷點找問題的方法很重要

4.分別在三處不同地點打斷點看效果

第一處：頁面初始化onLoad函數中(制作步驟效果、分析效果)

第二處：(制作步驟效果、分析效果)

進入調試發現postCollected=undefined，這就是問題所在。

第三處：收藏按鈕函數中(制作步驟效果、分析效果)

4.分析問題：

postsCollected是一個緩存數組，其中每一個新聞的index數據在緩存狀態中是獨立的

使用if(postsCollected)會導致第一次點擊后緩存里面就被加入一個index的數值了，那么點擊另外一條新聞之前postsCollected就已經為真了。

六、注意事項

Debugger實戰篇

Bug

復現Bug

配置界面，添加數值統計樣式，然后點擊背景顏色更換。觀察DOM結構變化。

定位Bug對應的函數方法

1.問同事這個功能寫的對應頁面，頁面有功能注釋的話就搜索這個功能的注釋，這里通過搜索“數值統計”找到了相應功能的函數。

2.沒人知道頁面的情況看這個頁面結構，通過每一步操作頁面結構的HTML變化來判斷這個功能的觸發引起了哪些頁面結構的變化，通過變化產生或固有的id和class在項目中全局搜索，看到相關函數功能就在這個函數內部debugger;

3.如果不在項目中全局搜索id和class，在開發者模式-Source-JS文件夾下的每一個JS文件中找功能函數

4.debugger之后點擊觸發這個界面上功能的位置，看debugger會不會跳進去，不能跳進去就在另外一個有可能的功能函數中debugger;

補充：實在沒有頭緒時在開發者模式-Source-JS文件夾下的每一個JS文件中搜索相應函數做判斷，找到關鍵函數就在其內部打斷點，看是否有效果。

看代碼在開發者模式中看會快很多，也方便做筆記。

注意：

debugger后點擊對應樣式，如果樣式在界面沒出來，就點擊 為 復原界面樣式

在頁面中先點出對應面貌

再進入控制臺，點擊對應debugger的功能位置就會跳入debugger;

比如這個例子中是點擊對應的背景顏色更改才觸發這個功能；

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue 浏览器调试 样式如何定位样式_浏览器断点调试-程序员的必修课的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。