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

Mingcomity
89 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第8天

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

一.Bug 与 Debug

First bug：First actual case of bug begin foundFirst actual c begin found.

前端Debug的特点：

  1. 多平台

    • 浏览器、Hybrid、NodeJs、小程序、桌面应用.......

  2. 多环境

    • 本地开发环境、线上环境

  3. 多工具

    • Chrome devTools 、Charles、Spy-Debugger、Whistle、vConsole.....

  4. 多技巧

    • Console、BreakPoint、sourceMap、代理......

二.Chrome DevTools

1.元素-Elements

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

激活伪类：

  • 选中具有伪类的元素，点击：hov
  • DOM树右键菜单，选择Force State（强制执行状态）

2.Console

  • console.log 打印普通日志

  • console.warn 打印警告

  • console.error 打印错误

  • console.debug 打印debug

  • console.info

  • console.table

    • 具象化的展示 JSON 和 数组数据

  • console.dir

    • 通过类似文件树的方式展示对象的属性

  • 占位符

    • 给日志添加样式，可以突出重要的信息
    • %s:字符串占位符；%o:对象占位符；%c：样式占位符；%d：数字占位符

3.Sorce Tab

image-20220805154110447.png

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

区域4：

  1. Scope（作用域）：

    • 展开 Scope 可以查看作用域列表

  2. Call Stack （调用堆栈）：

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

  3. XHR/fetch breakpoints （XHR/提取断点）：

    • 发送请求时添加断点

  4. DOM breakpoints

4.压缩后的代码如何进行调试？

前端代码天使具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a','b'等替换，整体变得不可阅读。

Source Map：

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

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

5.NetWork

image-20220805174757785.png

6.Performance

image-20220805175419580.png

image-20220805175752718.png

7. Lighthouse

三.移动端H5调试

iOS ：

  1. 使用Lightning 数据线将 iPhone 与 Mac 相连
  2. iPhone 开启 Web 检查器（设置 - Safei - 高级 - 开启 Web 检查器）
  3. iPhone 使用 Safei 浏览器打开要调试的页面
  4. Mac 打开 Safei 浏览器调试（菜单栏 - 开发 - iPhone 设备名 - 选择调试页面）
  5. 在弹出的 Safei Developer Tools 中调试

Android：

  1. 使用USB线将手机与电脑相连
  2. 手机进入开发者模式，勾选 USB 调试，并运行调试
  3. 电脑打开 Chrome 浏览器，地址栏输入：chrom://inspect/#devices并勾选 Discover USB devices 选项
  4. 手机允许远程调试，并访问调试页面
  5. 电脑点击 inspect 按钮
  6. 进入调试界面

VConsole：

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

使用代理工具调试：

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

以Charles 为例：

  1. 安装 Charles
  2. 查看电脑IP 和 端口
  3. 将IP、端口号填入手机 HTTP 代理
  4. Charles 允许授权
  5. 使用 SwitchHosts！软件给Mac电脑配Hosts
  6. 手机访问开发环境页面

常用代理工具：

image-20220805181518977.png

四.Node.js 调试

image-20220805181632919.png

image-20220805181643635.png

五.常用开发调试技巧

  1. 线上即时修改 Overrides

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

image-20220805182030968.png

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

image-20220805182107558.png

  1. 启用本地 source map

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

  2. 使用代理工具 Mock 数据

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

  3. 小黄鸭调试大法

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

    --《程序员修炼之道》

avatar
文章
阅读
粉丝