Chrome 开发者工具 第十四章（控制台实时观察 JavaScript）

Chrome 开发者工具的控制台提供了一个非常实用的功能——实时表达式。这个功能允许开发者在控制台顶部固定一个或多个JavaScript表达式，以便实时跟踪它们的值。这对于监测变量或表达式的变化特别有用，尤其是当你发现自己需要反复输入同一个表达式来查看其值时。

要创建一个实时表达式，你只需要打开控制台，点击“创建实时表达式”按钮，然后在出现的文本框中输入你想要监视的表达式。

例如，你可以输入document.activeElement来实时跟踪当前文档中获得焦点的元素。输入完毕后，按Enter键或点击文本框外部即可保存表达式。

一旦表达式被保存，它的值就会显示在固定表达式下方，并且这个值会每250毫秒更新一次，让你能够近乎实时地观察到值的变化。如果你需要同时监视多个表达式，可以重复点击“创建实时表达式”按钮来添加更多表达式。虽然一次只能查看几个固定的表达式，但你可以滚动表达式列表来查看所有固定的表达式。

let temp=null;
const aGridItem=document.querySelectorAll('.grid-item');
aGridItem.forEach((item)=>{
    item.addEventListener('click',(event)=>{
        temp=event.target.innerText;
    });
});

如果你想要移除一个已经创建的实时表达式，只需点击该表达式旁边的“关闭”按钮即可。

实时表达式是一个强大的工具，它可以帮助开发者更高效地进行调试和监控网页的行为。通过减少重复性的工作，你可以将更多的精力集中在代码的逻辑和功能上，从而提高开发的效率和质量。