前端必须知道的开发调试知识

文过饰非452
141 阅读8分钟

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

今天学习了《前端必须知道的开发调试知识》，整节课程非常简单易懂，主要是讲解了浏览器控制台的开发调试的使用，让我们在代码调试或者是项目修改bug的时候更加方便，更加快速。而且开发调试也是我们前端必须要学习的知识，在当前乃至以后都会用的知识，可谓是影响甚远。

本堂课重点内容

  • bug和debug
  • Chrome Devtools
  • 移动端H5调试
  • NodeJS调试

详细知识点介绍

详细的笔记分享到文章最后，一起学习！

课后个人总结

在没有学习本节课之前，我个人只是简单的知道打开控制台，输出内容，查看错误，但是并不知道太多，也只是勉强够用。而且自学看视频中，也只是用到了会讲一下怎么使用，完全没有系统地进行一个学习。学习过本节课之后，对开发调试有了一个整体的认知，也对一些不知道的调试知识进行了学习和理解，觉得这些很不错，以后肯定会用到。

笔记

前端必须知道的开发调试知识

一、Bug和Debug

1、Bug的产生

image-20220804095856818.png

2、前端Debug的特点

  • 多平台（浏览器、NodeJS、小程序、桌面应用...）
  • 多环境（本地开发环境、线上环境）
  • 多工具（Chrome devTools、Chaarles..）
  • 多技巧（Console、BreakPoint、sourceMap、代理）

二、Chrome DevTools

1、动态修改元素和样式

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

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

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

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

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

  • 可以用以下2种方式强制激活伪类

    • 选中具有伪类的元素，点击:hov
    • DOM树右键菜单，选择Force State

2、Console

日志分类

  • console.log

  • console.warn

  • console.error

  • console.debug

  • console.info

  • console.table（具象化的展示JSON和数组数据）

  • console.dir（通过类似文件树的方式展示对象的属性）

  • 占位符（给日志添加样式，可以突出重要的信息）

    • %s ： 字符串占位符
    • %o ： 对象占位符
    • %c ： 样式占位符
    • %d ： 数字占位符

3、Sorce Tab

image-20220804101551079.png

  • 区域一：页面资源文件目录树

  • 区域二：代码预览区域

  • 区域三：Debug工具栏

    • 从左到右依次为
    • 暂停（继续）
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活（关闭）所有断点
    • 代码执行异常处自动

  • 区域四：断点调试器

（1）Break Point 和 Watch

  • 使用关键字debugger 或代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标 hover变量可以查看变量的值
  • 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值

（2）Scope 和 Call Stack

  • 展开Scope可以查看作用域列表(包含闭包)
  • 展开Call Stack 可以查看当前javaScript代码的调用栈

（3）Source Map

压缩后的代码如何调试

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

压缩可以使用webpack、UglifyJS、terser
复制代码

image-20220804103115094.png

  • mappings字段存储了源文件和Source Map的映射

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

思考题：既然Source Map 可以映射源码,那压缩后的代码不就又不安全了吗?

Source Map通常是用来监控，在监控的时候，整个代码上线的时候，为了安全是不上线sourceMap的，同时也是为了减少体积，那么没有Source Map，我们怎么来映射调试源码呢 ？

我们在项目打包的时候，会带上Source Map进行build，打包后将Source Map上传到另一个平台，比如监控平台。然后就可以将项目中的SourceMap删除掉，上线不带Source Map的打包后的项目。

如果线上代码出错了，我们就可以对照平台中的源码文件，找出对应的错误。

4、NetWork

image-20220804103258612.png

  • 区域1：控制面板
  • 区域2：过滤面板
  • 区域3：概览区域
  • 区域4：Request Table面板
  • 区域5：总结面板
  • 区域6：请求详细面板

5、Application

Application面板展示与本地存储相关的信息

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie
点击左侧Application下的Stroage面板中的Clear Site Data可以清除网页的本地存储数据
复制代码

6、Performance

image-20220804104538934.png

  • 区域1：控制面板

  • 区域2：概览面板

    • FPS：每秒帧数
    • CPU：处理各个任务花费的时间
    • NET：各个请求花费时间

  • 区域3：线程面板

    • Frames：帧线程
    • Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制
    • Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制

  • 区域4：统计面板

7、Lighthouse

image-20220804105140351.png

核心Web指标

image-20220804105207697.png

Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
复制代码

image-20220804105235937.png

First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
复制代码

image-20220804105301386.png

Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
复制代码

三、移动端H5调试

1、真机调试

IOS

1、使用Lightning 数据线将iPhone与 Mac 相连

2、iPhone开启Web检查器(设置->Safari ->高级->开启 Web检查器)

3、iPhone使用Safari浏览器打开要调试的页面

4、Mac打开Safari浏览器调试(菜单栏—>开发-> iPhone设备名->选择调试页面)

没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器
复制代码

Andriod

1、使用USB数据线将手机与电脑相连

2、手机进入开发者模式，勾选USB调试，并允许调试

3、电脑打开Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices选项

4、手机允许远程调试，并访问调试页面

5、电脑点击inspect 按钮

6、进入调试界面

直接使用手机扫码查看，体验更佳
复制代码

2、VConsole

image-20220804105636242.png

  • 日志(Logs) :

    • console. loglinfolerror|..

  • 网络(Network):XMLHttpRequest

  • 节点(Element) : HTML.节点树

  • 存储(Storage) : cookies

  • Localstorage, sessionstorage手动执行JS命令行

  • 自定义插件

3、使用代理工具

原理

  • 电脑作为代理服务器
  • 手机通过HTTP代理连接到电脑
  • 手机上的请求都经过代理服务器

以Charles为例

1、安装Charles

2、查看电脑IP和端口

3、将IP、端口号填入手机 HTTP代理

4、Charles允许授权

5、使用SwitchHosts!软件给Mac电脑配Hosts

6、手机访问开发环境页面

默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
复制代码

常用代理工具

  • Charles:适合查看、控制网络请求，分析数据
  • Fiddler:与Charles类似，适合windows平台
  • spy-debugger:远程调试手机页面，抓包
  • Whistle:基于Node 实现的跨平台Web调试代理工具

四、NodeJS调试

1、Inspector Protocol + Chrome Devtool

（1）执行命令 node --inspect=8888 index.js

image-20220804110742422.png

（2）chrome浏览器访问服务

image-20220804110804805.png

（3）点击绿色 node 图标打开 node 调试面板（在chrome://inspect/#devices中配置network target）

image-20220804110926187.png

（4）在node调试面板中使用断点调试

image-20220804111014355.png

五、常用开发调试技巧

1、线上即时修改Overrides

image-20220804111120989.png

1、打开Sources面板下的的Overrides

2、点击Select folders for Overrides。选择一个本地的空文件夹目录

3、允许授权

4、在page中修改代码，修改完成后command +s 保存

5、打开devTools，点击右上角的三个小点->More tools ->Changes，就能看到所有修改了

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

image-20220804111244518.png

3、启用本地source map

image-20220804111309989.png

线上不存在Source Map时可以使用Map Local 网络映射功能来访问本地的 SourceMap文件。

4、使用代理工具Mock数据

image-20220804111343296.png

1、右键选中要mock数据的接口，选择save response，保存文件到本地。

2、本地打开保存的文件，编辑想mock的数据并保存。

3、右键选中第一步的接口，选择Map Local , Local Path选择第二步的文件。

avatar
文章
阅读
粉丝