Chrome调试的怪招

🙀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

😮‍💨结尾

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

关于本文

作者：向乾看

链接：https://juejin.cn/post/7236992165745623096

最后

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

「专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）」