【Rails】もっと早く知りたかったデバッグ用gem 'better_errors','binding_of_caller'

## はじめに
先日伊藤さんのこちらの動画（↓）を見ました。
[プログラミング初心者歓迎！「エラーが出ました。どうすればいいですか？」から卒業するための基本と極意 - YouTube](https://www.youtube.com/watch?v=5fyrGslhUcY)

**「いや、なんでもっと早く見なかった！」**と思うくらい具体的なデバッグ手法が諸々解説されています。

そこで出てきたgem `better_errors`&`binding_of_caller`の導入方法と見方について簡単にまとめます。

今まで

- `puts デバッグ`
- `binding.pry`
- `rails serverのログ`


を使ってエラーと闘っていましたが、この2つのgemはもっと早く知りたかったです:sweat_smile:

## この記事が役に立つ方
- エラーに苦しんでいるRails初心者

## この記事のメリット
- デバッグの効率が上がる

## 環境
- macOS Catalina 10.15.1
- zsh: 5.7.1
- Ruby: 2.6.5
- Rails: 5.2.3
- Docker: 19.03.5

## `better_errors`とは？
デフォルトのエラー画面をわかりやすく整形してくれるgem。

## `binding_of_caller`とは？
上記`better_errors`と一緒に使うことで、ブラウザ上で`irb`を使えるようになるgem。
※本記事では使用方法について触れていません。

## 導入方法

```ruby:Gemfile
group :development do
  gem 'better_errors'
  gem 'binding_of_caller'
end
```
Gemfileに上記追記し、

```zsh
bundle install
```
で完了。簡単！

### ※Dockerを使用している場合はもうひと手間必要

```ruby:app/config/environments/development.rb
BetterErrors::Middleware.allow_ip! "0.0.0.0/0"
```
仮想環境を使っている方は、うまく動作しないようです。
私はDockerを使っていますが、上記コードを追記してサーバー再起動で動作しました。
[Gem 『Better errors』が動かないとき | HippoBlog](https://blog.hippohack.me/web/56)

## 使用例

### ArgumentErrorが出ていた場合
`form_with`を使おうとしたらエラーが出た場合を例にします。

いつもの赤いエラー画面から表示が変わっています。
![スクリーンショット 2019-11-28 14.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/1312a3fc-c3a7-aee2-d2e5-063060519861.png)

エラーメッセージが最上部にあるのは変わりませんが、
**その下に２つタブ**があります。これが超便利。

- **Application Frames**
- **All Frames**

### 1. Application Frames
最初は**Application Frames**が表示されています。
ここでは、**自分の書いたコード**を対象にエラーに関係する箇所を明示してくれています。
![スクリーンショット 2019-11-28 14.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/1312a3fc-c3a7-aee2-d2e5-063060519861.png)

### 2. All Frames
次に、**All Frames**をクリックすると、自分が書いた箇所以外(gemやActiveSupportなど)まで踏み込んでエラーに関係する箇所が表示されます。

それぞれクリックしていくとコードが表示されます。

例えば今回は、`form_with`のソースコードまで表示してくれます。
![スクリーンショット 2019-11-28 14.55.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/ea7fa144-505f-060f-96f5-4612aebd8dbb.png)

↓`form_with`の最初の１行を抜き出すとこんな感じです。

```ruby
def form_with(model: nil, scope: nil, url: nil, format: nil, **options, &block)
```
これで指定すべき引数がわかり、今回は

**「いけね！そういえば`model:`って書き忘れた！」**

と気づくことが出来ます。**便利！**

---
その他、`NoMethodError`で`~ for nil:NilClass`とか出ていたら、ブラウザでそのまま変数の中身を確認したり出来て非常に便利です。
![スクリーンショット 2019-11-28 15.57.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/6ebf0c38-e4be-fb51-86d7-df8557d92329.png)
※画像最下部がコンソールになっています。


## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

デバッグ手法は学び始めの段階でなるべく多くリストアップしておいたほうが効率がいいと思いますが、`better_errors`はもっと早く導入していたかったです:sweat_smile:

[伊藤さんのYoutube](https://www.youtube.com/channel/UCekUxQPwLf-YCxbGtqeEmxg)、非常に勉強になるのでまた他の動画も見させて頂きます。

## 参考にさせて頂いたサイト（いつもありがとうございます）
[プログラミング初心者歓迎！「エラーが出ました。どうすればいいですか？」から卒業するための基本と極意 - YouTube](https://www.youtube.com/watch?v=5fyrGslhUcY)
[プログラミング初心者歓迎！「エラーが出ました。どうすればいいですか？」から卒業するための基本と極意（解説動画付き） - Qiita](https://qiita.com/jnchito/items/056325421b7e36f02335)
[Gem 『Better errors』が動かないとき | HippoBlog](https://blog.hippohack.me/web/56)
[【Rails】better_errorsとbinding_of_callerで自分でエラーを解決できるようになろう【初心者向け】 - Qiita](https://qiita.com/Ryokky/items/284892be879996e4f77c)