DOM City — Visual Website Inspector

DOM City is a visual website inspection tool that transforms the current webpage into an interactive isometric city. Visible page elements are represented as buildings and grouped into semantic districts, making it easier to explore page structure, layout, colors, accessibility information, and basic performance-related details from a different visual perspective. Each structure remains linked to its original DOM element, so users can select a building in the city, inspect its properties, and locate the corresponding element on the source page. Main features include: • Convert visible DOM elements into an interactive isometric city • Group page elements into semantic districts • Inspect individual structures and their source elements • Pan, zoom, rotate, and fit the full visualization • Switch between Structure, Colors, Accessibility, and Performance views • Review element tags, classes, dimensions, hierarchy, and related details • Identify selected accessibility-related issues such as missing labels • Inspect page colors through a visual city representation • Locate a selected structure directly on the original webpage • Highlight the corresponding source element for easier inspection • Analyze the current page locally in the browser DOM City is intended as a supplementary visual inspection tool for developers, designers, accessibility reviewers, and users interested in understanding how a webpage is structured. The extension analyzes only the page on which it is explicitly activated. Page analysis is performed locally in the browser and does not require an online account or remote analysis service.