Online web tools and applications that web developers and designers cannot do without

You may remember that in the past articles we have introduced our collection of essential tools, scripts and resources for front-end developers. In today's article, we will continue to recommend a group of online tool applications that we have carefully selected for web development and design. I believe it will bring you convenience and speed in the process of web development and design!

Jsfiddle is a long-established online debugging and code sharing website. It can help you debug JavaScript/CSS/HTML codes online, and conveniently publish them to communities, forums or social media to share with friends or ask questions. A lot of different libraries are integrated for you to choose from. Another similar tool is jsbin.com, which is also very good. For more tools, please refer to our previous articles.

Codepen is also a place that can help you debug and share front-end code online. Unlike jsfiddle, it is more like a community where you can see the online demos or codes recently added by users, and share them to other websites or forks more conveniently. Compared with jsfiddle, it is more like a platform to help display front-end effects. If you visit it often, you can find a lot of very good front-end effects, including html5, js, CSS3 and so on. Very good, highly recommended to everyone!

gbdebug is a front-end debugging tool integrated into the gb tag community. It was originally developed to facilitate friends in the community to ask questions or show the effects of jQuery code. If you use jsfiddle, you will definitely feel very familiar with it. The most powerful thing is the integration with GB community content. You can share your own front-end displays, templates or tutorials, and use gbdebug to add "online debugging", which makes it easier for everyone to read and debug online.

If you are a regular form fanatic, this online tool is definitely one of your must-have tools. reFiddle+ can help you debug regular forms online. You only need to enter the data and the corresponding regular expression, and you can see the highlighted results. Isn’t it very intuitive and simple? I believe you will definitely like it!

If your development language is Ruby, you may already know the online tool RubyFiddle. Using this online tool can help you debug Ruby code online. It is a bit similar to jsfiddle and codepen, but it is a Ruby version of the code. You just need to paste the ruby ​​code and click the "RUN" button. It even supports Vim or Emacs input methods!

This CSS3 code generator is different from general CSS3 code generation tools. It uses parallax scrolling to display content and provides customized options to dynamically generate the CSS3 code you need. Super cool and stylish!

This website has also been introduced in previous related articles. If you need to know how to use HTML5 related technologies correctly, it is best to take a closer look at this tool website, which is quite practical!

When we develop web applications, performance is an issue that can never be avoided. In fact, performance debugging of DOM is also an indispensable process. To use DOM monster, you only need to add it to your "bookmarks". Click this bookmark on any page that needs debugging, and it will help you list the performance problems of the current page. Isn’t it convenient!

zbugs looks like a bug-related tool, but it is actually an online tool that helps you quickly compress CSS/Javascript. You only need to provide a link to your website, download the relevant files, and then upload them to your website!

Buildwith is an online tool that helps you understand the technology used by websites. You only need to enter the website address you want to detect, and it will generate the front-end and back-end technologies and related links used by this website. I believe that if you are a hacker, this tool is indispensable: D