今天想在 Discuz! 的帖子列表里加一些自己的東西進去，但無奈，自己水平太菜，開啟原始碼根本分不清哪塊程式碼對應哪塊地方，不知道該把東西加在哪裡，不過手上用的正好是 Chrome 瀏覽器，於是 「審查元素」 功能幫了大忙。
在網頁上除 flash 以外的其他大多數位置右擊，即可調出審查元素的介面，會顯示在瀏覽器底端。介面上有好幾個標籤頁，下面介紹一下它的一些功能。
第一個 Elements 面板，個人覺得是頁面佈局方面最實用的一項功能，可以直接以層疊的樣式顯示出網頁的佈局，它並不像 「檢視原始碼」 那樣，顯示出全部的程式碼，而是隻顯示<div><td><p><h2> 這一類的標籤，更直觀的體現出了網頁的佈局，如果要知道詳細內容，還能右擊檢視該段的原始碼。
選擇元素右擊，可以馬上將遊標定位到該段程式碼的位置，滑鼠移到程式碼處，網頁上還會加深顯示改程式碼在網頁上的位置，十分方便，比如我想在簽名圖位置上面加上自己的東西，就先找到簽名段程式碼所在的位置。
右側會顯示當前選中項的 CSS 樣式，比較值得注意的是，遊標移至其中的項時，可以透過將右邊的勾去掉，來遮蔽掉該項樣式，並且即時體現在網頁上，大大方便了對網頁佈局的除錯。
更神奇的是，你還可以雙擊元素項，即時修改網頁上各段的程式碼，也會及時體現在網頁上，對於查 bug 相當的方便。
最下面還有一塊可以顯示網頁的巢狀關係，類似 dreamweaver 程式碼框下面那段，但是由於可以即時在網頁上加深顯示，個人覺得比 dreamweaver 更方便。
Recources 面板，主要顯示網頁中包含的一些檔案，像是圖片，巢狀進去的網頁什麼的。在檢視這項時，我發現以前迅雷看看的廣告沒刪乾淨，高保留著一些廣告內容，會在每次載入頁面時載入，囧...
我個人覺得更實用的是，下面的幾個標籤，可以檢視本地的快取以及 session cookie 等資訊，並且還可以手動刪除 cookie，相當好用。
Network 面板，可以檢視檔案的載入速度。 TimeLine 面板好像是用來顯示和除錯一些延時事件的，我目前訪問的幾個頁面都沒有顯示，不太清楚。
Scripts 面板也是相當不錯的除錯工具，可以修改程式碼除錯 VBScripts JavaScripts 等指令碼，巢狀進網頁的也可以很方便的切換除錯，右邊的除錯工具感覺相當的複雜，自己沒完全看懂= =，貌似具有監控變數的變化等功能，個人 JS 水平有限，就不深入研究了。
最後面還有個 Console 面板，可以反映出網頁上的錯誤，比如哪張圖片載不出來，哪些是無效連結等等，查錯時有些用處。
總體感覺 Chrome 瀏覽器的審查元素功能，對初學者的網頁製作方面是相當有幫助的，而且還可以對別人的網站進行檢視，參考其中的頁面佈局和引數。除錯網頁強力推薦。