適用場(chǎng)景：
- 新項(xiàng)目新工程如何快速熟悉整體代碼，快速定位問題
- 本地環(huán)境無法啟動(dòng)，只能在預(yù)發(fā)或者測(cè)試環(huán)境進(jìn)行調(diào)試場(chǎng)景【老項(xiàng)目定位問題】
- 查看當(dāng)前數(shù)據(jù)后，想要了解其他業(yè)務(wù)數(shù)據(jù)場(chǎng)景
1.1 Elements
elements使用過程中大部分是styles或者Computed
【可以通過styles或者直接在頁(yè)面修改添加樣式來完成頁(yè)面樣式調(diào)整】
其中也可以使用Event Listeners【事件監(jiān)聽】，事件監(jiān)聽可以查看每個(gè)DOM上涉及的事件。
注：因?yàn)榇嬖谑录芭?，每一?xiàng)事件中可能會(huì)存在多個(gè)事件
以click事件為例，click事件下包含六個(gè)事件：
我們可以通過點(diǎn)擊remove去剔除事件，或者鼠標(biāo)懸停定位到具體某項(xiàng)，包括右側(cè)超鏈接跳轉(zhuǎn)到具體的url。
1.1.1）事件捕獲機(jī)制
一般情況下，按照事件捕獲，由頂層節(jié)點(diǎn)到目標(biāo)節(jié)點(diǎn)逐個(gè)顯示。
因此途中順序是window -> dcoument -> html -> div
1.1.2） 打包構(gòu)建方式
其次我們可以通過右側(cè)超鏈接去判斷，由于存在工程化打包，現(xiàn)有基本上打包輸出模式，基本規(guī)則如下：
"文件名" + ".hash值" + “文件后綴名" + ": 標(biāo)記位”
【根據(jù)不同的打包方式可能不一樣，具體查看sourceMap使用】
一般攜帶明顯標(biāo)記【比如vue, react , dom, min, lib】基本是組件代碼
綜上所述，我們通過這種方式去定位到具體需要的業(yè)務(wù)場(chǎng)景。
除上述內(nèi)容以外，Properties屬性，主要是針對(duì)將DOM中對(duì)象化，可以查看具體明細(xì)。
1.2 NetWork + Sources
1.2.1）NetWork
如何快速定位到具體業(yè)務(wù)，也可以通過NetWork形式。
一般習(xí)慣使用“Fetch/XHR”形式找到具體接口調(diào)用，可以通過Initiator查看整體調(diào)用鏈
Request initiator chain：類似捕獲機(jī)制，展示整體鏈路請(qǐng)求地址。
Request call stack：會(huì)將發(fā)起請(qǐng)求到各個(gè)組件調(diào)用整體鏈路都會(huì)展示出來。
從中我們可以看出：存在ajax代碼，Vue底層源碼以及業(yè)務(wù)代碼
一般業(yè)務(wù)代碼的形式如何看出？【一般本地代碼都是顯性展示具體的方法名稱和鏈路，這里只談隱性】
1）關(guān)注anoymous（匿名函數(shù)）
2）右側(cè)超鏈接的地址（也是sourceMap打包后的路徑模板）
可以通過上述規(guī)律點(diǎn)擊后續(xù)超鏈接定位到具體的代碼【代碼都是一般都是打包后的，本地一般是源代碼】
注：如果想看看組件源碼也可以從中點(diǎn)擊跳轉(zhuǎn)查看
點(diǎn)擊后大概能猜測(cè)出是源碼。
【有些生產(chǎn)代碼中由于sourceMap設(shè)置是沒有注釋，且全部匿名化丑化，可以多關(guān)注看下業(yè)務(wù)代碼寫的錯(cuò)誤提示或者攔截提示，能具體定位】
接下來就是使用Sources進(jìn)行debugger
1.2.2） Sources
Sources使用先在頁(yè)面代碼中debugger，打好斷點(diǎn)。
【一般建議是點(diǎn)擊事件或者初始化事件，方便尋找代碼源。如果知道具體斷點(diǎn)位置，可以直接代碼中debugger】
右側(cè)主要介紹Scope和CallStack
a）Scope：作用域
其中一般作用域包含以下枚舉值：
- Local：本地
- Closure：閉包
- Script：腳本
- Global：全局對(duì)象
- Window：window對(duì)象
可以通過右側(cè)作用域中關(guān)注到當(dāng)前對(duì)象掛載內(nèi)容，以及其他字段屬性值。
其中有些字段值是找不到，可以通過原型鏈形式，通過原型對(duì)象prototype往上查找
其次函數(shù)中如果我們想要找到具體方法，查詢目標(biāo)對(duì)象TargetFunction,通過FunctionLocation跳轉(zhuǎn)到具體的業(yè)務(wù)邏輯
