CSS Selector Capture Pro這款工具生成一個(gè)可復(fù)制的CSS選擇器，無需Devtool！是做前端開發(fā)的一把好手！使用起來干凈、簡單、直觀，并具有獨(dú)特的功能。

功能介紹

? 可復(fù)制和可調(diào)整的選擇器可在 CSS/JavaScript 中使用
? 與選擇器匹配的元素的突出顯示
? 基于視口上下文中選擇器的總匹配數(shù)
? 簡潔或詳細(xì)選擇器的選擇
? 對頁面的干擾最小

使用方法

* 用戶指南：https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md

* 啟用應(yīng)用程序，使用“CTRL”鍵鎖定/解鎖選擇器突出顯示的位置，然后單擊復(fù)制按鈕復(fù)制選擇器。

* 如果需要，請?jiān)趶?fù)制之前單擊選擇器路徑來調(diào)整選擇器。

* 使用“ESC”鍵退出App

這個(gè)擴(kuò)展在哪里有用

* 該擴(kuò)展通常適合前端開發(fā)、端到端測試（例如 Selenium）以及數(shù)據(jù)抓?。ㄆ渲行枰庇^地識(shí)別目標(biāo)、匹配和獲取 CSS 選擇器）的使用。

* 還提供精簡版：https://www.crxsoso.com/webstore/detail/css-selector-capture-lite/cfjcaifmdcgnnbbnhgmgikdbonflhmaa

隱私

* 該擴(kuò)展程序不會(huì)收集任何數(shù)據(jù)或?qū)?shù)據(jù)發(fā)送給第三方。

  插件安裝方法

方法一：.crx文件格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序或直接輸入：chrome://extensions/

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動(dòng)到Chrome的擴(kuò)展管理界面中，這時(shí)候用戶會(huì)發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會(huì)多出一個(gè)”拖動(dòng)以安裝“的插件按鈕。

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會(huì)給予用戶一個(gè)確認(rèn)安裝的提示。

5.用戶這時(shí)候只需要點(diǎn)擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會(huì)立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

3.勾選開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯(cuò)誤程序包無效 CRX_HEADER_INVALID

可以參考：超詳細(xì)的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決

發(fā)布

* 2.3.2 (2023.08.24)
- 升級(jí)至清單 v3

* 2.3.1 (2021.09.01)
- v2.3.0 中修正了算法

* 2.3.0 (2021.07.15)
- 優(yōu)化簡潔選擇器

* 2.2.0 (2019.03.23)
- 在擴(kuò)展圖標(biāo)彈出窗口中添加了用戶指南鏈接

* 2.1.0 (2019.03.21)
- 添加了用于鎖定疊加層切換的快捷熱鍵（CTRL）

* 2.0.0 (2019.02.25)
- 優(yōu)化簡潔選擇器（即更短）
- 當(dāng)設(shè)置對話框的觸發(fā)按鈕位于頂部且用戶將其懸停時(shí)，調(diào)整選擇器背景不透明度

* 1.0.3 (2018.10.15)
- 優(yōu)化選擇器檢索

* 1.0.0 (2018.09.29)
- 初始發(fā)行