这里列出的都是本人所熟悉的工具,本文将不定期持续更新,我每找到好的都可以在这里贴出来。

资源网站

💗 MDN

一个由火狐提供的开发者学习平台,全称 “Mozilla Developer Network”,拥有较为齐全的说明,浏览器的新 API 也能在这里找到。

W3School

国内较为知名的在线教程平台,提供前端和后端多个语言的教程,但教程使用的方法和标准可能相对老旧一些,入门还是足够的。

React TypeScript CheatSheet

顾名思义,是一个“作弊”的网站,可以速查一些常用的 React TypeScript 定义案例。

测试和分享

你写的代码运行起来效果正常么?遇到 Bug 之后怎么给人家写个代码片段快速复现问题?不如试试这里的工具吧,绝对能改善你的网站。

💗 Can I Use

一个提供查询 CSS 属性、JS 方法在不同浏览器下兼容性的网站。想尽可能兼容老旧浏览器的必备之选。

JSFiddle

一个在线编辑 HTML + CSS + JS 的平台,不需要注册就可以保存你写的代码(注意,地址一旦忘记就找不到了,还是老老实实登录吧)

💗 CodeSandbox

支持加载 NPM 包的在线代码编写平台,反馈框架的 Bug,对外提问什么的都在用它!

Google PageSpeed

一个谷歌提供的测试工具,可以提供网页加载性能的相关优化建议。目前 Chrome 基本内置了。

CSS Tricks

一个提供前端开发优化教程的网站,建议使用 RSS 订阅关注一波,缺点就是像我这样的菜逼需要使用翻译软件。

Webkit 浏览器内置 CSS

想要制作新效果和更好的重置浏览器样式?快来参考一下 Webkit 内置的样式表吧。

代码编写

写前端代码的主力编辑器!

💗 Visual Studio Code

来自微软的免费跨平台代码编辑器,支持多种语言的编辑和补全,通过安装扩展插件来获得更多的功能,甚至能当个 IDE 来用了。

WebStorm

来自 JetBrains 的高度集成化 IDE,同时还支持一些 JS 框架的自动补全等等,缺点就是需要付费,学生可以申请 1 年的使用权。

一次性编辑器

某些情况下并不需要像 VSCode 这样齐全又复杂的编辑器,只是希望快速浏览一个纯文本文件,或是改一行小 Bug 什么的,就可以使用这类编辑器啦!

💗 CotEditor

MacOS 下的免费代码编辑器,支持多语言,可以直接在 App Store 上下载安装。

💗 VIM

Linux 下的必学之物,大多数系统都内置,服务器系统用命令行版才是最合适的!

Notepad++

Windows 下的免费代码编辑器,就是作者是弯弯人,曾发表过不当言论,也就是说用它不爱国,所以在此不再特别推荐。

VSCode 扩展

目前博主主要使用的编辑器就是 VSCode,所以也在此推荐一下我在使用的扩展插件。使用名称直接打开扩展面板搜索就可以安装!

Wakatime

来自 @Innei 的推荐,可以统计你写代码所用的时间、语言和系统环境等,支持定位到不同文件,直观的知道你这一天的时间都花在了哪个功能上。

Better Comments

更友好的注释效果,用不同的颜色高亮展示不同类型的内容。

/* Todo: 去除这里的参数 */
/* ! 不要忘记这里的引入顺序 */
/* ? 这块有些奇怪的问题,日后修复 */

Live Server

你的网页用到了 XHR?用到了 Fetch?浏览器直接运行会出现报错?试试它就对了!在 HTML 文件右键即可快速启动一个 Web 服务器,在浏览器上完美展现,还支持内容热更新!

Live Share / Live Share Audio / Live Share Extension Pack

和你的小伙伴们一起写代码!支持即时聊天和语音对话,需要使用你的 GitHub 账户进行登录。

Turbo Console Log

鼠标块选需要输出的变量名称,按下快捷键 Ctrl + Alt + L,即可生成一段自带说明的日志,方便调试。

GitLens

获取任意文件任意一行内容的最后一次修改提交记录,更方便找其他同事的黑历史啦。

Auto Rename Tag

自动增加 HTML 标签末尾,修改第一个标签,收尾标签也会被自动修改。

Indent Rainbow

给代码缩进增加彩虹效果,可快速辨认代码起始与结束的位置

浏览器扩展

FeHelper

提供自动格式化 JSON、JS 正则测试、时间戳转换等功能,方便快捷使用

Wappalyzer

检查网站所使用的技术栈,基本原理是根据浏览器请求 Header 里面的 server x-powered-by 一类的头,结合网页 head 里面的标签等方式实现。

React / Preact / Vue / Svelte DevTools

各种前端框架的调试工具,开发必备,方便检查变量,组件参数等内容,在开发模式下还支持即时修改即时预览。

TamperMonkey

油 🐒 脚本插件,懂得都懂,原理是在网页上注入 JS,实现一些网页本身无法实现的操作,需要注意安全和隐私问题

SwitchyOmega

上网交通工具的快捷切换,方便快捷的从汽车转乘到飞机,支持「直连」、「自动」和「完全」模式,让你不再使用客户端软件的全局模式等即可在浏览器上迅速完成切换。完全免费,用过都说好!

uBlock Origin

广告拦截插件,相较于 ADBlock 系列稍微弱了一些,但也足够拦截掉大多数网站的广告了。

代码提交

SourceTree

在 MacOS 下较为好用的 Git 可视化客户端,打开时自动 Fetch 所有仓库,快速罗列出可拉取到本地和可提交的项目。

Fork

在 MacOS 下第二好用的 Git 可视化客户端,不足之处就是在交互上打开一个项目后需要关闭才能回到主页切换到其他项目。

TortoiseSVN

在 Windows 下的主流 SVN 可视化客户端,功能齐全,也整合了系统邮件菜单,不足之处就是竟然没有 MacOS 版。同类软件还有 TortoiseGit,适用于 Git 平台。

CornerStone

在 MacOS 下使用的 SVN 可视化客户端,付费,基本功能都有。

最后

也欢迎你在这里推荐更多实用的工具,以便让更多的人知道它的魅力~