Chrome DevTools 是可扩展的。因此,如果 DevTools 缺少你需要一个功能,你可以找到一个现有的插件,或者自己写一个扩展程序。或者你也可以将开发者工具功能集成到你的应用程序中。
有两种基本方式使用 DevTools 建立一个自定义的解决方案:
以下各节讨论这两种方法。
DevTools UI 是一个嵌入在 Chrome 浏览器中的网络应用。DevTools 插件(扩展程序)使用 Chrome 扩展系统来添加功能到 DevTools 中。一个 DevTools 插件可以添加新的面板到 DevTools 中,可以添加新的窗格到 Elements 和 Sources 面板侧边栏,可以检查资源和网络事件,同样也能在被检查的浏览器选项卡中计算 JavaScript 表达式。
如果你想开发一个 DevTools 插件:
一系列 DevTools 插件的示例,见 DevTools 插件实例,这些实例包含了许多可供参考的开源插件。
许多第三方应用,例如 IDE(集成开发环境),编辑器,持续集成工具和测试框架,可以用 Chrome 调试器来整合,以此来调试代码,实时预览代码,改变 CSS 样式,以及控制浏览器。客户机使用 Chrome 调试协议来与另一个可以跑在同样系统或者远程系统的 Chrome 实例进行通信。
注意: 目前,Chrome 调试协议只支持每个网页中只有一个客户端。所以,你可以使用 DevTools 来检查一个页面,或者使用第三方客户机,但不要同时使用。
有两种方式整合调试协议: