CSS Selector Helper for Chrome™

CSS Selector Helper for Chrome™插件简介

CSS Selector Helper for Chrome™插件描述

CSS Select Helper f Chrome™ makes finding the right CSS select on a web page much quicker  easier than digging through the HTML. Unlike other tools meant to help you locate CSS selects, this extension allows you to choose the selects manually, so that they can match up better with the structure of the page as it was designed. 


To use CSS Select Helper f Chrome™ follow these steps (also in the video):

1) Install the extension to your chrome browser.

2) Inspect an element on your page  select an element on the "Elements" page of the Dev tools.

3) Navigate to the "CSS Select" tab on the sidebar of the "Elements" page of the Dev tools.

4) On this tab, you will see a list of element ID names  CSS classes, dered from the most distant ancest element on top, to the selected element on bottom. Click any of the items in this list to include it in the current select.

5) Once the configured select matches one  me items on the page, you can cycle through the elements by pressing the "Prev"  "Next" buttons.

6) When you have found your CSS select*, click the "Select to Clipboard" button to copy the complete  properly fmatted select.

7) To see the selects of another element, just highlight it in the "Elements" panel,  click  the"Get Classes" button.

*Note: You can check the "Only Visible" checkbox in der to only match elements Selenium Webdriver 2 considers "Visible" (accding to this spec: http://www.w3.g/TR/webdriver/#determiningvisibility).
                                

CSS Selector Helper for Chrome™插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 CSS Selector Helper for Chrome™Chrome插件v2.0.2版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决