DEV Community

Cover image for Save time debugging Rails by automatically displaying params directly inside your views
TJ Wright
TJ Wright

Posted on • Edited on

4 3

Save time debugging Rails by automatically displaying params directly inside your views

Here's a fun and easy little trick. Let's throw a debug(params) into our view, and then we can see what our params are for every page! In Rails, this means seeing the controller/action for every page you visit as well as any dynamic content that was used for each view --- nifty!

1. Add the debug

First, let's head into our application.html.erb page and add it into our layout, in this case right under the footer:

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta charset="utf-8">
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
    <%= yield %>
    <%= render 'layouts/footer' %>
    <%= debug(params) if Rails.env.development? %>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

(While not absolutely necessary, our post-fix conditional if Rails.env.development? makes sure that if we were to accidentally push this guy into production we wouldn't see it!)

2. Add some style

The debug will be styled using .debug_dump class selector. We can use a mixin from Sass called box_sizing to make this extra pretty. Head into your app/assets/stylesheets/custom.css file and drop this in:

@import "bootstrap-sprockets";
@import "bootstrap";

$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}
Enter fullscreen mode Exit fullscreen mode

3. Results

Great! Now load up your rails server and check out your pages. You should see a beautiful little grey box with useful info about the page that is rendered; specifically, you'll see your page params in a pretty little YAML format!

debug(params) makes a lovely little YAML!


Thanks go to Michael Hartl's excellent Learn Enough series for this tip!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs