Chrome “冻结”页面检查对光标移动作出React的元素

u2nhd7ah 于 11个月前发布在 Go

关注(0)|答案(4)|浏览(137)

我正在寻找一种方法来“冻结”一个页面，这样我就可以检查出现的元素，例如当我悬停在一个字段。
我知道答案在这里：Firebug: How to inspect elements changing with mouse movements?
但这仅限于CSS :hover选择器触发的事件。
我正在寻找一个更通用的解决方案，也将与从JavaScript显示的元素。

google-chrome

来源：https://stackoverflow.com/questions/24202730/freezing-page-to-inspect-elements-that-react-to-cursor-movements

4条答案

按热度按时间

brvekthn1#

一个选项是在特定事件时触发Chrome调试器。例如，您可以侦听文档主体上的mousedown事件，或按键等。开发工具需要在触发事件之前打开。

// Fire the debugger the first time you click on the page
document.body.addEventListener('mousedown', () => {
  debugger;
}, { once: true });

// Press space for the debugger
document.body.addEventListener('keydown', (event) => {
  if (event.code === 'Space') {
    debugger;
  }
});

字符串
MasterScrat建议的另一个方便的选择是使用计时器：

setTimeout(() => {
  debugger;
}, 1500);

型

赞(0）回复(0）举报 11个月前

lbsnaicq2#

Firefox在检查器中有一个“break on...”选项-右键单击检查器中的一个元素，选择“break on -> attribute modification”，然后当你为该元素修改DOM时，调试器为您调用。然后您可以使用检查器查看更改，其中一个问题是网页被冻结（即不可选择），但您仍然可以使用检查器选择元素。

赞(0）回复(0）举报 11个月前

iaqfqrcu3#

打开Firefox开发者工具（F12）后，选择浏览器标签。按F8是暂停页面执行的快捷方式，可以检查显示的元素，包括JavaScript显示的元素。

赞(0）回复(0）举报 11个月前

ejk8hzay4#

在Chromium中，将鼠标放在元素上，然后-> Ctrl-Shift + C

赞(0）回复(0）举报 11个月前