Chrome Dev Tools 里的 Computed Style 通过 javascript 如何实现

Chrome Dev Tools 里的 Computed 面板，可以显示 Computed 的 style 列表。如图。
这个在 javascript 里可以通过 getComputedStyle(element) 来获取，但是获取的结果包括了完整的 样式列表，但我想要拿到真正被样式表影响过了属性，过滤掉那些 inherited 的属性。不知如何实现。
我的问题类似 SO 上的 这个问题

---

我的想法就是跟一个标签相同的没有任何样式的元素去对比。
没错，就是创建一个标签相同的基础元素，对比当前元素和基础元素的样式。

function filterInheritedStyles(el){
  var tester = document.createElement(el.tagName);
  document.body.appendChild(tester);  // 基础元素必须插入到文档中才能计算出默认样式
  var defaultStyle = window.getComputedStyle(tester, null);
  var currentStyle = window.getComputedStyle(el, null);
  var ret = {};
  
  for(var k in currentStyle) {
    
      if(currentStyle.getPropertyValue(k) !== defaultStyle.getPropertyValue(k)) {
      
        ret[k] = currentStyle.getPropertyValue(k);
    }
  }

  document.body.removeChild(tester);
  return ret;
}

var styles = filterInheritedStyles(document.getElementById('a'));
console.log(styles);

我给这个 div#a 定义了以下样式：

div{
  display: inline-block;
}
#a {
  position: relative;
  margin: 30px;
  width: 200px;
  line-height: 50px;
  background: #000;
  color: #666;
}

输出结果如下：

Computed 面板中显示的如下：

Computed 面板中把每个样式属性拆分到了最下级，而我通过对比产生的是样式属性缩写，比如样式中的 line-height 被划分到 font 属性中。

还有一个问题就是 display 没有被输出。因为 display 定义在标签选择器中，所以测试元素插入到文档时也被赋予了同样的样式，不过可以从 document.styleSheets 中找到对应的标签选择器的样式。