Over the past few years, as the new generation of Web applications has grown, apps have become richer and richer, along with the overall complexity of the front end. When it comes to front-end tools, you may quickly think of a variety of common development tools and debugging tools in the market, but this time we collected the opinions of several senior front-end engineers and sorted out the following tools you may not have used, but you will certainly use them:

Recommended development tool: WebStorm

Download address: www.jetbrains.com/webstorm/do…

Brief introduction: to do good work, must first sharpen its tools. A handy development tool is necessary for every front-end engineer. It can handle simple pages or complex projects. Rich plugin resources, simple version management, powerful debugging functions, all in WebStorm.

Set up a custom template with WebStorm. It can be filled automatically when creating a new file. There is no need to write duplicate code.

Cloud service recommendation: Light service

Use address: qingfuwu.cn

Brief introduction: Want to write a few interfaces, but do not want to make a big effort to deploy services, the most simple and easy to understand cloud services in 2022: light service waiting for you to use, open the box to use, focus on business logic, online development, debugging, online, you can not expect fast.

Now you can sign up for 10 yuan for free. Low QPS is equivalent to using all kinds of resources for free.

Markdown editor recommendation: Typora

Typora.io /

Summary: In 2022, struggling to remember Markdown grammar? Use Typora now. It works on Windows, Mac, and Linux, automatically matches Markdown tags, previews instantly, illustrations easily, and exports quickly to PDF, LaTex, and HTML.

Typora combined with Youdao Cloud Note can realize Markdown file sharing among multiple devices.

CSS Blog recommended: CSS Tricks

Address: css-tricks.com/

Introduction: If you’re still struggling with your design, check out CSS Tricks. You might only need a few lines of CSS code to do the trick.

Open source animation library recommendation: Lottie

Website: Lottiefiles.com/

Introduction: Airbnb’s open source animation library for iOS, Android and Web not only enables native apps to use animations exported from AE or FigMA like static materials, but also allows manual control of progress and binding events.

Code highlight Chrome plugin recommended: iFormatTool

Add address: chrome.google.com/webstore/se…

Summary: When you open a web site with a CSS, JS, or JSON suffix, the plugin will automatically highlight the code in the page and provide different action buttons depending on the code type. The code on the web page is finally “cut and uncluttered”.

Window Resizer is a Chrome extension for responsive design preview

Add address: chrome.google.com/webstore/de…

Summary: With window Resizer, you don’t have to worry about which devices haven’t been tested yet. You can also enter any size you want to adjust and simulate different resolutions.