【青训营】前端必须知道的开发调试知识

友艺
337 阅读5分钟

这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战

01. 前端Debug特点

  1. 多平台：浏览器、Hybrid、NodeJs、小程序，桌面应用...
  2. 多环境：本地开发环境 ， 线上环境
  3. 多工具：Chrome devTools，Charles，Spy-Debugger...
  4. 多技巧：控制台输出，设断电，SourceMap，代理...

02. Chrome DevTools

谷歌浏览器的开发者工具，主要介绍四个版块的说明与技巧。

  1. Elements
  2. Console
  3. Source Tab
  4. Performance
  5. NetWork
  6. Application

Elements

修改元素和样式

  1. 点击.cls可以动态修改元素的class。
  2. 输入字符串可以动态的给元素添加类名。
  3. 勾选/取消类名可以动态的查看类名生效效果。

image.png

  1. 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览。
  2. Computed下点击样式里，输入对应的样式属性再点击箭头可以跳转到 styles面板中的css规则。

image.png

  1. 强制激活伪类 (用于观察DOM悬浮等效果)

● 选中具有伪类的元素， 点击右侧:hov;

● DOM树右键菜单，选择Force State.

  1. 网页截图，右键DOM标签，“截取节点屏幕截图”。

Console

打印日志（控制台左侧选择等级可以分类查看）：

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table(具象化输出JSON和数组数据，对象数组输出一个二维表格)
  • console.dir(展示树形结构)

问题1：如果需要自定义输出的颜色以及内容怎么做？ -- 占位符

  • 占位符

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

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

示例输出：

console.log('%s %o,%c%s',"hello",{name:'tom',age:18},'font-size:24px;color:red',"Welcome");

效果如下：在%c之后，会将样式应用到后续的输出。

image.png

问题2：如何利用console调试？

案例：获取输入的两个值，相加。

//A输入框：1  
//B输入框：2

console.log(getDomValueA + getDomValueB); //12
 
//观察控制台颜色,可以判断数据类型，其中数值型为蓝色。
console.log(getDomValueA);
console.log(1);

image.png

Source Tab

image.png

对应上述的区域：

  1. 页面资源文件目录树
  2. 代码预览区域
  3. Debug 工具栏，从左到右依次为
    1. 暂停(继续)
    2. 单步跳过
    3. 进入函数
    4. 跳出函数
    5. 单步执行
    6. 激活(关闭)
    7. 所有断点
    8. 代码执行异常处自动断点
  4. 断点调试器

添加断点

  • 在一段JS代码中输入debugger;之后，程序运行到这里就会暂停。
  • 在source的js代码中点击左侧的行号，生成断点。
  • 右侧Breakpoints可以勾选断电是否生效。
  • 选中右侧XHR/fetch breakpoints。当请求发生时，程序就会暂停。
  • 还有DOM，事件监听的breakpoints。

查看变量

  • 鼠标移动到某一个变量上，会显示出当前的变量值。
  • 右侧控制条点击Watch，增加变量可以查看。

Scope 和Call stack

右侧可以看到函数的作用域，闭包。以及调用栈。

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

image.png

监控平台存储Source Map。利用Source Map映射源代码。当项目上线到服务器后再将souce map删除。

Performance

生成报告，记录当前几秒内的数据。

image.png

  1. 控制面板
  2. 概览面板
    • FPS:每秒帧数
    • OPU:处理各个任务花费的时间
    • NET:各个请求花费时间
  3. 线程面板
    • Frames:帧线程
    • Main:主线程，负责执行Javascript:解析HTML/CSS,完成绘制
    • Raster: Raster线程，负责完成某个layer或者某些块(ile)的绘制。
  4. 统计面板

NetWork

通过点击 No throttling可以选择对应的网速。

image.png

Appliacation

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

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

清除数据的步骤：Application -> Storage -> Clear Site Data

image.png

03. 移动端 H5调试

暂时没接触这一块。只能先截图，后面再整理了。

  1. 真机调试
  2. 代理调试
  3. 常用工具

真机调试

image.png

代理调试

image.png

常用工具

image.png

04. 常用开发调试技巧

线上即时修改 Overrides

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

跨域问题

浏览器的源由三个部分构成：协议，域名，端口，有一个不一样就视为不同的源。

同源限制也只有浏览器才有。

代理SourceMap

利用代理服务器转接，解决跨域外，也可以将远程的Source Map代理到本地：

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

小黄鸭调试大法

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

如果你没有小黄鸭的话，千万不要找真人解释代码，否则你很可能会失去一个朋友。——秃头披风侠

avatar
文章
阅读
粉丝