INSPECTA

Inspect and edit CSS visually

什麼是INSPECTA?

INSPECTA是由https://inspecta.design開發的Chrome擴展程式,該擴展的主要功能是“Inspect and edit CSS visually”。

擴展截圖

screenshot
screenshot
screenshot

下載INSPECTA擴展crx文件

下載INSPECTA擴展crx格式的文件,手動將Chrome擴充功能安裝到瀏覽器中,也可以將crx文件分享給朋友,輕鬆安裝Chrome擴充功能。

擴展使用說明

                        Inspecta is a powerful Chrome extension designed to streamline the visual quality assurance (VQA) process for web designers. With Inspecta Chrome extension, designers can effortlessly inspect the live implementation of web pages, identify UI bugs, and make real-time adjustments to element properties to ensure alignment with the original design.

Key features:

Visual Inspection: 
Designers can visually inspect the live web page, allowing for quick identification of discrepancies between the implemented design and the original design mockup.

Real-Time Editing:
Inspecta enables designers to edit and update element properties directly within the browser, facilitating rapid adjustments to achieve pixel-perfect accuracy.

Inage overlay:
Designers have the option to upload or copy and paste their original design images from Figma as overlays. This feature provides pixel-perfect accuracy by allowing designers to compare the live web page with the original design side by side.

CSS Export:
 Once adjustments are made, designers can export and share the relevant CSS changes with developers, ensuring seamless collaboration and implementation of design updates.

With Inspecta, designers can significantly streamline their QA process, saving time and effort while ensuring consistent visual fidelity between design mockups and live web page implementations.                    

擴展基本資訊

名稱 INSPECTA INSPECTA
ID pjcfmgokdbdffkcldahbehpemeejglhh
官方網址 https://chromewebstore.google.com/detail/inspecta/pjcfmgokdbdffkcldahbehpemeejglhh
簡介 Inspect and edit CSS visually
檔案大小 165 KB
安裝次數 254
目前版本 0.0.8
更新時間 2024-03-07
上架時間 2023-07-13
評分 5.00/5 共 1 次評分
開發者 https://inspecta.design
電子郵箱 [email protected]
付費類型 free
擴展官網 http://www.inspecta.design
支援的語言 en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "manifest_version": 3,
    "name": "INSPECTA",
    "description": "Inspect and edit CSS visually",
    "version": "0.0.8",
    "icons": {
        "16": "logo\/logo-16.png",
        "32": "logo\/logo-32.png",
        "48": "logo\/logo-48.png",
        "128": "logo\/logo-128.png"
    },
    "options_page": "settings\/settings.html",
    "action": {
        "default_title": "Inspecta"
    },
    "permissions": [
        "activeTab",
        "storage"
    ],
    "background": {
        "service_worker": "service-worker.js"
    },
    "content_scripts": [
        {
            "js": [
                "js\/utils.js",
                "js\/cssgenerator.js",
                "js\/colorpicker\/codemirror-colorpicker.min.js",
                "js\/bottombar.js",
                "js\/changes.js",
                "js\/properties.js",
                "js\/main.js",
                "js\/overview.js",
                "js\/rulers\/ruler.js",
                "js\/rulers\/RulersGuides.js",
                "js\/rulers\/Event.js",
                "js\/rulers\/Dragdrop.js",
                "js\/overlay\/overlay.js"
            ],
            "css": [
                "css\/codemirror-colorpicker.css"
            ],
            "matches": [
                ""
            ]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "test.html",
                "index.html",
                "svgs.html",
                "js\/*",
                "css\/*"
            ],
            "matches": [
                ""
            ]
        }
    ]
}