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


上一篇提到在發生錯誤時,要先學會閱讀錯誤訊息。但假如無法一時之間了解發生什麼事,那最好有一個可以操作的平台,讓我們了解現在網頁上的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。

延伸閱讀

RailsCast

圖片CC授權:Wikimedia