From 79fdbbeeab6a93df16bc518ecc8c6219d55204e8 Mon Sep 17 00:00:00 2001 From: Krzysztof Nalepa <56135216+kraleppa@users.noreply.github.com> Date: Wed, 23 Apr 2025 11:41:00 +0200 Subject: [PATCH 1/5] Update README.md --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index e75821cdc..457e8f88f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# LiveDebugger +![LiveDebugger_Chrome_WebStore](https://github.com/user-attachments/assets/f3c8cce5-7cea-4465-9084-ff7c4bbb6f59) + LiveDebugger is a browser-based tool for debugging applications written in [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view) - an Elixir library designed for building rich, interactive online experiences with server-rendered HTML. @@ -10,7 +11,11 @@ Designed to enhance your development experience LiveDebugger gives you: https://github.com/user-attachments/assets/37f1219c-93cc-4d06-96f7-9b2140a1c971 -## Installation +## Getting started +> [!IMPORTANT] +> LiveDebugger should not be used on production - make sure that the dependency you've added is `:dev` only + +### Mix installation Add `live_debugger` to your list of dependencies in `mix.exs`: @@ -32,10 +37,15 @@ For full experience we recommend adding below line to your application root layo ``` -After you start your application LiveDebugger will be running at a default port `http://localhost:4007`. +After you start your application, LiveDebugger will be running at a default port `http://localhost:4007`. + +### Igniter installation + +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. -> [!WARNING] -> LiveDebugger should not be used on production! Make sure that the dependency you've added is `:dev` only +```bash +mix igniter.install live_debugger +``` ## Browser features @@ -68,16 +78,6 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c plug :put_secure_browser_headers, %{"content-security-policy" => @csp} ``` -## Igniter - -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 5b7b844ae48c0a711cd95807ef18aa18f6ede956 Mon Sep 17 00:00:00 2001 From: Krzysztof Nalepa <56135216+kraleppa@users.noreply.github.com> Date: Wed, 23 Apr 2025 11:43:34 +0200 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 457e8f88f..f3811707d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![LiveDebugger_Chrome_WebStore](https://github.com/user-attachments/assets/f3c8cce5-7cea-4465-9084-ff7c4bbb6f59) +![LiveDebugger_Chrome_WebStore](https://github.com/user-attachments/assets/cf9aee3b-58ab-4c45-8a43-d73182cb3e02) LiveDebugger is a browser-based tool for debugging applications written in [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view) - an Elixir library designed for building rich, interactive online experiences with server-rendered HTML. From db51a59af395ca446e0ee82138c0a4014959f369 Mon Sep 17 00:00:00 2001 From: Krzysztof Nalepa <56135216+kraleppa@users.noreply.github.com> Date: Wed, 23 Apr 2025 11:46:08 +0200 Subject: [PATCH 3/5] Update README.md --- README.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index f3811707d..40f2484b7 100644 --- a/README.md +++ b/README.md @@ -47,14 +47,8 @@ LiveDebugger has [Igniter](https://github.com/ash-project/igniter) support - an mix igniter.install live_debugger ``` -## Browser features - -List of browser features: - -- Debug button -- Components highlighting (coming soon!) - -Some features require injecting JS into the debugged application. You can disable them in your config. +### Browser features +Some features require injecting JS into the debugged application. They are enabled by default, but you can disable them in your config. ```elixir # config/dev.exs @@ -78,7 +72,7 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c plug :put_secure_browser_headers, %{"content-security-policy" => @csp} ``` -## Optional configuration +### Optional configuration ```elixir # config/dev.exs From c44dd7721dc85ffc774a16ddc4fedc4eb5d49ca2 Mon Sep 17 00:00:00 2001 From: Krzysztof Nalepa <56135216+kraleppa@users.noreply.github.com> Date: Wed, 23 Apr 2025 12:06:19 +0200 Subject: [PATCH 4/5] Update README.md --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 40f2484b7..16d091a1b 100644 --- a/README.md +++ b/README.md @@ -15,8 +15,8 @@ https://github.com/user-attachments/assets/37f1219c-93cc-4d06-96f7-9b2140a1c971 > [!IMPORTANT] > LiveDebugger should not be used on production - make sure that the dependency you've added is `:dev` only -### Mix installation +### Mix installation Add `live_debugger` to your list of dependencies in `mix.exs`: ```elixir @@ -47,6 +47,8 @@ LiveDebugger has [Igniter](https://github.com/ash-project/igniter) support - an mix igniter.install live_debugger ``` + +## Optional configuration ### Browser features Some features require injecting JS into the debugged application. They are enabled by default, but you can disable them in your config. @@ -72,7 +74,7 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c plug :put_secure_browser_headers, %{"content-security-policy" => @csp} ``` -### Optional configuration +### Other ```elixir # config/dev.exs @@ -80,7 +82,7 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c 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: , # Secret key used for LiveDebugger.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 tracing_setup_delay: 0 # Time in ms after tracing will be initialized. Useful in case multi-nodes envs From d1b3822da5eb8e4185b97ba96545bfcd7e9b2470 Mon Sep 17 00:00:00 2001 From: Krzysztof Nalepa <56135216+kraleppa@users.noreply.github.com> Date: Wed, 23 Apr 2025 12:33:13 +0200 Subject: [PATCH 5/5] Changed video --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 16d091a1b..a9fd08d92 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Designed to enhance your development experience LiveDebugger gives you: - :mag: The ability to inspect assigns for LiveViews and LiveComponents - :link: Tracing of their callback executions -https://github.com/user-attachments/assets/37f1219c-93cc-4d06-96f7-9b2140a1c971 +https://github.com/user-attachments/assets/a09d440c-4217-4597-b30e-f8b911a9094a ## Getting started > [!IMPORTANT]