2012年10月12日

Chrome 開發人員工具__調整部落格版面實作

A+

(Pic from: developers.google.com)
主流瀏覽器的體積大、吃記憶體兇、功能包山包海,如果只拿來上網是有點可惜。既然已經佔用系統那麼多資源,是該讓他多做點事,以 Chrome 為例,可「收信」、「記事待辦」、或「其他功能」。如果純上網的話,其實可用輕量、不佔資源、速度快的瀏覽器,如「K-Meleon」即可。

本篇介紹的 Chrome 附加功能 "開發人員工具",主要是用來協助 debug、分析網頁程式碼。可惜這工具能 google 到的教學網頁很少,畢竟是屬於進階的功能,想瞭解大略的功能操作可參考「這個網頁」。其實想真正學會這個工具的完整功能,光靠參考網頁是不夠的,說不定得等有人出書;而本文的內容為,藉由調整部落格版面配置的操作過程,來一窺這個強大工具的冰山一角;另外閱讀本文內容之前,最好先具備一點 HTMLCSS 概念。


一、調整版面範例

先說我以前的笨方法好了,想調整某區塊距離邊界的 px 值時:A. 先目測抓一個數字 → B. 進範本調整 px 值 → C. 存檔 → D. 重新整理頁面 → E. 看看距離是否超過或不足預期,再重複 A~E 循環。

這方法主要是笨在儲存範本加上重整頁面浪費很多時間,而如果使用 Chrome 的 "開發人員工具" 就能即時顯示修改的效果,可省下以上步驟 C~D 的虛耗時間。

剛好「Blogger 熱門文章+任意尺寸縮圖」的【留言 #02】B35 詢問了版面配置的問題,想調整 "熱門文章" 小工具圖片下方的空白間距,以下就來看調整的實作。



二、操作步驟

1. 選單操作:首先在 Chrome 瀏覽器叫出要修改的網頁,再叫出"開發人員工具"──


如上圖數字標示的三步驟:按下 Chrome 右上角的功能表按鈕、出現選單 → 按「工具」 → 按「開發人員工具」


2. 工具視窗畫面:「開發人員工具」會出現在網頁畫面的下方──


一般而言如果沒出現錯誤訊息的話,預設會顯示如上圖類似"網頁原始碼"的內容,但如果沒有的話,請依上圖數字標示的兩步驟:先按下「Elements」即可出現網頁 HTML 原始碼 → 再按最下方的「放大鏡」,讓他變成藍色的狀態


3. 選擇區塊:如果「放大鏡」不是藍色狀態,那麼不容易選擇我們要編輯的區塊,此時在工具視窗為「游標指向哪一行程式碼,網頁對應的區塊會反白」,可以自行測試一下;但如果「放大鏡」是藍色狀態──


如上圖所示,游標移到熱門文章第一篇的圖片上時,圖片區塊立即成為反白狀態,這代表著滑鼠移到的網頁區塊都會反白

接著對著熱門文章第一篇的圖片按下滑鼠,會發現工具視窗區自動找到了這個圖片的程式碼,並將該區反白

最後我們還會發現按下選擇的區塊後,「放大鏡」的藍色狀態會自動消失,如果還想要從畫面上找別的區塊的程式碼,就得重複以上步驟,再按一次「放大鏡」成為藍色狀態。


4. 編輯區塊:以上的步驟幫助我們快速找到要編輯的區塊,但我們發現反白的是 img 標籤,而我們的任務是「調整區塊的邊界值」,通常這不會設定在 img 標籤上,所以我們往外一層一層找,看到了 <div class="item-thumbnail" style="width: 115px;">,這比較像是含括圖片區塊的標籤,我們試著編輯這個 div 標籤──


如上圖所示,對著 <div class="item-thumbnail" style="width: 115px;"> 這一行按下右鍵 → 出現選單 → 選擇「Edit as Html

2013.9.19 補充

如果只是調整 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)視窗來完成,本文的方法是為了方便修改"熱門文章"這個小工具所進行的步驟。

而藉由這個工具來調整版面也只是使用到他的一個小小功能而已,無論如何這個工具可幫助我們節省很多時間,值得花一些時間探索,換得日後更有效率的網頁設計流程。


Chrome 相關文章:

2 則留言:

  1. <6485063545759979928>(以上內容請勿刪除,從括號之後開始留言)汗顏..之前寫的內容比較粗糙,稍微增補一些內容在「2013.9.19 補充」的部分。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。