50 development tools that can save you time
Front-end Pioneer
// Daily Front End Night Talk No. 413
// Main body: 3300 words
// Estimated reading time: 10 minutes
This article lists 50 Chrome extensions and web applications that can help you improve development efficiency and save development time. When will they be useful? The old rule is to forward, like, click and then watch for three consecutive times, and finally read slowly. Don't let it become ash in your favorites.
1. Whatruns
A free browser extension program that can help you identify the technology used on the current website with the click of a button.
Official website: https://www.whatruns.com/
Whatruns
2. Sizzy
A browser for developers. Can help you save time and speed up the development process
Official website: https://sizzy.co/
Sizzy
3. Log Rocket
LogRocket allows you to replay what users have done on your site to help you reproduce errors and solve problems faster.
Official website: https://logrocket.com/
Log Rocket
4. Sentry
Sentry's application monitoring platform can help almost all developers, it can diagnose, repair and optimize the performance of your code.
Official website: https://sentry.io/
Sentry
5. Can I Use?
"Can I use" provides the latest browser support table, which can help you check the front-end web technologies supported on desktop and mobile web browsers.
Official website: https://caniuse.com/
Can I Use?
6. Prettier
A code formatter that supports multiple languages and can be integrated with most editors.
Official website: https://prettier.io/
Prettier
7. CSS Scan
Let's see you bye to "check element". It can instantly check the CSS of any element hovering over, and copy its entire rules with just one click.
Official website: https://getcssscan.com/
CSS Scan
8. Bundlephobia
Help you check the cost of adding the npm package to the bundle package,
Official website: https://bundlephobia.com/
Bundlephobia
9. Cypress
Test everything running in the browser quickly, easily and reliably.
Official website: https://www.cypress.io/
Cypress
10. Unminify
A free tool for compressing, decompressing, deobfuscating JavaScript, CSS, HTML, XML and JSON code and enhancing readability.
Official website: https://unminify.com/
Unminify
11. RegEx 101
A free regular expression debugger based on PCRE, with real-time description, error detection and highlighting functions.
Official website: https://regex101.com/
RegEx 101
12. Clear Cache
Just click a button to clear the cache and browse data.
Official website: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=zh-CN
Clear Cache
13. Window Resizer
Simulate various screen resolutions by adjusting the size of the browser window.
Official website: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Window Resizer
14. Wappalyzer
Wappalyzer is a utility program that can display the technologies used on the website. It can detect content management systems, e-commerce platforms, web frameworks, server software, analysis tools, etc.
Official website: https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg
Wappalyzer
15. MDN
The MDN Web Docs site provides information about open web technologies, including technologies such as HTML, CSS, and APIs for web sites and progressive web applications.
Official website: https://developer.mozilla.org/zh-CN/ )
MDN
16. Axe
Accessibility testing standards. Selected by Microsoft, Google and a large number of development and testing teams, Axe is the world's leading accessibility toolkit.
Official website: https://www.deque.com/axe/
Axe
17. Git Graph
Git Graph extension for Visual Studio Code. Help you view the Git graph in the repository, and easily perform Git operations from the view. You can configure it as you want!
Official website: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Git Graph
18. Kontrast-WCAG Contrast Checker
It can quickly check and adjust the contrast in real time in the browser to meet the requirements of WCAG 2.1.
Official website: https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk
contrast
19. Octotree
A browser extension that can enhance the checking and browsing functions of GitHub code.
Official website: https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc
Octotree
20. Postwoman
An alternative to Postman that can help you create HTTP requests faster and save valuable development time
Official website: https://postwoman.io/ )
Postwoman
21. Responsively App
Increased the speed of developing responsive web applications by 5 times! All front-end developers must have development tools to make your work easier.
Official website: https://sensitively.app/
Responsively App
22. FullStory
Help you find out when and where your users are struggling, and how it affects your income and retention rate.
Official website: https://www.fullstory.com/
FullStory
23. gitignore.io
Help you easily create .gitignore files for your projects
Official website: https://www.toptal.com/developers/gitignore
gitignore.io
24. 1Loc
206 JavaScript utilities that can be implemented in a single line of code.
Official website: https://1loc.dev/
1Loc
25. Does it mutate?
Will it mutate?
Official website: https://doesitmutate.xyz/ )
Does it mutate?
26. Keycode
Get the JavaScript event key code of any key
Official website: https://keycode.info/
Keycode
27. Worth It: Modern JS Edition
Tools used to analyze pages to help you determine how much JavaScript downloads in modern browsers have been reduced when using modules and moduleless mode.
Official website: https://module-nomodule-calculator.glitch.me/
Worth It
28. npmview
A web application for viewing npm package files.
Official website: https://npmview.now.sh/
npmview
29. CSS to JS
Convert between CSS, JS objects and JSX props.
Official website: https://css2js.dotenv.dev/
CSS to JS
30. All Characters
A simple page that displays all the different characters and their HTML codes.
Official website: https://aymkdn.github.io/characters/
All Characters
31. Shape Catcher
Tools to help you find Unicode characters. It is very troublesome when you want to find a specific character that you don't know the name. On shapecatcher.com, you only need to know its approximate shape!
Official website: https://shapecatcher.com/
Shape Catcher
32. Mocky
There is no need to wait for the back-end code to be ready during development. Mocky can be used to generate custom API responses.
Official website: https://designer.mocky.io/
Mocky
33. Explain Shell
Write down the command line and view the help text that matches each parameter
Official website: https://explainshell.com/
Explain Shell
34. Base64 Image
Convert image to Base64
Official website: https://www.base64-image.de/ )
Base64 Image
35. Open Graph Check
When sharing content on social networks, optimized previews tailored to the target group can significantly increase click-through rates. Opengraphcheck.com can help you do your best. The best part is that Open Graph Check is free.
Official website: https://opengraphcheck.com/
Open Graph Check
36.Bread per
Help you get a higher compression ratio
Official website: https://www.brotli.pro/
Brotli pro
37. Responsive Breakpoints
Easily generate the best responsive image size
Official website: https://www.sensitivebreakpoints.com/
![Responsive Breakpoints]
38. Is my host fast yet?
It is used to detect the real server response delay experienced by the user when browsing the Web.
Official website: https://ismyhostfastyet.com/ )
Is my host fast yet
39. Check My Links
"Check My Links" is a link checker that can crawl your web pages and find invalid links.
Official website: https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=zh-CN
Check My Links
40. JSON Web Token
Encode or decode JWT
Official website: https://www.jsonwebtoken.io/
![JSON Web Token]
41. Git Kraken
Git client for Windows, Mac and Linux, free and open source.
Official website: https://www.gitkraken.com/
Git Kraken
42. BEM Cheat Sheet
Even the most experienced CSS developer will not always find the correct class name immediately, which can quickly make you desperate. This tool provides you with naming suggestions for some of the most common web components to help you avoid getting lost in the world of BEM.
Official website: https://9elements.com/bem-cheat-sheet
BEM Cheat Sheet
43. Can I Email
Official website: https://www.caniemail.com/
Can I Email
44. CSS Grid Generator
Just set the numbers and the units of the columns and rows, and a CSS grid will be generated for you! You can create a div placed in the grid by dragging in the box.
Official website: https://cssgrid-generator.netlify.app/
CSS Grid Generator
45. Screen size map
Screen size comparison of device-independent pixels
Official website: https://screensizemap.com/
Screen size map
46. Who can use?
Who can use this color combination?
Official website: https://whocanuse.com/
Who can use
47. Will it CORS?
Tell this magic CORS machine what you want, and it will tell you the exact operation.
Official website: https://httptoolkit.tech/will-it-cors/ )
Will it CORS
48. extractCSS
Extract CSS from HTML
Official website: http://extractcss.com/
extractCSS
49. Shieldfy
Before the code is officially put into production, automatically identify and fix security issues and vulnerabilities in the code.
Official website: https://shieldfy.io/
Shieldfy
50. YAML Checker
YAML Checker provides a quick and easy way to verify YAML. Validate YAML with beautiful syntax highlighting and error messages.
Official website: https://yamlchecker.com/
YAML Checker