为开发人员准备的14个最 Google Chrome 扩展

jopen 10年前

1) MeasureIt 

measureit-e1418445019838.png

While designing a webpage it is essential to check the dimensions of elements included on the webpage, especially you rely on the rulers and guides in Photoshop. This problem can be addressed well by using MeasureIt. This is the most useful extension that allows you to check the width and height of almost anything quickly and easily, for this you simply need to drag a box around it. The actual measurements will appear instantly as you grad the marquee across.

2) Responsive Inspector 

responsive-e1418445133732.png

While designing highly responsive websites it becomes very crucial for the developers to check the reflow of layout at diverse viewports. Though there are several other extensions available today that allow you to view the designs at preset widths, but Responsive Inspector is known for its unique and advanced approach. This extension reads through your CSS and records the viewports that have been set for any given page using media queries. Therefore, allowing you to take screenshots and resize the browser exactly at the dimensions a webpage was designed for. This extension is the perfect option for those who want to check whether the media queries are working perfectly or not.

3) Gradient Inspector 

gradiant-e1418444664843.png

This is the most advanced Chrome Extensions that adds sidebar to the developer tool and showcases the information about gradients that are used to inspect elements. This extension is also used to toggle individual gradient separately as if they have different layers.

4) Emmet Live Style 

emma-e1418444789382.png

This is another useful plug-in for live bi-directional CSS editing of new generation. This plug-in is not only compatible with Google Chrome browser, but also works with Sublime Text, Safari Browser and other browsers and editors. It enables the users to connect two diverse CSS sources together for live editing. This is the most unique feature this plug-in offers to the users.    

5) Dimensions Toolkit 

dimensions-e1418444908715.png

Dimensions Toolkit is known for offering some of the useful tools that can be used for testing the responsive website designs. It is also used to check the default and custom break points, resizable dimensions and more of your responsive websites. This extension is available both as a Chrome Extension and a Web Application.

6) Batman.js

batmanjs1-e1418443599839.png

7) Muz.li

muzli-e1418443742344.png

8) Web-developer-checklist

wdchecklist-e1418443865806.png

9) DevTools-Autosave

devtools-e1418443978310.png

10) Php-Ninja-Manual

php-e1418444109658.png

11) Check-My-Links

checkmtlinks-e1418444231481.png

12) Code-Cola

code-cola-e1418444349955.png

13) Wappalyzer

wappalyzer_chrome_tools-e1418449936873.jpg

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more.

14) Appspector

appspector_-_chrome_webdeveloper_tools-e1418450181189.jpg

 

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Version detecting is being implemented.