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

用户835936271820
73 阅读6分钟

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

这是我参加【第四届青训营】笔记创作活动的第12天

作为一名前端工程师，一定是需要调试前端代码的，这堂课我们就学习了一些前端的代码调试技巧。

01—Bug与Debug

01-1—Bug的产生

image-20220805101054417.png

bug无处不在，不可避免。如果不想写bug最好的办法就是不写代码。虽然bug无处不在，但我们也有很多debug方法，使我们的代码更加完美。

01-2—前端Debug的特点

  • 01—多平台——浏览器、Hybrid、Nodejs、小程序、桌面应用等；
  • 02—多环境——本地开发环境、线上环境；
  • 03—多工具——Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole…
  • 04—多技巧——Console、BreakPoint、sourceMap、代理等

02—Chrome DevTools

02-1—动态修改元素和样式

image-20220805102034256.png 浏览器—检查

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

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

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

点击body右键Capture node screenshot截屏

02-2—Console

image-20220805103021786.png

展示日志

左侧可以选择等级，对日志进行分类查看

  • console.log—打印一条日志；
  • console.warn—打印警告-黄色；
  • console.error—红色；
  • console.debug—蓝色
  • console.info—与log类似
  • console.table—具象化地展示JSON和数组数据；
  • console.dir—通过类似文件树的方式展示对象的属性；
  • 占位符—给日志添加样式，可以突出重要的信息
  • %s:字符串占位符；%o:对象占位符；%c:样式占位符；%d:数字占位符。

02-3—Sorce Tab

可以展示源代码

image-20220805103738677.png

区域1：页面资源文件目录树；

区域2：代码预览区域；

区域3：Debug工具栏，从左到右依次为

暂停(继续)；单步跳过；进入函数；跳出函数；单步执行；激活(关闭)所有断点；代码执行异常处自动。

区域4：断点调试器

02-3-1—Break Point与Watch

image-20220805104214561.png

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

image-20220805105221114.png

展开Scope可以查看作用域列表(包含闭包)；

image-20220805105312065.png 展开Call Stack可以查看当前javaScript代码的调用栈。

image-20220805105449671.png

02-3-3—压缩后的代码如何调试？

前端代码天生具有“开源”属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’、‘b’等替换，整体变得不可调试，那么压缩后的代码如何调试呢？

image-20220805110658349.png

02-3-4—Source Map

image-20220805105519569.png

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

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

image-20220805105712366.png

既然Source Map可以映射源码，那压缩后的代码带上Source Map上线不就不安全了吗？

项目打包时带上Source Map 在上线前将Source Map上传到监控平台，上传不带Map的产物部署上线。

线上出错了，收集到的错误分析时对照平台中本身的Source Map文件，展示出对应的源码问题。

开启关闭Source Map 用的devtool配置。

02-4—NetWork

image-20220805110752687.png

区域1：控制面板；

区域2：过滤面板；

区域3：概览区域；

区域4：Request Table面板；

区域5：总结面板；

区域6：请求详情面板。

02-5—Application

image-20220805111210796.png

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

Local Storage ; Session Storage ; IndexedDB ; Web SQL ; Cookie 。

点击左侧Application下的Storage面板中的Clear Site Data可以清楚网页的本地存储数据。

02-6—Performance

image-20220805112432450.png

区域1：控制面板；

区域2：概览面板

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

区域3：线程面板

  • Frames:帧数程；
  • Main:主线程，负责执行Javascript,解析HTML/CSS，完成绘制；
  • Raster:Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板。

02-6-1—Performance运用 示例

image-20220805113825162.png

02-7—Lighthouse

image-20220805113849072.png

03—移动端 H5 调试

03-1—真机调试

iOS
  • 使用Lightning数据线将iPhone与Mac相连；
  • iPhone开启Web检查器(设置 -> Safari -> 高级 -> 开启Web检查器)；
  • iPhone 使用Safari浏览器打开要调试的页面；
  • Mac 打开Safari浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)；
  • 在弹出的Safari Developer Tools中调试。

没有iPhone设备可以在Mac App Store安装Xcode使用其内置的iOS模拟器

Android
  • 使用USB数据线将手机与电脑相连；
  • 手机进入开发者模式，勾选USB调试，并允许调试；
  • 电脑打开Chrome浏览器，在地址栏输入：Chrome://inspect/#devices 并勾选Discover USB devices 选项；
  • 手机允许远程调试，并访问调试页面；
  • 电脑点击inspect按钮；
  • 进入调试界面。

直接使用手机扫码查看，体验更佳。

03-2—VConsole

image-20220805115341563.png

03-3—使用代理工具调试

原理：

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

以Charles为例：

  • 安装Charles；
  • 查看电脑IP和端口；
  • 将IP、端口号填入手机HTTP代理；
  • Charles允许授权；
  • 使用SwitchHosts!软件给Mac电脑配Hosts；
  • 手机访问开发环境页面。
  • 默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。

03-4—常用代理工具

image-20220805115738552.png

04—Nodejs调试

04-1—Inspector Protocol + Chrome Devtool

image-20220805115805812.png

04-2—Inspector Protocol + VS Code

image-20220805115819755.png

05—常用开发调试技巧

05-1—线上即时修改Overrides

image-20220805115923642.png

  • 打开Source面板下的Overrides；
  • 点击Select folders for Overrides。选择一个本地的空文件夹目录；
  • 允许授权；
  • 在page中修改代码，修改完成后command + s保存；
  • 打开devTools，点击右上角的三个小点 -> More tools ->Changes，就能看到所有修改了。

05-2—利用代理解决开发阶段的跨域问题

image-20220805115939836.png

05-3—启用本地source map

image-20220805115959442.png

05-4—使用代理工具Mock数据

image-20220805120017127.png

  • 右键选中要mock数据的接口，选择save response，保存文件到本地；
  • 本地打开保存的文件，编辑想mock的数据并保存；
  • 右键选中第一步的接口，选择Map Lpcal，Local Path选择第二步的文件。

05-5—小黄鸭调试大法

传说中程序大师随身携带一只小黄鸭，在调试代码使会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。

———————————《程序员修炼之道》

avatar
文章
阅读
粉丝