我试图检查CSS属性从输入到表格单元格。输入在点击时出现,在失去焦点时消失,就像我试图检查它一样。 当我移动到另一个窗口(检查器)时,我如何做到不失去焦点?
当前回答
在chrome devtools设置中,有一个名为模拟焦点页面的选项,默认情况下是禁用的。启用此选项后,如果您单击devtool窗口上的任何位置,都不会导致DOM中的任何元素失去焦点。
Chrome版本>= 86:
打开devtools,按Command+Shift+P (Mac)或Control+Shift+P (Windows、Linux)打开命令菜单。在命令菜单中输入渲染,然后选择显示渲染。在那里,您可以启用模拟一个集中的页面。
在此之后,只需单击任何元素来聚焦,然后单击devtool窗口上的任何地方。你会看到那个元素并没有失去焦点。所以现在您可以轻松地检查或调试。
Chrome版本< 86
转到devtool设置->首选项,在全局选项下,启用模拟一个聚焦页面。
其他回答
在Chrome浏览器中,打开开发人员工具,然后选择元素选项卡 打开你想要检查的元素的父节点的上下文菜单,在上下文菜单中单击>子树修改上的Break。
之后,你只需要点击页面,你就会进入检查器,而不会失去焦点或失去你想要检查的元素。
不是一个真正的解决方案,但它通常是有效的。
聚焦元素 右击上下文菜单 转到开发人员工具
在chrome devtools设置中,有一个名为模拟焦点页面的选项,默认情况下是禁用的。启用此选项后,如果您单击devtool窗口上的任何位置,都不会导致DOM中的任何元素失去焦点。
Chrome版本>= 86:
打开devtools,按Command+Shift+P (Mac)或Control+Shift+P (Windows、Linux)打开命令菜单。在命令菜单中输入渲染,然后选择显示渲染。在那里,您可以启用模拟一个集中的页面。
在此之后,只需单击任何元素来聚焦,然后单击devtool窗口上的任何地方。你会看到那个元素并没有失去焦点。所以现在您可以轻松地检查或调试。
Chrome版本< 86
转到devtool设置->首选项,在全局选项下,启用模拟一个聚焦页面。
将以下Javascript代码粘贴到浏览器开发控制台:
// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.
var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);
如果所有这些都失败了,在控制台中输入以下内容:
setTimeout(() => { debugger; }, 5000)
然后,您有5秒钟的时间(或将值更改为其他任何值)来显示您想要调试的任何内容。
其他的答案都对我不起作用——DOM树在脚本暂停之前一直被修改(即我关心的东西消失了)。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?