引言

    Chrome DevTools 是前端開發者的必備工具，不僅可以用于調試 Chrome 網頁，還支持 Android WebView、Roma (跨平臺開發框架) 安卓&鴻蒙端 等平臺的調試。作為最常用的調試工具之一，DevTools 不僅能快速定位問題，還能讓我們深入了解調試的內部機制。本文將從原理、組成部分、CDP 協議以及自定義調試工具的實現， 帶你全面認識 DevTools。

一、DevTools的組成與原理

1.1 DevTools組成部分

Chrome DevTools主要由以下幾個部分組成：

?Frontend  前端界面：用戶交互的界面，提供各種調試功能。

?Backend 后端服務：與瀏覽器內核通信（如Chromium、V8等），執行調試命令， 通過CDP與前端界面交互。

?CDP（Chrome DevTools Protocol）：Chrome調試工具協議（JSON 格式的數據封裝協議）。

圖片

1.2 工作原理

   DevTools 的核心是基于 Chrome DevTools Protocol (CDP)， 工作原理可以簡單概括為：前端界面通過CDP協議與瀏覽器內核通信，發送調試命令并接收調試信息。瀏覽器內核根據接收到的命令執行相應的操作，并將結果返回給前端界面。

二、CDP協議詳解

2.1 什么是CDP協議？

   CDP（Chrome DevTools Protocol）是Chrome DevTools與瀏覽器內核通信的協議。它基于WebSocket，允許開發者通過發送JSON格式的命令來控制瀏覽器行為，并獲取調試信息。通過 CDP，DevTools 能夠實時與頁面交互，實現斷點調試、性能分析等功能。

2.2 CDP協議的核心特點

• 基于JSON-RPC：CDP協議使用JSON格式傳輸數據，簡單易讀。
• 雙向通信：不僅調試器可以發送命令，瀏覽器也會主動推送事件（比如斷點觸發、網絡請求完成）。
• 模塊化設計：CDP協議分為多個模塊（如DOM、Network、Runtime等），每個模塊負責不同的功能。

2.3 CDP協議的主要功能

• DOM操作和CSS：獲取、修改DOM結構和CSS樣式。
• 網絡監控：監控網絡請求和響應。
• avaScript調試：設置斷點、單步執行、查看調用棧等。
• 性能分析：分析頁面加載性能、JavaScript執行性能等。
• 內存管理：檢查和分析內存使用情況，查找內存泄漏等。

2.4 CDP協議的工作流程

• 建立WebSocket連接：通過WebSocket與瀏覽器內核建立連接。
• 發送協議命令：前端界面發送JSON格式的命令。
• 執行協議命令：瀏覽器內核執行命令并返回結果。
• 接收結果：前端界面接收并顯示結果。

三、了解CDP傳輸協議信息

   3.1 啟動工具

   啟用協議日志，DevTools的設置中勾選“rotocol Montor”

圖片

圖片

刷新頁面打開協議工具：

圖片

查看協議的主要內容，此時此刻就可以看到協議交互為JSON格式。

圖片

3.2 分析CDP內容

   當我們點擊代碼左邊設置斷點后，可以看到前端(Devtools面板)請求內容：

圖片

以及后端返回結果：

圖片

四、自定義調試工具

   4.1 為何需要自定義調試工具？

       1. DevTools 的局限性

• 針對網頁設計：DevTools 是為網頁開發設計的，其功能（如 DOM 檢查、CSS 調試、網絡請求分析等）主要圍繞 HTML、CSS 和 JavaScript 展開。對于非網頁應用（如自定義語言、桌面應用、嵌入式系統等），這些功能可能不適用。
• 無法直接調試非網頁應用：DevTools 依賴于瀏覽器的運行時環境（如 V8 引擎）和 Chrome DevTools Protocol (CDP)。如果應用不是運行在瀏覽器中，或者使用了非 JavaScript 語言，DevTools 無法直接調試，比如 Roma 安卓和鴻蒙端在采用的App內嵌入V8引擎，因此無法直接調試。

       2. 自定義調試工具的需求

• 支持自定義語言或框架：如果應用使用了自定義 DSL（領域特定語言）或其他編程語言（如 Python、C++ 等），需要開發專門的調試工具來支持這些語言的語法、運行時和調試功能。
• 特定領域的調試需求：某些應用場景（如物聯網設備調試、定制與自身業務結合的開發調試工具等）可能需要特定的調試功能，而這些功能在 DevTools 中并不存在。
• 跨平臺支持：可以為不同平臺（例如 Roma Android\iOS\Harmony）開發統一的調試工具。

   4.2 其中的技術挑戰

除了CDP協議外還需要實現：

• 消息通道：調試工具需要在前端和后端之間建立可靠的消息通道，用于傳輸調試信息（如斷點、變量值、調用棧等）。
• 運行時環境集成：對于非 JavaScript 語言，需要將調試模塊集成到運行時環境中（如 V8 引擎、Python 解釋器等），以支持斷點、單步執行、變量檢查等功能。

   4.3 手搓自定義調試

    基于CDP， 實現自定義調試工具：

圖片

1. 建立 WebSocket 通信層:   與DevTools調試面板建立通信。

圖片

2. 完成瀏覽器Discovery協議：在瀏覽器中可以顯示應用。 

圖片

圖片

3. 完善/轉發CDP協議：

      V8中已自帶了inspector能力，對于代碼的調試協議大多不需要我們處理，對于inspector外的協議需要單獨處理，例如 Console、Page等。其他語言庫如未實現inspector，需要單獨實現inspector部分，例如 QuickJS。

圖片

4. 處理/轉發CDP協議：例如獲取 設置斷點、取消斷點、發起網絡請求。

   實現每一個CDP協議消息的發送與相應，例如 setBreakpointByUrl 協議完成 接收DevTools設置斷點到V8中。

圖片

5.  Devtools進行擴展：

  基于CDP 定制自己的頁面 或 自定義協議命令，比如Roma Android調試中可以輸入 $Jue 調試當前頁面信息，實現evaluate協議執行V8加載腳本代碼。

圖片

圖片

5. 為什么學習DevTools

• 深入理解調試原理

通過學習DevTools的調試實現原理，可以更深入地理解調試工具的工作機制，從而更好地利用這些工具進行調試。

• 自定義調試工具

自定義開發工具、設置斷點、單步執行、查看調用棧等。

• 分析處理性能問題

分析頁面加載性能、JavaScript執行性能、內存泄漏等。

• 自定義調試工具

掌握CDP協議后，可以開發自定義的調試開發工具，滿足特定需求。比如自動化測試工具、性能分析工具等。