Chrome 开发者工具 live expression 的用法

简介: Chrome 开发者工具 live expression 的用法

live expression 相当于给 Chrome 开发者工具 console 面板里的表达式置顶,并且能随着用户点击的变化,而动态刷新该置顶的表达式。看个例子:


点击下图绿色高亮的图标,输入一个想要置顶的 JavaScript 表达式,比如 document.activeElement:


image.png

然后在 UI 上点击,使得当前处于活动状态的 UI 元素发生变化,观察到 console 里 document.activeElement 的值也跟着发生变化了:


image.png


看一些该 live expression 发生变化的例子:

image.png


相关文章
|
7月前
|
Web App开发 存储 缓存
Chrome 开发者工具 network 显示 Provisional headers are shown 的几种原因
Chrome 开发者工具 network 显示 Provisional headers are shown 的几种原因
241 0
|
8月前
|
Web App开发 Python
Python Chrome handless(无界面浏览器,add_argument 支持哪些参数,替代 PhantomJS)
Python Chrome handless(无界面浏览器,add_argument 支持哪些参数,替代 PhantomJS)
95 0
|
6月前
|
Web App开发 前端开发 开发工具
Chrome调试工具和Emmet语法
Chrome调试工具和Emmet语法
|
11月前
|
Web App开发
Selenium自动化chrome驱动版本匹配但是调用浏览器失败:Only local connections are allowed. 问题解决
Selenium自动化chrome驱动版本匹配但是调用浏览器失败:Only local connections are allowed. 问题解决
297 0
|
Web App开发 存储 JavaScript
Chrome操作指南——入门篇(五)Snippets
Chrome操作指南——入门篇(五)Snippets
Chrome操作指南——入门篇(五)Snippets
|
Web App开发 前端开发 开发者
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
|
Web App开发 JavaScript 前端开发
VS Code 折腾记 - (17) Debug for Chrome(附加模式[支持浏览器插件的使用])
很早以前就撸过一篇帖子,也是说这个的,但是那时候只是用最傻瓜化的直白的姿势. 新窗口模式,而且配置文件用的是临时文件,拓展这些更是不能用. 用起来感觉不是很好,但时隔一年多,不管是vscode还是当初的插件都完善了很多. 研究了下附加模式,并让拓展也能正常使用的姿势(挺简单的). 用到的插件VSCode插件:
397 0
|
Web App开发 JavaScript 前端开发
Chrome 开发者工具 live expression 的用法
Chrome 开发者工具 live expression 的用法
114 0
Chrome 开发者工具 live expression 的用法
|
Web App开发 UED 开发者
Chrome 开发者工具 performance 标签页的用法
Chrome 开发者工具 performance 标签页的用法
Chrome 开发者工具 performance 标签页的用法
|
Web App开发
SAP ABAP关键字在Chrome浏览器里高亮显示的实现原理 - How is ABAP keyword highlight implemented in Chrome
SAP ABAP关键字在Chrome浏览器里高亮显示的实现原理 - How is ABAP keyword highlight implemented in Chrome
121 0
SAP ABAP关键字在Chrome浏览器里高亮显示的实现原理 - How is ABAP keyword highlight implemented in Chrome