适用场景：
- 新项目新工程如何快速熟悉整体代码，快速定位问题
- 本地环境无法启动，只能在预发或者测试环境进行调试场景【老项目定位问题】
- 查看当前数据后，想要了解其他业务数据场景
1.1 Elements
elements使用过程中大部分是styles或者Computed
【可以通过styles或者直接在页面修改添加样式来完成页面样式调整】
其中也可以使用Event Listeners【事件监听】，事件监听可以查看每个DOM上涉及的事件。
注：因为存在事件冒泡，每一项事件中可能会存在多个事件
以click事件为例，click事件下包含六个事件：
我们可以通过点击remove去剔除事件，或者鼠标悬停定位到具体某项，包括右侧超链接跳转到具体的url。
1.1.1）事件捕获机制
一般情况下，按照事件捕获，由顶层节点到目标节点逐个显示。
因此途中顺序是window -> dcoument -> html -> div
1.1.2） 打包构建方式
其次我们可以通过右侧超链接去判断，由于存在工程化打包，现有基本上打包输出模式，基本规则如下：
"文件名" + ".hash值" + “文件后缀名" + ": 标记位”
【根据不同的打包方式可能不一样，具体查看sourceMap使用】
一般携带明显标记【比如vue, react , dom, min, lib】基本是组件代码
综上所述，我们通过这种方式去定位到具体需要的业务场景。
除上述内容以外，Properties属性，主要是针对将DOM中对象化，可以查看具体明细。
1.2 NetWork + Sources
1.2.1）NetWork
如何快速定位到具体业务，也可以通过NetWork形式。
一般习惯使用“Fetch/XHR”形式找到具体接口调用，可以通过Initiator查看整体调用链
Request initiator chain：类似捕获机制，展示整体链路请求地址。
Request call stack：会将发起请求到各个组件调用整体链路都会展示出来。
从中我们可以看出：存在ajax代码，Vue底层源码以及业务代码
一般业务代码的形式如何看出？【一般本地代码都是显性展示具体的方法名称和链路，这里只谈隐性】
1）关注anoymous（匿名函数）
2）右侧超链接的地址（也是sourceMap打包后的路径模板）
可以通过上述规律点击后续超链接定位到具体的代码【代码都是一般都是打包后的，本地一般是源代码】
注：如果想看看组件源码也可以从中点击跳转查看
点击后大概能猜测出是源码。
【有些生产代码中由于sourceMap设置是没有注释，且全部匿名化丑化，可以多关注看下业务代码写的错误提示或者拦截提示，能具体定位】
接下来就是使用Sources进行debugger
1.2.2） Sources
Sources使用先在页面代码中debugger，打好断点。
【一般建议是点击事件或者初始化事件，方便寻找代码源。如果知道具体断点位置，可以直接代码中debugger】
右侧主要介绍Scope和CallStack
a）Scope：作用域
其中一般作用域包含以下枚举值：
- Local：本地
- Closure：闭包
- Script：脚本
- Global：全局对象
- Window：window对象
可以通过右侧作用域中关注到当前对象挂载内容，以及其他字段属性值。
其中有些字段值是找不到，可以通过原型链形式，通过原型对象prototype往上查找
其次函数中如果我们想要找到具体方法，查询目标对象TargetFunction,通过FunctionLocation跳转到具体的业务逻辑
