Chrome 开发者工具的控制台提供了一个非常实用的功能------实时表达式。这个功能允许开发者在控制台顶部固定一个或多个JavaScript表达式,以便实时跟踪它们的值。这对于监测变量或表达式的变化特别有用,尤其是当你发现自己需要反复输入同一个表达式来查看其值时。
要创建一个实时表达式,你只需要打开控制台,点击"创建实时表达式"按钮,然后在出现的文本框中输入你想要监视的表达式。 例如,你可以输入document.activeElement
来实时跟踪当前文档中获得焦点的元素。输入完毕后,按Enter
键或点击文本框外部即可保存表达式。
一旦表达式被保存,它的值就会显示在固定表达式下方,并且这个值会每250毫秒更新一次,让你能够近乎实时地观察到值的变化。如果你需要同时监视多个表达式,可以重复点击"创建实时表达式"按钮来添加更多表达式。虽然一次只能查看几个固定的表达式,但你可以滚动表达式列表来查看所有固定的表达式。
javascript
let temp=null;
const aGridItem=document.querySelectorAll('.grid-item');
aGridItem.forEach((item)=>{
item.addEventListener('click',(event)=>{
temp=event.target.innerText;
});
});
如果你想要移除一个已经创建的实时表达式,只需点击该表达式旁边的"关闭"按钮即可。
实时表达式是一个强大的工具,它可以帮助开发者更高效地进行调试和监控网页的行为。通过减少重复性的工作,你可以将更多的精力集中在代码的逻辑和功能上,从而提高开发的效率和质量。