Easy Select?是一個(gè)Chrome/Firefox擴(kuò)展，讓你根據(jù)頁(yè)面元素快速獲取可讀可維護(hù)的 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擴(kuò)展商店

Firefox附加組件

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

使用

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

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

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

1. 層級(jí)選擇面板

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

div.items > article > a.title

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

2. 元素選擇面板

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

3. 結(jié)論面板

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

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

開(kāi)發(fā)

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

?