万字前端效率大提速系列 🚀 ：四、前端编辑器、调试工具使用技巧

工欲善其事，必先利其器，熟练使用使用各类工具可以大大提高工作效率。由于这些工具都非常强大复杂，这里举出常用的功能，以及他们能做哪些你或许没想到的事情。操作可以根据具体功能搜索对应的图文教程。

VSCode

前端同学推荐用什么代码编辑器？当然是免费的本身就是JS编写的微软出厂的超强编辑器 VSCode ！！从 WebStorm 转过来的同学也可以在 VSCode 里使用 WebStorm 预置快捷键。

快捷键

下面列出我最常用的一些快捷键（Mac）：

• Cmd + P: 快速搜索打开项目内某个文件
• 不选中任何文字 Cmd + C 、 Cmd + X: 拷贝/剪切光标所在的一整行，连按Cmd + V快速复制多行
• Cmd + F: 在打开的文件中搜索文本，注意在搜索框里可以选择严格大小写、严格匹配整个单词、启用正则。可以在搜索框里替换匹配到的文字
• Cmd + Shift + F: 在整个项目里搜索文本，功能同上
• Control + G: 快速定位光标到输入数字对应的行
• Cmd + ↑ 、 Cmd + ↓: 定位光标到文件第一行/最后一行
• Cmd + 数字键: 切换或创建第n个编辑窗口，写Vue的时候可以三个窗口，一个template、一个script、一个style
• Control + ` : 唤出/关闭终端
• Cmd + B : 唤出/关闭侧边栏
• Cmd + ` : 切换到下一个VSCode窗口

好用的插件

• Prettier: 格式化代码插件，项目里加入 .prettierrc.json 文件统一团队的格式化风格
• ESLint: 代码lint插件，项目里加入 .eslintrc.js 文件统一团队的lint规则
• GitLens: 查看Git提交记录，能够显示光标这一行的最近提交信息、也可以查看文件历史
• Path Intellisense: 输入路径时，自动补全文件路径
• Vetur: 写Vue必装插件
• WXML: 写小程序必装插件

Chorme DevTools

Chrome开发者工具，前端开发同学的必会调试工具，一言以蔽之就是功能强大到深不见底。使用上需要一定的英语基础，建议大家把每个功能都点一点，每个单词都知道什么意思，对工具的功能有了解，有需要的时候知道要用上哪个功能。通过页面右键按检查，或者 右上角菜单 -> 更多工具 -> 开发者工具 打开调试界面。

界面中有许多选项卡， Elements、Console、Sources、Network、Application 属于非常重要的必会基础选项卡，是我们完成工作的主要调试工具；其他属于进阶选项卡，多用于性能测试调优。

界面功能按钮

打开界面后，先看左上角两个icon按钮：

1. 一个有鼠标指针的icon是点击后可以选中页面中的DOM，找到页面DOM对应的HTML代码位置，常用于调试样式、查看DOM属性。
2. 另一个是手机+iPad样式的icon，用于模拟页面在 手机 -> PC 不同窗口大小下的展示，常用于测试页面的自适应、测试页面在不同屏幕下的展示效果。注意切换到手机模式，也会改变请求时 Header 的 User-Agent字段，模拟并不能完全替代真机调试。

Elements 选项卡

主要功能：调试HTML和CSS，可以实时编辑HTML和CSS并实时生效。本选项卡下有几个子选项卡，功能如下：

• Styles 查看选中DOM的CSS（包含浏览器默认样式），查看选中DOM的盒模型（margin、border、padding、content）
• Computed 查看选中DOM的计算生效样式，根据CSS选择器、权重、继承、默认值计算之后的生效值，可以通过这个排查样式代码是否生效
• Event Listeners 查看绑定的事件监听器，用来排查事件是否绑定。

还有几个我不常用到的子选项卡，大家可以自行探索

Console 选项卡

主要用来看打印的日志、执行JS。打印出的日志可以用各种姿势筛选来看，也可以点日志右边的行数直接查看打印对应的代码位置，方便打断点。

控制台输入的JS代码会在当前页面的环境下执行，例如页面引入了 JQuery，则控制台中可以拿到 $ 变量。可以在控制台尝试是否能获取到DOM、是否能获取到全局变量、执行表达式的结果是否符合预期。

Sources 选项卡

非常重要的选项卡，配合 Console 一同调试 JS。这个选项卡以域名+目录的形式展示网页对应的源代码，同时允许开发者对代码执行进行断点调试。如果你在 Console 中打印了日志，也可以快速定位到 Sources 里对应的代码。

