Google Chrome developer tools: Cssviewer (a CSS Viewer)

Cssviewer's introduction

Cssviewer is a google browser plugin that helps users quickly view the CSS properties of current page elements, and after installing the Cssviewer plugin in Chrome, users can quickly mimic the presentation of an element in a webpage when designing a Web page. This greatly reduces development time (when looking for APIs) for some developers who use public libraries, and allows users to quickly see the specific CSS properties of the element by simply placing the mouse over the element.

Development background of Cssviewer

Web developers in the design of a Web page, if the use of CSS is a number of public libraries, such as the jquery Ui,bootstrap and other libraries, the need for a large number of public library CSS name, if the user is only referring to the API, the view of a large number of APIs will waste a lot of time, If the user is given a demo page, allowing the user to freely view the element CSS in the page, it will allow users to quickly imitate and use these public libraries, so as to speed up the development of the purpose.

How to use Cssviewer

1. Installing the Cssviewer plugin in Google Chrome and launching the CSS Viewer function in the browser's extender, the Cssviewer plugin can be found at the bottom of this article, and the offline Cssviewer plugin installation method can be consulted: How do I install an offline chrome plugin for the. crx extension in Google Chrome? The latest Google browser offline installation version can be downloaded from here: http://chromecj.com/chrome/2014-09/177.html.

2. Click on the Cssviewer plugin button in the top right corner of Chrome, at which point the user can float the mouse over the page to find the CSS properties that need to be seen, and when the user floats onto an element, the Cssviewer plugin automatically takes the form of a popup window, Reminds the user of the element's detailed CSS content, including font size, CSS class name, background color, width, height, and so on:

Cssviewer precautions

1. The Cssviewer Viewer can only be used to view the CSS element properties of the current page element, and for JavaScript in the Web page it is not possible to see, there is a script multi-element CSS effect, the Cssviewer plugin can not detect changes.

2. Each time you click on the Cssviewer plugin button in the top right corner of chrome, you can start the CSS viewing mode and click again to cancel.

Google Chrome developer tools: Cssviewer (a CSS Viewer)