前端调试合集(包含移动端/内嵌h5)

代码内使用方法

alert/console

• alert和console.log作为JS最基本的调试能力，提供了简易版的断点 (只能断一下) 和输出 (只能输出字符串) 能力，可以在代码运行到预期的位置输出预期的log，通过对不同流程下写入alert，输出变量的值来判断，当前逻辑下是否进入异常流程，输出变量是否符合预期。
• 优点：简单方便，alert断点处打印的结果真实准确。
• 缺点：alert会阻断代码执行，console打印的Object只有最终结果。功能简单，只能用于一些简单场景

alert('打印异常流程信息')；
alert('接口返回值' + JSON.stringify(response));

console.log(...params);
console.info(...params);
// 还可以自定义文字颜色哟
console.log('%c' + string, 'color:green');
// 控制台日志前面有个叹号的icon

// 警告信息输出
console.warn()
// 输出代码报错日志
console.error(string | Error)

debuger

• 在代码中使用debuger语法，浏览器执行代码时，会识别debuger为断点，在此行暂停。可以搭配控制台对代码进行调试
• 优点：打断点方便，不会因为文件hash变更或者拼接时间戳参数导致无法断点
• 缺点：需要写到代码内，容易因检查疏忽将调试代码带到线上，影响线上功能

浏览器控制台

1. chrome的控制台是前端最强大的调试工具之一，很多FE同学每天在使用功能只是其中的一小部分，很多非常强大的功能值得我们继续深挖。相信它会成为你技术道路不可或缺的助力。想完整地把控制台的功能说明清楚会占用很大的篇幅，我只在这里做一些指引性的说明，感兴趣的同学建议仔细研究下。

2. 调试控制台中我们经常使用到的功能都有element(页面内容)、console(日志输出)、network(网络请求)、source(静态文件)、Memory(内存分析)、Application(应用数据)、performance(页面分析)。以下会对最常用最好用的一些功能来做说明，使用熟悉后对工作效率相信会有很大的提升

Element

可调试Html和CSS，修改html标签属性、css样式可直接看到效果，是调试样式UI的一大利器

• 修改html的属性和DOM节点
  
• 修改css样式，同步更新最终计算样式
  
  
• 实时观察当前页面的所有事件监听
  

Console

可出输出console对象下不同方法的语义信息，info(普通信息)，log(日志)，error(错误信息)，warn(警告信息)，可以输出代码执行时抛出的错误。同时还支持切换不同的window域和过滤功能。

Network

Network中记录这当前页面所有的请求信息，除此之前还有很多非常好用的辅助功能

• Preserece log：留存该页签下所有的请求信息，页面刷新上个页面的信息不会消失，方便跟踪跨页面请求的问题

• Disable cache：get请求不缓存，开发中代码热更新，页面刷新后读取的一直是最新的文件

• No throtting：可以限制浏览器下行网络请求速度，方便开发是模拟弱网情况。

• 导入导出请求抓包。浏览器抓包，不借助代理工具，控制台直接加载分析抓包信息。也可以使用代理工具Proxyman来加载浏览器导出的抓包文件。

此外还有开启（关闭）请求监听，清除、过滤、搜索当前信息等等。这些基本覆盖了我们日常中的需求。

Sources

sources包含当前页面下加载的所有静态资源文件，并根据域名分类。开发者可以在这里直接查看文件内容，在文件代码中加临时断点，并监听变量的值变化和调用栈。结合Search功能可以关键字搜索source内所有文件，可以快速定位要打点的位置。

Memory

Memory可以对当前页面的内存使用情况进行记录，用途开发者分析页面内存泄漏问题。

• Heap snapshot => 堆快照
  记录当前这个时间点的内存使用情况，在不同时间段进行快照，可以对比分析具体内存泄漏的位置，方便开发者快速定位需要优化的地方

• Allocation instrumentation on timeline => 分时段的内存占用
  记录一段时间内，内存的使用情况，在哪个时间点增加了变量占用的内存。

记录开始和结束时，需要手动点击左上角小圆点开启和停止

• Allocation sampling => 分配抽样

Application

Application中包含页面临时和永久性的数据，比如Storage、Cookie、IndexedDB等等，并且支持修改。此处不再赘述。

Performance

Performance 用于分析页面加载和运行时性能，协助开发者寻找项目中可优化的功能点，功能强大。

• 使用时先点击小圆点开启监听，然后再到页面中进行具体的交互操作（如加载页面、或执行某个动画）。
  

为了方便大家知晓Performance具体可用于哪些场景，下面我列举几种常见的场景。

• 首屏加载时长。
  根据记录可以看出页面首次加载中页面每个资源请求、渲染等步骤的占时情况。
  
• 动画优化
  根据动画执行时计算函数的执行时间，CPU和FPS的波动 来分析具体哪一出的计算复杂导致的拖慢的渲染等等。
  

移动设备PC插线调试

安卓设备PC调试（chrome://inspect）

1. 打开手机的开发者选项 ---- USB调试

• ① 找到手机的版本号位置，连续快速点击后，系统会提示打开开发者选项
  

• ② 在开发者选项中打开USB调试，
  

2. 连接电脑，调试前准备

• ① chrome浏览器中访问 chrome://inspect

温馨提示^_：远程调试需要提前打开科学上网哟

• ② 手机数据线连接电脑，允许USB调试

再次提示^_：手机调试需要浏览器开启debug模式，客户端软件内嵌h5可以找客户端的同学打debug包

3. 打开需要调试的页面，在chrome中找到对应的页面打开（打开调试窗口需要科学上网）

• ① 如果窗口中没有出现手机对应的页面，说明您打开h5页面的APP不支持调试

• ② 点击inspect打开窗口

• ③ 窗口内控制台与chrome中基本一致（控制台功能受调试设备安卓版本影响，安卓4、5的设备可能控制台功能不全）
  
  

4. 接下来调试的方式就和chrome的控制台一样啦，此处不再赘述

IOS设备Mac端safari调试

1. 打开safari浏览器 —> 偏好设置

• 高级选项中勾选 “ 显示开发菜单 ”
  

2. IOS客户端 —> 设置 —> safari浏览器 —> 高级 ----> 勾选javascript 和web检查器

3. 移动端safari浏览器打开需要调试的页面，使用数据线连接Mac端，并信任设备

4. 打开Mac端safari，在开发选项找到移动端需要调试的页面，即可调起浏览器的控制台进行调试啦
   

vconsole

移动端调试的时候，如果需要查看自己打印的日志和请求返回，在不借助电脑调试的情况下，就可以借助vconsole插件来完成。

vconsole是在移动端环境引入类似是控制台的功能，可以查看element、log、network和storage等一些基本调试信息。

npm i -D vconsole
// 简单使用 ====> 搞定
const vConsole = new VConsole();
// package.json
"scripts": {
"dev": "webpack-dev-server --config config/webpack.dev.config.js",
"build": "npm run sdk && npm run pow --mode prod",
},
// main.js
if (process.env.NODE_ENV === "development") {
const vConsole = new VConsole();
}