Chrome - 当节点悬停在网络检查器中时，突出显示网页上的相应元素答案

【问题标题】：Chrome - highlight corresponding element on webpage when node hovered in web inspectorChrome - 当节点悬停在网络检查器中时，突出显示网页上的相应元素
【发布时间】：2011-07-31 01:55:19
【问题描述】：

我正在使用 Chrome 来调试和测试我的网站，但是由于某种原因，当我使用元素检查器并突出显示某个节点时，通常会突出显示网页本身中的相应元素以显示宽度/高度/边距/填充等...但是由于某种原因它没有在我的网站上这样做，我已经在其他网站上对其进行了测试，并且对他们来说效果很好...我也在 Safari 中尝试过它并且在那里它可以工作？！

我不知道为什么会这样，我唯一的想法是我必须在 CSS 中设置一些东西，这会阻止使用此功能进行一些样式设置，直到我在 Safari 中对其进行测试。

【问题讨论】：

忘了说 - 我找到了原因，我打开了 3D CSS 过渡。我还在 chrome 网站上将其报告为错误。
这是 Adam 的错误报告：code.google.com/p/chromium/issues/detail?id=78913。如果您希望解决此问题，请加注星标。

标签： google-chrome webkit element highlight inspector

【解决方案1】：

你能说得更具体点吗？ “开启”？

编辑：我确实发现我必须禁用所有这些：

style.webkitTransform = translate3d(...) (Javascript)
-webkit-transform: translate3d(...) (CSS)
-webkit-backface-visibility: hidden (CSS)

相反，您可以使用：

Javacsript

var matrix = new WebKitCSSMatrix();
matrix.e = deltaX;
matrix.f = deltaY;
myElement.style.webkitTransform = matrix;

CSS

-webkit-transform:  matrix(1,0,0,1,deltaX,deltaY);

【讨论】：

【解决方案2】：

试一试，这是一种解决方法。

按CTRL + SHIFT + C 并将鼠标悬停在您要检查的元素上。

【讨论】：