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

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;
    });
});

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

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

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法