Web front-end development Chrome Plugin

Reference: http://www.cnblogs.com/sosoft/p/3490481.html

More and more front-end developers like to develop debug code in Chrome, and Chrome has a number of great plugins that can help front-end developers work much more efficiently. In particular, chrome itself can be logged in, after login all your plugins will automatically sync to every login chrome, very convenient AH.

Postman-rest Client

Postman is an artifact of Ajax development that is particularly helpful for restful development methods, which can be used to simulate various requests to test the correctness of the API, such as for simulating AJAX requests. It also supports authentication, such as a simple username/password, or Oauth1.0. The Rest console is also a good choice.

Edit this Cookie

This is a powerful cookie manager. You can add, delete, edit, search, protect, and block cookies. Cookies are also a very powerful cookie tool.

Web Developer

After installing the web Developer extension, a button will be added to the browser's toolbar, and a variety of web development tools will pop up by clicking on the button. The author of this extension tool is also very popular with the author of the Firefox extension web Developer extension for Firefox:

JSON Lint

An application that validates and formats JSON files online.

Web page

Intercept pages for pictures, support windows, areas and entire pages in three ways. Support horizontal and vertical paging to intercept oversized pages, the new version of the introduction of automatic saving function. , you can use the image editing tool to edit the picture, then save the edited picture as a PNG image file, and provide a highlight tool, alteration tool and text Add tool.

Yslow

YSlow can analyze Web pages and suggest modifications to improve the performance of Web pages based on a set of rules for high-performance Web pages. YSlow can rank Web pages based on a predefined set of three rules or user-defined rule sets. , Pagespeed Insights is a plugin for similar features developed by Google.

Colorzilla

You can get colors from any point on the page, maintain access history, and more.

Measure it!

measureit! To measure the size (pixel width and height) of any element in a Web site. Page Ruler is also a good choice.

JavaScript Errors Notifier

When the extension is installed, JavaScript errors are indicated in the Chrome address bar as an icon, because chrome only displays errors by default when the console is turned on.

Window Resizer

This extension adjusts the size of the browser window to accommodate various screen resolutions. This is useful for web designers and developers, and helps them to test the layout of the site at different screen resolutions.

Firebug Lite

Firebug's Lite version allows you to check the HTML,CSS and JavaScript code that lives on any page. You can also edit the code to test the new changes immediately. This is a lite version of the developer's favorite Firefox extension firebug.

JQuery extension

The jquery extension lets you run JavaScript and jquery commands in the current Web page.

Pretty Beautiful Javascript

This extension makes JavaScript files easier to read. It integrates the functions of beautifier and prettify to add syntax highlighting to the code. Use is to enter the URL of the JS file in a new window or click the link to the JS file when viewing the HMTL source code. If you are viewing the code in the resources option in Chrome's console, it is recommended to use Chrome's "pretty print" feature, which is to click on the "{}" icon.

Whatfont

To see which fonts are used for the current page, Firebug and WebKit Inspector can also view the fonts, but far from being webfont convenient, webfont can view the fonts by hovering over the elements. It also supports viewing network fonts, such as Typekit and Google font APIs.

IE Tab

Open the IE tab in Chrome, you can open a tab to run Internet Explorer and let you see how the Web page looks in IE browser.

Web front-end development Chrome Plugin