通向架子工的前端开发利器推荐

01：thunderclient: VSCode 中的 postman

VSCode 的一个插件，在 VSCode 中管理请求资源，如同 postman 一样。

它支持与 postman 兼容的格式，可导出为 postman Collection。

Apifox，目前拥有桌面版与 WEB 版，对于团队管理 API 及其友好。

假设，在一个团队中，前后端如果共享 API 接口并能够自由同步，那么数据联调将会变得及其简单。Apifox 的其中一个优势便在于团队中 API 集合的分享是完全免费的。

另外，它对文档还极其友好，以下是我通过 docker 学习 nginx 的所有接口示例的文档地址。

PS：附所有 nginx 配置以及 docker compose，方便秒级验证运行。详见 Github 仓库 learn-nginx。

输入网址，可查看该网址的所有 CSS 资源情况，比如体积、选择器、排版、色彩、字体等。

输入一个网址，即可分析出该网站的所有 npm 依赖及其版本号，及其每一个 JS 资源的技术栈。

它的原理是对所有流行的 npm 库建立倒排索引(elasticsearch 那种)，再对目标网址资源根据特定提取出来的关键 token 进行匹配。

相对 Wappalyzer 而言，它提取出来的 npm 库更多更精确。现在就差一个浏览器插件了。

如此，岂不是大厂某个项目的技术栈和技术选型便一目了然？如果我想知道字节抖音网页版的技术栈，那我直接将抖音网易版的地址输入即可！

这里有 JS 生态最流行的库，实时刷新并推荐，并且可每周订阅。

太好了，终于可以做最强大的架子工了。

图解动画演示某一个 npm package 所有依赖，已开源 anvaka/npmgraph，技术栈 angular.js、browserify 与 gulp

下图以 webpack 作为演示，可以看出它的依赖有多么庞大！

谷歌官方出品的 CSS 核心技能构建，浅显易懂，易于上手。

每一章节都伴随有可编辑的 DEMO 可供学习，并提供题目测试你的学习成果。

可视化 SVG，并支持压缩图片，转化为 React/RN 组件，转化为 png 格式的图片等。

如果在开发中遇到 svg 图片，则可以直接通过该网站转化成 React Component。

而且在 svgviewer 中，有海量的 svg 图标供你检索，简直不能太方便。