【Vue原理】看Vue源碼，不會調(diào)試不行啊

avwu 發(fā)布于2019-08-23 18:20 / 3148人閱讀

摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理學(xué)會調(diào)試源碼調(diào)試是程序猿必備的技

寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者拉到下面關(guān)注公眾號也可以吧

【Vue原理】學(xué)會調(diào)試Vue源碼

調(diào)試是程序猿必備的技能，如果你不會調(diào)試，你的下場就是.........

嗯，一樣可以拿高工資............

不過據(jù)我了解，連張鑫旭大佬都喜歡使用 console.log 調(diào)試，但是你以為別人不用，你就以為別人不會嗎，你真的太天真了....

下面的評論也是...看來同是天涯淪落人

我在項(xiàng)目中也是使用 console.log 調(diào)試啊，但是閱讀源碼不一樣啊，你試試一直用 console.log 調(diào)試，搞不死你

好了，進(jìn)入正題....

進(jìn)入VSCode調(diào)試界面

是是是，讓我們把眼睛移動(dòng)到 VSCODE 左邊活動(dòng)欄這邊

1、有個(gè)小蟲，點(diǎn)擊進(jìn)入調(diào)試界面

2、或者按快捷鍵， ctrl+shift+D

錯(cuò)！其實(shí)第一步你應(yīng)該打開 VSCode

創(chuàng)建調(diào)試配置文件

點(diǎn)擊這個(gè)小設(shè)置按鈕

之后，會彈窗，讓你選擇調(diào)試的類型，我們選擇 Chrome ，騷年

Duang 的一聲，你會發(fā)現(xiàn)自動(dòng)生成了一個(gè)配置文件

然后這一步你就成功了唄....到下一步了

配置調(diào)試配置文件

配置文件有很多選項(xiàng)，我只給出最簡單的可以使用的版本

{    
    "version": "0.2.0",    
    "configurations": [
        {            
            "type": "chrome",            
            "request": "launch",            
            "name": "調(diào)試 Vue 的調(diào)用走向",            
            "file": "${workspaceRoot}/index.html",
        }
    ]
}

解釋一下 ( ? ?ω?? )?

type

是你調(diào)試類型，你調(diào)試的是網(wǎng)頁，還是調(diào)試 node。

現(xiàn)在我們調(diào)試網(wǎng)頁，所以選擇 Chrome

name

調(diào)試名稱，隨你起名字，起個(gè) xxxxxx

file

本地文件路徑，調(diào)試本地文件（ workspaceRoot 是項(xiàng)目根目錄，以此來確定你的 html 調(diào)試頁面相對路徑）

開始調(diào)試

打斷點(diǎn)

在文件的序號一欄的左邊，可以標(biāo)記紅色斷點(diǎn)

然后可以在序號欄左邊，看到你打的所有斷點(diǎn)

啟動(dòng)調(diào)試

點(diǎn)擊下面的按鈕，立即啟動(dòng)調(diào)試，等個(gè)幾秒鐘？？

啟動(dòng)成功

然后你發(fā)現(xiàn) 谷歌瀏覽器被自動(dòng)啟動(dòng)了，然后你就成功了兄弟

看得到瀏覽器的 url 是你的硬盤絕對路徑，也就是你在配置文件里面配置的

TIP：如果你啟動(dòng)調(diào)試期間出現(xiàn)什么問題，不要怕，度娘或者谷哥，資料很多，我也碰到很多問題，很正常

(～￣▽￣)～

調(diào)試工具欄

啟動(dòng)調(diào)試成功之后，你可以看到這個(gè)工具欄的出現(xiàn)

我們來一個(gè)個(gè)看每個(gè)按鈕都是什么作用

繼續(xù)，跳斷點(diǎn)，從一個(gè)斷點(diǎn) 跳到另一個(gè)斷點(diǎn)

單步跳過

跳過函數(shù)執(zhí)行，就是不進(jìn)入函數(shù)內(nèi)部，直接執(zhí)行完函數(shù)，跳到函數(shù)下一個(gè)語句

TIP：但是如果你在這個(gè)函數(shù)的內(nèi)部打了斷點(diǎn)，點(diǎn)擊【單步跳過】你還是會進(jìn)入函數(shù)內(nèi)部，然后跳到函數(shù)內(nèi)部最近那個(gè)斷點(diǎn)那行

ヾ(●′?｀●)

單步跳出

跳出單簽函數(shù)體，如果當(dāng)前調(diào)試已經(jīng)進(jìn)入了某個(gè)函數(shù)，那么立即執(zhí)行完當(dāng)前函數(shù)，并跳出這個(gè)函數(shù)

TIP：但是如果你在這個(gè)函數(shù)的內(nèi)部打了斷點(diǎn)，你可能跳不出去，而是跳到這個(gè)函數(shù) 內(nèi)部最近的一個(gè)斷點(diǎn)

重啟，重新啟動(dòng)調(diào)試，從頭開始

停止，關(guān)閉調(diào)試

