調試小技巧

谷歌瀏覽器devtools 中的調試技巧

Ruby代碼調試

若是不當心敲錯了 ruby 代碼，好比 create.js.erb中把 render 寫成了 rennder 那麼點擊"發佈評論"按鈕是看不到報錯信息的。 能夠打開 devtools -> console ，這裏能夠看到一個 500 的錯誤。具體的錯誤內容能夠到 network 下面，再次提交如下評論，就能看到了。

那麼不知道錯誤信息，咱們確定很難修改，因而咱們到以下位置查看錯誤信息：

如上是查看錯誤類型，那麼具體的錯誤信息應該到以下Network標籤處選擇All查看，前面點擊4次都不會顯示具體的錯誤信息，要在該標籤下再次點擊提交按鈕才能看到具體的錯誤信息：

 

咱們在Network標籤，再次點擊

 

點擊進入查看具體錯誤信息以後以下，能夠看到出錯位置在create.js.erb，出錯緣由是沒有rendder方法，因而咱們就知道是這個位置rendder拼寫錯誤，應該是render纔對：

 

 

Console中進行Js代碼調試

可是若是是 js 代碼敲錯了，好比 append 敲成了 apppend，這樣是沒有任何報錯信息的，可是依然能夠到 network 下面，再次 提交評論，把返回的 js 代碼本身放到 console 中執行一下，這樣到底哪裏出錯就比較明顯了。

雖然沒有js代碼錯誤沒有報錯，可是咱們點擊進入後查看Response能夠查看請求的返回結果：

返回結果以下，說明在js中apppend不是一個函數，也就是咱們拼寫錯誤因此沒有這個函數，因而咱們就就知道要修改這個函數名的拼寫了：