chrome 调试工具小技巧

参考 https://juejin.cn/book/6844733783166418958/section/6844733783204167687

1.快捷键

  1. 切换工具栏位置: command + shift + D
    在这里插入图片描述
    2.切换 devtools 面板
  • control + [ 向左切换;control+ ] 向右切换
  • control + 1control + 9 1…9直接切换到对应面板
    在这里插入图片描述
    3.递增/递减
    使用 上/下 箭头按键,逐步调整数值(常见于调整css)

4.查找内容:control + F

2.骚操作

1.console.assert()
当我们传入的第一个参数为 假 时,console.assert 打印跟在这个参数后面的值。
在这里插入图片描述
2.console.log({})
当需要console.log 很多变量时,很有可能在输出的时候忘记输出的顺序,极易混淆,阅读起来很困难,这时候就可以使用 console.log({}),效果如下:
在这里插入图片描述
3.监测执行时间
console.time() 开启计时;
console.timeEnd() 结束计时,并输出耗时
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/RedaTao/article/details/121584058