Developer Tools Network Tab
昨天把工作用的筆電整理了一翻，也同時安裝了IE 9 Beta，還蠻簡潔有力的說～不過開很多網頁會跑掉！包括點部落的編輯器
在此也順帶分享一個小技巧，如果使用IE9發現跑板可以點擊瀏覽器網址列旁的相容性功能 
，便可以IE8的方式來瀏覽網站囉!!
說到IE的開發者工具(Developer Tools)可說是對網站設計者而言相當具便利性的一項工具，以往IE8的時候就相當的好用了，可以透過其中的
來查看網站上的框架或點擊查看網站的相關Html & Css等內碼，甚至處理大型的javascript文件，淺顯易懂的畫面幫你分析出複雜的css，一目了然。
然而這樣的設計對小螢幕或筆電的使用者來說有一定程度的不便利，畫面太小而無法自由的點擊，再者，也無法在同一畫面上觀看，必須要切換來看，這次IE9相當貼心的改善了這個小缺點，將其合併在瀏覽器下方，方便同步檢視。
你可以透過瀏覽器右上角的tools(Alt + X)來開啟Developer Tools，或是用熱鍵 F12 直接開啟 :
是不是挺方便的呢？其實這個概念在另一個工具Httpwatch 早就有了，以往都是IE8搭配著Httpwatch使用，現在IE9直接吸收他的功能於新的
Developer Tools上，這是一大進步。
Network Tab
這是新的功能鍵 
你可以在Developer Tools上方的工具列中找到它，它的功能與httpwatch
的功能相仿，主要是查看網站流量，使用的method，所在URL...等多項便利查看。
首先先按 
之後重新整理你要查看的網頁，他就會將資訊都擷取下來，得到以下資訊 ：
這是初步的資訊，接著按上方工具中的 
按鈕查看詳細資訊 ：
這裡可以得知更多你想要的資訊，在此介紹一下小弟蠻喜歡的一個功能是Response Body這個按鈕：
它可以幫助你得知圖片的詳細資訊（大小長寬等），還可以下載或查看完整URL，對於不是圖的元件也會提供相關的內容供查看，個人覺得相當好用。
如果單看不過癮，就下載起來以便日後查看囉，可以選擇兩種儲存方式
。
其實Developer Tools很好上手的，而且用過之後肯定愛不釋手，在此不多作介紹，有興趣的快去開來玩玩吧！
當然還有其他很多這類web debugger的工具如Fidder,Httpwatch..等，總之呢，找到順手的工具，開發更便利。
|
