学习WEB调试技术 | 青训营笔记

Mario556
92 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

一、本堂课重点内容：

本堂课的知识要点有哪些？

  • Bug与Debug
  • Chrome DevTools
  • 移动端H5调试
  • Node.js调试
  • 常用开发调试技巧

二、详细知识点介绍：

Bug与Debug

前端Bug的特点

  1. 多平台：浏览器、Hybrid、Node.js、微信小程序、桌面应用等
  2. 多环境：本地开发、线上环镜
  3. 多工具：Chrome devToos、Spy-Debugger、Whistle、vConsole、Charles···
  4. 多技巧：Console、BreakPoint、sourceMap、代理等

Chrome DevTools

Elements

image.png

在需要调试的页面上点击鼠标右键选择‘检查’即可打开调试工具，选择elements（元素），我们可以看到页面结构以及样式如上图所示。

在数字1处的‘样式’，我们可以对页面已有的样式进行查看。点击1.1处，我们可以将页面中的伪类进行确定状态以方便查看样式。点击1.2处，我们可以在页面中添加一些样式来查看。

在数字2处的‘已计算’，我们可以更加方便地搜索你想要知道地样式数据，并且对盒子容器有更加直观的查看。

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

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

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

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

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

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

  1. 选中具有伪类的元素，点击：hov
  2. DOM树右键菜单，选择 Force State

Console

image.png

我们点击控制台，在这里我们可以对日志进行一些打印。

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

  • console.log 普通打印

  • console.warn警告打印

  • console.error错误打印

  • console.debug调试打印

  • console.info调试信息打印

  • console.table将JSON数据以表格的形式展示

  • console.dir将节点以树的形式打印出来

  • 占位符

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

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

Source

image.png

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

区域2：代码预览区域

区域3：Debug工具栏（从左往右依次为）

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

区域4：断点调试器

Break Point 与 Watch

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

Scope 与 Call Stack

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

压缩后的代码如何调试

出于安全考虑，上线之前js会被压缩，压缩后只有一行，变量使用'a','b'替换

source Map

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

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

Performance

image.png

区域1：控制面板

区域2：概览面板

区域3：线程面板

区域4：统计面板

Network

image.png

区域1：控制面板

区域2：过滤面板

区域3：概览面板

区域4：Request Table 面板

区域5：请求详情面板

区域6：总结面板

Application

image.png

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

  • Local Storage
  • Session Storage
  • Indexed DB
  • Web SQL
  • Cookie

Lighthouse

image.png

评估网站性能的好坏，并提出对应的解决措施

移动端H5调试

真机调试

image.png

  • VConsole

    • 日志（Logs）
    • 网络（Network）
    • 节点（Element）
    • 存储（Storage）
    • 手动执行JS 命令行
    • 自定义插件

代理调试

  • 原理：

    • 电脑作为代理服务器

    • 手机通过 HTTP 代理连接到电脑

    • 手机上的请求都经过代理服务器

常用工具

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

Node.js调试

  • Inspector Protocol + Chrome Devtool

image.png

  • Inspector Protocol + VS Code

image.png

常用开发调试技巧

  • 线上即时修改Overrides

image.png

  • 利用代理解决开发阶段的跨域问题

image.png

浏览器-代理服务器-真实服务器

  • 启用本地 source map

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

  • 使用代理工具 Mock 数据

image.png

三、引用参考：

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

avatar
文章
阅读
粉丝