EasySelectChrome/Firefox 擴(kuò)展

Easy Select 是一個Chrome/Firefox擴(kuò)展，讓你根據(jù)頁面元素快速獲取可讀可維護(hù)的 CSS 選擇器。

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

舉例來說，這是瀏覽器自動生成的：

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

這是EasySelect拿到的：

div[itemprop='zhihu:question'] > a

安裝

Chrome擴(kuò)展商店

Firefox附加組件

或從release手動安裝

使用

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

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

界面分三個部分：

1. 層級選擇面板

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

div.items > article > a.title

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

2. 元素選擇面板

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

3. 結(jié)論面板

這里可以看到最終生成的表達(dá)式，當(dāng)前頁面的表達(dá)式匹配元素數(shù)量。

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

開發(fā)

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