• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

谷歌调试工具小技巧

开发技术 开发技术 4小时前 2次浏览

谷歌调试工具的使用是每一名前端开发者必备技能之一,其中有些比较有意思的小彩蛋,因为并不常用,所以很多人可能并不知道,下面一起来涨姿势吧!

打开调试工具面板:

1.更改调试工具的主题色

ctrl + shift + p

在出现的输入框中输入dark,选中第一个:

谷歌调试工具小技巧

点击Reload DevTools按钮,重启工具面板:

谷歌调试工具小技巧

 

谷歌调试工具小技巧

 

2.调整工具面板的位置

ctrl + shift + p 出现的输入框中输入 dock,选择对应的位置:

谷歌调试工具小技巧

 

3.console.log() 打印的内容增加样式以便于快速找到:

console.log("%c 我叫考拉,年龄18", "color: #000;background:white;padding: 10px")

谷歌调试工具小技巧

 有样式的话,console.log()在控制台很容易找到,也不用在调试的时候加一些标识了(比如:console.log(123)),但在实际使用过程中,不可能这样写样式,浪费很多时间。

可以利用编辑器中的代码块功能(以webstorm为例,具体怎么配置代码块,这里不赘述,可以百度一下):

谷歌调试工具小技巧

 输入: logs + Tab:

谷歌调试工具小技巧

谷歌调试工具小技巧

  光标直接定位到配置代码块的变量处,填上需要打印的值或变量即可。

 

4.console.table(数组)

谷歌调试工具小技巧

 

 5.console.time()和conole.timeEnd()计算代码段执行耗时

谷歌调试工具小技巧

 

 6.console.clear()清除日志信息

谷歌调试工具小技巧

 

 7.inspect(获取dom)打印对应的dom并打开element调试

谷歌调试工具小技巧

谷歌调试工具小技巧

 

 

希望以上这些小技巧,能给大家带来一点便捷,如果你也有一些好玩的操作,欢迎留言~

 

 脚踏实地行,开阔天空飞



程序员灯塔
转载请注明原文链接:谷歌调试工具小技巧
喜欢 (0)