【金秋打卡】第十天 六大场景 梳理开发痛点 解锁前端进阶路

学习课程名称：六大场景 梳理开发痛点 解锁前端进阶路
章节名称：开发如剑，测试如具，调试如诊
讲师姓名：Brian

课程内容

1. 三类真机调试技巧
2. 如何调试Webpack?如何配置VSCode
3. 接口测试必会的Mock接口&平台介绍

真机调试技巧

Chrome + Android / Safari + iOS

Fiddler / Charles

Weinre, Spy-Debugger,vConsole

Chrome DevTools 的使用
Chrome 的 DevTools 是最常用的调试工具，下面主要介绍下 Elements、Console 和 Source 三个面板的使用。

Elements
Elements 面板会显示目前网页中的 DOM、CSS 状态，且可以修改页面上的 DOM 和 CSS，即时看到结果，省去了在编辑器修改、储存、浏览器查看结果的流程。
Elements 主要可以分为 DOM 结构以及元素（Element）内容两个子面板，下面主要介绍一下 Elements DOM

开启 Elements 面板时，标记的元素后方总会有个 == $0

选中一个元素后再到 Console 面板输入$0，会发现刚刚选中的元素出现在 Console 中,如果再多点几个元素，还可以用$1、$2、$3、$4（到此为止）来拿到前几次选到的元素。

另外在 Console 中对元素按下右键，选择 Reveal in Elements Panel 可以跳到该元素在 Elements 面板中的位置，对 Elements 面板的元素按下右键则有 Scroll to view 可以把视野滚到能看见元素的地方。

想要在 Console 面板中用 JavaScript 操作元素时，$0就非常方便，另外也可以搭配 console.dir($0) 来观察元素的各个属性，如果在 Console 直接输入 $0 或是 console.log($0) 只会显示元素自身。

inspect
有时候一些 dom 节点会嵌套很深，导致我们很难利用 Element 面板 html 代码来找到对应的节点。inspect(dom元素)可以让我们快速跳转到对应的 dom 节点的 html 代码上。
eg：在 console 输入inspect($(’#app’))，回车后便可以跳转到#app 节点的 html,进行审查元素