[Web调试技术| 青训营笔记]

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

一、视频课笔记：

1.本堂课重点内容：

1. Web 应用使用 Chrome devTools 调试
2. 移动端 H5 调试
3. NodeJs 应用调试
4. 常用代理工具的使用

2.详细知识点介绍：

1. Web 应用使用 Chrome devTools 调试

Bug：

BUG的英文释义是“虫子”，现在人们将再电脑系统或程序中，隐藏着的一些未被发现的缺陷或问题统称为bug，人类历史上第一个程序BUG就是与虫子有关。第一代计算机是由许多庞大的真空管组成，并利用大量的电力来使真空管发光。引得一只小虫子Bug钻进了一支真空管内，导致整个计算机无法工作。研究人员费了半天时间，总算发现原因所在，把这只小虫子从真空管中取出后，计算机又恢复正常。

Debug：

01.多平台

浏览器、Hybrid、 NodeS、小程序、桌面应用等

02.多环境

本地开发环境、线上环境

03.多工具

Chrome devTools. Charles、Spy-Debugger、Whistle. vConsole

04.多技巧

Console、 BreakPoint、 sourceMap、代理等

Chrome devTools：

• 动态修改元素和样式
• console
• SorceTab
• Break Point 与 Watch
• Scope 与 Call Stack
• 压缩后的代码如何调试
• NetWork
• Source Map
• Application
• Performance
• Lighthouse

2. 移动端 H5 调试

• 真机调试
• VConsole
• 使用代理工具调试：
  • 原理: 电脑作为代理服务器 手机通过HTTP 代理连接到电脑手机上的请求都经过代理服务器
  • Charles为例:
  • 1.安装Charles默认情况下Charles无法抓取到HTTPS的请求，需要安装证书
  • 2.查看电脑IP和端口
  • 3.将IP、端口号填入手机 HTTP 代理
  • 4.Charles 允许授权
  • 5.使用SwitchHosts!软件给 Mac 电脑配Hosts
  • 6.手机访问开发环境页面
• 常用代理工具

3. NodeJs 应用调试

• Inspector Protocol + Chorme Devtool
• Inspector Protocol + VS Code

4. 常用代理工具的使用

• 线上即时修改Overrides
• 利用代理解决开发阶段的跨域问题
• 启用本地source map

三、个人思考与总结： 1.Web调试技术的应用广，非常值得深入学习和掌握。