这是我参与「第五届青训营 」伴学笔记创作活动的第九天。
本课堂重点内容：
- PC端调试
- 移动端调试
PC端调试
Chrome DevTools
打开chrome浏览器，通过F12进入调试界面。
- 点击.cls可以开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选、取消类名可以动态的查看类名生效效果
- 点击具体的样式值，可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
Sorce Tab
- 源码中使用关键字debugger或代码预览区域点击行号设置断点
- 代码执行到断点处，代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选可以激活对应断点
Scope 与Call Stack
- 每调用一个函数，解释器就会把该函数添加进调用栈并开始执行。
- 正在调用栈中执行的函数还调用了其它函数，那么新函数也将会被添加进调用栈，一旦这个函数被调用，便会立即执行。
- 当前函数执行完毕后，解释器将其清出调用栈，继续执行当前执行环境下的剩余的代码。
- 当分配的调用栈空间被占满时，会引发“堆栈溢出”错误。
移动端调试
真机调试
iOS：使用数据线将手机和电脑连接，iphone开启web检查器。然后使用浏览器调试。
Android：同样使用数据线将手机和电脑连接，手机进入开发者模式，勾选USB调试。用电脑打开Chrome，地址栏中输入 chrome://inspect/#devices 并勾选Discover USB devices选项，电脑点击inspect按钮，进入调试界面。
