乙個快速載入網頁在很大程度上節約使用者的瀏覽頁面時間成本，作為一名站長，我們要尋求一些解決辦法，傳統的在瀏覽器中 「右鍵—檢視源**」已經過時了，它不能做良好的**檢查，作為一名優秀的web開發人員，應該不斷學習和嘗程式設計客棧試新事物。下面我就介紹下三大主流瀏覽器的web人員開發工具介紹及其使用方法。
火狐（firefox）的firebuocfoqrzkg和yslow
firebug是乙個非常成熟和完善的工具（點此**），各種瀏覽器下都能使用（ie，firefox，opera， safari），通常我在火狐瀏覽器（firefox）用的最多，我們可以利用它除錯、編輯、甚至刪改任何**的 css、html、dom、與 js**。除此之外，firebug功能還很強大，比如html，css，dom的檢視與除錯，**整體分析等等，總之就是一整套完整而強大的 web開發工具。
如何使用firebug，我會想下面的chrome開發程式設計客棧工具中介紹，它們的使用方法是一樣的，我在這裡就不過多介紹了，重點介紹下firebug和yslow的使用，yslow是執行在firebug視窗下，所以要執行yslow，必須安裝firebug。
安裝好這兩個瀏覽器擴充套件後，點選yslow，就會彈出yslow執行介面，點選「run test」就開始對網頁進行分析。下面我就以其中過乙個按鈕進行 「statistics」對比「盧鬆鬆部落格」和「肖俊部落格」的網頁載入速度情況。
通過圖示我們能很清楚的看到乙個網頁什麼占用空間較大，左側圖表顯示的是網頁在不使用快取載入的情況，也就是網頁的實際大小，右側為網頁使用快取的頁面載入情況。
如盧鬆鬆部落格原始是172k，使用快取後為18.1k，而肖俊部落格原始大小是196.7k，使用快取後為75.6k，也就是說在相同網路環境下，開啟我部落格需要**18k東西，開啟肖俊部落格需要**75.6k東西，哪個網頁開啟速度快就一目了然了。
幸運的是yslow告訴了我們網頁哪個元素占用空間大小，我們就能有針對性能的優化。比如肖俊部落格反應出html/text、images和js**過多，所以可以著重精簡下html、js**，修改網頁大小。
google chrome開發工具和safari開發工具
你也許奇怪為什麼盧鬆鬆將google chrome開發工具和safari開發工具放在一起，因為它們的開發包工具都是基於webkit開源專案開發的，這意味著這兩個瀏覽器共享相同的**基礎部分，甚至共享同一布局。
chrome瀏覽器的開發工具與firefox的firbug非常類似，它不僅僅能幫助您診斷、修復在網頁載入、指令碼執行以及頁面呈現**現的問題，還可以幫助您最大限度地了解您的網頁或網路應用程式對cpu以及記憶體的使用情況。
下面我就介紹下實際使用方法，很多朋友不知道我部落格導航條上的「驚喜」的gif是如何加上的，用「chrome開發工具」就能很容易看到實現原理。
（第一步）開啟chrome開發工具，找到這個「驚喜」gif，不必擔心你找不到**位置，因為滑鼠點選任何地方，在網頁上都會有個淺藍色框架提示。（第二步）找到這行**後，你會發現這個導航多中多了個id=「gnew」屬性，點下這個（第三步）右側會自動跳程式設計客棧出#gnewwww.cppcns.com的css屬性。這樣就很容易知道**是怎麼寫的了，然後把**貼上到自己**即可。很容易吧？
瀏覽器內的web開發工具
在 firefox外掛程式 一文裡提到了firefox的幾個外掛程式，其中firebug和web developer是兩款web開發工具的好助手，本篇文中再介紹向種web開發過程中瀏覽器中內建的幾款小工具。fireftp,fireftp 免費的跨平台firefox外掛程式用於ftp 傳輸檔案。fir...
web開發的瀏覽器 工具 外掛程式
powerband是乙個ie的外掛程式 同時也支援myie2 maxthon 提供了對html動態分析，跟蹤，編輯的功能。能夠方便快捷的分析html頁面的結構，有助於網頁設計人員 開發人員除錯，分析晦澀的html 這是我最早使用的html開發輔助工具，現在是2.1版了，支援asp.net views...
web開發的瀏覽器 工具 外掛程式
powerband是乙個ie的外掛程式 同時也支援myie2 maxthon 提供了對html動態分析，跟蹤，編輯的功能。能夠方便快捷的分析html頁面的結構，有助於網頁設計人員 開發人員除錯，分析晦澀的html 這是我最早使用的html開發輔助工具，現在是2.1版了，支援asp.net views...