I’ve really enjoyed this idea! And, true to form, I’ve decided to try and package it into a neat and very opinioinanted library which can be used in any project. You can find it here: GitHub - tmbb/source_inspector: Source Inspector for your LiveView components · GitHub. Although many steps are still very manual (you need to specify where you want to add “html breakpoint” and which components you want to expose to the source inspector), the library itself doesn’t contain any project-specific code. The HTML representation isn’t actually as pretty, but I think is definitely quite functional.
The main concepts in this library are inspired by the default Elixir debugging features:
-
SourceInspector.inspeectable() (macro) - marks a LiveView component as inspectable. It adds a number of attributes to the component (which are opaque to the user) that allow us to set breakpoints and pry() on the component.
-
SourceInspector.breakpoint() (macro) - establishes a place in an HTML element that can work as a “debugging breakpoint”. When added to an HTML element (not to a component!), it allows the user to right-click the HTML element and open the file that defines the component that returns the HTML.
-
SourceInspector.pry() (macro) - activates the breakpoint(s) in a component: when a component is activated with SourceInspector.pry(), clicking the HTML defined by the element will send the user to the file and line where the component is called (i.e., to teh line where the SourceInspector.pry() macro is used.
This is all a bit abstract, so let’s see (parts of) a practical example:
@doc """
Component for a navbar link.
"""
attr(:active, :boolean, default: false)
attr(:disabled, :boolean, default: false)
attr(:class, :string, default: "", doc: "extra classes added to the navbar link")
attr(:to, :string, doc: "the destination for your navbar link")
attr(:method, :string, default: "get")
slot(:inner_block, required: true)
# mark the component as inspectable
SourceInspector.inspectable()
def navbar_link(assigns) do
unquote_splicing(maybe_raise_not_implemented)
~H"""
<.link class={[
"nav-link",
if @active do "active" else "" end,
if @disabled do "disabled" else "" end,
@class
]}
href={@to}
method={@method}
{SourceInspector.breakpoint()}>
<%= render_slot(@inner_block) %>
</.link>
"""
end
end
Note how we use SourceInspector.inspectable() to tell the system that we want the component to be inspectable. Then, we set a breakpoint by calling {SourceInspector.breakpoint()} inside the HTML attributes inside the ~H"..." sigil. That code will allow us to pry() into the navbar_link component whenever we call it.
Now, after defining the navbar_link/1 component (either inside or outseide our application), we can use SourceInspect.pry() to activate the Source Inspector on the function calls. For example:
<.navbar {SourceInspector.pry()}>
<:brand>Demo17</:brand>
<:start_group>
<.navbar_link to={~p"/data_entry"} {SourceInspector.pry()}>Home</.navbar_link>
</:start_group>
<:end_group>
<%= if @current_user do %>
<%= if @current_user.email do %>
<.navbar_link to={~p"/auth/users/settings"} {SourceInspector.pry()}>Settings</.navbar_link>
<.navbar_link to={~p"/auth/users/log_out"} method="delete" {SourceInspector.pry()}>Log out</.navbar_link>
<% end %>
<% else %>
<.navbar_link to={~p"/auth/users/register"} {SourceInspector.pry()}>Register</.navbar_link>
<.navbar_link to={~p"/auth/users/log_in"} {SourceInspector.pry()}>Log in</.navbar_link>
<% end %>
</:end_group>
</.navbar>
Note the fragments such as <.navbar_link to={~p"/data_entry"} {SourceInspector.pry()}>Home</.navbar_link>. When we call {SourceInspector.pry()} in the attribute list of the component, this will ensure that each time we right-click on the HTML generated by the component.
For example, see the following screencast.
The output is quite similare to the one shown in the cressncasts in this thread, although not as pretty. The advantage is that my output is generaed by dead-simple CSS and doesn’t’ change the metrics of the eelements by much, which means it probably has less interference with the HTML elements.
