DevTools一些调试技巧

1.Elements

1.快速定位伪类

2.Console

1.$0

当选择页面中的某个元素后，该元素就会在Console标签中以$0作为该元素的下标进行映射。

$0
$0.title
$0.id
$0.name
$0.className

2.console

1.打印标签的所有属性

console.dir($0)

2.打印信息

console.log($0)

3.以表格的形式进行输出

console.table($0)

4.以分组的形式进行打印输出

console.group("coreqi")
console.log($0)
console.groupEnd()

5.输出代码内容执行时间

console.time("coreqi")
console.log($0)
console.timeEnd("coreqi")

6.断言

function add(a, b) {
    return a + b;
}
console.assert(add(2, 2) === 4, 'add函数计算错误'); //

3.过滤

4.监听

5.ESC

ESC快捷键可以在Sources标签页中可以并行显示Console标签页。

6.将输出内容存储为全局变量进行调试

3.Sources

1.Debugger

在调试控制台中使用CTRL + P，输入文件名:行号可以快速定位到源码中

可以直接添加断点进行调试，也可以添加条件断点进行调试（也可以输入console.log进行日志输出，但console.log返回的是非布尔值，因此条件断点不会命中，但日志输出会执行）

4.Application

存储一些网站中的值

5.一些增强扩展

1.Vue Dev Tools

1.Components【组件标签】

默认是禁止对组件的props进行修改的，可以在Settings中开启 Editable props

2.Vuex【状态管理】

3.Events【事件】

可以看到触发组件的事件以及携带的参数

4.Routing【路由】

5.Performance【性能】

开启后可以看到触发的事件和路由，根据性能图进行调优

6.Settings【插件配置】