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

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

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

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
典学长编程6 小时前
Linux操作系统从入门到精通!第二天(命令行)
linux·运维·chrome
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python