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

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

一、Chrome DevTools

Elements

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

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

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

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

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

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

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

Console

⭐ console.log

⭐ console.warn

⭐ console.error

⭐ console.debug

⭐ console.info

⭐ console.table，具像化的展示JSON和数组数据

⭐ console.dir，通过类似文件树的方式展示对象的属性

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

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

Source

⭐ 使用关键字debugger 或代码预览区域的行号可以设置断点

⭐ 执行到断点处时代码暂停执行

⭐ 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

⭐ 暂停状态下，鼠标 hover 变量可以查看变量的值

⭐ 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

⭐ 展开Scope 可以查看作用域列表(包含闭包)

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

Network

Application

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

Local Storage
Session Storage
IndexedDB
Web SQL
CookIe

⭐ 点击左侧Application下的Stroage面板中的Clear Site Data可以清楚网页的本地存储数据

Performance

Lighthouse

二、移动端 H5 调试

真机调试

iOS

使用 Lightning 数据线将 iPhone 与 Mac 相连
iPhone 开启 Web 检查器(设置-> Safari -> 高级 -> 开启 Web 检查器)
iPhone 使用 Safari 浏览器打开要调试的页面
Mac 打开 Safari 浏览器调试(菜单栏—>开发 -> iPhone设备名 -> 选择调试页面)
在弹出的 Safari Developer Tools 中调试

Android

使用 USB 数据线将手机与电脑相连
手机进入开发者模式，勾选USB调试，并允许调试
电脑打开 Chrom e浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
手机允许远程调试，并访问调试页面
电脑点击 inspect 按钮
进入调试界面

VConsole

⭐ 日志(Logs): console.log|info|error|..

⭐ 网络(Network): XMLHttpRequest，Fetch，sendBeacon

⭐ 节点(Element): HTML节点树

⭐ 存储(Storage): cookies，Localstorage，sessionstorage

⭐ 手动执行 JS 命令行

⭐ 自定义插件

使用代理工具调试

⭐ 原理:

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

三、NodejS 调试

Inspector Protocol + Chrome Devtool

执行命令 node --inspect=8888 index.js
chrome 浏览器访问服务
点击绿色 node 图标打开 node 调试面板(在chrome://inspect/#devices 中配置 network target)
在 node 调试面板中使用断点调试

Inspector Protocol + VS Code

vS Code点击运行
添加配置
启动调试
添加断点
查看变量、堆栈

四、常用开发调试技巧

线上即时修改 Overrides

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

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

启用本地 source map

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

使用代理工具 Mock 数据

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

小黄鸭调试大法

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

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