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