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

01zero
76 阅读1分钟

Web 开发的安全之旅 | 青训营笔记

这是我参与 ⌈\lceil第四届青训营⌋\rfloor 笔记创作活动的第9天

课程的重点内容

1.前端调试的特点
2.Chrome DevTools
3.移动端H5调试
4.NodeJS调试
5.常用开发调试技巧
6.总结

一、前端调试的特点

  • 多平台
  • 多环境
  • 多工具
  • 多技巧

image.png

二、Chrom Devtools

  • 动态修改元素样式

image.png

  • Console 的显示

image.png

  • Source Tab

image.png

  • 断点和监控

image.png

  • Scope 和 CallBack

image.png

  • 压缩后的代码调试(出于安全考虑，前端的JS代码需要被压缩，使得整体变得不可读)

image.png

  • NetWork

image.png

  • Application

image.png

  • Performance

image.png

image.png

  • Lighthouse

image.png

三、移动端H5调试

  • 真机调试

image.png

  • VConsole

image.png

  • 代理工具调试 image.png
    • 常用代理工具 image.png

四、 NodeJS调试

  • Inspector Protocol + Chrome Devtool image.png
  • Inspector Protocol + VS Code image.png

五、常用的开发调试技巧

  • 线上即时修改

image.png

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

image.png

  • 启用本地Source Map（应用于线上不存在Source Map的情况下）

image.png

  • 使用代理工具Mock数据

image.png

  • 小黄鸭调试法 image.png

六、总结

本节内容主要介绍了关于Web开发中的调试知识，熟练使用调试工具会大幅增加开发效率，可谓是省心省力，还是非常重要的知识。

知识很多，时间有限。了解了本质才能更容易找到学习的方向。

下篇笔记：TypeScript入门

基础不牢，地动山摇

TO BE CONTINUED

avatar
文章
阅读
粉丝