VisBug

Open source browser design tools

VisBugとは何ですか?

VisBugはhttps://visbug.web.appによって開発されたChromeの拡張機能で、その主な機能は「Open source browser design tools」です。

拡張機能のスクリーンショット

screenshot

VisBug拡張機能のCRXファイルをダウンロード

VisBug拡張子のファイルをcrx形式でダウンロードし、ブラウザにChrome拡張機能を手動でインストールするか、crxファイルを友達と共有して簡単にChrome拡張機能をインストールします。

拡張機能の使用方法

                        Open source web design debug tools built with JavaScript: a FireBug for designers.

- Point, click, move, resize & tinker
- Edit or style any page, in any state, like it's an artboard
- Inspect styles, spacing, distance, accessibility and alignment
- Nitpick layouts & content, in the real end environment, at any device size
- Leverage adobe/sketch skills
- Edit text, replace images
- Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
- Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc
- Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
- No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

Give power to designers & content creators, in a place where they currently feel they have little to none, **by bringing design tool interactions and hotkeys to the browser**                    

拡張機能の基本情報

名前 VisBug VisBug
ID cdockenadnadldjbbgcallicgledbeoc
公式URL https://chromewebstore.google.com/detail/visbug/cdockenadnadldjbbgcallicgledbeoc
説明 Open source browser design tools
ファイルサイズ 5.35 MB
インストール数 187,716
現在のバージョン 0.3.55
最終更新日 2022-10-21
公開日 2020-06-26
評価 4.82/5 合計 225 レビュー
開発者 https://visbug.web.app
Eメール [email protected]
支払い方法 free
拡張機能のウェブサイト https://github.com/GoogleChromeLabs/ProjectVisBug
ヘルプページのURL https://github.com/GoogleChromeLabs/ProjectVisBug/issues
対応言語 en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "name": "VisBug",
    "version": "0.3.55",
    "description": "Open source browser design tools",
    "manifest_version": 2,
    "icons": {
        "128": "icons\/visbug.png"
    },
    "permissions": [
        "activeTab",
        "contextMenus",
        "storage"
    ],
    "background": {
        "persistent": true,
        "scripts": [
            "visbug.js",
            "contextmenu\/launcher.js",
            "contextmenu\/colormode.js",
            "contextmenu\/colorscheme.js"
        ]
    },
    "browser_action": {
        "default_title": "Click or press Alt+Shift+D to launch VisBug",
        "default_icon": {
            "128": "icons\/visbug.png"
        }
    },
    "web_accessible_resources": [
        "tuts\/*",
        "toolbar\/*"
    ],
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "windows": "Alt+Shift+D",
                "mac": "Alt+Shift+D",
                "chromeos": "Alt+Shift+D",
                "linux": "Alt+Shift+D"
            }
        }
    }
}