Layout Debugger

Chrome extension for highlighting DOM elements to better debug layout issues

Layout Debuggerとは何ですか?

Layout Debuggerはcdsnowdenによって開発されたChromeの拡張機能で、その主な機能は「Chrome extension for highlighting DOM elements to better debug layout issues」です。

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

screenshot
screenshot

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

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

拡張機能の使用方法

                        - Identifying too-wide overflowing objects.
- Distinguishing block from inline elements.
- Helping to keep track of element alignment.

Adds a distinct colour outline to each visible DOM element, as well as providing a visual prompt for overflowing divs.

display: block; => blue;
display: inline; => purple;
overflowing the viewport => red!
etc..                    

拡張機能の基本情報

名前 Layout Debugger Layout Debugger
ID gkamnoiedmidgolhlihkamjpfccohilb
公式URL https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
説明 Chrome extension for highlighting DOM elements to better debug layout issues
ファイルサイズ 251 KB
インストール数 897
現在のバージョン 1.7
最終更新日 2022-04-19
公開日 2017-07-31
評価 4.00/5 合計 3 レビュー
開発者 cdsnowden
Eメール [email protected]
支払い方法 free
拡張機能のウェブサイト https://github.com/Recidvst/Layout-Debugger
ヘルプページのURL https://github.com/Recidvst/Layout-Debugger#support
対応言語 en-GB
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "manifest_version": 2,
    "name": "Layout Debugger",
    "short_name": "Layout Debugger",
    "description": "Chrome extension for highlighting DOM elements to better debug layout issues",
    "version": "1.7",
    "author": "Chris Snowden",
    "icons": {
        "19": "images\/icon19dark.png",
        "38": "images\/icon38dark.png",
        "128": "images\/icon128dark.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images\/icon19dark.png",
            "38": "images\/icon38dark.png"
        },
        "default_title": "Toggle highlighter"
    },
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "content_scripts": [
        {
            "matches": [
                ""
            ],
            "js": [
                "highlight.js"
            ]
        }
    ],
    "permissions": [
        "activeTab"
    ],
    "web_accessible_resources": [
        "*.png",
        "highlight.js"
    ]
}