Common online front-end tools and common online tools

Common online front-end tools and common online tools

Some useful Web online tools are collected, which greatly facilitates front-end development. You are welcome to add them. This article is on Github. Welcome to Fork.

Online JavaScript Beautifier

JavaScript code can be formatted to facilitate reading. This is especially useful when you read code in messy formats.

JSONLint

JSON can be formatted, and syntax errors in JSON can be found. This is useful when debugging a json file with a long content. During development, the system often prompts a JSON syntax error but cannot find it. For example, if a comma is added to the last element of the array, JSONLint is used to solve the problem.

PlaceHolder

It is used to generate placeholder images. For example, a x image is required during development, but the artist hasn't made the image yet. Therefore, we can use a bitmap for development and debugging and wait for the image to be replaced, use the image size following the URL, for example, http://placehold.it/300x300to generate a x image.

Regex Tester

The online regular expression testing tool can easily test whether our regular expressions are correct for online debugging.

Viewport Sizes

You can query the CSS pixels of all mainstream mobile devices. CSS pixels are not physical pixels. For example, the physical pixels of iPhone 6 are 1334x750, while CSS pixels are 667x375. CSS pixels mainly refer to the resolution on mobile browsing. Therefore, when debugging mobile Web, you need to check the CSS pixels of each mobile device.

Can I Use

"Can I Use" mainly provides compatibility queries for front-end related technologies, including desktop browsers and mobile browsers. For example, if "border-radius" of CSS3 is input, it lists the support of all browsers for this attribute and helps us determine whether various new CSS and JS features can be used.

Alibaba Testing

You can test the website's Performance Online, mainly including all aspects of the front-end performance. This is more detailed than the full name of audit provided by YSlow or Chrome. Of course, Alibaba testing is also based on WebPagetest. You can also take a look.

Baidu statistics Traffic Research Institute

This is the report data generated by Baidu based on the data of more than 1.5 million of the sites covered by Baidu statistics. Useful data for front-end development mainly includes browser market share and resolution usage, shares of mobile device brands and the market share of mobile devices. This data helps us to test browser compatibility and develop response based on different resolutions. For example, the market share of IE6 and IE7 in China is already very low, so you don't need to support it. This is data-based. The data of Baidu is mainly based on domestic data.

JSFiddle

You can run and debug the front-end code online. You can easily import mainstream front-end frameworks, simulate AJAX requests, and import Github code. This method is suitable for online learning and debugging code, it is also suitable for case sharing, for example, sharing it as an example of a blog. Registered users can save their own code. There are many similar tools, which have their own advantages and disadvantages:

• CODEPEN
• RunJS
• JS BIN

JsPerf: JavaScript performance playground

This is a standard JS Code Performance Testing Platform. for example, if forEach is faster than the for loop, you can create a test code on it for testing. It also has a lot of benchmark test code created by other users. It is much more accurate than testing on our own computers, because there are many external interference factors in local testing.

HTML encoding/Decoding

In addition to HTM encoding/decoding, URL encoding/decoding, string case processing, and hash function processing, for example, it is very convenient to encode a string with MD5.