Welcome to LiveDebugger

View Source

LiveDebugger_Chrome_WebStore

LiveDebugger is a browser-based tool for debugging applications written in Phoenix LiveView - an Elixir library designed for building rich, interactive online experiences with server-rendered HTML.

Designed to enhance your development experience LiveDebugger gives you:

  • A detailed view of your LiveComponents tree
  • The ability to inspect assigns for LiveViews and LiveComponents
  • Tracing of their callback executions

Installation

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:

  defp deps do
    [
      {:live_debugger, "~> 0.1.7", only: :dev}
    ]
  end

For full experience we recommend adding below line to your application root layout. It attaches meta tag and LiveDebugger scripts in dev environment enabling browser features.

  # lib/my_app_web/components/layouts/root.html.heex

  <head>
    <%= Application.get_env(:live_debugger, :live_debugger_tags) %>
  </head>

After you start your application, LiveDebugger will be running at a default port http://localhost:4007.

Igniter installation

LiveDebugger has 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.

mix igniter.install live_debugger

Authors

LiveDebugger is created by Software Mansion.

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps as well as complex multimedia solutions. We are Core React Native Contributors, Elixir ecosystem experts, and live streaming and broadcasting technologies specialists. We can help you build your next dream product – Hire us.

Copyright 2025, Software Mansion

Software Mansion

Licensed under the Apache License, Version 2.0