一名前端开发工程师的常用工具清单

Question

给大家分享我的日常工具，工具不在于多，多会眼花缭乱，而且也没有时间用，所以我分享的每类工具可能只有一个，就只是我平时在用的。

开发工具

VS Code

是现在主流的前端开发工具，社区支持强大，有很多的插件库，会更方便日常的开发

VS Code 官网

浏览器插件

我用的 chrome 浏览器

二维码生成器

二维码（QR 码）生成器（QR Code Generator）

广告屏蔽

广告终结者

• uBlock Origin
• AdGuard 广告拦截器

查单词

沙拉查词

代理切换

Proxy SwitchyOmega

取色器

ColorZilla

查看网页技术栈

Wappalyzer

前端小工具

FeHelper 前端助手

笔记类

notion

用过印象笔记，用过 Bear，都没有用顺手，现在是任何需要记下来的东西都放到 notion 了

• notion 支持 markdown（markdown 可太方便了～～）
• 免费版的功能就很强大很够用了
• 模块很多，直接引用十分方便
• pc 端和移动端都有，可同步
• 支持搜索

想要玩转 Notion？你需要这份快速上手指南

幕布

可以直接生成思维导图，十分方便

官网

石墨

也是一个在线写文档的好工具

官网

画图工具

xmind

可以做思维导图、流程图（特别是领导要求你写文档或 ppt 的时候就很用上）、管理项目开发情况（如下图啦，我列出了这个项目要完成的模块，用不同的表情表示完成的情况：开发了没有，联调了没有，完成了没有）

processon

在线的画图工具（特别是领导要求你写文档或 ppt 的时候就很用上）

processon

终端工具

iTerm2

好看又好用的终端工具

官网

配置教程

svn 工具

cornerstone

这是我觉得使用起来还比较顺手的 svn 工具

SVN 管理工具 Mac Cornerstone 详细图文教程

git

没有使用工具，都是直接敲命令行

可以在这里查询文档，有些是支持中文的

学习使用

查阅文档、知识学习、问题解决

其实这里可以说就只有一个工具：google 除非我很明确我要的查的东西，学习的东西在哪里有，否则全靠 google

18 个谷歌搜索技巧

MDN Web

MDN Web Docs（旧称 Mozilla Developer Network、Mozilla Developer Center，简称 MDN）是一个汇集众多 Mozilla 基金会产品和网络技术开发文档的免费网站。 部分是可以支持切换中文的

MDN 文档

can i use

在这里可以查看某个 html 标签、css 数学、js 方法在不同浏览器的兼容情况

官网

StackOverflow

技术问答社区，大多数技术上的问题我都是在这里找到答案

官网

segmentfault

技术问答社区，类似 StackOverflow，也有质量很不错的技术文章

官网

掘金

我下载了掘金的浏览器插件，每次打开新页面的时候都能看到最新最热的文章推荐

medium

上面各种领域（差不多吧）的文章都有，而且质量都很不错

官网

语雀

语雀也是一个内容工具，我很少用来记东西，主要还是在上面看别人分享的文章内容

官网

抓包工具

charles

Mac 下常用的网络封包截取工具，在做 移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析，Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。

除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。

• 官网
• Charles 抓包使用教程

远程工具

teamviewer

官网

复制粘贴工具

clipy

保存复制记录

官网

解压工具

解压专家 oka

介绍