Installation | Ruby On Rails Debugbar

Require the `gem`

The debugbar is installed like any other gem. Add it to your Gemfile, then run bundle install to install it.

1gem 'debugbar'

We recommend installing it only as a development dependency.

1group :development do
2  gem 'debugbar'
3end

Mount the engine

Open your config/routes.rb file and add the following line:

1if defined? Debugbar
2  mount Debugbar::Engine => Debugbar.config.prefix
3end

This adds a few endpoints to your application. You can change the prefix in the configuration, if the url prefix conflicts with your app. Default prefix is /_debugbar.

Render the debugbar

With the ERB helper

In your layout, make sure the debugbar is rendered via the view helper.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    ...
 5    <%= debugbar_head %> 
 6  </head>
 7 
 8  <body>
 9    ...
10    <%= debugbar_body %> 
11  </body>
12</html>

Without the ERB helper

If your application doesn't use the erb view helper, you can render the debugbar manually. This can be useful if your frontend is an SPA and the shell isn't rendered by Rails.

In your index.html file, make sure the following code is added:

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    ...
 5    <script defer src="/_debugbar/assets/script"></script> 
 6  </head>
 7 
 8  <body>
 9 
10    <div id="__debugbar" data-turbo-permanent></div> 
11 
12    <!-- Optional configuration -->
13    <script type="text/javascript" data-turbo-permanent>
14      window._debugbarConfigOptions = {height: 300}
15    </script>
16  </body>
17</html>

Note that if you changed the route prefix in your configuration, you'll need to update the url in the script tag.

ActionCable connection

Authentication (Connection#connect)

If you are already using ActionCable in your app, you might authenticate users in ApplicationCable::Connection. Please make sure that debugbar requests are allowed.

Example

 1module ApplicationCable
 2  class Connection < ActionCable::Connection::Base
 3    def connect
 4      # Allow debugbar requests
 5      return if request&.path&.include?("_debugbar")
 6 
 7      # Authenticate the user like you already do
 8      # ...
 9    end
10  end
11end

Request forgery protection

Make sure the frontend is allowed to connect to ActionCable. You can define the allowed origins or disable the request forgery protection in your config/environments/development.rb file.

1Rails::Application.configure do
2  config.action_cable.disable_request_forgery_protection = true
3  # OR
4  # config.action_cable.allowed_request_origins = [
5  #   %r{http://your-site-here*}, %r{https://your-site-here*}
6  # ]
7end

Have a look at your config/cable.yml file to ensure you're using a valid adapter.

Require the gem