浏览器开发者工具
- Chrome DevTools（Chrome浏览器内置）
用于网页开发，支持调试、源码查看、网络分析等功能。
- Firefox DevTools（Firefox浏览器内置）
类似于Chrome的开发者工具,支持跨平台开发。
- Edge DevTools（Edge浏览器内置）
支持Chakra UI等现代 JavaScript 框架。
前端调试工具
- Postman（Chrome、Firefox、Edge扩展）
用于 API 调试和请求测试。
- Emascript（Chrome扩展）
用于前端性能优化和代码分析。
代码实时预览工具
- Babel（在线工具）
支持 JS、React、Vue 等前端代码的实时预览。
- WebMake（在线工具）
支持 HTML、CSS、JS 等代码的实时预览。
设计工具
前端设计工具
- Figma（在线工具）
支持团队协作,用于设计和原型制作。
- Sketch（桌面应用）
支持导出到浏览器查看设计稿。
- Adobe XD（桌面应用）
支持浏览器内 preview。
代码生成工具
- Babel（在线工具）
支持从设计稿生成代码。
- React UI 库（如 Material-UI）
提供丰富的组件,用于快速构建界面。
隐私与安全工具
广告拦截与隐私保护
- uBlock Origin（Chrome、Firefox、Edge扩展）
强大的广告拦截工具,支持自定义过滤。
- Privacy Badger（Chrome、Firefox、Edge扩展）
自动拦截 trackers,保护隐私。
- HTTPS Everywhere（Firefox、Chrome扩展）
确保连接使用 HTTPS,保护数据安全。
密码管理
- LastPass（Chrome、Firefox、Edge扩展）
强大的密码管理工具,支持浏览器集成。
快捷键
浏览器快捷键
- Chrome
Ctrl + D：新标签页。Ctrl + T：新页面。Ctrl + W：关闭标签页。Ctrl + H：历史记录。Ctrl + J：下载管理。Ctrl + Shift + C：右键保存图片。F12：开发者工具。
- Firefox
Ctrl + T：新标签页。Ctrl + Shift + D：书签工具。Ctrl + H：历史记录。Ctrl + J：下载管理。Ctrl + R：刷新页面。
- Edge
类似 Chrome 的快捷键,支持多窗口操作。
其他快速操作
- Tab Groups（Chrome、Firefox、Edge）
使用 Ctrl + Shift + N 创建新标签组。
- 书签工具
使用 Ctrl + Shift + D 创建书签。
扩展与工具
代码格式化工具
- Prettier（在线工具）
支持 JS、CSS、HTML 等代码格式化。
- CodePen（在线平台）
用于展示和测试代码。
自动化测试工具
- Nightwatch（Chrome扩展）
用于自动化浏览器测试。
- Selenium（跨浏览器测试工具）
支持多种浏览器和平台。
其他实用工具
- Grammarly（Chrome、Firefox、Edge扩展）
支持语法检查和文本建议。
- Dash（Chrome扩展）
用于数据可视化和仪表盘。
- Visual Studio Code（桌面应用）
支持跨平台开发,内置浏览器支持。
高级工具
团队协作工具
- Slack（在线平台）
支持浏览器内集成,用于团队沟通。
- Trello（在线平台）
支持浏览器内任务管理。
数据可视化
- DataDog（在线平台）
支持浏览器内仪表盘创建。
安装方法
- Chrome Web Store：https://chrome.google.com/webstore
- Firefox Add-ons：https://addons.mozilla.org
- Edge Add-ons：https://microsoftedge.com/extensions
