檢查網頁的表單資料的方法紀錄


這篇算是自己在幫不是自己寫的網站找 Bug 的時候,找的一些方法的紀錄。

基本上,主要是從前一陣子開始有在用某些政府單位的網站系統,結果被告知送出的表單內容出了一堆錯誤,結果搞到自己火大,只好自己開始找錯誤是怎麼發生的了。

由於網頁不是自己寫的,後台也沒有權限看,也沒有系統可以查詢,所以只好靠瀏覽器來找看看表單送出的狀況了。

由於操作系統時是使用 Google Chrome,所以接下來要找問題,當然也就是使用 Chrome 了;而基本上的操作,都是按下 F12 叫出 DevTools 後再開始的~


方法一:送出後看送出的表單

這是 Heresy 第一個想法。

基本上,Chrome DevTools 也有提供這個功能,只要先開啟 DevTools,然後切到「Network」的分頁,確認有在錄製(紅圈)後,就可以在送出表單後,點選左邊對應的文件,右側就會出現該文件對應的資料了。

而如果有送出表單的話,在「Headers」裡面,應該可以找到「Form Data」的分類,裡面就有送出的表單資訊了!

理論上這樣很方便?但是當 Heresy 真的要用到真正要拿來找問題的網站,卻發現…明明有送出表單,卻沒有出現「Form Data」的分類!?

根據網路上看到的資訊,在某些狀況下,它似乎是會以「Request Payload」的欄位來作呈現,但是在 Heresy 這邊,也是沒看到…

最後又找了一陣子,才確定,Chrome 應該是在表單的編碼形式是:

<form enctype="multipart/form-data">

的情況下,不會把 POST 傳遞的資料顯示出來了…(參考


方法二:送出前檢查表單的值

前一個方案失敗了,接下來的想法,就是在送出前,先檢查表單的值吧~

該怎麼做呢?Heresy 找了一下後,最後是決定用 DevTools 的 Console,直接去把所有的表單的 input 欄位(這邊只撈 input 是因為判斷應該只需要這個)撈出來,並記錄對應的 id 與值。

這邊最後的做法,是在填寫好表單,要送出前,在 DevTools 裡面,切換到「Console」的頁面,然後輸入:

b = document.getElementsByTagName("input");
for(i =0; i < b.length; ++i)
{
  console.log( (b[i].id + ":" + b[i].value) );
}

這樣他就會透過 DOM 架構,去撈出網頁裡面所有標籤是「input」的元素,然後逐一把他的 id 和 value 輸出了~

其結果如下:

透過這個方法,雖然老實說不算方便,但是倒也是真的讓 Heresy 找到問題可能發生的點了。

但是,要注意的是,如果網頁在最後還有再針對這些值作處理再送出,可能這邊撈出來的資料就不完全正確了。


而由於不確定以後還會不會有機會用到,這邊就先記錄一下吧。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.