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

怒码少年
118 阅读5分钟

1.1 Bug与Debug

1.1.1 Bug的诞生

1947年9月，在计算机上找到一个虫子。

1.1.2 前端 Debug 的特点

  • 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用等。

  • 多环境：本地开发环境、线上环境。

  • 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……

  • 多技巧：Console、BreakPoint、sourceMap、代理等。

1.2 Chrome DevTools

也就是我们在一个页面上鼠标右键然后选择检查后打开的那个玩意，这个很常用。

打开之后，第一栏上会显示：Elements（元素）、Console（控制台）、Source（源代码）、Performance（应用程序）、Network（网络）

1.2.1 Elements：动态修改元素和样式

  • 选择一个元素，点击样式下的 .cls 开启动态修改/添加元素的 class；
  • 输入字符串可以动态地给元素添加类名；
  • 勾选/取消类名可以动态的查看类名生效效果；
  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览；
  • Computed（已计算，一般在样式旁边）下可以搜索你要的属性，鼠标经过搜索结果会显示一个箭头，点击箭头可以跳转到 styles 面板中的 对应的css 规则（相当于找到了这个属性的位置和具体内容）。

补充： 可以用以下2种方式强制激活伪类（某个状态下的样式），例如鼠标经过显示阴影这个就可以用这个方法查看阴影，免得鼠标移一开就看不到阴影了：

  • 选中具有伪类的元素，在样式下点击 :hov，然后选择你要看的伪类
  • 选中设置伪类的DOM 树右键菜单，选择 Force State，然后选择要看的伪类类型

1.2.2 Console：展示日志

  • console.log（不同类型的值输出的颜色是不一样的。）
  • console.warn 黄色
  • console.error 红色
  • console.debug 蓝色
  • console.info
  • console.table（具象化地展示 JSON 和数组数据，比如一些数组如果用console.log打印的话，还要在控制台手动展开，但是用了这个就不用了）
  • console.dir（通过类似文件树的方式展示对象的）
  • console.time 计算循环十万次所需要的毫秒数。

console.time() 方法是计算器的起始方法，结束方法为 console.timeEnd() ，该方法执行后会将执行时长显示在控制台上。

  • 占位符： 给日志添加样式，可以突出重要的内容

  • %s 字符串占位符

  • %o 对象占位符

  • %c 样式占位符

  • %d 数字占位符

1.2.3 Source：展示项目源代码

部位讲解

前端调试.png

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

  • 区域2：代码预览区域

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

  • 区域4：断点调试器

Break Point 与 Watch

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

Scope 与 Call Stack

展开 Scope 可以查看作用域列表（包含闭包）

关于闭包

展开 Call Stack 可以查看当前 JavaScript 代码的调用栈

关于调用栈

压缩后的代码如何调

使用工具：Source Map mappings 字段存储量源文件和 Source Map 的映射

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

1.2.4 Network

前端调试Network.png

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

1.2.5 Application：浏览器存储相关

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

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

点击左侧Application-Storage面板-Clear Site Data：清除本地存储数据。

1.2.6 Performance：性能

前端调试Performance.png

区域1：控制面板 区域2：概览面板

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

区域3：线程面板

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

区域4：统计面板

解决页面性能问题的一般步骤： 页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码

1.3 移动端调试

1.3.1 真机调试

安卓的话可以直接手机扫码，IOS直接插数据线

1.3.2 vconsole

vConsole 由腾讯一个轻量、可拓展、针对手机网页的前端开发者调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。

日志、网络、节点、存储、手动执行js命令行、自定义插件

1.3.3 使用代理工具调试

原理：

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

1.3.4 nodejs 调试

  • 执行命令：node-inspect=8888 index.js
  • chrome 浏览器访问服务
  • 点击绿色node图标打开node调试面板
  • 在node调试面板中使用断点调试
avatar
文章
阅读
粉丝