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

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

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

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

這是EasySelect拿到的：

div[] > a

安裝

Chrome擴展商店

Firefox附加組件

或從release手動安裝

使用

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

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

界面分三個部分：

1. 層級選擇面板

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

div.items > article > a.title

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

2. 元素選擇面板

這個就是通過選擇class還有元素屬性構造選擇器了。這個面板與層級選擇面板是聯動關系。

3. 結論面板

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

還可以進行高亮，以及最下面的表達式 / 語句復制。

開發

npm install # 安裝環境
npm run serve # 編譯并熱更新
npm run build # 生產環境打包
npm run analyze # 分析包組件大小

?