Item logo image for Pin-op

Pin-op

Item media 1 (screenshot) for Pin-op

Overview

Highlights styles and source code in your IDE for the selected DOM element. Pin-op by Volodymyr Moskvin. (c) 2026 Conus Vision.

Pin-op connects one Chrome or Chromium window to one local VS Code window through an explicit seven-digit code. Select an element on the page or in the lazy DOM tree, then see the related CSS or source-mapped SCSS ranges highlighted in the active IDE file and inspect its DOM and Rules. Pin-op distinguishes rules for the selected element from rules for its immediate parent. Auto Refresh updates eligible styles without reloading the page and reloads the current tab with scroll restoration after changed script, Vue, PHP, or HTML saves. Chrome and Firefox use one shared Chromium-derived read-only Inspector UI. It is a BSD-licensed derivation with attribution in the package notices, and the pinned Chromium source is available in the Firefox release source archive. Only after an explicit Rules origin click may Pin-op open the exact verified CSS or original source-mapped SCSS block in VS Code using an IDE-issued opaque authority. Passive inspection never switches files, and no workspace path, full range, document version, or command crosses the bridge. The author-style pseudo preview supports `:hover` and `:focus`; it is not native forcing and provides no user-authored CSS or DOM editing operations. Pin-op does not dispatch input, focus, mouse, pointer, or keyboard events. Page scripts may observe temporary preview artifacts while enabled, and mirror styles may trigger transitions, animations, or resource loads. Controlled exits remove Pin-op-owned markers and styles. Abrupt extension termination can leave artifacts until page navigation or reload. Unsupported cases are reported rather than invented. Inaccessible stylesheet rules are unavailable and reported as PARTIAL. Cross-origin frames are unavailable, and closed shadow roots are unavailable. Unsupported `:not(:hover)` is PARTIAL; unsupported results are not guessed. The Inspector's Source tab remains active-document-only. The connection uses a loopback-only WebSocket and explicit browser-window linking, with no remote Pin-op service. Chrome/Chromium 116 or newer and the matching Pin-op VS Code extension are required. Pin-op needs its matching IDE half. Install the Pin-op extension for Visual Studio Code from https://marketplace.visualstudio.com/items?itemName=conus-vision.pin-op (extension ID conus-vision.pin-op) and keep both halves on the same release. VS Code is the only IDE this panel can link to today; support for other IDEs is in development. Pin-op by Volodymyr Moskvin (c) 2026 [Conus Vision](https://conus.vision)

Details

  • Version
    0.4.2
  • Updated
    September 7, 2026
  • Offered by
    Conus Vision
  • Size
    852KiB
  • Languages
    English (United States)
  • Developer
    Email
    info@conus.vision
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Vibe Annotations - Visual Feedback for AI Coding Agents

5.0

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Annotator - for Chrome

5.0

Capture page screenshot, annotate with draws/highlights/arrows/text, select & move elements, and send to IDE.

TweakSync

5.0

TweakSync lets you style web elements in real-time from Chrome and sync changes with VS Code for a smooth development experience.

HTML/CSS Extractor

5.0

Extract HTML & CSS from any element with live preview, smart selector simplification, and syntax-highlighted editor

Claude Code Browser

5.0

Point at page elements and let Claude Code fix them. Visual debugging with picker, DOM tree, streaming chat. By Fineguide.AI.

HTML Viewer

4.8

Use HTML Viewer to view HTML with an online page-code preview and CSS inspector for website markup analysis

CSS Extractor Pro - Extract Clean CSS Code & Color Palettes

3.0

Extract clean CSS code from any webpage element & generate complete color palettes. Essential developer tool.

Developer DOM Inspector

5.0

Inspect DOM elements visually

HTML/CSS Section Copier

5.0

Extracts selected section and provides raw HTML and CSS.

Web Inspector

4.7

Use Web Inspector tool as a CSS viewer and website inspector for any page. It is a browser plugin for google chrome inspect element.

Chrome extension source viewer

4.6

View source code of Chrome extensions, Firefox addons or Opera extensions (crx/nex/xpi) from the Chrome web store and elsewhere.

Vibe Annotations - Visual Feedback for AI Coding Agents

5.0

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Annotator - for Chrome

5.0

Capture page screenshot, annotate with draws/highlights/arrows/text, select & move elements, and send to IDE.

TweakSync

5.0

TweakSync lets you style web elements in real-time from Chrome and sync changes with VS Code for a smooth development experience.

HTML/CSS Extractor

5.0

Extract HTML & CSS from any element with live preview, smart selector simplification, and syntax-highlighted editor

Claude Code Browser

5.0

Point at page elements and let Claude Code fix them. Visual debugging with picker, DOM tree, streaming chat. By Fineguide.AI.

HTML Viewer

4.8

Use HTML Viewer to view HTML with an online page-code preview and CSS inspector for website markup analysis

CSS Extractor Pro - Extract Clean CSS Code & Color Palettes

3.0

Extract clean CSS code from any webpage element & generate complete color palettes. Essential developer tool.

Google apps