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

学习内容

移动端

方法

1.真机调试 2.VConsole 3.代理工具 常用代理工具：

• Charles适合查看，控制网络请求，分析数据
• Fiddler 与Charles类似 适合windows平台
• spy-debugger 远程调试手机页面，抓包
• Whistle 基于node实现的跨平台Web调试代理工具

例子中用的Charles别名小花瓶 Map Remote资源代理到远程某个地址 Map local资源代到本地

Nodejs调试

VScode调试

开发常用调试技巧

• 线上即时修改

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

• 利用代理解决开发阶段的跨域问题
• 启用本地 source map 线上不存在 Source Map 时可 以使用 Map Local 网络映射 功能来访问本地的 Source Map 文件。
• 使用代理工具 Mock 数据

1. 右键选中要 mock 数据的接口，选择save response，保存文件到本地。
2. 本地打开保存的文件，编辑想mock 的数据并保存。
3. 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。

• 终极调试方法 小黄鸭调试大法 传说中程序大师随身携带一只小 黄鸭，在调试代码的时候会在桌 上放上这只小黄鸭，然后详细地 向鸭子解释每行代码，然后很快 就将问题定位修复了。 --《程序员修炼之道》

总结

Web技术调试是指检查网站代码、配置、解决冲突，优化网站性能，提高网站可用性的过程。它涉及到各种Web技术，如HTML、CSS、JavaScript、PHP等，通过深入分析、解决问题，使网站的功能正常完整、性能优化，从而达到网站完善、用户体验更好的目的。