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

Feature: Inspect element -> open source file #55

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

Feature: Inspect element -> open source file #55

auchenberg opened this issue Feb 11, 2019 · 3 comments

Comments

@auchenberg
Copy link
Owner

@auchenberg auchenberg commented Feb 11, 2019

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

@auchenberg auchenberg commented Apr 11, 2019

@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

@auchenberg auchenberg commented May 24, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.