(Pic from: developers.google.com)主流瀏覽器的體積大、吃記憶體兇、功能包山包海，如果只拿來上網是有點可惜。既然已經佔用系統那麼多資源，是該讓他多做點事，以 Chrome 為例，可「收信」、「記事待辦」、或「其他功能」。如果純上網的話，其實可用輕量、不佔資源、速度快的瀏覽器，如「K-Meleon」即可。
本篇介紹的 Chrome 附加功能 "開發人員工具"，主要是用來協助 debug、分析網頁程式碼。可惜這工具能 google 到的教學網頁很少，畢竟是屬於進階的功能，想瞭解大略的功能操作可參考「這個網頁」。其實想真正學會這個工具的完整功能，光靠參考網頁是不夠的，說不定得等有人出書；而本文的內容為，藉由調整部落格版面配置的操作過程，來一窺這個強大工具的冰山一角；另外閱讀本文內容之前，最好先具備一點 HTML 與 CSS 概念。
一、調整版面範例
先說我以前的笨方法好了，想調整某區塊距離邊界的 px 值時：A. 先目測抓一個數字 → B. 進範本調整 px 值 → C. 存檔 → D. 重新整理頁面 → E. 看看距離是否超過或不足預期，再重複 A～E 循環。
這方法主要是笨在儲存範本加上重整頁面浪費很多時間，而如果使用 Chrome 的 "開發人員工具" 就能即時顯示修改的效果，可省下以上步驟 C～D 的虛耗時間。
剛好「Blogger 熱門文章＋任意尺寸縮圖」的【留言 #02】B35 詢問了版面配置的問題，想調整 "熱門文章" 小工具圖片下方的空白間距，以下就來看調整的實作。
二、操作步驟
1. 選單操作：首先在 Chrome 瀏覽器叫出要修改的網頁，再叫出"開發人員工具"──
如上圖數字標示的三步驟：按下 Chrome 右上角的功能表按鈕、出現選單 → 按「工具」 → 按「開發人員工具」
2. 工具視窗畫面：「開發人員工具」會出現在網頁畫面的下方──
一般而言如果沒出現錯誤訊息的話，預設會顯示如上圖類似"網頁原始碼"的內容，但如果沒有的話，請依上圖數字標示的兩步驟：先按下「Elements」即可出現網頁 HTML 原始碼 → 再按最下方的「放大鏡」，讓他變成藍色的狀態。
2017.8.21 補充：由於 Chrome 不斷更新、改版，因此畫面不會一直不變。找不到上圖「放大鏡」的話，可參考下圖，紅框處是目前「放大鏡」功能的圖示及位置。
3. 選擇區塊：如果「放大鏡」不是藍色狀態，那麼不容易選擇我們要編輯的區塊，此時在工具視窗為「游標指向哪一行程式碼，網頁對應的區塊會反白」，可以自行測試一下；但如果「放大鏡」是藍色狀態──
如上圖所示，游標移到熱門文章第一篇的圖片上時，圖片區塊立即成為反白狀態，這代表著滑鼠移到的網頁區塊都會反白。
接著對著熱門文章第一篇的圖片按下滑鼠，會發現工具視窗區自動找到了這個圖片的程式碼，並將該區反白。
最後我們還會發現按下選擇的區塊後，「放大鏡」的藍色狀態會自動消失，如果還想要從畫面上找別的區塊的程式碼，就得重複以上步驟，再按一次「放大鏡」成為藍色狀態。
4. 編輯區塊：以上的步驟幫助我們快速找到要編輯的區塊，但我們發現反白的是 img 標籤，而我們的任務是「調整區塊的邊界值」，通常這不會設定在 img 標籤上，所以我們往外一層一層找，看到了 <div class="item-thumbnail" style="width: 115px;">，這比較像是含括圖片區塊的標籤，我們試著編輯這個 div 標籤──
如上圖所示，對著 <div class="item-thumbnail" style="width: 115px;"> 這一行按下右鍵 → 出現選單 → 選擇「Edit as Html」
如果只是調整 CSS 的話，有更方便的管道，例如修改 "width: 115px;" 這個參數，在開發人員工具右邊的視窗，可看到 element.style { width: 115px; } 從這裡修改更快速。
5. 調整 CSS：由於 Blogger 熱門文章小工具圖片區塊使用的 class──"item-thumbnail" 我們不知道內容，所以要調整 CSS 只能自己猜測數值來測試。想要縮短區塊的下端邊界值，一開始或許可以從 margin-bottom: 0px 來測試，而本例我是從 -10px 來測試──
如上圖出現編輯畫面後，我在 style 屬性裡面新增了 margin-bottom: -10px; 的字串。接著在編輯框以外的地方隨便用滑鼠點一下，網頁會立即套用新的 CSS 設定。(本例的 div 區塊剛好我原本就設定了 style 屬性，如果區塊沒有 style 屬性的話，以本例而言，就必須新增 style="margin-bottom: -10px;" 字串)
如上圖，紅圈內含剛剛改的 style 參數、數值，右上熱門文章第一篇文章的圖片與下方邊界的距離馬上拉短，可以與第二篇文章的圖片做比較就看得出來。
但圖片與分格線黏在一起很難看，所以決定把 -10px 改為 -5px 看看效果。
如上圖，改為 margin-bottom: -5px; 後效果比較好一些。如果還是不滿意的話可以繼續測試其他數值；而如果滿意的話，就可以直接拿調整過的數據、程式碼來修改範本了。
稍微囉唆一點，網頁所顯示、套用修改後的效果，只是暫時的，重新整理頁面後就會消失，因為這只是瀏覽器幫我們預覽修改的效果，而真正的後台範本並沒有被更動。
最後是一點小提醒，修改區塊 CSS 效果的過程不一定會如本文這麼順利，一次就找到正確的 HTML 標籤來修改，如果找錯標籤而導致看不出修改的 CSS 效果，可能得多找幾個其他的 HTML 標籤來測試。
本例接下來改範本的步驟請參考「Blogger 熱門文章＋任意尺寸縮圖」→ 文末「2012.10.12 補充」的部分，本文算是非常簡單地介紹此工具的一個我常用的功能。
三、結語
每個主流瀏覽器都有自己的 "開發人員工具"，如果 Chrome 不是你的主要瀏覽器，只好請自行 google 相關的操作、說明資料了。
而其實本文調整版面的操作方法與步驟並非唯一，除了有其他流程、也可藉由修改工具右半部的樣式表(style)視窗來完成，本文的方法是為了方便修改"熱門文章"這個小工具所進行的步驟。
而藉由這個工具來調整版面也只是使用到他的一個小小功能而已，無論如何這個工具可幫助我們節省很多時間，值得花一些時間探索，換得日後更有效率的網頁設計流程。
更多網頁開發工具：
真的很專業
回覆刪除好困難..... 語法都不一樣
回覆刪除