携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

调试chrome的一些超级有用的小技巧，使用后效率up up up!!!

1.console

1.1 console.count:统计代码被执行的次数。经常放在函数里，表示这个函数被执行次数。可用于优化代码，减少不必要的调用。

1.2 console.dir:打印对象，以树形结构展示对象的所有属性和方法，因为有时使用console.log打印，只有[object Object]。不便于观看。

1.3 使用大括号{}打印对象。 console.log({obj1,obj2})

1.4 console.table(obj)打印对象,以表格的方式展示。扩：table(obj) 也可以用来打印数组。

1.5. console.time开始计时 console.timeEnd结束计时

1.6 console一些花里胡哨，使打印出来的字带有一定的样式

console.log
("%cBlue!", "color: blue;");

1.7 控制台获取dom $$ ( '.ant-select-dropdown-menu-item-group' )

快捷键打开审查元素模式 ctrl+shift+c；或右键元素菜单栏选择检查

2.1 获取鼠标悬浮上的样式，但鼠标移动后样式很难获取。操作：F12打开调试台，获取元素后，点击:hov 选中要执行的状态，可以看到下拉框已展示为:hover时的样式。同理可以选择

2.2 导航的弹框和下拉框，打开控制台后，很难获取。操作：F12打开调试台,在下拉框上右击，右击菜单显示后鼠标移动到调试台，点击N。就可以自动选中下拉框元素

2.3 有些元素无法通过审查模式选中，很难获取，调试很麻烦。这个时候我们可以在元素中，使用搜索功能，搜索弹框的文本

平常使用想知道每一步结果，必须一步一步打印，很麻烦

但是直接使用$_ 每次都是引用上一次运行的结果，这样就简单了许多

前端想要再次发送某一个请求，除了刷新之外，可以直接在 chrome 调试器 network 板块进行操作

元素面板选中后，直接鼠标拖动当前的元素即可

选中当前元素，然后点击H键。此操作实际上增加了visibility: hidden !important;

右键选中，选择存储为全局变量

扩展

Ctrl + Tab 向左切换标签页

Ctrl + shift + Tab 向右切换

Ctrl + 1 切换到第一个页面

Ctrl + 9 切换到最后一个页面

Ctrl + n (数字) 切换到第几个标签页

ctrl + T 新打卡标签页

ctrl + 0 页面还原到100%的缩放