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

黑白绮
366 阅读5分钟

在我们前端开发的过程中，会出现各种各样的bug，导致功能不能正常实现。为了实现正常的功能就必须消除bug。每个程序员都必须掌握debug的方式和方法。提高工作效率，早点下班！

一、前端debug的特点

  1. 多平台

    浏览器、nodejs、小程序、桌面应用等

  2. 多环境

    本地开发环境、线上环境

  3. 多工具

    chrome、devTools、Charles、Spy-Debugger、vConsole等

  4. 多技巧

    Console、BreakPoint、sourceMap、代理

二、前端debug的主要工具 devTools

每个浏览器都会有devTools，就是在页面上右键--->检查工具，或者直接F12键显示出来

111.png

可以在右上角选择devTools显示的区域，有左、下、右和单独显示为一个页面

222.png

那么右边那么多面板都有哪些用处呢？

Element工具栏

首先是element面板，可以选择查看页面元素，包括页面的html结构，css样式等

333.png

点击左上角的箭头，在左边页面上滑动就可以查看页面的元素

1.gif

选择你想要的页面元素，可以在右侧的css样式里面随意更改样式，包括改变元素的宽高，布局方式等操作。方便我们在写页面的时候，把握不准像素的时候，可以在devTools中先改变样式，觉得是这个效果再去更改代码，避免代码重复的更改。

2.gif

console日志工具栏

console日志工具栏是我们在写js代码时用到的最多的，我们可以在js代码中插入

console.log("你想要观察的变量")

就可以在devTools中查看相应的输入日志，在函数的不同阶段插入不同的console可以帮助我们观察到函数不同阶段变量的变化，帮助我们找出问题。

444.png

console除了可以用log打印日志，还可以打印各种信息。当我们的代码量非常大的时候，如果控制栏全是一样的log日志，也不利于我们快速的找到想要的打印，这个时候可以配合其他的打印，展示不同的样式和颜色，便于区分

  • console.log()日志打印 灰色是字符串 蓝色数字number

  • warn 输出警告信息（黄色）

5555.png

  • error 输出错误信息（红色）

  • debug

  • dir 展示节点的属性

    使用dir可以展示一个html节点所包含的信息，包括该节点的属性、方法等等

666.png

  • info

  • table 具象化展示json和数组数据、

  • 占位符 %S 字符串占位符 %O 对象占位符 %C 样式占位符 在字符串之前添加样式，更加突出主题信息

  • 生成日志text文件，在实际的业务中，我们可能会使用第三方付费的框架，那么当我们使用的时候出现自己解决不了的问题，或者是框架的问题的时候，一般会有专门的技术人员辅佐我们解决bug，这时候因为是线上联系，对方看不到你控制栏的输出完整信息，你就可以通过生成日志文件，把日志文件发送给对方，对方就能看到你的完成报错信息，帮助你解决问题

3.gif

source工具栏

777.png

Source面板展示页面的源文件信息，帮助我们查看具体的报错信息

  • 左 文件结构

  • 中 文件源码

  • 右 工具栏

    • BreakPoint断点 在html代码中加入debugger，在浏览器解析中，遇到这个就会进入断点状态 鼠标移入变量就会显示当前变量的值

    • 在中间源码点击行号也可以添加断点

121212.png

-   Watch 在Watch中输入想要监听的变量，在程序运行到断点的时候，就可以在watch中直观的看到当前监听变量的值

-   scope 作用域 可以查看作用域列表 包含闭包

-   call stack 执行栈 查看当前js代码的调用栈
  • source map 当我们使用webpack进行代码压缩之后，我们的代码都被压缩成一行，但是我们开发的是压缩之前的代码。当我们开发的某一个文件出错的时候，很难对压缩之后的代码进行排查错误。source map可以将压缩之后代码进行解压缩和转换，能够找到代码压缩之前的映射。比如js1文件出错，就会显示js1，这样我们就不会全部排查js1、2、3等文件的错误了

Performance面版

当我们对网站性能要求比较高的时候，可以在performance面板中查看没一帧。每一毫秒中执行了什么，汇总信息查看加载某一个模块花费了多少时间

  • fps 每秒帧数
  • cpu 处理各个任务花费的时间
  • net 各个请求花费时间
  • frames 帧线程
  • main 主线程 负责执行JavaScript 解析HTML/CSS 完成绘制
  • Raster raster线程 负责完成某个layer或者某些块（tile）的绘制
  • 统计面板

NetWork面板

网络请求资源相关

  • 资源请求 JS CSS img 等

  • 网络请求 get post

    • Header可以查看相关的每一个接口的头信息，传的参数

1010.png

-   在preview查看返回的信息

1111.png

  • 当我们需要模拟慢速网络的时候，可以设置网页网络制式，设置3g网等

999.png

Application

888.png

可以看到本地存储的用户信息，包括localstorage，cookie等

avatar
文章
阅读
粉丝