「Web 调试技术」| 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天。

1. Bug 与 Debug

• 前端特点
  • 多平台
    • 浏览器、Hybrid、NodeJs、小程序、桌面应用等.
  • 多环境
    • 本地开发环境、线上环境
  • 多工具
    • Chrome devTools、Charles、Spy-Debugger.
  • 多技巧
    • Console、BreakPoint、sourceMap、代理等

2，Chrome DevTools

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的cSs规则

可以用以下2种方式强制激活伪类

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

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

3. 真机调试

IOS

• 使用Lightning数据线将iPhone 与 Mac相连
• iPhone开启Web检查器（设置→>Safari ->高级-→>开启Web检查器)
• iphone使用Safari浏览器打开要调试的页面
• Mac打开Safari浏览器调试(菜单栏→>开发->iPhone设备名→>选择调试页面)
• 在弹出的Safari Developer Tools中调试

没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的ios模拟器

Android

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

直接使用手机扫码查看，体验更佳

4. VConsole

• 日志(Logs) : console.log| infolerror |
• 网络(Network): XMLHttpRequest, Fetch, sendBeacon
• 节点(Element) : HTML节点树
• 存储(Storage) Cookies,LocalStorage, SessionStorage
• 手动执行JS命令行
• 自定义插件

5. 使用代理工具调试

原理

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑手机上的请求都经过代理服务器 以Charles为例:
• 安装Charles
• 查看电脑和端口
• 将IP、端口号填入手机 HTTP代理
• Charles允许授权
• 使用SwitchHosts!软件给Mac电脑配Hosts6
• 丢机访问开发环境页面

默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。

常用的代理工具

6.Node.js调试