Firefox 瀏覽器附加元件
  • 擴充套件
  • 佈景主題
    • 用於 Firefox
    • 字典與語言套件
    • 其他瀏覽器網站
    • Android 版的附加元件
登入
devtools-highlighter 預覽

devtools-highlighter 作者: Patrick Brosset

Find and highlight elements on the page with this DevTools panel, using CSS styles and selectors.

4.8 (6 reviews)4.8 (6 reviews)
95 Users95 Users
必須使用 Firefox 才能使用此擴充套件
下載 Firefox 並安裝擴充套件
下載檔案

擴充套件後設資料

畫面擷圖
關於此擴充套件
There are 2 ways to find elements using the panel:

- By using computed style queries.
- Or by using CSS selectors.

Using computed style queries

This is the main feature of this extension. It is very useful for finding elements on a page that have certain CSS computed styles.

For example, say you want to list all of the CSS grids on a page. You can use this query to do this display:grid.

The extension will simply loop through all elements on the page and only display the ones that do have their CSS computed display value set to grid.

You can also use a couple of operators to make searching more useful:

display:!block will find all elements that have a display value other than block.

display:~flex will find all elements that have a display value that includes the substring flex. So it will match elements that have it set to inline-flex and flex.

The extension also supports descendant queries. That means you can find elements that have a given style and that are descendant of elements that have another given style.

For instance display:flex align-self:start will find all elements with align-self set to start and that are descendants of a display:flex element.

Using CSS selector queries

This is a more traditional way to search for elements in the page but can be useful too.

With this feature, you can simply type any CSS selector that would work with document.querySelectorAll and the matching elements will be listed and highlighted.

Browsing the results

Once a search has returned results, they are displayed in the panel and they are all highlighted in the page too.

Hovering over a single result will highlight only the corresponding element.

It is also possible to scroll an element into view by clicking on the corresponding link in the panel.

Finally, you can also select any of the displayed elements in the inspector panel by clicking on the select link in the panel.
開發者留言
This is the result of a couple of hours of work only. This is therefore experimental. Feel free to report issues on the GitHub issue tracker.
And let me know what you think in the comments!
由 1 位評論者給出 4.8 分
登入後即可幫此擴充套件評分
目前沒有評分

已儲存星等

5
5
4
1
3
0
2
0
1
0
閱讀全部 6 條評論
權限與資料了解更多

必要權限:

  • 讓開發者工具可存取您在開啟分頁中的資料
  • 存取您所有網站中的資料
更多資訊
附加元件網址
  • 首頁
  • 技術支援網站
版本
1.2.1resigned1
大小
19.81 KB
最近更新
1 年前 (2024年4月25日)
相關分類
  • 網頁開發
  • 其它
授權條款
Mozilla Public License 2.0
版本紀錄
  • 瀏覽所有版本
新增至收藏集
檢舉此附加元件
Patrick Brosset 製作的更多擴充套件
  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

前往 Mozilla 官網

附加元件

  • 關於
  • Firefox 附加元件部落格
  • 擴充套件工作坊
  • 開發者交流中心
  • 開發者政策
  • 社群部落格
  • 討論區
  • 回報 Bug
  • 評論撰寫指南

瀏覽器

  • Desktop
  • Mobile
  • Enterprise

產品

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • 隱私權
  • Cookie
  • 法律資訊

除另有註明外,本站內容皆採用創用 CC 姓名標示—相同方式分享條款 3.0 或更新版本授權大眾使用。