Chrome调试的怪招

6,424 阅读1分钟

🙀console 中的 '$'

一、$0

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

image.png 然后我们再console中输入$0,既可以输入我们刚才选中的dom元素

image.png

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

二、 $_

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

image.png

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

image.png

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

三、$i

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

例子一:jquery

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

image.png 然后我们进行测试:

image.png 成功执行!!😃

例子二:moment\

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

image.png
安装成功后,我们看看文档测试下:

image.png

完美运行!!!😃

😹Chrome的js代码块

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

image.png

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

image.png 成功执行 😃

image.png

😼快捷键

截屏

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

image.png

切换主题

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

image.png

image.png

😮‍💨结尾

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