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

灯火星河
60 阅读2分钟

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

今天需要学习的是调试知识，在写前端代码时，调试是必不可少的

1、Bug与Debug

  • 前端Bug的特点

    • 多平台

      • 浏览器、Hybrid、NodeJs、小程序、桌面应用...

    • 多环境

      • 本地开发环境、线上环境

    • 多工具

      • Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...

    • 多技巧

      Console、BreakPoint、sourceMap、代理,,,

2、Chrome devTools

2.1 动态修改元素和样式/Elements

  • 点击 .cls 开启动态修改元素的class

  • 输入字符串可以动态的给元素添加类名

  • 勾选/取消类名可以动态的查看类名生效效果

  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览

  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则

     可以用以下2种方式强制激活伪类
 - 选中具有伪类的元素，点击：hov
 - DOM树右键菜单，选择Force State
2.2 控制台/Console

  • console.log

  • console.warn

  • console.error

  • console.debug

  • console.info

  • console.table

    具象化的展示JSON和数组数据

  • console.dir

    通过类似文件树的方式展示对象的属性

  • 占位符

    给日志添加样式，可以突出重要的信息

    %s:字符串占位符

    %o:对象占位符

    %c:样式占位符

    %d:数字占位符

 左侧可以选择等级，对日志进行分类查看
2.3 源代码/Source

image-20220806225622555.png

断点调试器
  • Break Point与Watch

image-20220806231125226.png

  • Scope与Call Stack

    image-20220806231400101.png

如何调试压缩后的代码

出于安全考虑，js代码通常会被压缩，压缩后代码只有一行，变量用'a' 'b'等替换，整体变得无法阅读，可以通过webpack等工具，用Source Map映射源码，mappings字段存储了源文件和Source Map 的映射

  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容
  • 分号，代表换行
2.4 网络/Network

image-20220806232448233.png

2.5 应用/Application

image-20220806232609283.png

2.6 Performance

image-20220806232746425.png

2.7 Lighthouse

image-20220806232910829.png

3、常用开发调试

线上即时修改Overrides

image-20220806233319826.png

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

image-20220806233347322.png

启用本地source map

image-20220806233415482.png

使用代理工具Mock数据

image-20220806233443739.png

小黄鸭调试法

给小黄鸭解释每行代码，定位问题

4、总结

通过这节课，我终于对前端的开发调试工作有了初步的认识和了解，并且在课程过程中，我也在跟着老师的步骤和自己的想法一点点操作实践，实践是检验真理的唯一标准，在实际上手中，我对调试的功能作用有了很大的认识上的进步，也学会了使用工具调试，调试在前端开发中是必不可少的，这节课我受益匪浅。

avatar
文章
阅读
粉丝