关于前端:50个能帮你节省时间的开发工具

36次阅读

共计 4411 个字符,预计需要花费 12 分钟才能阅读完成。

作者:Iain Freestone

翻译:疯狂的技术宅

原文:https://dev.to/iainfreestone/…

本文列举出 50 个可能帮你进步开发效率,节俭开发工夫的 Chrome 扩大和 Web 利用,它们很有可能会在什么时候派上用场。老规矩,先转发、点赞、点再看三连,最初再缓缓浏览,千万别让它在收藏夹里吃灰。

1. Whatruns

一个收费的浏览器扩大程序,只需单击一下按钮,就能帮你辨认以后网站上所使到的技术。

官网:https://www.whatruns.com/


2. Sizzy

开发人员专用的浏览器。能够帮你节省时间,放慢开发流程

官网:https://sizzy.co/


3. Log Rocket

LogRocket 使你能够重播用户在你站点上所做的操作,从而帮你重现谬误并更快地解决问题。

官网:https://logrocket.com/


4. Sentry

Sentry 的利用监督平台简直能够为所有的开发人员提供帮忙,它可能诊断、修复和优化你代码的性能。

官网:https://sentry.io/

5. Can I Use?

“Can I use” 提供了最新的浏览器反对表,能帮你查看反对台式机和挪动 Web 浏览器上的前端 Web 技术。

官网:https://caniuse.com/



6. Prettier

一个代码格式化程序,反对多种语言,可能与大多数编辑器集成。

官网:https://prettier.io/



7. CSS Scan

让你与“查看元素”再见。它能立刻查看悬停的任何元素的 CSS,并且只须要单击一下即可复制其整个规定。

官网:https://getcssscan.com/


8. Bundlephobia

帮你查看把 npm 包增加到 bundle 包中所须要破费的代价,

官网:https://bundlephobia.com/


9. Cypress

对浏览器中运行的所有内容进行疾速、轻松和牢靠的测试。

官网:https://www.cypress.io/


10. Unminify

用于压缩、解压缩、反混同 JavaScript,CSS,HTML,XML 和 JSON 代码并加强可读性的收费工具。

官网:https://unminify.com/


11. RegEx 101

基于 PCRE 的收费正则表达式调试器,具备实时阐明、谬误检测和突出显示的性能。

官网:https://regex101.com/


12. Clear Cache

只需单击一下按钮,即可革除缓存并浏览数据。

官网:https://chrome.google.com/web…


13. Window Resizer

通过调整浏览器窗口的大小来模仿各种屏幕分辨率。

官网:https://chrome.google.com/web…


14. Wappalyzer

Wappalyzer 是一个可能现网站上所用技术的实用程序。它可能检测内容管理系统、电子商务平台、Web 框架、服务器软件,剖析工具等。

官网:https://chrome.google.com/web…


15. MDN

MDN Web Docs 站点提供无关凋谢的 Web 技术的信息,包含用于 Web 站点和渐进式 Web 利用的 HTML、CSS 和 API 等技术。

官网:https://developer.mozilla.org…)


16. Axe

可拜访性测试规范。被 Microsoft、Google 和大量的开发测试团队所抉择,Axe 是世界领先的可拜访性工具包。

官网:https://www.deque.com/axe/


17. Git Graph

Visual Studio Code 的 Git Graph 扩大。帮你查看存储库中的 Git 图,并轻松地从视图中执行 Git 操作。能够随心配置为你想要的样子!

官网:https://marketplace.visualstu…


18. Kontrast-WCAG 对比度查看器

可能在浏览器中实时疾速检查和调整对比度,以满足 WCAG 2.1 的要求。

官网:https://chrome.google.com/web…


19. Octotree

可加强 GitHub 代码的检查和浏览性能的浏览器扩大。

官网:https://chrome.google.com/web…


20. Postwoman

Postman 的替代品,可能帮你更快地创立 HTTP 申请,节俭贵重的开发工夫

官网:https://postwoman.io/)


21. Responsively App

把开发响应式 Web 利用的速度进步了 5 倍!所有前端开发人员必备的开发工具,使你的工作更加轻松。

官网:https://sensitively.app/


22. FullStory

帮你查明本人的用户在何时、何地产生纠结,以及是怎么影响你的支出和留存率的。

