引言

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

Android WebView Devtools adb調試過程

1. 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協議與瀏覽器內核通信，發送調試命令并接收調試信息。瀏覽器內核根據接收到的命令執行相應的操作，并將結果返回給前端界面。

2. 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樣式。

?網絡監控：監控網絡請求和響應。

?JavaScript調試：設置斷點、單步執行、查看調用棧等。

?性能分析：分析頁面加載性能、JavaScript執行性能等。

?內存管理：檢查和分析內存使用情況，查找內存泄漏等。

2.4 CDP協議的工作流程

1.建立WebSocket連接：通過WebSocket與瀏覽器內核建立連接。

2.發送協議命令：前端界面發送JSON格式的命令。

3.執行協議命令：瀏覽器內核執行命令并返回結果。

4.接收結果：前端界面接收并顯示結果。

3. 了解CDP傳輸協議信息

3.1 啟動工具

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

刷新頁面打開協議工具

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

3.2 分析CDP內容

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

以及后端返回結果：

4. 自定義調試工具

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 AndroidiOSHarmony）開發統一的調試工具。

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協議后，可以開發自定義的調試開發工具，滿足特定需求。比如自動化測試工具、性能分析工具等。

?

希望本文能為你帶來啟發，讓你在調試的道路上越走越順！

?審核編輯 黃宇