前端必须知道的开发调试知识 ｜ 青训营笔记

Hypnos966
98 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第11天，今天的课程是「前端必须知道的开发调试知识」，老师主要讲解了 Bug与Debug 、 用各种工具进行调试 、 在各种设备上进行调试 等内容。

Bug与Debug

前端Debug的特点

1、多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用等
2、多环境
本地开发环境、线上环境等
3、多工具
Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
4、多技巧
Console、BreakPoint、sourceMap、代理等。

使用Chrome devTools进行调试

动态修改元素和样式

打开浏览器->右键->检查

  • Elements栏中是网页的元素和样式，在侧边的Styles栏中按下.cls按钮，就可以开启动态修改元素的class的功能。
  • 输入字符串可以动态地给元素添加类名
  • 勾选/取消类名可以动态地查看类名生效的效果
  • 点击具体的样式值（字号、颜色、宽高等）可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到Styles面板中的css规则

可以用以下两种方式激活伪类：

  • 选中具有伪类的元素，点击:hov
  • DOM树右键菜单，选择Force State

Console

如字面意思，这是一个控制台。

1、在左侧可以选择等级，分类查看日志：

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info

2、具象化地展示JSON和数组数据：

  • console.table

3、通过类似文件树的方式展示对象的属性：

  • console.dir

4、占位符（给日志添加样式可以突出重要的信息）：

  • %s：字符串占位符
  • %o：对象占位符
  • %c：样式占位符
  • %d：数字占位符

Source Tab

最左侧是页面资源文件目录树，中间是代码预览区域，右侧下方是断点调试器
右侧上方Debug工具栏，从左到右分别是
1、暂停/继续
2、单步跳过
3、进入函数
4、跳出函数
5、单步执行
6、激活/关闭所有断点
7、代码执行异常处自动暂停

Break Point与Watch

  • 使用关键字debugger 或代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开BreakPoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器Watch右侧点击+，可以添加对变量的监控，查看该变量的值

Scope与Call Stack

  • 展开Scope可以查看作用域列表（包含闭包）
  • 展开Call Stack可以查看当前JavaScript代码的调用栈

压缩后的代码如何调试

前端代码天生具有“开源”特性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用a、b等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？

mapping字段存储了源文件和Source Map的映射。英文表示源码及压缩代码的位置关联，逗号分隔一行代码中的内容，分号代表换行。

那么既然Source Map可以映射源码，那压缩后的代码不就又不安全了吗？

为了代码的安全，一般是不上Source Map的，这样也减少了体积。在打包的时候，会带上Source Map去build，那么产物里面是有Source Map的，然后在上线之前，把Source Map上传到另一个平台，比如说监控平台。上传完之后删除掉，然后再上传不带Source Map的产物，使它部署上线。这样线上别人看到的代码就是混淆之后的代码，如果出错，线上监控程序收集到错误就会分析，分析的时候就会对照Source Map文件，然后展示出对应的源码位置。

NetWork

image.png

Application

Application面板展示与本地存储有关的信息。

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

点击左侧Application下Storage面板中的Clear Site Data可以清除网页的本地存储数据。

Performance

image.png 这个界面与网页性能有关。
解决思路：页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码

Lighthouse

image.png

移动端H5调试

真机调试

iOS：
1、使用Lightning数据线将iPhone与Mac相连
2、iPhone开启Web检查器（设置->Safari->高级->开启Web检查器）
3、iPhone使用Safari浏览器打开要调试的页面
4、Mac打开Safari浏览器调试（菜单栏->开发->iPhone设备名->选择调试页面）
5、在弹出的Safari Developer Tools中调试
（没有iPhone设备可以在Mac App Store安装Xcode使用其内置的iOS模拟器）

Android：
1、使用USB数据线将手机与电脑相连
2、手机进入开发者模式，勾选USB调试，并允许调试
3、电脑打开Chrome浏览器，在地址栏输入chrome://inspect/#devices 并勾选Discover USB Devices选项
4、手机允许远程调试，并访问调试页面
5、电脑点击inspect按钮
6、进入调试页面

VConsole

image.png

使用代理工具调试

原理：
1、电脑作为代理服务器
2、手机通过HTTP代理连接到电脑
3、手机上的请求都经过代理服务器

以Charles为例：
1、安装Charles
2、查看电脑IP和端口
3、将IP、端口号填入手机HTTP代理
4、Charles允许授权
5、使用SwitchHosts!软件给Mac电脑配Hosts
6、手机访问开发环境页面
（默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书）

常用代理工具

image.png

NodeJs调试

Inspector Protocol+Chrome devTool

1、执行命令node--inspect=8888 index.js
2、Chrome浏览器访问服务
3、点击绿色的Node图标打开Node调试面板（在chrome://inspect/#devices 中配置network target）
4、在Node面板中使用断点调试

Inspector Protocol+VS Code

VS Code点击运行->添加配置->启动调试->添加断点->查看变量、堆栈

常用开发调试技巧

线上即时修改Overrides

1、打开Sources面板下的Overrides
2、点击Select folders for Overrides，选择一个本地的空文件夹目录
3、允许授权
4、在page中修改代码，修改完成后Command+S保存
5、打开devTools，点击右上角三个点->More tools->Changes，就能看到所有修改了

利用代理解决开发阶段的跨域问题

image.png

启用本地Source Map

image.png

使用代理工具Mock数据

image.png

小黄鸭调试大法🦆

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。（诶嘿）

avatar
文章
阅读
粉丝