From ca9049badbe8707398a4dfa8d0c9ce4e2a2ab45b Mon Sep 17 00:00:00 2001 From: kraleppa Date: Wed, 16 Apr 2025 15:26:21 +0200 Subject: [PATCH 01/17] Putting component in the config --- assets/js/client.js | 24 +++++++++-- config/config.exs | 4 +- dev/layout.ex | 5 +-- lib/live_debugger.ex | 56 ++++++++++++++++++-------- lib/live_debugger/components/config.ex | 23 +++++++++++ 5 files changed, 84 insertions(+), 28 deletions(-) create mode 100644 lib/live_debugger/components/config.ex diff --git a/assets/js/client.js b/assets/js/client.js index 3c2d3b042..2ef619a69 100644 --- a/assets/js/client.js +++ b/assets/js/client.js @@ -18,10 +18,24 @@ function getSessionId() { } } +function debugButtonEnabled() { + const metaTag = document.querySelector('meta[name="live-debugger-config"]'); + + if (metaTag) { + return metaTag.hasAttribute('debug-button'); + } else { + throw new Error('LiveDebugger meta tag not found'); + } +} + function getLiveDebuggerBaseURL() { - return document - .getElementById('live-debugger-scripts') - .src.replace('/assets/live_debugger/client.js', ''); + const metaTag = document.querySelector('meta[name="live-debugger-config"]'); + + if (metaTag) { + return metaTag.getAttribute('url'); + } else { + throw new Error('LiveDebugger meta tag not found'); + } } function getSessionURL(baseURL) { @@ -42,7 +56,9 @@ window.document.addEventListener('DOMContentLoaded', function () { const baseURL = getLiveDebuggerBaseURL(); const sessionURL = getSessionURL(baseURL); - initDebugButton(sessionURL); + if (debugButtonEnabled()) { + initDebugButton(sessionURL); + } initHighlight(); diff --git a/config/config.exs b/config/config.exs index fbb521635..a70ed0c34 100644 --- a/config/config.exs +++ b/config/config.exs @@ -47,10 +47,8 @@ if config_env() == :dev do ] ] - config :live_debugger, server: true - - config :live_debugger, browser_features?: true config :live_debugger, experimental_features: :all + config :live_debugger, debug_button?: true end if config_env() == :test do diff --git a/dev/layout.ex b/dev/layout.ex index 72d1a6191..4f2f71939 100644 --- a/dev/layout.ex +++ b/dev/layout.ex @@ -23,10 +23,7 @@ defmodule LiveDebuggerDev.Layout do - <%= if Application.get_env(:live_debugger, :browser_features?) do %> - - <% end %> + <%= Application.get_env(:live_debugger, :live_debugger_tags) %> + <% end %> + """ + end +end From 81f6c31e37b3d7debfc55cd0a1c9fff5cb2794da Mon Sep 17 00:00:00 2001 From: kraleppa Date: Wed, 16 Apr 2025 15:32:13 +0200 Subject: [PATCH 02/17] Removed checking browser features --- lib/live_debugger/components/tree.ex | 2 +- lib/live_debugger/live_views/sidebar_live.ex | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex index d2f234e56..22b73b2e3 100644 --- a/lib/live_debugger/components/tree.ex +++ b/lib/live_debugger/components/tree.ex @@ -33,7 +33,7 @@ defmodule LiveDebugger.Components.Tree do
<%= @title %>
- <%= if Application.get_env(:live_debugger, :browser_features?) && LiveDebugger.Feature.enabled?(:highlighting) do %> + <%= if LiveDebugger.Feature.enabled?(:highlighting) do %> <.toggle_switch label="Highlight" checked={@highlight?} phx-click="toggle-highlight" /> <% end %>
diff --git a/lib/live_debugger/live_views/sidebar_live.ex b/lib/live_debugger/live_views/sidebar_live.ex index 510e280d5..53d400a6c 100644 --- a/lib/live_debugger/live_views/sidebar_live.ex +++ b/lib/live_debugger/live_views/sidebar_live.ex @@ -157,8 +157,7 @@ defmodule LiveDebugger.LiveViews.SidebarLive do def handle_event("select_node", params, socket) do %{"node_id" => node_id, "search-attribute" => attr, "search-value" => val} = params - if Application.get_env(:live_debugger, :browser_features?) && - LiveDebugger.Feature.enabled?(:highlighting) do + if LiveDebugger.Feature.enabled?(:highlighting) do if !socket.assigns.hidden? && socket.assigns.highlight? do send_event(socket.assigns.lv_process.pid, "highlight", %{attr: attr, val: val}) end From 0d7de1ea13c5905e13dc557c79954b9ea551291d Mon Sep 17 00:00:00 2001 From: kraleppa Date: Wed, 16 Apr 2025 15:38:36 +0200 Subject: [PATCH 03/17] Added error log --- assets/js/client.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/assets/js/client.js b/assets/js/client.js index 2ef619a69..5e0e496d3 100644 --- a/assets/js/client.js +++ b/assets/js/client.js @@ -18,13 +18,21 @@ function getSessionId() { } } +function handleMetaTagError(message) { + console.error( + 'LiveDebugger meta tag not found!\n' + + 'If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README.' + ); + throw new Error(message); +} + function debugButtonEnabled() { const metaTag = document.querySelector('meta[name="live-debugger-config"]'); if (metaTag) { return metaTag.hasAttribute('debug-button'); } else { - throw new Error('LiveDebugger meta tag not found'); + handleMetaTagError('LiveDebugger meta tag not found'); } } @@ -34,7 +42,7 @@ function getLiveDebuggerBaseURL() { if (metaTag) { return metaTag.getAttribute('url'); } else { - throw new Error('LiveDebugger meta tag not found'); + handleMetaTagError('LiveDebugger meta tag not found'); } } From 419f8e93fa33cc0bc0768f7c9175b6cbc1f3bd4d Mon Sep 17 00:00:00 2001 From: kraleppa Date: Wed, 16 Apr 2025 17:31:46 +0200 Subject: [PATCH 04/17] Moved fetching session url to extension --- assets/js/client.js | 7 ------ config/config.exs | 2 +- devtools/devtools.js | 57 +++++++++++++++++++++++++++++++++++++------- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/assets/js/client.js b/assets/js/client.js index 5e0e496d3..63d71753f 100644 --- a/assets/js/client.js +++ b/assets/js/client.js @@ -53,13 +53,6 @@ function getSessionURL(baseURL) { return `${baseURL}/${session_path}`; } -window.getLiveDebuggerURL = function () { - const baseURL = getLiveDebuggerBaseURL(); - const sessionURL = getSessionURL(baseURL); - - return sessionURL; -}; - window.document.addEventListener('DOMContentLoaded', function () { const baseURL = getLiveDebuggerBaseURL(); const sessionURL = getSessionURL(baseURL); diff --git a/config/config.exs b/config/config.exs index a70ed0c34..d436c062b 100644 --- a/config/config.exs +++ b/config/config.exs @@ -48,7 +48,7 @@ if config_env() == :dev do ] config :live_debugger, experimental_features: :all - config :live_debugger, debug_button?: true + config :live_debugger, browser_features?: false end if config_env() == :test do diff --git a/devtools/devtools.js b/devtools/devtools.js index a9c7c8d1e..8eeeb772d 100644 --- a/devtools/devtools.js +++ b/devtools/devtools.js @@ -1,15 +1,56 @@ function getLiveDebuggerSessionURL() { return new Promise((resolve, reject) => { - chrome.devtools.inspectedWindow.eval( - "getLiveDebuggerURL()", - (result, isException) => { - if (isException) { - reject(isException); - } else { - resolve(result); + const script = ` + (function() { + function getSessionId() { + let el; + if ((el = document.querySelector('[data-phx-main]'))) { + return el.id; + } + if ((el = document.querySelector('[id^="phx-"]'))) { + return el.id; + } + if ((el = document.querySelector('[data-phx-root-id]'))) { + return el.getAttribute('data-phx-root-id'); + } + return null; } + + function handleMetaTagError() { + console.error( + 'LiveDebugger meta tag not found!\\n' + + 'If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README.' + ); + throw new Error('LiveDebugger meta tag not found'); + } + + function getLiveDebuggerBaseURL() { + const metaTag = document.querySelector('meta[name="live-debugger-config"]'); + if (metaTag) { + return metaTag.getAttribute('url'); + } else { + handleMetaTagError(); + } + } + + function getSessionURL(baseURL) { + const session_id = getSessionId(); + const session_path = session_id ? \`transport_pid/\${session_id}\` : ''; + return \`\${baseURL}/\${session_path}\`; + } + + const baseURL = getLiveDebuggerBaseURL(); + return getSessionURL(baseURL); + })(); + `; + + chrome.devtools.inspectedWindow.eval(script, (result, isException) => { + if (isException || !result) { + reject(new Error("Error fetching LiveDebugger session URL")); + } else { + resolve(result); } - ); + }); }); } From 9de10cb2fe9772fffa576cfdeab8d5b0b0bfd0e9 Mon Sep 17 00:00:00 2001 From: kraleppa Date: Thu, 17 Apr 2025 11:39:15 +0200 Subject: [PATCH 05/17] Updated metatag message --- assets/js/client.js | 15 ++++++++------- devtools/devtools.js | 11 ++++++----- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/assets/js/client.js b/assets/js/client.js index 63d71753f..29ddd2f07 100644 --- a/assets/js/client.js +++ b/assets/js/client.js @@ -18,11 +18,12 @@ function getSessionId() { } } -function handleMetaTagError(message) { - console.error( - 'LiveDebugger meta tag not found!\n' + - 'If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README.' - ); +function handleMetaTagError() { + const message = ` + LiveDebugger meta tag not found! + If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README. + `; + throw new Error(message); } @@ -32,7 +33,7 @@ function debugButtonEnabled() { if (metaTag) { return metaTag.hasAttribute('debug-button'); } else { - handleMetaTagError('LiveDebugger meta tag not found'); + handleMetaTagError(); } } @@ -42,7 +43,7 @@ function getLiveDebuggerBaseURL() { if (metaTag) { return metaTag.getAttribute('url'); } else { - handleMetaTagError('LiveDebugger meta tag not found'); + handleMetaTagError(); } } diff --git a/devtools/devtools.js b/devtools/devtools.js index 8eeeb772d..6e77d407c 100644 --- a/devtools/devtools.js +++ b/devtools/devtools.js @@ -17,11 +17,12 @@ function getLiveDebuggerSessionURL() { } function handleMetaTagError() { - console.error( - 'LiveDebugger meta tag not found!\\n' + - 'If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README.' - ); - throw new Error('LiveDebugger meta tag not found'); + const message = \` + LiveDebugger meta tag not found! + If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README. + \`; + + throw new Error(message); } function getLiveDebuggerBaseURL() { From f7183bc5ff43352658a7dff1fdb02d93fa3fe0c7 Mon Sep 17 00:00:00 2001 From: kraleppa Date: Thu, 17 Apr 2025 11:56:31 +0200 Subject: [PATCH 06/17] Updated igniter --- lib/mix/tasks/live_debugger.install.ex | 16 ++-------------- test/mix/tasks/live_debugger.install_test.exs | 10 ++-------- 2 files changed, 4 insertions(+), 22 deletions(-) diff --git a/lib/mix/tasks/live_debugger.install.ex b/lib/mix/tasks/live_debugger.install.ex index 618cb8513..1863c729e 100644 --- a/lib/mix/tasks/live_debugger.install.ex +++ b/lib/mix/tasks/live_debugger.install.ex @@ -35,10 +35,7 @@ if Code.ensure_loaded?(Igniter) do Include live_debugger in the `` of your root layout. - <%= if Application.get_env(:live_debugger, :browser_features?) do %> - - <% end %> + <%= Application.get_env(:live_debugger, :live_debugger_tags) %> """ @@ -55,10 +52,7 @@ if Code.ensure_loaded?(Igniter) do """ @script_tag """ - <%= if Application.get_env(:live_debugger, :browser_features?) do %> - - <% end %> + <%= Application.get_env(:live_debugger, :live_debugger_tags) %> """ use Igniter.Mix.Task @@ -75,12 +69,6 @@ if Code.ensure_loaded?(Igniter) do @impl Igniter.Mix.Task def igniter(igniter) do igniter - |> Igniter.Project.Config.configure_new( - "dev.exs", - :live_debugger, - [:browser_features?], - true - ) |> setup_root_layout() |> notify_csp() end diff --git a/test/mix/tasks/live_debugger.install_test.exs b/test/mix/tasks/live_debugger.install_test.exs index d40a86b11..627691a67 100644 --- a/test/mix/tasks/live_debugger.install_test.exs +++ b/test/mix/tasks/live_debugger.install_test.exs @@ -25,10 +25,7 @@ defmodule Mix.Tasks.LiveDebugger.InstallTest do phx_test_project() |> Igniter.compose_task("live_debugger.install") |> assert_has_patch("lib/test_web/components/layouts/root.html.heex", """ - + | <%= if Application.get_env(:live_debugger, :browser_features?) do %> - + | - + | <% end %> + + | <%= Application.get_env(:live_debugger, :live_debugger_tags) %> """) end @@ -47,10 +44,7 @@ defmodule Mix.Tasks.LiveDebugger.InstallTest do Include live_debugger in the `` of your root layout. - <%= if Application.get_env(:live_debugger, :browser_features?) do %> - - <% end %> + <%= Application.get_env(:live_debugger, :live_debugger_tags) %> """) end From 3fa129aee360d029a4034b1e13445e8d668cd5bc Mon Sep 17 00:00:00 2001 From: kraleppa Date: Thu, 17 Apr 2025 12:06:21 +0200 Subject: [PATCH 07/17] Updated README --- README.md | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index fd18bfa92..7bbbb486f 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,16 @@ Add `live_debugger` to your list of dependencies in `mix.exs`: end ``` +For full experience we recommend adding below line to your application root layout. It attaches `meta` tag and LiveDebugger scripts in dev environment enabling browser features and integration with Chrome DevTools Extension. + +```elixir + # lib/my_app_web/components/layouts/root.html.heex + + + <%= Application.get_env(:live_debugger, :live_debugger_tags) %> + +``` + After you start your application LiveDebugger will be running at a default port `http://localhost:4007`. > [!WARNING] @@ -34,23 +44,16 @@ List of browser features: - Debug button - Components highlighting (coming soon!) -Some features require injecting JS into the debugged application. To achieve that you need to turn them on in the config and add LiveDebugger scripts to your application root layout. +Some features require injecting JS into the debugged application. You can disable them in your config. ```elixir # config/dev.exs -config :live_debugger, browser_features?: true -``` +# Disables all browser features and does not inject LiveDebugger JS +config :live_debugger, browser_features?: false -```elixir -# lib/my_app_web/components/layouts/root.html.heex - - - <%= if Application.get_env(:live_debugger, :browser_features?) do %> - - <% end %> - +# Disables only debug button +config :live_debugger, debug_button?: false ``` ### Content Security Policy @@ -67,14 +70,14 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c ## Igniter -LiveDebugger has [Igniter](https://github.com/ash-project/igniter) support - an alternative for standard mix installation. It'll automatically add LiveDebugger scripts to `root.html.heex` and enable browser features in your `config/dev.exs` after you use the below command. - -Make sure that added dependency is `:dev` only. +LiveDebugger has [Igniter](https://github.com/ash-project/igniter) support - an alternative for standard mix installation. It'll automatically add LiveDebugger dependency and modify your `root.html.heex` after you use the below command. ```bash mix igniter.install live_debugger ``` +Make sure that added dependency is `:dev` only. + ## Optional configuration ```elixir From 55284d81c4051bc0fca052cbf7ab09117eff4a46 Mon Sep 17 00:00:00 2001 From: kraleppa Date: Thu, 17 Apr 2025 12:13:20 +0200 Subject: [PATCH 08/17] Added condition for highlighting in scripts --- assets/js/client.js | 12 +++++++++++- lib/live_debugger.ex | 4 +++- lib/live_debugger/components/config.ex | 8 +++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/assets/js/client.js b/assets/js/client.js index 29ddd2f07..febf86340 100644 --- a/assets/js/client.js +++ b/assets/js/client.js @@ -37,6 +37,14 @@ function debugButtonEnabled() { } } +function highlightingEnabled() { + const metaTag = document.querySelector('meta[name="live-debugger-config"]'); + + if (metaTag) { + return metaTag.hasAttribute('highlighting'); + } +} + function getLiveDebuggerBaseURL() { const metaTag = document.querySelector('meta[name="live-debugger-config"]'); @@ -62,7 +70,9 @@ window.document.addEventListener('DOMContentLoaded', function () { initDebugButton(sessionURL); } - initHighlight(); + if (highlightingEnabled()) { + initHighlight(); + } // Finalize console.info(`LiveDebugger available at: ${baseURL}`); diff --git a/lib/live_debugger.ex b/lib/live_debugger.ex index 85018bd9c..f28f55059 100644 --- a/lib/live_debugger.ex +++ b/lib/live_debugger.ex @@ -70,6 +70,7 @@ defmodule LiveDebugger do browser_features? = Keyword.get(config, :browser_features?, true) debug_button? = Keyword.get(config, :debug_button?, true) + highlighting? = Keyword.get(config, :highlighting?, true) live_debugger_url = "http://#{ip_string}:#{port}" live_debugger_assets_url = "http://#{ip_string}:#{port}/#{@assets_path}" @@ -78,7 +79,8 @@ defmodule LiveDebugger do url: live_debugger_url, assets_url: live_debugger_assets_url, browser_features?: browser_features?, - debug_button?: debug_button? + debug_button?: debug_button?, + highlighting?: highlighting? } tags = LiveDebugger.Components.Config.live_debugger_tags(assigns) diff --git a/lib/live_debugger/components/config.ex b/lib/live_debugger/components/config.ex index 11fa3d7f2..83fe37784 100644 --- a/lib/live_debugger/components/config.ex +++ b/lib/live_debugger/components/config.ex @@ -10,10 +10,16 @@ defmodule LiveDebugger.Components.Config do attr(:assets_url, :string, required: true) attr(:browser_features?, :boolean, default: true) attr(:debug_button?, :boolean, default: true) + attr(:highlighting?, :boolean, default: true) def live_debugger_tags(assigns) do ~H""" - + <%= if @browser_features? do %> From 60b34ffefa8235f9c25078cc60208075d224b8f0 Mon Sep 17 00:00:00 2001 From: kraleppa Date: Thu, 17 Apr 2025 12:48:57 +0200 Subject: [PATCH 09/17] Browser features enabled in dev --- config/config.exs | 1 - 1 file changed, 1 deletion(-) diff --git a/config/config.exs b/config/config.exs index d436c062b..a491c2389 100644 --- a/config/config.exs +++ b/config/config.exs @@ -48,7 +48,6 @@ if config_env() == :dev do ] config :live_debugger, experimental_features: :all - config :live_debugger, browser_features?: false end if config_env() == :test do From 0c982b7c5efd463e25e9bab41f07cc19929a27cf Mon Sep 17 00:00:00 2001 From: kraleppa Date: Thu, 17 Apr 2025 12:49:15 +0200 Subject: [PATCH 10/17] Moved border --- lib/live_debugger/live_views/sidebar_live.ex | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/live_debugger/live_views/sidebar_live.ex b/lib/live_debugger/live_views/sidebar_live.ex index 53d400a6c..90b88b6de 100644 --- a/lib/live_debugger/live_views/sidebar_live.ex +++ b/lib/live_debugger/live_views/sidebar_live.ex @@ -82,8 +82,8 @@ defmodule LiveDebugger.LiveViews.SidebarLive do @impl true def render(assigns) do ~H""" -
-