devtools(开发者工具)

预热

使用过vue的应该见过这种类型的插件：

devtools(开发者工具) - 图1

是的，Chrome允许插件在开发者工具(devtools)上动手脚，主要表现在：

  • 自定义一个和多个和Elements、Console、Sources等同级别的面板；
  • 自定义侧边栏(sidebar)，目前只能自定义Elements面板的侧边栏；

先来看2张简单的demo截图，自定义面板（判断当前页面是否使用了jQuery）：

devtools(开发者工具) - 图2

自定义侧边栏（获取当前页面所有图片）：

devtools(开发者工具) - 图3

devtools扩展介绍

主页：https://developer.chrome.com/extensions/devtools

来一张官方图片：

devtools(开发者工具) - 图4

每打开一个开发者工具窗口，都会创建devtools页面的实例，F12窗口关闭，页面也随着关闭，所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的DevTools API以及有限的扩展API，这组特有的DevTools API只有devtools页面才可以访问，background都无权访问，这些API包括：

  • chrome.devtools.panels：面板相关；
  • chrome.devtools.inspectedWindow：获取被审查窗口的有关信息；
  • chrome.devtools.network：获取有关网络请求的信息；

大部分扩展API都无法直接被DevTools页面调用，但它可以像content-script一样直接调用chrome.extension和chrome.runtimeAPI，同时它也可以像content-script一样使用Message交互的方式与background页面进行通信。

实例：创建一个devtools扩展

首先，要针对开发者工具开发插件，需要在清单文件声明如下：

  1. {
  2.  // 只能指向一个HTML文件，不能是JS文件
  3.  "devtools_page": "devtools.html"
  4. }

这个devtools.html里面一般什么都没有，就引入一个js：

  1. <!DOCTYPE html>
  2. <html>
  3. <head></head>
  4. <body>
  5.  <script type="text/javascript" src="js/devtools.js"></script>
  6. </body>
  7. </html>

可以看出来，其实真正代码是devtools.js，html文件是“多余”的，所以这里觉得有点坑，devtools_page干嘛不允许直接指定JS呢？

再来看devtools.js的代码：

  1. // 创建自定义面板，同一个插件可以创建多个自定义面板
  2. // 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调
  3. chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
  4. {
  5.  console.log('自定义面板创建成功！'); // 注意这个log一般看不到
  6. });
  8. // 创建自定义侧边栏
  9. chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
  10. {
  11.  // sidebar.setPage('../sidebar.html'); // 指定加载某个页面
  12.  sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通过表达式来指定
  13.  //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象
  14. });

setPage时的效果：

devtools(开发者工具) - 图5

以下截图示例的代码：

devtools(开发者工具) - 图6

  1. // 检测jQuery
  2. document.getElementById('check_jquery').addEventListener('click', function()
  3. {
  4.  // 访问被检查的页面DOM需要使用inspectedWindow
  5.  // 简单例子：检测被检查页面是否使用了jQuery
  6.  chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException)
  7.  {
  8.  var html = '';
  9.  if (isException) html = '当前页面没有使用jQuery。';
  10.  else html = '当前页面使用了jQuery，版本为：'+result;
  11.  alert(html);
  12.  });
  13. });
  15. // 打开某个资源
  16. document.getElementById('open_resource').addEventListener('click', function()
  17. {
  18.  chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException)
  19.  {
  20.  chrome.devtools.panels.openResource(result, 20, function()
  21.  {
  22.  console.log('资源打开成功！');
  23.  });
  24.  });
  25. });
  27. // 审查元素
  28. document.getElementById('test_inspect').addEventListener('click', function()
  29. {
  30.  chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
  31. });
  33. // 获取所有资源
  34. document.getElementById('get_all_resources').addEventListener('click', function()
  35. {
  36.  chrome.devtools.inspectedWindow.getResources(function(resources)
  37.  {
  38.  alert(JSON.stringify(resources));
  39.  });
  40. });

调试技巧

修改了devtools页面的代码时，需要先在 chrome://extensions 页面按下Ctrl+R重新加载插件，然后关闭再打开开发者工具即可，无需刷新页面（而且只刷新页面不刷新开发者工具的话是不会生效的）。

由于devtools本身就是开发者工具页面，所以几乎没有方法可以直接调试它，直接用chrome-extension://extid/devtools.html"的方式打开页面肯定报错，因为不支持相关特殊API，只能先自己写一些方法屏蔽这些错误，调试通了再放开。