如何在 Angular2 应用程序中直观地突出显示/捕获不必要的 DOM 更改

Question

我最近看了 Google I/O'17 的视频 https://www.youtube.com/watch?v=aCMbSyngXB4 并在 11:30 - 11:40 演示者进行了一些点击，然后每个视频都会自动突出显示dom 元素已更改为漂亮的绿色边框和背景。

有人知道一些 chrome 插件、工具或代码片段可以帮助我为我的 Angular2 应用程序做同样的事情吗？对于整个应用程序来说是理想的（而不是向每个组件添加一些东西）

我希望这是出于性能优化的目的，以便用我的眼睛轻松捕获不必要的 DOM 更改。 例如，由于某些被遗忘的不纯管道，可能会发生这种情况。

Answer 1

我知道一项 chrome 功能，如下所示：

Answer 2

Chrome DevTools 让您可以看到“重新渲染”的矩形区域，但我想看到正在“更改”的特定 DOM 节点，这对于优化基于 DOM 的代码更有用，所以我为此制作了一个工具。 它称为 DOM 更新荧光笔

它让人们很容易注意到过度的重建：