🙀console 中的 '$'
一、$0
chrome的调试面板中的elements,鼠标移动到其中一个标签,例如:
然后我们再console中输入$0,既可以输入我们刚才选中的dom元素
应用:调试dom元素的情况,这是个不错的方式
二、 $_
我们经常通过调试面试打印一些东西,例如:
这时候下面如果要用到这个打印结果,那么我们就可以$_直接拿到:
应用:各种涉及到变量的复用
三、$i
我们在开发过程中,经常用到jquery,lodash,react,vue等等工具库或者框架,那么我们要在浏览器调试中使用的华,这时候就要借助$i,当然使用前提,我们先安装Chrome插件:Console Importer
例子一:jquery
首先使用$i('jquery')
来安装jquery:
然后我们进行测试:
成功执行!!😃
例子二:moment\
这是一个时间库,大家应该比较常用,这时候我们先安装
安装成功后,我们看看文档测试下:
完美运行!!!😃
😹Chrome的js代码块
步骤:打开调试面板的sources中的snippets新建一个js脚本,然后我们可以自己控制来运行
新建一个test脚本,然后保存,然后我们到elements,ctrl+p后输入!就可以选择到我们的脚本来运行
成功执行 😃
😼快捷键
截屏
ctrl+shift+p
,然后输入capture,下面就可以选择几个选项,常用的就是Capture full...和Capture area...,
前者是全屏,后着是选择区域截屏.
切换主题
切换调试面板的light或者dark模式
步骤ctrl+shift+p,然后输入themez
😮💨结尾
以上属于大家可能不常使用的,但是我觉得有用的,分享给大家,希望大家给我点赞鼓励下,后续有其他想法再来维护这篇文章,或者有其他想法卸载评论区😶