Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Inspect element -> open source file #55

Closed
6 tasks done
auchenberg opened this issue Feb 11, 2019 · 3 comments
Closed
6 tasks done

Feature: Inspect element -> open source file #55

auchenberg opened this issue Feb 11, 2019 · 3 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@auchenberg
Copy link
Owner

auchenberg commented Feb 11, 2019 •
edited

This feature is new "inspect element" mode that allows you to Inspect an element in VS Code. When clicking instead of seeing the element in a DOM Explorer, you instead see the source file for the component that created the DOM element. Think of this as the DOM explorer for the Component-age, or a built-in React DevTools like experience in Browser Preview.

ezgif com-optimize (1)

Prototype is hacked together for React.js, and demo is showing a out of box create-react-app.

Actions:

  • Add inspect button to toolbar
  • Get position for DOM element
  • Resolve position into DOM element id
  • Add rendering of element highlighting in Canvas
  • Map DOM element ID to source position using https://github.com/auchenberg/element-to-source
  • Open file in VS Code

Supported frameworks

Powered by https://github.com/auchenberg/element-to-source/, and validated in

  • React / Create React App
  • React / Next.js
  • Svelte
@auchenberg auchenberg added enhancement New feature or request help wanted Extra attention is needed labels Feb 11, 2019
@auchenberg auchenberg changed the title Inspect element -> open source file Prototype Inspect element -> open source file Feb 11, 2019
@auchenberg auchenberg changed the title Prototype Inspect element -> open source file Feature: Inspect element -> open source file Feb 24, 2019
@yozlet
Copy link

yozlet commented Apr 11, 2019

@auchenberg Any more work planned on this? It's a killer feature, and you have enough users that putting out a partially-working "alpha" version might get some traction for contributions. (Especially amongst devs involved with unsupported frameworks.)

@auchenberg
Copy link
Owner Author

@yozlet Needs a refactor, and highlighting needs to be adjusted to the new emulation mode, so a bit of work ahead.

@auchenberg
Copy link
Owner Author

@yozlet First version has been released. Handling of scaled viewports still needs to get there.

@fripig fripig mentioned this issue May 31, 2019
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@auchenberg @yozlet