$0 和 __vue__

$0 是指當(dāng)鼠標(biāo)點擊 Element 面板的某個 dom 元素后，console 里 $0 變量會自動指向該 dom 元素對象

__vue__ 是指 vue 框架會往 vue 組件 $mount 掛載的 dom 元素對象上添加一個 __vue__ 變量來指向當(dāng)前 vue 組件

這意味我們可以直接在 console 面板里拿到任意 vue 組件實例對象：

• 可以查看對象內(nèi)部任意屬性
• 也可以直接操作對象內(nèi)部的屬性來達(dá)到預(yù)期的調(diào)試效果
• 甚至可以用來查看三方庫的 api，比如 element-ui 的某個組件內(nèi)部的 api

或許你會疑問，這不是安裝 chrome 插件（vue devtools）就可以搞定的事嗎，插件還是個可視化界面操作，更直觀便捷

沒錯！插件當(dāng)然更方便，但沒準(zhǔn)插件內(nèi)部實現(xiàn)原理就是這樣的呢，掌握這個技巧，也可以在一些插件無法覆蓋的場景下來調(diào)試頁面，比如：

• 生產(chǎn)環(huán)境的頁面
• 內(nèi)網(wǎng)部署且無法代理到本地的頁面
• 非 chrome 瀏覽器
• 等等

舉一反三：

• 很多開源庫框架其實都會往綁定的 dom 或者 window 上掛載一些變量上去，善于在 console 利用這些變量，可以方便我們進(jìn)行很多非本地開發(fā)場景下的調(diào)試
• 我們?nèi)粘７庋b一些復(fù)雜業(yè)務(wù)、復(fù)雜組件時，也可以參考這種思路，給自己開一個非本地開發(fā)場景下的調(diào)試入口，但注意別內(nèi)存泄漏了
• window 上掛實例對象變量容易導(dǎo)致內(nèi)存泄漏，所以建議掛一些全局作用域的對象；實例對象盡量掛與他生命周期綁定的 dom 對象

接口數(shù)據(jù)搜索定位

網(wǎng)絡(luò)面板支持多個維度的搜索功能：

• 根據(jù)內(nèi)容關(guān)鍵詞定位接口
  • 常用于看見界面某個文案或者只知道某個關(guān)鍵詞，但想定位它是哪個接口返回時的場景
• 在接口返回的內(nèi)容里定位關(guān)鍵詞
• 根據(jù) url 過濾接口

源碼定位

jquery 時代的網(wǎng)頁源碼直接原原本本在瀏覽器上，調(diào)試和閱讀都非常方便；

前端工程化后，混淆和壓縮已經(jīng)是標(biāo)配，當(dāng)出現(xiàn)生產(chǎn)故障時，首先考慮的應(yīng)該是本地復(fù)現(xiàn)或者是將生成環(huán)境頁面代理至本地的思路來解決；
但總會有某些場景，由于各種受限，只剩下瀏覽器直接操作的手段，因此，掌握一些源碼定位和調(diào)試的方式技巧還是有必要的

全局搜索

字符串、對象屬性字段名這些不會被混淆，可以借助這類場景的關(guān)鍵詞來搜索定位源碼位置
通常界面也是第一看到的東西，盡量找個界面上看著不像通用類的文案全局搜索下，基本都能定位到對應(yīng)組件源碼

也可以審查元素，在 Element 面板里找到對應(yīng) dom 上比較唯一的 class 或 id 等來全局搜索

接口調(diào)用棧

接口也是邏輯分析的入口點之一，比如找到某個頁面呈現(xiàn)數(shù)據(jù)的請求接口，跟著調(diào)用棧走下去基本能梳理界面從拿到數(shù)據(jù)到呈現(xiàn)做了什么事
但要注意過濾掉三方庫（如 axios, vue 等）對接口的封裝，找到真實屬于邏輯源碼的調(diào)用棧

console 面板的函數(shù)源碼跳轉(zhuǎn)

console 面板上的 log 日志，或者通過 log 輸出一個函數(shù)，都支持點擊跳轉(zhuǎn)到對應(yīng)源碼位置
借助 $0 和 __vue__ 變量，找到對應(yīng)組件的某個方法入口，通過 log 輸出方法再跳轉(zhuǎn)至源碼位置，就能針對性的梳理某個邏輯源碼

事件監(jiān)聽事件跳轉(zhuǎn)

對于某些按鈕等組件的點擊之類的事件，可以直接通過審查元素的 Element 面板的 EventListeners（事件監(jiān)聽器）這邊查看到該按鈕各類事件的監(jiān)聽器
過濾掉三方庫的統(tǒng)一事件監(jiān)聽器，找到自己邏輯源碼的事件監(jiān)聽器入口，也能針對性梳理該事件處理邏輯源碼

源碼調(diào)試

斷點

代碼里加入 debugger 可以觸發(fā)斷點，但前提是本地開發(fā)調(diào)試模式
也可以直接瀏覽器上操作斷點，除了常規(guī)的直接點擊源碼斷點之外，也可以使用一些具體場景的斷點，比如定時器觸發(fā)時進(jìn)入斷點、異步請求響應(yīng)時斷點，DOM 變更時斷點等等

overrides(覆蓋)

如果想在瀏覽器上修改源碼并生效的話，需要使用到 overrides（覆蓋|替換）功能，如上圖
先在 Source(源代碼/來源) 面板啟用 overrides(替換) 功能，然后找到要編輯的源碼文件，右鍵，點擊替換內(nèi)容（Save for override）
接下去就可以直接瀏覽器上修改源碼，刷新后會加載這份修改后的代碼文件

當(dāng)你發(fā)現(xiàn)網(wǎng)絡(luò)面板有個感汗號警告時，就意味著你啟用了本地替換的功能，指定的源碼文件不會從網(wǎng)絡(luò)上加載，而是加載本地臨時替換修改過的文件
這樣就可以達(dá)到直接在源碼調(diào)試的效果

實操場景說明

以上是個人日常比較常用的一些操作，每個技巧都不是割裂開的，經(jīng)常是組合交叉使用

比如某生產(chǎn)環(huán)境來了個故障，本地?zé)o法復(fù)現(xiàn)，無法代理，還是個內(nèi)網(wǎng)，只能遠(yuǎn)程客戶設(shè)備直接在瀏覽器界面上調(diào)試定位

首先，我們要定位到大概源碼，然后分析、斷點、調(diào)試

怎么定位源碼呢：

• 字符串是不會被混淆的，所以可以全局搜索方式來嘗試
• 如果匹配點太多，那也可以先定位到某個關(guān)鍵接口，然后根據(jù)接口定位到源碼
• 如果還是沒有定位到，對象的屬性是不會被混淆的，所以也可以通過 $0 和 __vue__ 來根據(jù)某個 vue 組件的方法來定位源碼

定位到源碼后，斷點還分析不出問題時，就可以繼續(xù)利用 overrides 覆蓋功能來直接修改瀏覽器源碼進(jìn)行調(diào)試文章來源地址http://www.zghlxwxcb.cn/news/detail-760576.html

到了這里，關(guān)于善用瀏覽器的一些調(diào)試技巧的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！