Google Chrome 也提供網頁 debug 工具


google chrome

很多從事網頁開發的人都知道 Firefox 瀏覽器有一個很好用的網頁 debug 插件 "firebug",不過很多人一定不知道原來 Google Chrome 自帶的工具就有提供類似的功能,不需要另外安裝插件就可以使用。

使用方法

1. Chrome 瀏覽器下打開網頁,按下滑鼠右鍵

google chrome
網頁上按下滑鼠右鍵

2. 選擇 "審查元素" 功能

3. 出現 debug 視窗

與 firebug 一樣可以直接編輯 css 及 html,並且可以在瀏覽器裡直接看到修正後的結果,可以一直調整直到符合之後再修改於原代碼。

google chrome

   

此外也跟 firebug 一樣有功能可以偵測網頁載入的速度以及大小

google chrome

選擇 "Network"

按 [F5] 重新載入網頁,完成以後

在下方的 DEBUG 的視窗呈現出所有網頁元素個別的大小以及載入時間的長短。

google chrome

最下面顯示整個網頁總的載入狀況,167 requests,表示整個網頁總共花費 167 個請求,共傳輸了 192.4KB,所花時間 36.90s

網頁 debug 工具延伸閱讀

(*) 網站開發的好工具-網頁載入速度及網頁size偵測

本文地址:Google Chrome 也提供網頁 debug 工具
內容對你有幫助嗎? 臉書分享:
分享到:

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

交換連結: Liang's Blog |