add debug_attributes and set LiveView PID on view element (#3898)

* add debug_pids

* add comment

* debug_tags_location -> debug_attributes

* Update lib/phoenix_component.ex

Co-authored-by: José Valim <[email protected]>

---------

Co-authored-by: José Valim <[email protected]>

Author: SteffenDE

assets/js/phoenix_live_view/constants.js

@@ -79,6 +79,7 @@ export const PHX_PORTAL = "data-phx-portal";
 export const PHX_TELEPORTED_REF = "data-phx-teleported";
 export const PHX_TELEPORTED_SRC = "data-phx-teleported-src";
 export const PHX_RUNTIME_HOOK = "data-phx-runtime-hook";
+export const PHX_LV_PID = "data-phx-pid";
 export const PHX_KEY = "key";
 export const PHX_PRIVATE = "phxPrivate";
 export const PHX_AUTO_RECOVER = "auto-recover";

assets/js/phoenix_live_view/view.js

@@ -36,6 +36,7 @@ import {
   PHX_VIEWPORT_TOP,
   PHX_VIEWPORT_BOTTOM,
   MAX_CHILD_JOIN_ATTEMPTS,
+  PHX_LV_PID,
 } from "./constants";
 
 import {
@@ -392,7 +393,7 @@ export default class View {
   }
 
   onJoin(resp) {
-    const { rendered, container, liveview_version } = resp;
+    const { rendered, container, liveview_version, pid } = resp;
     if (container) {
       const [tag, attrs] = container;
       this.el = DOM.replaceRootContainer(this.el, tag, attrs);
@@ -418,6 +419,15 @@ export default class View {
       );
     }
 
+    // The pid is only sent if
+    //
+    //    config :phoenix_live_view, :debug_attributes
+    //
+    // if set to true. It is to help debugging in development.
+    if (pid) {
+      this.el.setAttribute(PHX_LV_PID, pid);
+    }
+
     Browser.dropLocal(
       this.liveSocket.localStorage,
       window.location.pathname,

lib/phoenix_component.ex

@@ -535,8 +535,9 @@ defmodule Phoenix.Component do
   <!-- </AppWeb.CoreComponents.header> -->
   ```
 
-  Similarly, you can also turn on `:debug_tags_location`, which adds a
-  `data-phx-loc` attribute with the line of where each HTML tag is defined:
+  Similarly, you can also turn on `:debug_attributes`, which adds a
+  `data-phx-loc` attribute with the line of where each HTML tag is defined
+  (as well as `data-phx-pid` to the LiveView container):
 
   ```html
   <header data-phx-loc="125" class="p-5">
@@ -549,7 +550,7 @@ defmodule Phoenix.Component do
 
       config :phoenix_live_view,
         debug_heex_annotations: true,
-        debug_tags_location: true
+        debug_attributes: true
 
   Changing this configuration will require `mix clean` and a full recompile.
 

lib/phoenix_live_view/channel.ex

@@ -1398,7 +1398,8 @@ defmodule Phoenix.LiveView.Channel do
 
     case result do
       {:ok, diff, :mount, new_state} ->
-        reply = put_container(session, route, %{rendered: diff, liveview_version: lv_vsn})
+        diff = maybe_put_debug_pid(%{rendered: diff, liveview_version: lv_vsn})
+        reply = put_container(session, route, diff)
         GenServer.reply(from, {:ok, reply})
         {:noreply, post_verified_mount(new_state)}
 
@@ -1423,6 +1424,14 @@ defmodule Phoenix.LiveView.Channel do
     end
   end
 
+  defp maybe_put_debug_pid(diff) do
+    if Application.get_env(:phoenix_live_view, :debug_attributes, false) do
+      Map.put(diff, :pid, inspect(self()))
+    else
+      diff
+    end
+  end
+
   defp build_state(%Socket{} = lv_socket, %Phoenix.Socket{} = phx_socket) do
     %{
       join_ref: phx_socket.join_ref,

lib/phoenix_live_view/tag_engine.ex

@@ -1054,7 +1054,7 @@ defmodule Phoenix.LiveView.TagEngine do
 
   defp handle_tag_and_attrs(state, name, attrs, suffix, meta) do
     text =
-      if Application.get_env(:phoenix_live_view, :debug_tags_location, false) do
+      if Application.get_env(:phoenix_live_view, :debug_attributes, false) do
         "<#{name} data-phx-loc=\"#{meta[:line]}\""
       else
         "<#{name}"

test/test_helper.exs

@@ -1,7 +1,7 @@
 Application.put_env(:phoenix_live_view, :debug_heex_annotations, true)
-Application.put_env(:phoenix_live_view, :debug_tags_location, true)
+Application.put_env(:phoenix_live_view, :debug_attributes, true)
 Code.require_file("test/support/live_views/debug_anno.exs")
-Application.put_env(:phoenix_live_view, :debug_tags_location, false)
+Application.put_env(:phoenix_live_view, :debug_attributes, false)
 Application.put_env(:phoenix_live_view, :debug_heex_annotations, false)
 
 {:ok, _} = Phoenix.LiveViewTest.Support.Endpoint.start_link()