web调试技术|青训营笔记

zyq努力每一天
86 阅读1分钟

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

课堂重点知识

  1. PC端调试
  2. 移动端调试

知识总结及实例

引言

  • Bug与Debug

前端Debug的特点： image.png

PC端调试

  • Elements——动态修改元素的样式

image.png

  • Console——日志

image.png

  • Source Tab

image.png

断点调试

image.png

image.png

压缩代码调试——Source Map

image.png

  • Performance——网页性能相关

image.png

页面调试的过程 页面卡顿——》查看FPS——》寻找性能瓶颈——》性能优化

使用Lighthose image.png

  • Network

image.png

移动端调试

  • 真机调试

image.png

  • VConsole

image.png

  • 代理工具调试

image.png

  • 前端常用的调试技巧 线上即时修改Overrides

image.png

个人总结

学习web调试技术，掌握前端调试的方法以及控制台相关的标签下的意义，可以对代码进行相关调试

  • Chrome devtools 各 tab 的运用实践
  • 常用代理工具的实践
avatar
文章
阅读
粉丝