Debugging Rails 使用 better_errors 在瀏覽器中直接進行除錯

Adler Hsieh

May 10, 2015 — 4 min read

上一篇提到在發生錯誤時，要先學會閱讀錯誤訊息。但假如無法一時之間了解發生什麼事，那最好有一個可以操作的平台，讓我們了解現在網頁上的variable及method執行起來是什麼情況。

bettererrors這個gem就是針對Rails在產生錯誤訊息時，提供開發者非常完整的資訊來看看錯誤是發生在哪裡。另外搭配bindingof_caller，可以顯示錯誤發生當下的variable列表。

安裝

在Gemfile中列出以下gem：

group :development, :test do
    gem 'better_errors' 
    gem 'binding_of_caller'
end

並在command line 中執行bundle進行安裝。

之後再遇到錯誤畫面，會變成以下樣貌：

1. 檢查 stack trace 找到自己的檔案

首先，左邊是一整串檔案列表，跟先前提到的邏輯相同，是整個Rails的檔案列表。進階開發者可以查看整個邏輯，方便debug，初階開發者建議點選左邊的Application Frames並找到自己輸入的檔案即可，因為90%的錯誤都是在自己輸入的檔案裡。如圖，其中posts controller就是我們自己輸入且出錯的地方。

再次提醒，如果是由於使用各式各樣的gem而產生了從來沒聽過的錯誤，有50%機率是gem本身的問題，請先到google上搜尋相關錯誤訊息。

2. 使用 console

如圖，我們看到在畫面右邊的欄位中，有一個即時互動的console可以使用，我們在這裡可以像在irb中一樣，直接使用Ruby語法來操作各種指令，所有你想得到在irb當中能用的東西，在這裡都能用。建議可以就以下幾個步驟執行：

(1)檢查變數：檢查各個instance variable以及正在計算的variable有沒有照你心理想的執行。或利用is_a?或.class這兩個method來檢查變數是否型態正確。

(2)檢查method：建議將method套用成不同的variable來使用，例如calculate(3)這個method替換成calculate(8)，替換不同的變數看執行結果是否如你的意。

(3)檢查資料庫檢索：用同樣的method或換個method來搜索資料庫，確認資料庫可以呼叫得出你想要的資料。

(4)檢查傳入的參數：可輸入params，檢查傳入的值是否如預期。

3. 檢查數值

假如一下想不到是哪個參數有問題，可以參考畫面右下方的數值，這裡有Request Info和Variables兩個區塊，我們可以先檢查這個request當中傳出了什麼數值，並且有哪些variable可以使用。通常這時候就會發現一些很基本的錯誤，例如字串(String)使用成數字(Integer)，或是物件的字串(String)帶成符號(Symbol)，都可以在這裡檢查。

如果有發現可疑的狀況，可以直接在console裡面操作。

4. 實際Debug

看得出來我們正在實作一個模糊比對的搜尋功能，在console中反覆試了幾次之後，發現不應該使用find，而是使用where method，才可以找到東西。因此就知道應該把搜尋功能改成@post = Post.where('title LIKE ?', "%#{params[:search]}%")

better_errors的妙用在於不必利用debugger或pry等工具進入rails console，而是直接把console搬到瀏覽器上，非常直覺，也為所有開發者省下非常多的時間。幾乎成為每個專案都必裝的gem。