# devtools-pro > [devtools-pro: A web remote debugging tools, based on Chrome DevTools](https://github.com/wanwu/devtools-pro) DevTools-pro 是基于[chrome-devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend)進行開發的，通過自建 WebSocket 通道實現 Frontend 和 Backend 的通信。 DevTools 主要由四部分組成： * Frontend：調試器前端，默認由 Chromium 內核層集成，DevTools Frontend 是一個 Web 應用程序； * Backend：調試器后端，Chromium、V8 或 Node.js；在這里我們主要是引入的 backend.js * Protocol：調試協議，調試器前端和后端使用此協議通信。 它分為代表被檢查實體的語義方面的域。 每個域定義類型、命令（從前端發送到后端的消息）和事件（從后端發送到前端的消息）。該協議基于 json rpc 2.0 運行； * Message Channels：消息通道，消息通道是在后端和前端之間發送協議消息的一種方式。包括：Embedder Channel、WebSocket Channel、Chrome Extensions Channel、USB/ADB Channel。 # inspect [Inspect – The mobile DevTools you'll love using](https://inspect.dev/) # 參考 [玩轉Chrome DevTools，前端調試的秘訣 - 掘金 (juejin.cn)](https://juejin.cn/post/6844903844573347854#heading-8)