Firefox 瀏覽器附加元件
登入
CSS Insight 預覽

CSS Insight 作者: MarkAlexI

CSS Insight – your go-to solution for fast and efficient style management directly in your browser!

0 (0 reviews)0 (0 reviews)
43 Users43 Users
必須使用 Firefox 才能使用此擴充套件
下載 Firefox
下載檔案

擴充套件後設資料

畫面擷圖
Inject your CSSView More Details
關於此擴充套件
CSS Insight – Effortless CSS Styling, Right at Your Fingertips

CSS Insight is the ultimate browser extension for web developers looking to streamline their styling workflow. Instantly inspect styles directly on any webpage — no need to open the browser console.

With CSS Insight, you can:
  • View declared styles, computed styles, media rules, and keyframe animations
  • Copy CSS rules to your clipboard with a single click
  • Track and analyze any HTML element with real-time style info
  • Add custom styles to test design changes on the fly
  • Explore styles in a clean, intuitive interface with advanced details in a dedicated panel

Whether you're debugging, optimizing, or simply exploring how a page is built, CSS Insight gives you everything you need to manage and understand styles efficiently.

Take control of your CSS – faster, smarter, cleaner.



NOTICE

Tracking an Element with CSS Insight

To track and analyze a specific element on a webpage:
  • Open the popup and click the "Start Tracking Tag" button.
  • Click on the element you want to inspect directly on the webpage.
  • Reopen the popup (if needed) and click "Stop Tracking Tag".
    you can now view detailed style information for the selected element.

Additionally, you can manually enter any valid CSS selector into the input field to analyze styles for that element.
開發者留言
How to Use Be Focused and Productive in Firefox on Android
  1. Open Firefox and navigate to any webpage (e.g., a search engine).
  2. Tap the three-dot menu in the bottom-right corner.
  3. Tap the ">" next to Extensions.
  4. Select Be Focused and Productive and enter your parameters.

📌 Note: If you open the menu from a blank tab or the Firefox homepage, you may only see the Extensions management page instead of direct access to the extension’s functionality.

How to Block a Resource
  1. Enter a part of the resource name in the left input field without specifying the protocol.
  2. Example: Entering "youtube" will block all subdomains of this resource.
  3. Enter the redirect URL in the right input field, fully specified with the protocol.
  4. Example: "https://google.com"
  5. Click the save button to apply the rule.

📌 Note:
- If the redirect URL is left empty, the target site will simply be blocked.
- To modify a rule, delete the old rule and add a new one.

This extension is available on Chrome Web Store.
由 1 位評論者給出 0 分
登入後即可幫此擴充套件評分
目前沒有評分

已儲存星等

5
0
4
0
3
0
2
0
1
0
還沒有評論
權限與資料了解更多

必要權限:

  • 存取瀏覽器分頁
  • 存取您所有網站中的資料

選用的權限:

  • 存取您所有網站中的資料
更多資訊
附加元件網址
  • 首頁
  • 技術支援網站
  • 技術支援信箱
版本
1.20.1
大小
554.62 KB
最近更新
24 天前 (2025年8月8日)
相關分類
  • 網頁開發
授權條款
MIT License
版本紀錄
  • 瀏覽所有版本
標籤
  • user scripts
新增至收藏集
檢舉此附加元件
MarkAlexI 製作的更多擴充套件
  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

前往 Mozilla 官網

附加元件

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

瀏覽器

  • Desktop
  • Mobile
  • Enterprise

產品

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

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