前端调试知识 | 青训营笔记

用户9534627805481
99 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第9天

重点

  • bug和debug知识
  • chrome devtool调试
  • 移动端H5调试
  • nodeJs调试
  • 常用调试开发技巧

开发调试知识

bug&debug

bug的产生

前端debug特点

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

chrome DevTools

通过检查页面打开

element 动态修改元素和样式

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值（字号 颜色等）可以进行编辑，浏览器内容区域实时浏览
  • computed下点击样式里的箭头可以跳转到styles面板中的CSS规则 image.png

console

image.png console.log warn error debug info每个对应颜色不一样

image.png

console.log()里面字符串 和 数字 所对应颜色不一样

image.png

image.png console.table 具象化的展示JSON 和数组数据 image.png

image.png

console.dir 通过类似文件数的方式展示对象的属性

占位符：给日志添加样式，可以突出重要的消息 %s：字符串占位符 %o对象占位符 %c样式占位符 %d数字占位符

Sorce Tab

image.png

image.png

image.png

image.png

使用webpack等工具devtool的source map进行压缩解压

image.png 一般生成sourcemap后上传到监控平台就将这个文件删掉，监控平台可以帮助我们查看

network

image.png

application

image.png

performance

image.png

image.png

lighthouse

image.png

移动端调式

真机调试

image.png

image.png

代理模式

image.png

image.png

NodejS调试

image.png

image.png

常用调试开发技巧

线上及时修改override

image.png

代理解决跨域问题

image.png

启用本地sourcemap

image.png

使用代理工具mock

image.png

总结

这节课讲了网页和移动端的调试，和一些技巧，后续可以借鉴十一年

avatar
文章
阅读
粉丝