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

Adler Hsieh

May 10, 2015 — 6 min read

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

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

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

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

例如有一個全台灣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，所花的時間等等，提供的資訊非常詳細。

安裝

在chrome store中安裝
在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畫面上也看得到)。