Nice work! The goal in the linked issue is to add this to the HTML engine and have it inject whatever is needed to do this kind of thing. If you’d like to get involved with that issue, please let me know!
7 Likes
Yes, if you want to link to the place where the HTML element appears then it’s actually easier than waht I was doing! I decided to link to the palce where the component is called becuase my app was using components defined in a complex use macro froma nother package, so the line numbers were kinda useless (they would point to a line in an “empty module” that only contained the use macro).
If the Source Inspector can provide a context menu with several source locations (using JS, probably), then we could expose a “stack trace” and the user could choose where to go: to the HTML element, to the component call, or even to the livevew mount() callback. The tricky thing would be how to generate the stack trace at the right level of abstraction. We probably don«t want a real stack trace, and instead we want a “simplified” stack trace that exposes the component hierarchy and maybe the controller function or the liveview mount() callback.
I would be interested in this, but I’m not sure how much time I’d have to work on it. The HTML engine seems complex (although the changes we’d require would probably be very simple once one understands the engine).
2 Likes
Done: Source code inspector by tmbb · Pull Request #2719 · phoenixframework/phoenix_live_view · GitHub
5 Likes
@tmbb, I saw your comment on the PR.
I’m on vacation, till 16th of this month.
Once I’m back, I’ll see how I can make the required changes you asked for.
It’s exciting to finally see the changes being added to Phoenix itself. 
Hey,
I am back, however, I have no clue how to work with Phoenix Live View.
How do I contribute to the project?
iex -S mix?
But how to see the UI-related changes? I couldn’t find a CONTRIBUTING.md.
@tmbb Little help. 
I am back, however, I have no clue how to work with Phoenix Live View.
Well, Phoenix Live View is developped like any other Elixir package. I’m not sure how the JS part works exactly, but I assume Phoenix Live View bundles its JS assets somehow. If thereis any JS you need to add, it should be added there. Regarding CSS, I’ll live that up to you, but it’s probably best to bundle the CSS somehow inside the JS.
You need to create your own project and import your local version of LiveView to preview the changes locally.
Note that Phoenix liveview probably doesn’t ship with any CSS, and IMO all CSS and JS should work independently of the CSS and JS generated by the default phoenix generators, so all CSS should be self-contained (ideally with some possibilites for configuration which could be passed into the JS by a tag or something, because we need to make sure that the new outlines don’t blend into the colors of the user’s HTML)
Chris McCord showcased this functionality at Elixir Conf.
Yay, we don’t have to jump through so many hoops to be able find the source code!
5 Likes
This is just a demo and AFAIK not available in phoenix master, right? At least I can’t find anything in the phoenix source code that allows you to click an HTML element and open your editor.
