Task: README improvements (#289)

* Update README.md

* Changed video

Author: kraleppa

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
   </head>
 ```
 
-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,25 +74,15 @@ 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
 
 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_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