三大主流瀏覽器Web開(kāi)發(fā)工具

發(fā)布時(shí)間: 2012/9/12 14:49:33

一個(gè)快速加載網(wǎng)頁(yè)在很大程度上節(jié)約用戶的瀏覽頁(yè)面時(shí)間成本，作為一名站長(zhǎng)，我們要尋求一些解決辦法，傳統(tǒng)的在瀏覽器中 “右鍵—查看源代碼”已經(jīng)過(guò)時(shí)了，它不能做良好的代碼檢查，作為一名優(yōu)秀的web開(kāi)發(fā)人員，應(yīng)該不斷學(xué)習(xí)和嘗試新事物。下面我就介紹下三大主流瀏覽器的web人員開(kāi)發(fā)工具介紹及其使用方法�；鸷‵irefox）的Firebug和YSlowFirebug是一個(gè)非常成熟和完善的工具（點(diǎn)此下載），各種瀏覽器下都能使用（IE,Firefox,Opera, Safari），通常我在火狐瀏覽器（Firefox）用的最多，我們可以利用它除錯(cuò)、編輯、甚至刪改任何網(wǎng)站的 CSS、HTML、DOM、與 JS代碼。除此之外，F(xiàn)irebug功能還很強(qiáng)大，比如html,css,dom的查看與調(diào)試，網(wǎng)站整體分析等等，總之就是一整套完整而強(qiáng)大的 WEB開(kāi)發(fā)工具。

如何使用Firebug，我會(huì)想下面的Chrome開(kāi)發(fā)工具中介紹，它們的使用方法是一樣的，我在這里就不過(guò)多介紹了，重點(diǎn)介紹下Firebug和YSlow的使用，Yslow是運(yùn)行在Firebug窗口下，所以要運(yùn)行YSlow，必須安裝Firebug。安裝好這兩個(gè)瀏覽器擴(kuò)展后，點(diǎn)擊YSlow，就會(huì)彈出YSlow運(yùn)行界面，點(diǎn)擊“Run Test”就開(kāi)始對(duì)網(wǎng)頁(yè)進(jìn)行分析。下面我就以其中過(guò)一個(gè)按鈕進(jìn)行 “Statistics”對(duì)比“盧松松博客”和“肖俊博客”的網(wǎng)頁(yè)載入速度情況。

通過(guò)圖示我們能很清楚的看到一個(gè)網(wǎng)頁(yè)什么占用空間較大，左側(cè)圖表顯示的是網(wǎng)頁(yè)在不使用緩存加載的情況，也就是網(wǎng)頁(yè)的實(shí)際大小，右側(cè)為網(wǎng)頁(yè)使用緩存的頁(yè)面加載情況。如盧松松博客原始是172K，使用緩存后為18.1K，而肖俊博客原始大小是196.7K，使用緩存后為75.6K，也就是說(shuō)在相同網(wǎng)絡(luò)環(huán)境下，打開(kāi)我博客需要下載18K東西，打開(kāi)肖俊博客需要下載75.6K東西，哪個(gè)網(wǎng)頁(yè)打開(kāi)速度快就一目了然了。幸運(yùn)的是YSlow告訴了我們網(wǎng)頁(yè)哪個(gè)元素占用空間大小，我們就能有針對(duì)性能的優(yōu)化。比如肖俊博客反應(yīng)出HTML/text、images和JS代碼過(guò)多，所以可以著重精簡(jiǎn)下HTML、JS代碼，修改網(wǎng)頁(yè)圖片大小。Google Chrome開(kāi)發(fā)工具和Safari開(kāi)發(fā)工具你也許奇怪為什么盧松松將Google Chrome開(kāi)發(fā)工具和Safari開(kāi)發(fā)工具放在一起，因?yàn)樗鼈兊拈_(kāi)發(fā)包工具都是基于webkit開(kāi)源項(xiàng)目開(kāi)發(fā)的，這意味著這兩個(gè)瀏覽器共享相同的代碼基礎(chǔ)部分，甚至共享同一布局。Chrome瀏覽器的開(kāi)發(fā)工具與Firefox的Firbug非常類(lèi)似，它不僅僅能幫助您診斷、修復(fù)在網(wǎng)頁(yè)加載、腳本執(zhí)行以及頁(yè)面呈現(xiàn)中出現(xiàn)的問(wèn)題，還可以幫助您最大限度地了解您的網(wǎng)頁(yè)或網(wǎng)絡(luò)應(yīng)用程序?qū)PU以及內(nèi)存的使用情況。下面我就介紹下實(shí)際使用方法，很多朋友不知道我博客導(dǎo)航條上的“驚喜”的gif圖片是如何加上的，用“Chrome開(kāi)發(fā)工具”就能很容易看到實(shí)現(xiàn)原理。

（第一步）打開(kāi)Chrome開(kāi)發(fā)工具，找到這個(gè)“驚喜”gif圖片，不必?fù)?dān)心你找不到代碼位置，因?yàn)槭髽?biāo)點(diǎn)擊任何地方，在網(wǎng)頁(yè)上都會(huì)有個(gè)淺藍(lán)色框架提示。（第二步）找到這行代碼后，你會(huì)發(fā)現(xiàn)這個(gè)導(dǎo)航多中多了個(gè)id=“gnew”屬性，點(diǎn)下這個(gè)（第三步）右側(cè)會(huì)自動(dòng)跳出#gnew的CSS屬性。這樣就很容易知道代碼是怎么寫(xiě)的了，然后把代碼粘貼到自己網(wǎng)站即可。很容易吧？這只是其中一個(gè)小技巧，還有更多技巧等待你的挖掘，為了讓大家更好的理解這兩個(gè)開(kāi)發(fā)工具，你可以點(diǎn)擊下面的官方介紹：Google瀏覽器開(kāi)發(fā)工具和safari開(kāi)發(fā)工具。IE瀏覽器開(kāi)發(fā)工具Developer Toolbar

考慮到IE瀏覽器仍是使用最常用的瀏覽器，如果是使用IE的web開(kāi)發(fā)人員可以使用此開(kāi)發(fā)工具，雖然界面看起來(lái)有點(diǎn)老了，而且不像其他工具功能那么多，Developer Toolbar可以作為一款輔助開(kāi)發(fā)工具，我在這里就不多做介紹了，用法基本一樣。微軟官方也提供了Internet Explorer開(kāi)發(fā)人員工具欄的下載和使用信息，有興趣的朋友可以點(diǎn)開(kāi)看看，需要注意的是：360、搜狗、QQ、遨游這類(lèi)瀏覽器的主內(nèi)核都是IE內(nèi)核，所以普通IE能使用的這些瀏覽器都能用。寫(xiě)在最后：我只是介紹了三大主流瀏覽器開(kāi)發(fā)工具的部分小技巧，還有很多功能等待你的摸索呢，無(wú)論是 IE 6/7 的 Internet Explorer Developer Toolbar 、Chrome瀏覽器的開(kāi)發(fā)工具或者是 IE 8 自帶的 Developer Tools，還是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly，他們的宗旨只有一個(gè)——幫助web開(kāi)發(fā)人員更方便、更高效地進(jìn)行Web開(kāi)發(fā)。

本文出自：億恩科技【www.allwellnessguide.com】

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]