开发者工具说明文件.PDF

[開發者工具說明文件] 開發工具可以在他們自己的窗口或固定到瀏覽器，也可以將開發工具窗口可以調整大小，在開發工 具窗口可點擊關閉按鈕進行關閉。開發者工具會即時的將HTML 解譯成一樹狀結構圖，透過這個 樹狀結構圖，我們可以輕易的瞭解網頁的配置 。 HTML 頁籤內左方為目前網頁的配置，以樹狀方式呈現，你可以點選想要查看元素前的【+】號來 展開該元素查看其子元素。在選取特定元素後，右方的四個頁籤分別可以以CSS Class 為主查看該 元素所套用的CSS 樣式(樣式) 、以CSS 屬性為單位查看該屬性的設定歷程(追蹤樣式) 、整個 Layout(格式設定) 、該元素的屬性值(屬性) 。 在這個頁籤中，你可以一目瞭然的看到特定CSS 屬性的設定歷程。格式設定頁籤中可以查看此元 素於此網頁中的配置，這裡可以讓你更改Offset 、Margin 、Padding 、Border 及長寬大小，一樣， 這些修改是即時反應的。 此例中我嘗試點選Left Border 的0px 後，改為100px 屬性頁籤會顯示目前選取元素的屬性設定，例如套用的CSS Class 、value 、type 等屬性。 開發者工具更強大的是所有解譯出來的東西大部份都是可更改的，而且這些更改都會即時反應在網 頁上，舉例而言，我們可以在HTML 樹狀圖上選取特定元素，然後改變其屬性值 。 當你覺得某個網頁特定元素樣式非常喜歡時，還可點選【具樣式的元素原始檔】按紐，將其由眾多 元素的網頁內獨立出來 在CSS 頁籤中可以讓我們以CSS 檔案為單位來查看此網頁所用到的CSS 檔案。 IE8 將以CSS 2.1 為標準，這意味著以往以IE6 、7 所做出來的網頁，會發生Layout 偏移的情況。此問題可以 透過IE 8 中的IE 7 相容性所修正，讓網頁完全符合IE8 標準才是正途。  那在讓網頁符合IE8 標準時，開發者工具能幫上什麼忙呢？我們以一個實例來說， 是一個以IE7 相容模式執行的網頁，當你透過開發者工具將其改為以IE8 標準模式執行時，會發現某區 塊產生了偏移了。  我們可以透過開發者工具右上角的搜尋列協助找到此元素。偏移的原因是local news 區塊的大小在IE 7 及 IE 8 有不同的呈現，因此在IE 8 中，這個區塊大小需要被放大，很明顯的，我們只要透過屬性頁籤來 添加height 屬性值，然後放大div class=parent的這個區塊的高度，就可以解決。 當您點擊此按鈕，您將可以使用滑鼠來選擇一個元素在網頁上。移動至元素上，會一個藍色方塊亮 點元素的邊框，在左下的方格會顯示元素的屬性值。 IE8 提供了開發者工具，一般而言，大部份的網站都已經針對 IE6 、IE7 做了 CSS hack 。 所以當 IE8 推出後，為了解決 IE8 的相容性問題，最簡單的做法就是在原始碼裡加上 meta http-equiv=X-UA-compatible content=IE7 /  如果想要在已經宣告前述參數的網站中檢視 IE8 有沒有問題時，因為無法關閉相容性檢視模 式，所以就要透過 IE8 的開發者工具來處理。  首先開啟 IE8 。然後按F12 開啟 IE8 的開發者工具。  接下來用 Alt-8 把 IE8 切換到「瀏覽器模式：IE8 ｜文件模式：IE8 標準」。  原本的 IE8 視窗就會自動重新整理，並切換成 IE8 應該有的行為模式。  要切回原本的模式，就用 Alt-7 切換回「瀏覽器模式：IE8 ｜文件模式：IE7 標準」就可以了。