前端开发调试

PC端

01.Bug与Debug

Bug的诞生

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

前端 Debug 的特点

多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用等。
多环境：本地开发环境、线上环境。
多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
多技巧：Console、BreakPoint、sourceMap、代理等。

Elements：动态修改元素和样式

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

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 数字占位符

Break Point 与 Watch

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

Scope 与 Call Stack

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

关于闭包

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

关于调用栈

压缩后的代码如何调

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

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

Application：浏览器存储相关

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

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie 点击左侧Application-Storage面板-Clear Site Data：清除本地存储数据。

移动端调试

真机调试

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

vconsole

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

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

使用代理工具调试

原理：

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

nodejs 调试

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

以上就是今天学习的前端开发调试的内容，欢迎指正！

前端开发调试 | 青训营