likes
comments
collection
share

Chrome调试的怪招

作者站长头像
站长
· 阅读数 43

🙀console 中的 '$'

一、$0

chrome的调试面板中的elements,鼠标移动到其中一个标签,例如:

Chrome调试的怪招 然后我们再console中输入$0,既可以输入我们刚才选中的dom元素

Chrome调试的怪招

应用:调试dom元素的情况,这是个不错的方式

二、 $_

我们经常通过调试面试打印一些东西,例如:

Chrome调试的怪招

这时候下面如果要用到这个打印结果,那么我们就可以$_直接拿到:

Chrome调试的怪招

应用:各种涉及到变量的复用

三、$i

我们在开发过程中,经常用到jquery,lodash,react,vue等等工具库或者框架,那么我们要在浏览器调试中使用的华,这时候就要借助$i,当然使用前提,我们先安装Chrome插件:Console Importer

例子一:jquery

首先使用$i('jquery')来安装jquery:

Chrome调试的怪招 然后我们进行测试:

Chrome调试的怪招 成功执行!!😃

例子二:moment\

这是一个时间库,大家应该比较常用,这时候我们先安装

Chrome调试的怪招 安装成功后,我们看看文档测试下:

Chrome调试的怪招

完美运行!!!😃

😹Chrome的js代码块

步骤:打开调试面板的sources中的snippets新建一个js脚本,然后我们可以自己控制来运行

Chrome调试的怪招

新建一个test脚本,然后保存,然后我们到elements,ctrl+p后输入!就可以选择到我们的脚本来运行

Chrome调试的怪招 成功执行 😃

Chrome调试的怪招

😼快捷键

截屏

ctrl+shift+p,然后输入capture,下面就可以选择几个选项,常用的就是Capture full...和Capture area..., 前者是全屏,后着是选择区域截屏.

Chrome调试的怪招

切换主题

切换调试面板的light或者dark模式 步骤ctrl+shift+p,然后输入themez

Chrome调试的怪招

Chrome调试的怪招

😮‍💨结尾

以上属于大家可能不常使用的,但是我觉得有用的,分享给大家,希望大家给我点赞鼓励下,后续有其他想法再来维护这篇文章,或者有其他想法卸载评论区😶

转载自:https://juejin.cn/post/7236992165745623096
评论
请登录