$0 和 __vue__

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

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

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

• 可以查看對象內部任意屬性
• 也可以直接操作對象內部的屬性來達到預期的調試效果
• 甚至可以用來查看三方庫的 api，比如 element-ui 的某個組件內部的 api

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

沒錯！插件當然更方便，但沒準插件內部實現原理就是這樣的呢，掌握這個技巧，也可以在一些插件無法覆蓋的場景下來調試頁面，比如：

• 生產環境的頁面
• 內網部署且無法代理到本地的頁面
• 非 chrome 瀏覽器
• 等等

舉一反三：

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

接口數據搜索定位

網絡面板支持多個維度的搜索功能：

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

源碼定位

jquery 時代的網頁源碼直接原原本本在瀏覽器上，調試和閱讀都非常方便；

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

全局搜索

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

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

接口調用棧

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

console 面板的函數源碼跳轉

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

事件監聽事件跳轉

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

源碼調試

斷點

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

overrides(覆蓋)

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

當你發現網絡面板有個感汗號警告時，就意味著你啟用了本地替換的功能，指定的源碼文件不會從網絡上加載，而是加載本地臨時替換修改過的文件
這樣就可以達到直接在源碼調試的效果

實操場景說明

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

比如某生產環境來了個故障，本地無法復現，無法代理，還是個內網，只能遠程客戶設備直接在瀏覽器界面上調試定位

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

怎么定位源碼呢：

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

定位到源碼后，斷點還分析不出問題時，就可以繼續利用 overrides 覆蓋功能來直接修改瀏覽器源碼進行調試

總結

以上是生活随笔為你收集整理的善用浏览器的一些调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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