Debugging Rails:前端後端到底哪裡出錯?用DevTools來檢視整個流程

Adler @ 2014-10-16


數值回傳到前端就是錯!到底是前端的問題還是後端的問題?

通常Rails都會配合複雜的前端框架,例如Ember.js或Angular.js,彼此之間用ajax和json來溝通。在前後端越長越複雜的時候,這種癥結點就會出現了。最好是能先抓出是哪邊的問題,這樣debug才能精確!如果後端工程師debug一整天,結果發現錯是在前端...這...

不過這樣的情況,可以依靠瀏覽器內建的除錯工具,可以幫助我們判斷前後端送資料的詳細內容,可以用這個地方來判斷到底是哪個環節出錯。

  1. 如果在發送ajax request的時候就已經有問題,那問題就在前端。
  2. 如果是從後端回傳的數值有問題,那問題就在後端。

例如有一個全台灣50歲人口平均收入計算程式,要從資料庫抓出所有人的收入並計算平均。前端傳送一個ajax request到後端資料庫去查詢所有50歲人口的收入,假如送出去的資料是40歲而非50歲,那後端再怎麼精準,傳回前端的數值一定是錯的。反之,如果送出的數值是正確無誤的,那就可以合理懷疑在資料庫進行query時是否有什麼問題?

1. 使用Chrome DevTools

身為一個專業開發者,使用Firefox也是很合理的事情。不過這邊篇幅有限,就先拿市佔率最高的Chrome來示範。Firefox有相對應的firebug,功能非常相近;如果非常熱愛IE,也有IE Developer Toolbar可以使用。

啟動

非常簡單,在開啟Rails app後,在網頁上按下滑鼠右鍵,選擇『檢查元素』這個選項,或是直接使用鍵盤熱鍵Ctrl(Command) + shift + I就會出現一個DevTools視窗。

預設視窗是Element,用來檢視網頁中有什麼html元素,而左上角有一個『Network』選項,點進去以後就是列表,列出所有在網頁上執行的動作。如下圖:

接下來要從最左邊的Name欄位來尋找瀏覽器送出的request,雖然畫面上有很多項目,但例如包含js?字串的檔案很明顯就是在抓取js檔案,而.jpg結尾的項目就是在下載圖片。

我們要看的是最眼熟的部份,例如第一個posts很明顯就是我們在controller中設定的action,這裡除了action名稱之外,也會使用id當做送出request的名稱。這些項目就是我們要檢查每次送出與接回的request。

檢視瀏覽器送出的request內容

在檢視畫面當中,我們可以從header這個標籤來看瀏覽器送的內容是什麼,例如我要向伺服器端需求總共有多少個post,就設定如下:

<%= link_to "count", post_count_posts_path(request: "I want to see post count"), method: :post %>

這樣點選連結,就會在DevTools中出現以下畫面:

可以注意到有一個Query String Parameters的項目,裡面包含了我們剛才送出去的字串。如果是用ajax,則會出現一個request payload的標籤,裡面同樣是送給伺服器的參數。這邊就可以檢查到底送出了什麼樣的內容。

檢視伺服器回傳值

根據剛剛的需求,假如我們這樣設定controller: ruby def post_count post_count = Post.all.size string = "Total post: " + post_count.to_s render :json => string end

同樣在DevTools的檢視畫面中,我們可以點選右邊的response標籤,來看看回傳的內容是什麼。就會很明顯看到回傳的內容是總共有多少的post數量如下:

這樣一來,送出和回傳的值都一目了然,可以很明確的將前後端的範圍切開,如果是送出有問題,那就修正前端;反之如果是回傳值有問題,就來檢查後端。

2. 使用Rails Panel

另一項有用的工具是Chrome當中的Rails Panel,他可以檢視Rails在後端所接收到的參數、執行的controller、action,所花的時間等等,提供的資訊非常詳細。

安裝

  1. 在chrome store中安裝
  2. 在Rails Gemfile中安裝gem 'meta_request',並執行bundle

使用方法與DevTools相同,呼叫DevTools視窗後,會看到最右邊出現一個Rails的標籤。

使用

以剛剛為例,當我們送出request時,就可以點選Rails Panel,並看到一個列表,每一個項目都代表串入伺服器的request,同樣點擊進行詳細檢視。

在點擊剛剛的post_count項目後,右方params標籤可以列出這個request所要執行的controller、action,以及帶有什麼參數,一目了然,尤其在get和post容易搞混的情況下,這邊的method可以很方便的看到到底傳進來的是post還是get method (當然剛才介紹的DevTools畫面上也看得到)。

另外一個很厲害的是ActiveRecord標籤,因為他就像在console一樣,會直接顯示查詢資料庫的狀況,console的排列比較雜亂,而在這裡就分得很清楚。如果今天我們預期是查詢:age > 10,但發現實際查詢超出這個範圍,就可以知道搜尋的方法是有問題的。

兩個瀏覽器工具,希望對大家整合前後端有幫助!

延伸閱讀

RailsCast