Docs: adjust docs for LiveDebugger website (#829)

Co-authored-by: Hubert Kasprzycki <[email protected]>

Author: kraleppa

README.md

@@ -12,10 +12,12 @@ LiveDebugger is a browser-based tool for debugging applications written in [Phoe
 
 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 and filtering of their callback executions
-- :flashlight: Components highlighting
+- 🌳 See your LiveComponents tree
+- 🔍 View assigns
+- 🔗 Trace and filter callback executions
+- 🔦 Inspect elements
+
+Check out our comprehensive [Features Overview](https://hexdocs.pm/live_debugger/features.html) to explore all capabilities in detail.
 
 https://github.com/user-attachments/assets/a09d440c-4217-4597-b30e-f8b911a9094a
 

docs/elements_inspection.md

@@ -30,7 +30,7 @@ You can enable inspecting mode in two ways:
 
 - Using `Debug Button` in the debugged LiveView window (clicking button and selecting from menu)
 
-- Using `Inspect Element` button in the LiveDebugger (not available in `Dead View Mode`)
+- Using `Inspect Element` button in the LiveDebugger (not available in `DeadView Mode`)
 
 ![Inspect Element Button](images/inspect_element_button.png)
 

docs/features.md

@@ -0,0 +1,80 @@
+# Features Overview
+
+LiveDebugger provides a comprehensive set of tools designed to improve Phoenix LiveView debugging and development. From real-time state inspection to performance profiling, these features give you deep visibility into your application's behavior.
+
+## Features
+
+### [Assigns Inspection](assigns_inspection.md)
+
+Inspect the current state of assigns for any LiveView or LiveComponent in your application. Updated in real-time, this feature acts like a live `IO.inspect/1` with context, helping you track state changes, debug reactivity issues, and spot bugs faster.
+
+**Key capabilities:**
+
+- Real-time assign updates
+- Copy assigns for IEx processing
+- Expandable/collapsible complex data structures
+- Immediate feedback on user interactions
+
+### [Callback Tracing](callback_tracing.md)
+
+See how functions in your LiveView application are being called with comprehensive tracing capabilities. Monitor all LiveView and LiveComponent callbacks with detailed execution information including timing, arguments, and execution flow.
+
+**Key capabilities:**
+
+- Filter by callback type, execution time, or search terms
+- Detailed argument inspection with fullscreen view
+- Copy callback arguments for terminal processing
+- Support for all Phoenix.LiveView and Phoenix.LiveComponent callbacks
+
+### [Components Highlighting](components_highlighting.md)
+
+Visually identify and locate components rendered in your current debugged LiveView. Hover over component names in the tree to highlight their corresponding DOM elements in your application.
+
+**Key capabilities:**
+
+- Toggle highlighting mode on/off
+- Hover-to-highlight functionality
+- Non-intrusive visual feedback
+
+### [Components Tree](components_tree.md)
+
+Examine how LiveComponents are arranged in your debugged LiveView. The tree automatically updates when state changes, showing the complete hierarchy from LiveView root to all nested LiveComponents with their CIDs.
+
+**Key capabilities:**
+
+- Discover your application's structure
+- Real-time tree updates on state changes
+- View nested LiveView relationships
+
+### [DeadView Mode](dead_view_mode.md)
+
+Debug the state of your application after redirecting or encountering a crash. This feature preserves the last known state and callback history, allowing you to investigate what went wrong even after the process has terminated.
+
+**Key capabilities:**
+
+- Inspect last state of LiveView or LiveComponents
+- Review callback execution order
+- See which callback crashed the process
+- Continue to successor LiveView after debugging
+- Status indicator showing alive/dead state
+
+### [Elements Inspection](elements_inspection.md)
+
+Inspect LiveViews and LiveComponents directly from the rendered page by selecting elements with your mouse.
+
+**Key capabilities:**
+
+- Two activation methods: Debug Button or Inspect Element button
+- Hover preview with element information
+- Click to inspect node
+- Highlight elements during selection
+- Works in both standalone and DevTools extension modes
+
+## Browser Features
+
+Some features require JavaScript injection into your debugged application for enhanced functionality:
+
+- **Components Highlighting** - Visual DOM highlighting
+- **Elements Inspection** - Mouse-based element selection
+
+These features are enabled by default but can be configured. See the [Configuration](config.md) page for details.

docs/welcome.md

@@ -4,13 +4,24 @@ LiveDebugger is a browser-based tool for debugging applications written in [Phoe
 
 Designed to enhance your development experience LiveDebugger gives you:
 
-- A detailed view of your LiveComponents tree ([`Components Tree`](./components_tree.md))
-- The ability to inspect assigns for LiveViews and LiveComponents ([`Assigns Inspection`](./assigns_inspection.md))
-- Tracing of their callback executions ([`Callback Tracing`](./callback_tracing.md))
-- Highlighting components in debugged app ([`Components Highlighting`](./components_highlighting.md))
-- Inspecting elements on the page ([`Elements Inspection`](./elements_inspection.md))
-
-> ### Call to action {: .info}
+- See your LiveComponents tree
+- View assigns
+- Trace and filter callback executions
+- Inspect elements
+
+Check out our comprehensive [Features Overview](./features.md) to explore all capabilities in detail.
+
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
+  <iframe
+    src="https://www.youtube.com/embed/yv39lCkoZKM?si=aqj5tu-J2ueCqEL2"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen>
+  </iframe>
+</div>
+
+> #### Call to action {: .info}
 >
 > We are currently taking a survey to improve LiveDebugger and decide its future.
 >

mix.exs

@@ -99,19 +99,18 @@ defmodule LiveDebugger.MixProject do
       extras: [
         "CHANGELOG.md",
         "docs/welcome.md": [title: "Welcome to LiveDebugger"],
+        "docs/features.md": [title: "Features Overview"],
         "docs/config.md": [title: "Configuration"],
         "docs/components_tree.md": [title: "Components Tree"],
         "docs/assigns_inspection.md": [title: "Assigns Inspection"],
         "docs/callback_tracing.md": [title: "Callback Tracing"],
         "docs/components_highlighting.md": [title: "Components Highlighting"],
-        "docs/dead_view_mode.md": [title: "Dead View Mode"],
+        "docs/dead_view_mode.md": [title: "DeadView Mode"],
         "docs/elements_inspection.md": [title: "Elements Inspection"]
       ],
       groups_for_extras: [
-        Configuration: [
-          "docs/config.md"
-        ],
         Features: [
+          "docs/features.md",
           "docs/assigns_inspection.md",
           "docs/components_tree.md",
           "docs/callback_tracing.md",