🧰 50 个开发者工具,让你的生活更轻松
五十多个应用程序、Chrome 扩展程序、Web 应用以及介于两者之间的各种工具,希望它们能在您的编程生涯中派上用场。我会持续更新新工具的发现。欢迎在评论区分享您发现的任何内容。
1. Whatruns
免费的浏览器扩展程序,只需单击按钮即可帮助您识别任何网站上使用的技术。
2. Sizzy
专为开发者打造的浏览器。告别浪费时间,加速您的开发流程
3. 原木火箭
LogRocket 让您重播用户在您的网站上所做的事情,帮助您重现错误并更快地解决问题。
4.哨兵
Sentry 的应用程序监控平台可帮助每个开发人员
诊断、修复和优化其代码的性能。
5. 我可以使用吗?
“我可以使用”提供了最新的浏览器支持表,用于支持桌面和移动网络浏览器上的前端网络技术。
6. Prettier
一个固执己见的代码格式化程序,支持多种语言,与大多数编辑器集成,选项很少。
7. CSS扫描
告别“检查元素”——立即检查鼠标悬停在任何元素上的 CSS,并通过单击复制其整个规则。
8.捆绑恐惧症
查找将 npm 包添加到你的 bundle 的成本
9. 柏树
对浏览器中运行的任何内容进行快速、简单且可靠的测试。
10. 取消最小化
免费工具,用于解压缩(解包、去混淆)JavaScript、CSS、HTML、XML 和 JSON 代码,使其可读且美观。
11. 正则表达式 101
免费的基于 PCRE 的正则表达式调试器,具有实时解释、错误检测和突出显示功能。
12.清除缓存
只需单击按钮即可清除缓存和浏览数据。
13. 窗口调整器
调整浏览器窗口大小以模拟各种屏幕分辨率。
14. Wappalyzer
Wappalyzer 是一款用于检测网站所用技术的实用程序。它可以检测内容管理系统、电商平台、Web 框架、服务器软件、分析工具等等。
15. MDN
MDN Web Docs 网站提供有关开放 Web 技术的信息,包括 HTML、CSS 以及适用于网站和渐进式 Web 应用程序的 API。
16.斧头
无障碍测试标准。axe 是全球领先的数字无障碍工具包,受到微软、谷歌以及全球各地开发和测试团队的青睐。
17. Git 图表
Visual Studio Code 的 Git Graph 扩展。查看你的代码仓库的 Git Graph,并轻松从图中执行 Git 操作。可配置为你想要的外观!
18. Kontrast - WCAG 对比度检查器
在您的浏览器中快速检查并实时调整对比度以满足 WCAG 2.1 要求。
19. 八叉树
增强 GitHub 代码审查和探索的浏览器扩展。
20. 女邮递员
Postman 的 Web 替代品 - 帮助您更快地创建请求,节省宝贵的开发时间
21. 响应式应用程序
响应式 Web 应用开发速度提升 5 倍!所有前端开发者必备的 DevTool,助你轻松上手。
22. 完整故事
通过我们易于使用的智能软件,您可以精确地确定用户遇到的问题何时、何地以及如何影响您的收入和留存率,从而提供卓越的体验
23. gitignore.io
为你的项目创建有用的 .gitignore 文件
24. 1Loc
一行代码搞定 206 个最常用的 JavaScript 实用程序!别再多了!
25.它会变异吗?
26. 密钥代码
按任意键获取 JavaScript 事件键码
27. 值得一读:现代 JS 版
该工具会分析页面以确定使用 module/nomodule 模式后现代浏览器中下载的 JavaScript 数量减少了多少。
28. npmview
用于查看 npm 包文件的 Web 应用程序。
29. CSS 到 JS
CSS、JS 对象和 JSX 属性之间的转换。
30.所有角色
一个简单的页面,显示所有不同的字符及其 HTML 代码。
31. 形状捕手
这是一个帮你查找 Unicode 字符的工具。查找一个你不知道名字的特定字符很麻烦。在 shapecatcher.com 上,你只需要知道字符的形状!
32. 莫基
无需等待后端准备就绪,使用 Mocky 生成自定义 API 响应并立即开始处理您的应用程序
33. 解释 Shell
写下命令行来查看与每个参数匹配的帮助文本
34. Base64 图像
将图像转换为 Base64
35. 开放图谱检查
在 Facebook 和其他社交网络上分享内容时,点击吸引力至关重要。针对目标群体定制的优化预览可以显著提升点击率。Opengraphcheck.com 将帮助您做到最好。最棒的是,Open Graph Check 完全免费!
36. Brotli 专业版
Brotli。更高层次。压缩。准备好了吗?
37. 响应断点
轻松生成最佳响应图像尺寸
38.我的主机快了吗?
真实世界的服务器响应(第一个字节的时间)延迟,就像真实世界的用户浏览网页时所经历的那样。
39.检查我的链接
Check My Links 是一个链接检查器,它会抓取您的网页并查找断开的链接。
40. JSON Web 令牌
编码或解码 JWT
41. Git Kraken
适用于 Windows、Mac 和 Linux 的传奇 Git 客户端。开源免费
42. BEM 备忘单
找到合适的类名,很快就会让你感到绝望。即使是最有经验的 CSS 开发人员也不一定能立刻找到合适的类名。本工具旨在通过为一些最常见的 Web 组件提供命名建议,帮助你避免在 BEM 的浩瀚宇宙中迷失方向。
43. 我可以发邮件吗
44. CSS 网格生成器
您可以设置列和行的数字和单位,我会为您生成一个 CSS 网格!在方框内拖动即可创建放置在网格内的 div。
45.屏幕尺寸图
设备无关像素的屏幕尺寸比较
46. 谁可以使用?
谁可以使用这种颜色组合?
47.它会CORS吗?
告诉这台神奇的 CORS 机器你想要什么,它就会告诉你该怎么做。
48. 提取CSS
从 HTML 中提取 CSS
49. 元标签
使用元标记,您可以编辑和试验您的内容,然后预览您的网页在 Google、Facebook、Twitter 等平台上的显示效果!
50. Shieldfy
在代码投入生产之前自动识别并修复其中的安全问题和漏洞。
51. YAML 检查器
YAML 检查器提供了一种快速简便的 YAML 验证方法。在您输入 YAML 文件时,它会通过美观的语法高亮和错误信息进行验证。
52. 聚板
在一个独立的浏览器中构建令人惊叹的响应式、可访问且快速的网站和应用程序所需的所有工具。
订阅我们的免费每周新闻通讯,并随时了解 GitHub 上最新、最棒的 Web 开发项目,网址为www.iainfreestone.com
如果您喜欢这篇文章,您可以在 Twitter 上关注我,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。
文章来源:https://dev.to/iainfreestone/50-developer-tools-to-make-your-life-a-little-easier-4oc5