官网:https://www.fullstory.com/


23. gitignore.io

帮你轻松的为本人的我的项目创立 .gitignore 文件

官网:https://www.toptal.com/develo…


24. 1Loc

206 个只需单行代码就能实现的 JavaScript 实用程序。

官网:https://1loc.dev/


25. Does it mutate?

它会变异吗?

官网:https://doesitmutate.xyz/)


26. Keycode

获取任意键的 JavaScript 事件键码

官网:https://keycode.info/


27. Worth It: 古代 JS 版

用来剖析页面的工具,帮你确定在应用模块和无模块模式时,在古代浏览器中下载的 JavaScript 缩小了多少。

官网:https://module-nomodule-calcu…


28. npmview

一个用于查看 npm 包文件的 Web 利用。

官网:https://npmview.now.sh/


29. CSS to JS

在 CSS、JS 对象和 JSX prop 之间进行转换。

官网:https://css2js.dotenv.dev/


30. All Characters

一个简略的页面,显示所有不同的字符及其 HTML 代码。

官网:https://aymkdn.github.io/char…


31. Shape Catcher

帮忙你查找 Unicode 字符的工具。当你要查找不晓得名字的特定字符时十分麻烦。在 shapecatcher.com 上,你只须要晓得它的大抵形态即可!

官网:https://shapecatcher.com/



32. Mocky

在开发时不用期待后端代码筹备结束,用 Mocky 能够生成自定义 API 响应。

官网:https://designer.mocky.io/


33. Explain Shell

写下命令行并查看与每个参数相匹配的帮忙文本

官网:https://explainshell.com/


34. Base64 Image

将图像转换为 Base64

官网:https://www.base64-image.de/)


35. Open Graph Check

在社交网络上分享内容时,针对目标群体量身定制的优化预览能够显着进步点击率。Opengraphcheck.com 能帮忙你做到最好。最棒的是,Open Graph Check 是收费的。

官网:https://opengraphcheck.com/


36. Brotli pro

帮你取得更高的压缩率

官网:https://www.brotli.pro/



37. Responsive Breakpoints

轻松生成最佳的响应式图像尺寸

官网:https://www.sensitivebreakpoi…


38. Is my host fast yet?

用来检测用户浏览 Web 时所经验的实在服务器响应提早。

官网:https://ismyhostfastyet.com/)


39. Check My Links

“Check My Links”是一个链接查看器,可爬取你的网页并查找有效链接。

官网:https://chrome.google.com/web…


40. JSON Web Token

对 JWT 进行编码或解码

官网:https://www.jsonwebtoken.io/


41. Git Kraken

实用于 Windows、Mac 和 Linux 的 Git 客户端,收费开源。

官网:https://www.gitkraken.com/



42. BEM Cheat Sheet

即便是最有教训的 CSS 开发人员,也不会总是立刻找到正确的类名,这很快会使你感到失望。该工具为你提供一些最常见的 Web 组件的命名倡议,帮忙你防止在 BEM 的世界中迷路。

官网:https://9elements.com/bem-che…


43. Can I Email

官网:https://www.caniemail.com/


44. CSS Grid Generator

只须要设置数字以及列和行的单位,而后就会为你生成一个 CSS 网格!能够通过在框内拖动来创立搁置在网格内的 div。

官网:https://cssgrid-generator.net…


45. Screen size map

设施无关像素的屏幕尺寸比拟

官网:https://screensizemap.com/



46. Who can use?

谁能够应用这种色彩组合?

官网:https://whocanuse.com/



47. Will it CORS?

通知这台神奇的 CORS 机器你想要什么,它将通知你确切的操作。

官网:https://httptoolkit.tech/will…)


48. extractCSS

从 HTML 提取 CSS

官网:http://extractcss.com/


49. Shieldfy

在代码正式投入生产之前,自动识别并修复代码中的平安问题和破绽。

官网:https://shieldfy.io/


50. YAML Checker

YAML Checker 提供了一种疾速简便的办法来验证 YAML。通过丑陋的语法突出显示和错误信息来验证 YAML。

官网:https://yamlchecker.com/


本文首发微信公众号:前端先锋

欢送扫描二维码关注公众号,每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章:

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的?从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战:在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么?
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K,该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现

  • 更多文章 …
正文完
 0