舉栗子 (′???`)

準(zhǔn)備好文件

index.html，越短越好

index.js

function fn1(name){    
var result = name+" fn1 處理過 "
    fn2(result)
}
function fn2(arg){    
return arg +" fn2 處理過 "
}
fn1("hoho")

01 新建調(diào)試文件 launch.json

{    
       "version": "0.2.0",    
       "configurations": [
        {            
           "type": "chrome",            
           "request": "launch",            
           "name": "調(diào)試Demo",            
           "file": "${workspaceRoot}/index.html",
        }
    ]
}

02 打斷點(diǎn)

03 啟動(dòng)調(diào)試，來到第一個(gè)斷點(diǎn)

04 開始調(diào)試

先講按鈕使用流程

現(xiàn)在執(zhí)行到 fn1 函數(shù)這一行，但是 fn1 還沒執(zhí)行

此時(shí)點(diǎn)擊

執(zhí)行 fn1，進(jìn)入 fn1 函數(shù)內(nèi)部

進(jìn)入 fn1 之后

一直點(diǎn)擊，直到執(zhí)行到 fn2 語句

像下面這樣，有條黃線，就表示執(zhí)行到哪條語句

1、點(diǎn)擊，會立即執(zhí)行完 fn2 ，不進(jìn)入 fn2

2、點(diǎn)擊

，會進(jìn)入 fn2

如果進(jìn)入了 fn2 之后

點(diǎn)擊

，會立即執(zhí)行完 fn2 函數(shù)，跳出 fn2 函數(shù)內(nèi)部

現(xiàn)在，我們

三個(gè)按鈕都使用過了，還剩

我們在 fn2 處打多一個(gè)一個(gè)斷點(diǎn)，然后重啟

你能看到現(xiàn)在又是停到了第一個(gè)斷點(diǎn)處

此時(shí)，你的小手一按

，于是你便跳到了剛打的第二個(gè)斷點(diǎn)

觀察變量值

1、可以把鼠標(biāo)移動(dòng)到某個(gè)變量上，會顯示一個(gè)彈窗，彈窗內(nèi)容是變量的值

2、或者可以查看左欄調(diào)試欄的變量

觀察函數(shù)調(diào)用流程

同樣是查看左邊的調(diào)試欄，中的調(diào)用堆棧，可以看到函數(shù)調(diào)用的順序

明顯可以看到先調(diào)用 fn1，在調(diào)用 fn2

好的，如果你有跟著做的，相信你已經(jīng)入門了兄弟，是不是十分鐘從入門到精通？？

調(diào)試Vue準(zhǔn)備

index.html

引用 vue 文件、引用 vue.test.js 文件

vue.js

去官網(wǎng)下載生產(chǎn)版本即可

vue.test.js

作用是調(diào)用vue，創(chuàng)建一個(gè)簡單的應(yīng)用，現(xiàn)在給一個(gè)簡單的模板

new Vue({    
    el:".a",
    data(){        
        return {            
            name:1
        }
    },    
    methods:{
        getName(){            
            this.name="修改----我是父組件a"
        },
    },
})

現(xiàn)在，你可以盡情去 vue 里面去打斷點(diǎn)啦，額..... 雖然現(xiàn)在你還不知道打什么斷點(diǎn)，不過不用怕！后面每次講一塊內(nèi)容，你就可以去自己嘗試?yán)?/p>

結(jié)尾

好的，本次講解完畢，調(diào)試就是這么簡單，真的沒有什么難的，

最后有什么不對的地方，感謝指出

希望本文會對你有幫助

好的，謝幕了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105058.html

發(fā)表評論

登陸后可評論

0條評論

avwu

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3436·2023-04-25 18:14
#yyds干貨盤點(diǎn)#Go WebSocket開發(fā)與測試實(shí)踐【gorilla/websocket】

閱讀 1531·2021-11-24 09:38
godaddy主機(jī)怎么退款-godaddy怎么退款？

閱讀 3247·2021-09-22 14:59
半月灣：1核/1G/10G SSD/1T/100Mbps/洛杉磯GIA/年付$49.99，搬瓦工同機(jī)

閱讀 3064·2021-08-09 13:43
前端每日實(shí)戰(zhàn)：149# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)寶路薄荷糖的動(dòng)畫

閱讀 2569·2019-08-30 15:54
CSS 常用方法小計(jì)

閱讀 567·2019-08-30 13:06
CSS魔法堂：深入理解line-height和vertical-align

閱讀 1549·2019-08-30 12:52
詳細(xì)了解 clientWidth、clientHeight、clientLeft、clientTop

閱讀 2721·2019-08-30 11:13

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Vue原理】看Vue源碼，不會調(diào)試不行啊

相關(guān)文章

jquery源碼分析

前端架構(gòu)師親述：前端工程師成長之路的 N 問及回答

**【Vue原理】Vue源碼閱讀總結(jié)大會 - 序**

**【Vue原理】VModel - 源碼版之 select 詳解**

**【Vue原理】VModel - 源碼版之input詳解**

發(fā)表評論

0條評論

avwu

男|高級講師

TA的文章

tensorflow

#yyds干貨盤點(diǎn)#Go WebSocket開發(fā)與測試實(shí)踐【gorilla/websocket】

godaddy主機(jī)怎么退款-godaddy怎么退款？

半月灣：1核/1G/10G SSD/1T/100Mbps/洛杉磯GIA/年付$49.99，搬瓦工同機(jī)

前端每日實(shí)戰(zhàn)：149# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)寶路薄荷糖的動(dòng)畫

CSS 常用方法小計(jì)

CSS魔法堂：深入理解line-height和vertical-align

詳細(xì)了解 clientWidth、clientHeight、clientLeft、clientTop

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Vue原理】看Vue源碼，不會調(diào)試不行啊

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！