Cao Note在线工具
代码编辑与预览
| 工具 | 网址 | 用途 |
|---|---|---|
| CodePen | https://codepen.io | HTML/CSS/JS 在线编辑，海量开源示例 |
| JSFiddle | https://jsfiddle.net | 快速测试代码片段，支持 React/Vue |
| StackBlitz | https://stackblitz.com | 在线 IDE，完整 Node 环境 |
| codesandbox | https://codesandbox.io | 在线 React/Vue 项目原型 |
| AST Explorer | https://astexplorer.net | 在线 AST 解析器，查看代码语法树 |
图片处理
| 工具 | 网址 | 用途 |
|---|---|---|
| Tinypng | https://tinypng.com | PNG/JPEG 在线压缩 |
| Remove.bg | https://www.remove.bg | 一键抠图，自动移除背景 |
| Squoosh | https://squoosh.app | Google 出品，图片压缩/格式转换 |
| Carbon | https://carbon.now.sh | 代码截图生成，多种主题 |
| Excalidraw | https://excalidraw.com | 手绘风格白板画图 |
图标与设计
| 工具 | 网址 | 用途 |
|---|---|---|
| Iconfont | https://www.iconfont.cn | 阿里矢量图标库，海量免费 |
| Iconify | https://iconify.design | 统一图标框架，100+ 图标集 |
| Figma | https://www.figma.com | 在线 UI 设计，实时协作 |
| diagrams.net | https://app.diagrams.net | 在线流程图/UML 图，免注册 |
| ProcessOn | https://www.processon.com | 在线思维导图/流程图 |
前端开发辅助
| 工具 | 网址 | 用途 |
|---|---|---|
| Can I Use | https://caniuse.com | 浏览器特性兼容性查询 |
| W3C Validator | https://validator.w3.org | HTML/CSS 语法验证 |
| Beautifier | https://beautifier.io | 代码格式化 |
| DiffCheck | https://www.diffchecker.com | 文本差异对比 |
| Bundlephobia | https://bundlephobia.com | npm 包大小分析 |
正则工具
| 工具 | 网址 | 用途 |
|---|---|---|
| Regex101 | https://regex101.com | 正则在线测试，支持多语言 |
| RegExr | https://regexr.com | 正则学习与测试，含 Cheatsheet |
| iHateRegex | https://ihateregex.io | 正则可视化查询 |
JSON 工具
| 工具 | 网址 | 用途 |
|---|---|---|
| JSON.cn | https://www.json.cn | JSON 格式化/压缩/转义 |
| JSON Hero | https://jsonhero.io | JSON 可视化浏览 |
| JSON Generator | https://www.json-generator.com | 生成 Mock JSON 数据 |
颜色工具
| 工具 | 网址 | 用途 |
|---|---|---|
| Coolors | https://coolors.co | 配色方案生成 |
| UI Gradients | https://uigradients.com | 渐变配色 |
| RGB 颜色转换 | https://www.rapidtables.com/convert/color | 颜色格式互转 |
文档与协作
| 工具 | 网址 | 用途 |
|---|---|---|
| 语雀 | https://www.yuque.com | 知识库/团队协作文档 |
| 飞书文档 | https://www.feishu.cn | 在线文档/表格/多维表格 |
| SmallPDF | https://smallpdf.com | PDF 在线处理 |
| ProcessOn | https://www.processon.com | 在线思维导图 |
代码托管与 CI/CD
| 工具 | 网址 | 用途 |
|---|---|---|
| GitHub | https://github.com | 代码托管、Actions CI/CD |
| Gitee | https://gitee.com | 国内代码托管，速度快 |
| GitLab | https://gitlab.com | 私有仓库，内置 CI/CD |
学习平台
| 工具 | 网址 | 用途 |
|---|---|---|
| MDN | https://developer.mozilla.org/zh-CN/ | Web 技术权威文档 |
| ES6 入门教程 | https://es6.ruanyifeng.com | 阮一峰 ES6 教程 |
| JavaScript Info | https://zh.javascript.info | 现代 JavaScript 教程 |
| TypeScript 中文网 | https://www.typescriptlang.org/zh/ | TypeScript 官方文档 |
| LeetCode | https://leetcode.cn | 算法刷题 |
| Roadmap | https://roadmap.sh | 开发者学习路线图 |
包管理与 CDN
| 工具 | 网址 | 用途 |
|---|---|---|
| npm | https://www.npmjs.com | JavaScript 包管理 |
| cdnjs | https://cdnjs.com | 前端 CDN 库 |
| jsDelivr | https://www.jsdelivr.com | 开源 CDN 服务 |
| UNPKG | https://unpkg.com | npm 包 CDN 服务 |