Layout Debugger

Chrome extension for highlighting DOM elements to better debug layout issues

Vad är Layout Debugger?

Layout Debugger är en Chrome-tillägg utvecklad av cdsnowden, och dess huvudfunktion är "Chrome extension for highlighting DOM elements to better debug layout issues".

Tilläggsskärmbilder

screenshot
screenshot

Ladda ner Layout Debugger-förlängningens CRX-fil

Ladda ner Layout Debugger-filändelser i crx-format, installera Chrome-tillägg manuellt i webbläsaren eller dela crx-filerna med vänner för att enkelt installera Chrome-tillägg.

Användarmanual för Tillägg

                        - 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..                    

Grundläggande Information om Tillägg

Namn Layout Debugger Layout Debugger
ID gkamnoiedmidgolhlihkamjpfccohilb
Officiell webbadress https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
Beskrivning Chrome extension for highlighting DOM elements to better debug layout issues
Filstorlek 251 KB
Antal Installationer 897
Aktuell Version 1.7
Senast Uppdaterad 2022-04-19
Publiceringsdatum 2017-07-31
Betyg 4.00/5 Totalt 3 Betyg
Utvecklare cdsnowden
E-post [email protected]
Betalningssätt free
Tilläggswebbplats https://github.com/Recidvst/Layout-Debugger
Hjälpsida URL https://github.com/Recidvst/Layout-Debugger#support
Stödda Språk 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"
    ]
}