EasySelect Chrome/Firefox擴展

Easy Select?是一個(gè)Chrome/Firefox擴展，讓你根據頁(yè)面元素快速獲取可讀可維護的 CSS 選擇器。

為什么不用瀏覽器自帶的 "Copy selector"?

舉例來(lái)說(shuō)，這是瀏覽器自動(dòng)生成的：

#TopstoryContent > div > div > div > div:nth-child(41) > div > div > h2 > div > a

這是EasySelect拿到的：

div[] > a

安裝

Chrome擴展商店

Firefox附加組件

或從release手動(dòng)安裝

使用

首先，在瀏覽器中使用檢查元素呼出調試工具，然后用inspector選擇一個(gè)元素。

在右側的面板選擇一下“Easy Select”就能看到工具界面了。

界面分三個(gè)部分：

1. 層級選擇面板

CSS選擇器通常通過(guò)上級元素來(lái)進(jìn)行輔助定位，例如：

div.items > article > a.title

最高是到html元素這一級，如果你不小心點(diǎn)多了，生成出的表達式會(huì )很長(cháng)，可以使用第二排限制最終表達式的長(cháng)度。

2. 元素選擇面板

這個(gè)就是通過(guò)選擇class還有元素屬性構造選擇器了。這個(gè)面板與層級選擇面板是聯(lián)動(dòng)關(guān)系。

3. 結論面板

這里可以看到最終生成的表達式，當前頁(yè)面的表達式匹配元素數量。

還可以進(jìn)行高亮，以及最下面的表達式 / 語(yǔ)句復制。

開(kāi)發(fā)

npm install # 安裝環(huán)境
npm run serve # 編譯并熱更新
npm run build # 生產(chǎn)環(huán)境打包
npm run analyze # 分析包組件大小

?