Web development and design online web tools websites and Applications

 

You may still remember that in the past articles, we once introduced the necessary tools, scripts, and resources for front-end developers we collected. In today's article, we will continue to recommend you a set of online tools and applications that are essential for web development and design. I believe it will bring you convenience and convenience in the web development and design process!

Frontend Development

Jsfiddle

Jsfiddle is a well-established website for online debugging and code sharing. It helps you debug javascript, css, and html code online and easily publish it to the community, share or ask questions with friends on forums or social media. A lot of different class libraries are integrated for your choice. Similar Tools include jsbin.com, which is also very good. For more tools, refer to our previous articles.

Codepen

Codepen is also a place that helps you debug and share front-end code online, unlike jsfiddle, which is more like a community, you can see online demos or code added by recent users, and share them with other websites or fork more conveniently. Compared with jsfiddle, it is more like a platform that helps display front-end effects. If you are familiar with it, you can find a lot of good front-end effects, including html5, js, and CSS3. Pretty good. I recommend it to you!

Gbdebug

Gbdebug is a front-end debugging tool integrated in the gb label community. It was initially developed to help friends in the Community ask questions or display jQuery code effects. If you use jsfiddle, you will certainly feel very familiar with it. The most powerful is the integration with the GB community content. You can share your own front-end presentations, templates or tutorials, and use gbdebug to add "online debugging". this makes it easier for you to read and debug data online.

ReFiddle +

If you are an avid regular form enthusiast, this online tool must be one of your essential tools. reFiddle + can help you debug regular form expressions online, you only need to input the data and the corresponding regular expression to see the highlighted result. Is it very intuitive and simple? I believe you will love it!

RubyFiddle

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

CSS3 generator

This CSS3 code generator is not the same as the general CSS3 code generation tool. It uses the parallax scrolling method to display the content and provides custom options, you can dynamically generate the required CSS3 code. Cool, super-stylish!

HTML5 Please

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

Front-end performance optimization tools

DOM Monster

When we develop web applications, performance is an unavoidable problem. In fact, it is also an indispensable process for DOM performance debugging. To use DOM monster, you only need to add it to your "bookmarks". Click this bookmarks on any page to debug, and it will help you list the performance problems on the current page. Is it convenient!

ZBugs

Zbugs looks like a bug-related tool. In fact, it is an online tool that helps you quickly compress CSS/Javascript. You only need to provide a link to your website to download related files, upload it to your website!

Other tools

BuiltWith

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. It will generate the frontend and backend technologies and links for this website, I believe that if you are a hacker, this tool is essential: D

Reprinted please note