这是我参与「第四届青训营」笔记创作活动的第5天
Bug的产生
前端debug的特点
- 多平台
浏览器、小程序、桌面应用、NodeJs、Hybrid
- 多环境
本地开发环境、线上环境
- 多工具
Chrome devTools、Charles、Spy-Debugger、Whistle
- 多技巧
Console、BreakPoint、SourceMap、代理
chrome devtool
修改元素和样式
点击elements面板
双击或右键改变类名
改样式：computed-输入要改的属性
console日志
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具象化地展示JSON和数组数据
- 占位符：用于给日志添加样式，可以突出重要的信息
- %s：字符串占位符
- %o：对象占位符
- %c：样式占位符
- %d：数字占位符
source
三个部分分别是：
文件 代码 调试代码
可以在你觉得有错的部分加上debugger；新增断点，鼠标放在变量上面可以看到结果。根据变量的值进行调试。
watch对某一个值进行监听，可以看到代码运行过程中，该值的变化。
Scope作用域Call Stack执行栈
scope看对应变量。
Call Stack执行上下文，调用栈，看当前程序执行到了哪个函数。
压缩后的代码如何调试？
压缩后的代码，变量名会变，用Source Map生成映射文件之后，压缩代码会变成源文件。
Performance
调试性能可以用这个，打开面板有四个区域
-
区域一：控制面板
-
区域二：概览面板
- FPS: 每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费的时间
-
区域三：线程面板
- Frames:帧线程
- Main：主线程，复制执行Javascript，解析HTML/CSS，完成绘制
- Raster:Raster线程，负责完成某个layer或者某些块tile的绘制
-
区域四：统计面板
Network
整个站点的网络请求，可以看参数返回头，值
模拟弱网，更改代码：NetWork->3G
Application
- 本地存储
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
- 快速清除数据：Storage->claer slie data
- 网页截图
选中要截图的部分，右键选择Capture Node screenshot
利用代理解决跨域问题
原理：浏览器有同源策略策略的限制，会出现跨域问题。但是服务器之间不需要同源，所以，通过代理服务器接收浏览器的请求(代理服务器和浏览器同源)，代理服务器再转发请求给真实的服务器。
移动端H5调试/混合移动端开发
真机调试
在同一个局域网下，扫二维码，看样式。
代理工具调试
-
原理
- 将电脑作为代理服务器
- 手机通过HTTP代理链接到电脑上
- 手机上的请求都经过代理服务器
-
以Charles为例
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts！软件给Mac电脑配置Hosts
- 手机访问开发环境页面
-
常用工具
- Charles：Mac
- Progress：Windows
常用调试技巧
线上及时修改
看改了哪：sources->changes
小黄鸭debugger
给同学、同事一行一行讲代码
