diff --git a/README.md b/README.md index e75821cdc..a9fd08d92 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# LiveDebugger +![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. @@ -8,10 +9,14 @@ 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] +> LiveDebugger should not be used on production - make sure that the dependency you've added is `:dev` only -## Installation +### Mix installation Add `live_debugger` to your list of dependencies in `mix.exs`: ```elixir @@ -32,19 +37,20 @@ 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`. -> [!WARNING] -> LiveDebugger should not be used on production! Make sure that the dependency you've added is `:dev` only +### Igniter installation -## Browser features +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. -List of browser features: +```bash +mix igniter.install live_debugger +``` -- Debug button -- Components highlighting (coming soon!) -Some features require injecting JS into the debugged application. You can disable them in your config. +## 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. ```elixir # config/dev.exs @@ -68,17 +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} ``` -## 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 +### Other ```elixir # config/dev.exs @@ -86,7 +82,7 @@ Make sure that added dependency is `:dev` only. 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