### Install LiveDebugger using Igniter Source: https://github.com/software-mansion/live-debugger/blob/main/docs/welcome.md This Bash command shows how to install LiveDebugger using Igniter, an alternative to standard Mix installation. Igniter automatically adds the dependency and modifies the `root.html.heex` file for you. ```Bash mix igniter.install live_debugger ``` -------------------------------- ### Run Live Debugger Development Version Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Provides console commands to set up and run the Live Debugger application in a development environment. This includes installing dependencies and starting the interactive Elixir shell with the application. ```Shell mix setup iex -S mix ``` -------------------------------- ### Install LiveDebugger using Igniter Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Utilizes the `mix igniter.install` command to automatically add the LiveDebugger dependency and modify the `root.html.heex` file. This provides a convenient alternative to the standard manual Mix installation process. ```Bash mix igniter.install live_debugger ``` -------------------------------- ### Configure General Live Debugger Settings in Elixir Source: https://github.com/software-mansion/live-debugger/blob/main/docs/config.md This Elixir configuration snippet provides various general settings for Live Debugger. It includes options to manually disable the debugger, set a tracing setup delay for multi-node environments, enable tracing updates on code reload (with a performance warning), and configure the LiveDebugger endpoint's IP, port, secret keys, adapter, and server startup behavior. ```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 # Used when working with code reloading and traces are not visible. # WARNING! This may cause some performance issues. config :live_debugger, :tracing_update_on_code_reload?, true # 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 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` ``` -------------------------------- ### Integrate LiveDebugger scripts into root layout Source: https://github.com/software-mansion/live-debugger/blob/main/docs/welcome.md This Elixir snippet demonstrates how to include LiveDebugger's meta tags and scripts in your application's root layout (`root.html.heex`). This enables browser features of LiveDebugger when running in the development environment. ```Elixir # lib/my_app_web/components/layouts/root.html.heex <%= Application.get_env(:live_debugger, :live_debugger_tags) %> ``` -------------------------------- ### Add LiveDebugger dependency to mix.exs Source: https://github.com/software-mansion/live-debugger/blob/main/docs/welcome.md This snippet shows how to add the `live_debugger` dependency to your Elixir project's `mix.exs` file. It's crucial to specify `only: :dev` to ensure LiveDebugger is only included in the development environment, as it should not be used in production. ```Elixir defp deps do [ {:live_debugger, "~> 0.2.0", only: :dev} ] end ``` -------------------------------- ### Add LiveDebugger Dependency to Mix Project Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Adds the `live_debugger` dependency to your `mix.exs` file. It is crucial to mark this dependency as `only: :dev` to ensure it is not included in production builds, as LiveDebugger is intended solely for development environments. ```Elixir defp deps do [ {:live_debugger, "~> 0.2.0", only: :dev} ] end ``` -------------------------------- ### Configure Advanced LiveDebugger Settings Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Provides various advanced configuration options for LiveDebugger. These settings include manually disabling the debugger, setting a delay for tracing initialization (useful in multi-node environments), enabling tracing updates on code reload (with a potential performance warning), and configuring the LiveDebugger endpoint's IP, port, secret keys, adapter, and server startup behavior. ```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 # Used when working with code reloading and traces are not visible. # WARNING! This may cause some performance issues. config :live_debugger, :tracing_update_on_code_reload?, true # 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 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` ``` -------------------------------- ### Extend Content Security Policy for Live Debugger in Phoenix Source: https://github.com/software-mansion/live-debugger/blob/main/docs/config.md This Elixir code snippet illustrates how to modify the Content Security Policy (CSP) within a Phoenix application's `router.ex` file. It specifically adds `http://127.0.0.1:4007` to the CSP in development mode, ensuring that the locally running Phoenix app can access LiveDebugger's JavaScript files. ```elixir @csp "{...your CSP} #{if Mix.env() == :dev, do: "http://127.0.0.1:4007"}" pipeline :browser do # ... plug :put_secure_browser_headers, %{"content-security-policy" => @csp} ``` -------------------------------- ### Integrate LiveDebugger Scripts into Phoenix Root Layout Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Inserts the necessary meta tag and LiveDebugger scripts into your application's root layout (`root.html.heex`). This step is essential for enabling the browser-based features of LiveDebugger in the development environment. ```Elixir # lib/my_app_web/components/layouts/root.html.heex <%= Application.get_env(:live_debugger, :live_debugger_tags) %> ``` -------------------------------- ### Build Live Debugger Development Assets Source: https://github.com/software-mansion/live-debugger/blob/main/README.md A console command to rebuild static assets for the Live Debugger project in development mode. This is useful for refreshing styles or other static files that might not update automatically via LiveReload. ```Shell mix assets.build:dev ``` -------------------------------- ### Configure Live Debugger Browser Features in Elixir Source: https://github.com/software-mansion/live-debugger/blob/main/docs/config.md This Elixir configuration snippet demonstrates how to enable or disable various browser-related features of Live Debugger, such as the debug button, component highlighting, and the overall injection of LiveDebugger JS. It also shows how to set an external URL for assets, useful when LiveDebugger is run in environments like Docker. ```elixir # config/dev.exs # Disables all browser features and does not inject LiveDebugger JS config :live_debugger, :browser_features?, false # Disables only debug button config :live_debugger, :debug_button?, false # Disables only components highlighting config :live_debugger, :highlighting?, false # Used when LiveDebugger's assets are exposed on other address (e.g. when run inside Docker) config :live_debugger, :external_url, "http://localhost:9007" ``` -------------------------------- ### Configure LiveDebugger Browser Features Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Provides configuration options to enable or disable specific browser features of LiveDebugger, such as all browser features, the debug button, or components highlighting. It also allows setting an external URL for LiveDebugger assets, which is useful when running the application in containerized environments like Docker. ```Elixir # config/dev.exs # Disables all browser features and does not inject LiveDebugger JS config :live_debugger, :browser_features?, false # Disables only debug button config :live_debugger, :debug_button?, false # Disables only components highlighting config :live_debugger, :highlighting?, false # Used when LiveDebugger's assets are exposed on other address (e.g. when run inside Docker) config :live_debugger, :external_url, "http://localhost:9007" ``` -------------------------------- ### Extend Content Security Policy for LiveDebugger Source: https://github.com/software-mansion/live-debugger/blob/main/README.md Modifies the Content Security Policy (CSP) in your Phoenix application's `router.ex` file. This ensures that your locally running Phoenix app can access the LiveDebugger JavaScript files, typically hosted on port 4007, specifically when in the development environment. ```Elixir @csp "{...your CSP} #{if Mix.env() == :dev, do: "http://127.0.0.1:4007"}" pipeline :browser do # ... plug :put_secure_browser_headers, %{"content-security-policy" => @csp} ``` -------------------------------- ### CSS Styling for Live Debugger Error Information Page Source: https://github.com/software-mansion/live-debugger/blob/main/devtools/common/panel.html This CSS snippet defines the visual presentation for the Live Debugger's error information page. It includes styles for the body, iframes, an error container, SVG icons, text elements (div, p), and hyperlinks, ensuring a consistent and readable display for error messages. ```CSS body { margin: 0; background-color: #f1f5f9; font-family: Inter, sans-serif; } iframe { border: none; } #error-info { height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; margin-left: 32px; margin-right: 32px; text-align: center; } #error-info svg { width: 48px; height: 48px; color: #ef4444; } #error-info div { font-weight: 600; font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 0.5rem; } #error-info p { max-width: 70%; margin: 0; } a { color: #001a72; text-decoration: none; } a:hover { color: #33498b; text-decoration: none; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.