#18: Phoenix Debug Toolbar ex_debug_tool

Elixir 1.4

Phoenix 1.3

ex_debug_toolbar 0.3.10

View source on GitHub

---

Here we have our movie app and wouldn’t it be nice to have details about it without having to switch between our logs and the browser?

Luckily there’s a new project called ‘ex_debug_toolbar’ that displays just that - all from a simple toolbar on the bottom of our browser.

Let’s use it in our app.

First we’ll open our ‘Mixfile’ and add ‘ex_debug_toolbar’ to our list of dependencies. And then to our applications list.

mix.exs

defmodule Teacher.Mixfile do
  
  def application do
    [mod: {Teacher, []},
     applications: [.., :ex_debug_toolbar]]
  end

  defp deps do
    [..
      {:ex_debug_toolbar, "~> 0.3.10"}]
  end
end

Now let’s open our ‘Endpoint’ and we’ll add the toolbar to it.

lib/teacher_web/endpoint.ex

defmodule TeacherWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :teacher
  use ExDebugToolbar.Phoenix
  …
end

Then we’ll open our dev.exs config. Here we’ll configure ex_debug_toolbar. The first thing we’ll do is define a config for it. And then we’ll enable it, by setting ‘enable’ to true.

Now let’s go to our Endpoint config and set ‘instrumenters’, which will take a list of the instrumenter modules, in this case it we’ll use ‘InstrumentationCollector’, which records our controller and render events.

Then we’ll go to our database config and set our ‘loggers’ to a list that includes ‘EctoCollector’ and ‘LogEntry’. These allow ex_debug_toolbar to collect details about our queries.

Finally well need to include the ExDebugToolbar’s custom template engines. We’ll define ‘config’ ‘phoenix’ ‘template_engines’ and we’ll set ‘eex’ to EExEngine and ‘exs’ to ExsEngine. ExDebugToolbar uses these to track template render time.

config/dev.exs

use Mix.Config

config :ex_debug_toolbar,
  enable: true
…
config :teacher, TeacherWeb.Endpoint,
    instrumenters: [ExDebugToolbar.Collector.InstrumentationCollector],
    …

config :phoenix, :template_engines,
  eex: ExDebugToolbar.Template.EExEngine,
  exs: ExDebugToolbar.Template.ExsEngine

config :teacher, Teacher.Repo,
  adapter: Ecto.Adapters.Postgres,
  loggers: [ExDebugToolbar.Collector.EctoCollector, Ecto.LogEntry],
  …

With that let’s go to the command line and download our dependencies with mix deps get.

$ mix deps.get

Then we can start our server.

$ mix phx.server

With our server running let’s open our browser again - and great we see our toolbar is loading - perfect.

Let’s see what data it gives us.

Hovering over the toolbar expands it. So let’s hover over the timings and we can see a breakdown of ‘Controller times’ and ‘Template times’.

From the toolbar we can see what controller action we hit along with the status code. Hovering over it gives an overview of our connection details, like our endpoint, controller, and the templates that were rendered.

We can also get our “Server logs” for the request.

And any queries that were executed. Here we can see the query that was used to get our list of movies.

Another great feature of ‘ex_debug_toolbar’ is that you can set breakpoints and debug right from the browser. Let’s see how it works.

We’ll open our movie controller. Then we’ll require ‘ExDebugToolbar’. And then go to where we want to set a breakpoint — let’s go to our index function - and we’ll call ExDebugToolbar.pry() .

lib/teacher_web/controllers/movie_controller.ex

defmodule TeacherWeb.MovieController do
  …
  require ExDebugToolbar
  
  def index(conn, _params) do
    ExDebugToolbar.pry()
    …
  end

end

Now back in our browser we see a new icon in our toolbar. Hovering over it lists our available breakpoints.

And if we click on the breakpoint we set - a modal is triggered that contains an IEx session. From here we can execute elixir code and see details of the request like our connection.