选项卡里包含三个部分：

1. 根据文件的加载URL生成的，以域名和路径组成的代码文件目录。
2. 文件预览，JS文件可以通过点击行号设置调试断点
3. 代码调试工具栏，在设置断点后，代码执行到断点位置会暂停执行，此时可以操作工具栏上的按钮控制代码的执行。工具栏按钮的功能大家都应该掌握。从左到右按钮功能为：

• 3.1 暂停执行/恢复执行，如果已经在断点处暂停，点击恢复会执行到下一个断点处。
• 3.2 执行下一行代码（如遇到函数，直接执行整个函数并拿到返回结果）
• 3.3 同上，执行下一行代码但进入执行的函数，一行行往下执行该函数。
• 3.4 跳出正在执行的函数
• 3.5 执行下一行代码，通常只使用 3.2 和 3.3
• 3.6 开启/关闭 - 执行时忽略断点
• 3.7 开启/关闭 - 遇到异常时暂停
• 在工具栏下方还可以看到当前的变量及对应的变量值帮助调试

这是出现JS错误时最常用最好用的功能了，不熟练的应该多多熟悉多多使用。

Network 选项卡

调试网络请求的重要选项卡，界面从上到下分别是：设置栏、筛选条件、时间瀑布流、请求列表。主要用来调试静态文件请求和接口请求。

1. 设置栏：开启关闭监听、清除列表、开启筛选栏、开启搜索栏、刷新跳转页面时保留跳转前的记录、禁用缓存、限制网速等。
2. 筛选条件：可以筛选出XHR、JS、CSS、IMG、Font等不同类型的请求
3. 时间瀑布流：以瀑布流的形式展示了请求发生的时机和响应时间，可以筛选某段时间内的请求
4. 请求列表：最主要的功能，点击列表中的请求可以看到请求的 Headers、Response 和 Timing。对于静态文件，通常查看路径、返回状态码、文件大小、请求头的缓存策略来排查问题；对于后端接口请求，通常查看请求路径、状态码、响应时间、请求头的鉴权信息、请求头的其他信息、请求参数、返回值来排查问题。

Application 选项卡

主要功能是查看和操作当前页面使用的 LocalStorage、Cookie，点击界面左边选择 LocalStorage 或 Cookie 即可查看，可以对他们进行添加、删除、筛选。

Performance 选项卡

用于调试网页性能，点击开始录制后可以在页面上操作，操作完成结束录制，会展示出这段时间的页面性能信息。

性能信息包括操作耗时、FPS、CPU占用、GPU占用、网络占用、线程占用的信息，根据信息可以锁定操作中的性能瓶颈进行问题排查。

Memory 选项卡

主要记录内存占用的信息，如果可能有内存泄露或者内存占用过高的情况可以用这个选项卡进行排查

Lighthouse 选项卡

功能类似 Performance，提供网站的体验评分和建议。点击生成报告后会给页面打出5个分数：性能、可到达、最佳实践、搜索引擎优化、PWA，开发人员可以根据建议对五个方面进行优化

Recorder 选项卡

录制网页操作并允许回放操作，多用于记录bug并复现

Security 选项卡

提供网站安全相关的建议，HTTPS、证书等

Charles 花瓶工具

花瓶的主要用来抓包和代理，使用时需要本地设置代理到花瓶、HTTPS还需要信任花瓶的证书，具体步骤可以看专门的图文教程（传送门：Charles 功能介绍和使用教程）。抓包功能同 Chrome 开发者工具中的 Network 选项卡。

其他能提高效率的应用工具

• 能够保存多个复制内容的粘贴板（功能简单，各平台选择免费的就行），复制粘贴工程师的必备工具
• MacOS中的快速启动工具Alfred，俗称黑帽子，能快速用键盘完成各类应用功能，还可以编写脚本一键执行各类界面操作
• 前端在线工具，如快速转换JSON、色号、时间、加密解密等等，推荐网站tool.lu
• 在线图片压缩tinypng
• Chrome插件colorPick，快速对页面中的一个点取色
• Chrome插件Google翻译，快速文本翻译，注意Google翻译官网不需要翻墙，机翻质量应该是机翻软件里最高的

上一篇：三、从React和Vue相互有什么优缺点说起

---小尾巴--- 有想法有问题欢迎私聊讨论 ^_^