Web 调试技术 | 青训营笔记

王水
105 阅读1分钟

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

10. Web调试技术

10.1 Bug与Dbug

前端Bug的特点

image.png

10.2 Chrom DevTools

动态修改元素和样式

image.png

Console

image.png

**Sorce Tab

image.png

Break Point与Watch

image.png

Scope与Call Stack

image.png

压缩后的代码如何调试？

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

Source Map

image.png

NetWork

image.png

Application

image.png

Performance

image.png

Performance 运用 示例

image.png

LightHouse

image.png

10.3 移动端H5调试

真机调试

image.png

VConsole

image.png

使用代理工具调试

image.png

常用代理工具

image.png

10.4 NodeJS调试

Inspector Protocol + Chrome Devtool

image.png

Inspector Protocol + VS Code

image.png

10.5 常用开发调试技巧

线上及时修改 Overrides

image.png

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

image.png

启用本地souce map

image.png

使用代理工具Mock数据

image.png

小黄鸭调试大法

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

avatar
文章
阅读
粉丝