瀏覽器 網頁開發

[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單中的欄位參數值

2019/06/28

梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
  很早之前梅干曾分享過,自訂Google表單,讓你的表單不再受限於Google的樣式,同時還能讓表單與自己的版面合而為一,但要自訂Google單表,第一件事就是要找出,表單中的欄位值後,才能將自訂表單後的欄位值,對應到Google表單中。

   而這對於不熟悉網頁原始碼的朋友來說,還可真是一件苦差事,因此最近梅干在國外的討論版中,看到有位朋友分享了一個Firebug的小工具,透過這個小工具就能快速且無痛的尋找出Google表單欄位的相對應參數,因此要怎來透過這個小工具,找到Google表單中的欄位值,現在就一塊來看看吧!


Firebug Lite for Google Chrome
外掛名稱:Firebug Lite for Google Chrome 
外掛下載:Chrome商店

Step1
首先,進到「Firebug Lite for Google Chrome」的外掛頁面後,點一下「加到Chrome」鈕,再點「新增擴充功能」鈕。
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step2
當安裝完畢後,再開啟Google表單,接著再點右上的Firebug圖示,就會開啟Firebug的工作面板。
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step3
接著再將頁籤切到「DOM」,再點一下Google表單的輸入框名稱。
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step4
當點到後,再點下方中括弧裡的數字。
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step5
這時再點上方麵包屑的1
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step6
接著再點一下次,表單欄位名稱。
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step7
這時再點麵包屑的第二個1
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數
Step8
接著再把左邊的數字展開,就會一次看到全部表單的輸入框,對應欄位的參數值,當有了這些值後,就可方便自訂所需的表單版面囉!
梅問題-[外掛] Firebug 網頁除錯工具,免看CODE快速搜出Google表單的對應欄位的參數