河北时时彩开奖视频 河北时时彩玩法介绍 河北时时彩开奖号码走势图表大全 河北时时彩11选五 河北时时彩走势图开奖结果 河北时时彩现场开奖结果查询 河北时时彩官网 河北时时彩开奖结果 河北时时彩走势图 河北时时彩走势图开奖结果查询 河北时时彩快三 河北时时彩2017 河北时时彩现场开奖 河北时时彩玩法介绍 河北时时彩投注站
您當前的位置:首頁 > 建站方案 > 技巧教程 > 正文

三大主流瀏覽器Web開發工具

【字體大小: 2011-08-26 13:02 來源: 作者:盧松松博客 

一個快速加載網頁在很大程度上節約用戶的瀏覽頁面時間成本,作為一名站長,我們要尋求一些解決辦法,傳統的在瀏覽器中 “右鍵—查看源代碼”已經過時了,它不能做良好的代碼檢查,作為一名優秀的web開發人員,應該不斷學習和嘗試新事物。下面我就介紹下三大主流瀏覽器的 web人員開發工具介紹及其使用方法。

火狐(Firefox)的Firebug和YSlow

Firebug是一個非常成熟和完善的工具(點此下載), 各種瀏覽器下都能使用(IE,Firefox,Opera, Safari),通常我在火狐瀏覽器(Firefox)用的最多,我們可以利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM、與 JS代碼。除此之外,Firebug功能還很強大,比如html,css,dom的查看與調試,網站整體分析等等,總之就是一整套完整而強大的 WEB開發工具。

火狐(Firefox)的是一個非常成熟和完善的web開發工具

如何使用Firebug,我會想下面的Chrome開發工具中介紹,它們的使用方法是一樣的,我在這里就不過多介紹了,重點介紹下Firebug和YSlow的使用,Yslow是運行在Firebug窗口下,所以要運行YSlow,必須安裝Firebug。

安裝好這兩個瀏覽器擴展后,點擊YSlow,就會彈出YSlow運行界面,點擊“Run Test”就開始對網頁進行分析。下面我就以其中過一個按鈕進行 “Statistics”對比“盧松松博客”和“肖俊博客”的網頁載入速度情況。

Ylsow的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瀏覽器的開發工具

(第一步)打開Chrome開發工具,找到這個“驚喜”gif圖片,不必擔心你找不到代碼位置,因為鼠標點擊任何地方,在網頁上都會有個淺藍色框架 提示。(第二步)找到這行代碼后,你會發現這個導航多中多了個id=“gnew”屬性,點下這個(第三步)右側會自動跳出#gnew的CSS屬性。這樣就 很容易知道代碼是怎么寫的了,然后把代碼粘貼到自己網站即可。很容易吧?

這只是其中一個小技巧,還有更多技巧等待你的挖掘,為了讓大家更好的理解這兩個開發工具,你可以點擊下面的官方介紹:Google瀏覽器開發工具safari開發工具

IE瀏覽器開發工具Developer Toolbar

IE瀏覽器開發工具Developer Toolbar

考慮到IE瀏覽器仍是使用最常用的瀏覽器,如果是使用IE的web開發人員可以使用此開發工具,雖然界面看起來有點老了,而且不像其他工具功能那么多,Developer Toolbar可以作為一款輔助開發工具,我在這里就不多做介紹了,用法基本一樣。

微軟官方也提供了Internet Explorer開發人員工具欄的下載和使用信息,有興趣的朋友可以點開看看,需要注意的是:360、搜狗、QQ、遨游這類瀏覽器的主內核都是IE內核,所以普通IE能使用的這些瀏覽器都能用。

寫在最后:

我只是介紹了三大主流瀏覽器開發工具的部分小技巧,還有很多功能等待你的摸索呢,無論是 IE 6/7 的 Internet Explorer Developer Toolbar 、Chrome瀏覽器的開發工具或者是 IE 8 自帶的 Developer Tools,還是 Firefox 的 Firebug ,以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly,他們的宗旨只有一個——幫助web開發人員更方便、更高效地進行Web開發。

除非注明,文章均為盧松松原創,轉載請注明出處,謝謝。

本文地址:http://lusongsong.com/reed/359.html

    頂一下
    (0)
    0%
    踩一下
    (0)
    0%
    【責任編輯:小雪】 標簽:
    最新評論 查看所有評論
    發表評論 查看所有評論
    請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
    評價:
    表情:
    用戶名:密碼:驗證碼:

    河北时时彩走势图开奖结果查询
    河北时时彩开奖视频 河北时时彩玩法介绍 河北时时彩开奖号码走势图表大全 河北时时彩11选五 河北时时彩走势图开奖结果 河北时时彩现场开奖结果查询 河北时时彩官网 河北时时彩开奖结果 河北时时彩走势图 河北时时彩走势图开奖结果查询 河北时时彩快三 河北时时彩2017 河北时时彩现场开奖 河北时时彩玩法介绍 河北时时彩投注站
    幸运28害了多少人 合一彩票网址 好赢彩票游戏 股票涨跌关系 武昌鱼股票 天天捕鱼官方领兑换码 彩票计划公式预测开奖赚钱 六肖六码中特 斗鱼抽奖如何设置主播才能赚钱 广东极速十一选五 弹珠赚钱 彩8彩票群 扑克麻将认牌绝技 彩票大赢家苹果 爱玩棋牌大厅下载 青海11选5基本走势