Common online front end tools

Collection of some more practical web online tools, can greatly facilitate our front-end development, welcome to add. This article is on GitHub, welcome fork.

Online JavaScript Beautifier

JavaScript code can be formatted to make it easier to read and is especially useful when reading code that others have a messy format.

Jsonlint

JSON can be formatted, and syntax errors can be found in JSON, which is useful when debugging JSON with long content. When I developed the system often prompted the JSON syntax error, but can not find out, such as the last element of the array of a comma, the result with Jsonlint one is done.

PlaceHolder

Used to generate placeholder images, such as the development need a 300x300 picture, but the artwork has not yet made a diagram, so we can use a bitmap to develop debugging, and other pictures to replace it, use the image size followed by the URL, such as http://placehold.it/ 300X300 can generate a 300x300 image.

Regex Tester

Online Regular expression Testing tool, you can easily test our regular is correct, for online debugging.

Viewport Sizes

You can query CSS pixels for all major mobile devices, and CSS like not physical pixels, such as IPhone6 's physical pixels is 1334x750, and its CSS pixels are 667x375. CSS pixels mainly refer to the resolution on mobile browsing, so it is very necessary to check the CSS pixels of each mobile device when debugging the mobile web.

Can I Use

"Can I use" primarily provides compatibility queries for front-end related technologies, including desktop browsers and mobile browsers. For example, if you enter CSS3 "Border-radius", it will list all browser support for this attribute, help us to determine whether we can use a variety of CSS and JS new features.

Ali Test

The performance of the Web site can be tested online, mainly including all aspects of front-end performance, which is more full-name detail than YSlow or Chrome's own audit. Of course, Ali Test is based on Webpagetest building, we can also look at.

Baidu Statistical Flow Research Institute

This is Baidu based on Baidu statistics coverage of more than 1.5 million of the site's data generated by the report data, for the front-end development of more useful data mainly include: Browser market share, the use of resolution, mobile device brand, mobile device market share. This data helps us how to do the browser compatibility test, how to do the response development according to the different resolution. For example, IE6 and IE7 in China's market share is already very low, can not support, this is a data based. The Baidu data that needs to be explained is mainly based on domestic data.

Jsfiddle

Debug front-end code can be run online, it is easy to import a variety of mainstream front-end framework, can even simulate AJAX requests, import GitHub code, etc., very suitable for online learning/debugging code, but also suitable for case sharing, such as to share it as a blog example. Registered users can save their own code. There are a lot of similar tools, each with their own pros and cons, their own body:

• Codepen
• Runjs
• JS BIN

Jsperf:javascript Performance Playground

This is a standard JS code performance test platform, such as if you feel that the foreach is faster than the For loop, you can create the test code on the test. It also has a lot of other user-created benchmark code. It is much more accurate than the tests we have on our own computers because there are many external interference factors in the local test.

HTML Encoding/decoding

In addition to the HTM encoding/decoding, there are URL encoding/decoding, as well as string case processing, hash function processing, such as you want to MD5 a string encoding is very convenient.

Common online front end tools