Debugging Rails:前端後端到底哪裡出錯?用DevTools來檢視整個流程
數值回傳到前端就是錯!到底是前端的問題還是後端的問題?
通常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畫面上也看得到)。
另外一個很厲害的是ActiveRecord標籤,因為他就像在console一樣,會直接顯示查詢資料庫的狀況,console的排列比較雜亂,而在這裡就分得很清楚。如果今天我們預期是查詢:age > 10
,但發現實際查詢超出這個範圍,就可以知道搜尋的方法是有問題的。
兩個瀏覽器工具,希望對大家整合前後端有幫助!