diff --git a/README.md b/README.md
index 21e7ce8c6..8fb217764 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
-[](https://hexdocs.pm/live_debugger)
+[](https://hexdocs.pm/live_debugger)
[](https://hex.pm/packages/live_debugger)
[](https://github.com/software-mansion/live-debugger/blob/main/LICENSE)
@@ -14,7 +14,8 @@ Designed to enhance your development experience LiveDebugger gives you:
- :deciduous_tree: A detailed view of your LiveComponents tree
- :mag: The ability to inspect assigns for LiveViews and LiveComponents
-- :link: Tracing of their callback executions
+- :link: Tracing and filtering of their callback executions
+- :flashlight: Components highlighting
https://github.com/user-attachments/assets/a09d440c-4217-4597-b30e-f8b911a9094a
@@ -30,7 +31,7 @@ Add `live_debugger` to your list of dependencies in `mix.exs`:
```elixir
defp deps do
[
- {:live_debugger, "~> 0.1.7", only: :dev}
+ {:live_debugger, "~> 0.2.0", only: :dev}
]
end
```
@@ -55,6 +56,16 @@ LiveDebugger has [Igniter](https://github.com/ash-project/igniter) support - an
mix igniter.install live_debugger
```
+### DevTools extension
+
+Since version v0.2.0 you can install official LiveDebugger DevTools extension, giving you the ability to interact with its features alongside your application's runtime.
+
+- [Chrome extension](https://chromewebstore.google.com/detail/gmdfnfcigbfkmghbjeelmbkbiglbmbpe?utm_source=item-share-cb)
+- Firefox extension - coming soon!
+
+> [!NOTE]
+> Ensure the main LiveDebugger dependency is added to your mix project, as the browser plugin alone is not enough.
+
## Optional configuration
### Browser features
@@ -65,10 +76,13 @@ Some features require injecting JS into the debugged application. They are enabl
# config/dev.exs
# Disables all browser features and does not inject LiveDebugger JS
-config :live_debugger, browser_features?: false
+config :live_debugger, :browser_features?, false
# Disables only debug button
-config :live_debugger, debug_button?: false
+config :live_debugger, :debug_button?, false
+
+# Disables only components highlighting
+config :live_debugger, :highlighting?, false
```
### Content Security Policy
@@ -88,14 +102,20 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c
```elixir
# config/dev.exs
+# Allows you to disable LiveDebugger manually if needed
+config :live_debugger, :disabled?, true
+
+# Time in ms after tracing will be initialized. Useful in case multi-nodes envs
+config :live_debugger, :tracing_setup_delay, 0
+
+# LiveDebugger endpoint config
config :live_debugger,
ip: {127, 0, 0, 1}, # IP on which LiveDebugger will be hosted
port: 4007, # Port on which LiveDebugger will be hosted
- secret_key_base: "YOUR_SECRET_KEY_BASE", # Secret key used for LiveDebuggerWeb.Endpoint
- signing_salt: "your_signing_salt", # Signing salt used for LiveDebuggerWeb.Endpoint
- adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebuggerWeb.Endpoint
+ secret_key_base: "YOUR_SECRET_KEY_BASE", # Secret key used for LiveDebugger.Endpoint
+ signing_salt: "your_signing_salt", # Signing salt used for LiveDebugger.Endpoint
+ adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebugger.Endpoint
server: true, # Forces LiveDebugger to start even if project is not started with the `mix phx.server`
- tracing_setup_delay: 0 # Time in ms after tracing will be initialized. Useful in case multi-nodes envs
```
## Contributing
@@ -115,6 +135,10 @@ LiveReload is working both for `.ex` files and static files, but if some styles
mix assets.build:dev
```
+## What's next
+
+To learn about our upcoming plans and developments, please visit our [discussion page](https://github.com/software-mansion/live-debugger/discussions/355).
+
## Authors
LiveDebugger is created by Software Mansion.
diff --git a/config/config.exs b/config/config.exs
index c019db904..8619572cc 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -48,8 +48,6 @@ if config_env() == :dev do
]
config :live_debugger, LiveDebuggerWeb.Endpoint, debug_errors: true
-
- config :live_debugger, experimental_features: :all
end
if config_env() == :test do
diff --git a/docs/config.md b/docs/config.md
index 58b8204ee..c1e88afe3 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -6,10 +6,13 @@ Some features require injecting JS into the debugged application. They are enabl
# config/dev.exs
# Disables all browser features and does not inject LiveDebugger JS
-config :live_debugger, browser_features?: false
+config :live_debugger, :browser_features?, false
# Disables only debug button
-config :live_debugger, debug_button?: false
+config :live_debugger, :debug_button?, false
+
+# Disables only components highlighting
+config :live_debugger, :highlighting?, false
```
### Content Security Policy
@@ -29,6 +32,13 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c
```elixir
# config/dev.exs
+# Allows you to disable LiveDebugger manually if needed
+config :live_debugger, :disabled?, true
+
+# Time in ms after tracing will be initialized. Useful in case multi-nodes envs
+config :live_debugger, :tracing_setup_delay, 0
+
+# LiveDebugger endpoint config
config :live_debugger,
ip: {127, 0, 0, 1}, # IP on which LiveDebugger will be hosted
port: 4007, # Port on which LiveDebugger will be hosted
@@ -36,5 +46,4 @@ config :live_debugger,
signing_salt: "your_signing_salt", # Signing salt used for LiveDebugger.Endpoint
adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebugger.Endpoint
server: true, # Forces LiveDebugger to start even if project is not started with the `mix phx.server`
- tracing_setup_delay: 0 # Time in ms after tracing will be initialized. Useful in case multi-nodes envs
```
diff --git a/docs/welcome.md b/docs/welcome.md
index 01fbd13ee..145451251 100644
--- a/docs/welcome.md
+++ b/docs/welcome.md
@@ -7,6 +7,7 @@ Designed to enhance your development experience LiveDebugger gives you:
- A detailed view of your LiveComponents tree
- The ability to inspect assigns for LiveViews and LiveComponents
- Tracing of their callback executions
+- Components highlighting
## Installation
@@ -23,7 +24,7 @@ Add `live_debugger` to your list of dependencies in `mix.exs`:
```elixir
defp deps do
[
- {:live_debugger, "~> 0.1.7", only: :dev}
+ {:live_debugger, "~> 0.2.0", only: :dev}
]
end
```
@@ -50,6 +51,17 @@ mix igniter.install live_debugger
+### DevTools extension
+
+Since version v0.2.0 you can install official LiveDebugger DevTools extension, giving you the ability to interact with its features alongside your application's runtime.
+
+- [Chrome extension](https://chromewebstore.google.com/detail/gmdfnfcigbfkmghbjeelmbkbiglbmbpe?utm_source=item-share-cb)
+- Firefox extension - coming soon!
+
+> #### Note {: .info}
+>
+> Ensure the main LiveDebugger dependency is added to your mix project, as the browser plugin alone is not enough.
+
## Authors
LiveDebugger is created by Software Mansion.
diff --git a/lib/live_debugger/feature.ex b/lib/live_debugger/feature.ex
index 80a625c2f..bb4959895 100644
--- a/lib/live_debugger/feature.ex
+++ b/lib/live_debugger/feature.ex
@@ -1,32 +1,15 @@
defmodule LiveDebugger.Feature do
@moduledoc """
Feature flags for LiveDebugger.
- If you create a new feature, create a new function here with defined rules for enabling it.
+ If you create a new feature that can be enabled or disabled, create a new function here with defined rules for enabling it.
"""
def enabled?(:highlighting) do
- experimental_feature_enabled?(:highlighting) and
- Application.get_env(:live_debugger, :browser_features?, true) and
+ Application.get_env(:live_debugger, :browser_features?, true) and
Application.get_env(:live_debugger, :highlighting?, true)
end
- def enabled?(:dark_mode) do
- experimental_feature_enabled?(:dark_mode)
- end
-
- def enabled?(:callback_filters) do
- experimental_feature_enabled?(:callback_filters)
- end
-
def enabled?(feature_name) do
raise "Feature #{feature_name} is not allowed"
end
-
- defp experimental_feature_enabled?(feature_name) do
- case Application.get_env(:live_debugger, :experimental_features, false) do
- :all -> true
- features when is_list(features) -> Enum.member?(features, feature_name)
- _ -> false
- end
- end
end
diff --git a/lib/live_debugger_web/components.ex b/lib/live_debugger_web/components.ex
index d08475a42..525636657 100644
--- a/lib/live_debugger_web/components.ex
+++ b/lib/live_debugger_web/components.ex
@@ -562,20 +562,18 @@ defmodule LiveDebuggerWeb.Components do
<.icon name="icon-logo-text" class="h-6 w-32" />
- <%= if LiveDebugger.Feature.enabled?(:dark_mode) do %>
- <.nav_icon
- id="light-mode-switch"
- class="dark:hidden"
- icon="icon-moon"
- phx-hook="ToggleTheme"
- />
- <.nav_icon
- id="dark-mode-switch"
- class="hidden dark:block"
- icon="icon-sun"
- phx-hook="ToggleTheme"
- />
- <% end %>
+ <.nav_icon
+ id="light-mode-switch"
+ class="dark:hidden"
+ icon="icon-moon"
+ phx-hook="ToggleTheme"
+ />
+ <.nav_icon
+ id="dark-mode-switch"
+ class="hidden dark:block"
+ icon="icon-sun"
+ phx-hook="ToggleTheme"
+ />
<%= @inner_block && render_slot(@inner_block) %>
diff --git a/lib/live_debugger_web/layout.ex b/lib/live_debugger_web/layout.ex
index 387bd5284..6aa0313b1 100644
--- a/lib/live_debugger_web/layout.ex
+++ b/lib/live_debugger_web/layout.ex
@@ -47,11 +47,7 @@ defmodule LiveDebuggerWeb.Layout do
},
});
- // Disable theme detection till we finish darkmode
- <%= if LiveDebugger.Feature.enabled?(:dark_mode) do %>
- window.setTheme();
- <% end %>
-
+ window.setTheme();
liveSocket.connect();
window.liveSocket = liveSocket;
diff --git a/lib/live_debugger_web/live/traces_live.ex b/lib/live_debugger_web/live/traces_live.ex
index 9f69ef060..4d7c2ebca 100644
--- a/lib/live_debugger_web/live/traces_live.ex
+++ b/lib/live_debugger_web/live/traces_live.ex
@@ -90,10 +90,7 @@ defmodule LiveDebuggerWeb.TracesLive do
<.live_component
- :if={
- not @tracing_helper.tracing_started? &&
- LiveDebugger.Feature.enabled?(:callback_filters)
- }
+ :if={not @tracing_helper.tracing_started?}
module={LiveDebuggerWeb.LiveComponents.LiveDropdown}
id="filters-dropdown"
>
@@ -140,10 +137,7 @@ defmodule LiveDebuggerWeb.TracesLive do
<% end %>
<% end %>
-
+
<%= if @traces_continuation != :loading do %>
<.button
:if={not @tracing_helper.tracing_started? && @traces_continuation != :end_of_table}
diff --git a/mix.exs b/mix.exs
index da6cb462e..f33944d6d 100644
--- a/mix.exs
+++ b/mix.exs
@@ -1,7 +1,7 @@
defmodule LiveDebugger.MixProject do
use Mix.Project
- @version "0.1.7"
+ @version "0.2.0-dev"
def project do
[