Item logo image for Traceform: UI Mapping

Traceform: UI Mapping

1.0(

1 rating

)
Item media 1 (screenshot) for Traceform: UI Mapping

Overview

Highlights UI elements corresponding to selected code using Traceform.

Traceform: UI Mapping is the browser counterpart to the Traceform VSCode extension. It eliminates the frustrating context switching between your code editor and the browser during frontend development. When you use the 'Find in UI' command in VSCode, this extension receives the component identifier via a local bridge server and instantly highlights the corresponding UI element(s) in your running web application. Configure the target URL of your development server via the popup. Requires the Traceform VSCode extension and Babel plugin to function.

Details

  • Version
    0.1.9
  • Updated
    April 21, 2025
  • Offered by
    tejashaveridev
  • Size
    11.49KiB
  • Languages
    English (United States)
  • Developer
    Email
    lucidlayerhq@gmail.com
  • 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

XPath Inspector

5.0

Shows XPath and element information on hover

Clear Street View

3.4

Switch the graphical user interface elements on or off in street view for a clean screen grab or to enjoy an uncluttered experience.

Snaplensy

0.0

Snap any UI element, copy its selector, React path, styles & attributes — paste into any AI coding assistant.

Formik Devtools

5.0

Formik Developer Tools for debugging React form components

CSS Selector Tester

5.0

Highlight the elements matching a given CSS selector.

DevOps Test UI - Web UI

0.0

Enables DevOps Test UI - Web UI support for web applications

React Spy

4.7

Find code from UI, or, find UI from code!

Source Code Viewer

5.0

A browser extension to view formatted source code with syntax highlighting.

Border Patrol – CSS Debugger & Element Outliner

5.0

CSS box model debugger & element outliner for fast UI inspection, layout visualization, and faster frontend development.

Google Forms Toolbox

0.0

Enhance your Google Forms experience with added functionality: answer templates, the ability to reverse answer options

Leetcode format

4.2

Adds Format code button on leetcode to format the code using Prettier code formatter

FormAI - Auto Form Filler AI (GPT 4o Integrated)

5.0

Automatically fills form fields using Advanced AI & XPath selectors.

XPath Inspector

5.0

Shows XPath and element information on hover

Clear Street View

3.4

Switch the graphical user interface elements on or off in street view for a clean screen grab or to enjoy an uncluttered experience.

Snaplensy

0.0

Snap any UI element, copy its selector, React path, styles & attributes — paste into any AI coding assistant.

Formik Devtools

5.0

Formik Developer Tools for debugging React form components

CSS Selector Tester

5.0

Highlight the elements matching a given CSS selector.

DevOps Test UI - Web UI

0.0

Enables DevOps Test UI - Web UI support for web applications

React Spy

4.7

Find code from UI, or, find UI from code!

Source Code Viewer

5.0

A browser extension to view formatted source code with syntax highlighting.

Google apps