5 Firefox Addons for the Average Web Developer 5 Firefox的插件為平均Web開發

by Ross McKillop on August 18, 2008 Ross麥基洛普 2008年8月18日

火狐網頁設計與開發

You won’t find any super-advanced addons for “extracting strings from xml and javascript files to simplify mozilla application localization process” or “debug running applets and Java Webstart application” in this list.你不會找到任何超先進的插件為“提取字符串從XML和JavaScript文件,以簡化Mozilla的應用軟體的本地化進程”或“調試運行程序和Java webstart應用”在這個名單上。 These addons are intended for “the rest of us” - people who grudgingly have to edit our own web sites.這些插件是為“我們其餘的” -人誰勉強要編輯我們自己的網站。

  1. MeasureIt measureit
  2. MeasureIt measureit allows you to quickly bring up an on-screen “ruler” to measure sections of your site.讓您快速帶來了一個在螢幕上的“統治者”來衡量各款您的網站。 Quickly determine the space between certain sections, indents etc.快速判斷之間的空間的某些部分,縮進等。

      Quick Usage Instructions 快速使用說明

    1. Click the MeasureIt button in the bottom right corner of Firefox按一下按鈕measureit在右下角的Firefox
    2. MeasureIt Button

    3. Click and drag the area you want to measure.單擊並拖動該地區您想要的措施。
    4. measureit的Firefox addon

  3. lori羅尼
  4. lori羅尼 stands for “Life-of-request info”.主張“生命的請求信息” 。 What it does is tell you valuable info on how long it takes for your page to display, how large it is, and how many requests were made to load the page.它的是告訴你有價值的信息就需要多久才能為您的網頁顯示,如何大,這是,又有多少的要求,作出了載入網頁。

    The first number displayed is the time it took to see the first byte returned from the server (from your click to the first byte received by your browser).第一個數字顯示的是所花費的時間看到的第一個字節返回從服務器(從您的點擊第一個字節收到您的瀏覽器) 。 It’s displayed in seconds (up to the thousandth of a second).它的顯示在數秒內(至千分之一的第二個) 。

    The second number is how long it took to display the page (from your click to the complete rendering of the page).第二個數字是經過多久才顯示頁(從您按一下以完整的渲染網頁) 。 Again, the time is displayed in seconds, up to the thousandth of a second.再次,時間顯示是在數秒內,到千分之一一秒鐘。

    The third number displayed is the total page size (number of bytes/kilobytes/megabytes used to display the page).第三個數字顯示的是總頁面大小(字節數/千字節/兆字節可用來顯示網頁) 。 This value includes both bytes fetched from the server and bytes fetched from the browsers cache.這個價值包括兩個字節牽強,從服務器和字節牽強,從瀏覽器緩存。

    The forth and final number is the total number of “requests” used to fetch the page content (images, style-sheet, javascript etc).第四和最後的人數是總人數“請”用來獲取網頁內容(圖片,風格-資產負債表, JavaScript的等) 。 Again, this value includes both data downloaded from the server and cache requests.再次,這個值,既包括數據下載從服務器和高速緩存的要求。

    羅尼的Firefox addon

  5. Source Viewer Tab源代碼查看標籤
  6. Source Viewer Tab源代碼查看標籤 is a simple but extremely helpful addon.是一個簡單的,但極有幫助addon 。 When you select View Source (or View Selected Source it opens the source view in a new tab, instead of a new Firefox window. If that weren’t enough, it also allows you to specify a totally different application to view your source with (Notepad, TextEdit - whatever your HTML editor of choice is).當您選擇查看源文件 (或查看選定的來源,它會打開來源鑑於在新標籤,而不是一個新的Firefox窗口,如果這還不夠,它還允許您指定一個完全不同的應用,以查看您的來源與(記事本,文字編輯-無論你的H TML編輯器的選擇是) 。

    源代碼查看選項卡設置
    Source Viewer Tab settings 源代碼查看選項卡設置

    Firefox的顯示網頁的源文件在一個標籤
    Source Viewer Tab displaying HTML source in a tab 源代碼查看選項卡上顯示的HTML源代碼在一個標籤

  7. IE View Lite即查看建興
  8. IE View Lite即查看建興 is fairly self explanatory.是相當自我解釋性。 It allows you to view a page in IE.它允許您查看網頁在IE中。 It has a couple of added benefits vs. similar addons.它有幾個好處與類似的插件。 1) It’s smaller and 2) It allows you specify Safari instead of IE if you’re using OS X. 1 )它的規模較小和2 ) ,它可讓您指定的Safari ,而非即如果您使用的OS X中

    Right-click a blank spot on any web page and select View This Page in IE to do just that.右鍵單擊空白處在任何網頁上,並選擇瀏覽此網頁在IE中做到這一點。

    源代碼查看選項卡設置

    To use Safari instead of IE (OS X only), change the Internet Explorer Location to /usr/bin/open and add -a Safari to the Parameters field.以使用的是Safari ,而非即( OS X的唯一) ,更改Internet Explorer的位置/ usr /斌/開放和添加-一Safari瀏覽器 ,以參數領域。

    即查看建興設置
    IE View Lite set to use Safari 即查看建興設置為使用Safari

  9. Firebug螢火蟲
  10. Firebug螢火蟲 is without question the most advanced addon in this list.毫無疑問是最先進的addon在此清單。 Though it’s capable of doing a lot of “expert level” things, it’s also very handy for figuring out basic stuff.雖然它的能力做了很多“專家級”的東西,它也非常方便,為搞清楚基本的東西。 I’ve been using it a lot lately (new theme on Simple Help) to determine which part of the .css file is causing things to render the way they do.我一直在使用它了很多,最近(新的主題就簡單的幫助) ,以確定哪些部分的。 CSS的文件是造成東西使他們這樣做。 Webmonkey webmonkey has a good tutorial on getting started with Firebug if the interface seems a bit daunting.具有良好的補習就開始與螢火蟲如果接口似乎有點令人望而生畏。 For what it’s worth, Firebug has saved me hours of frustration over the last week alone.為什麼值得一提的,螢火蟲已救了我小時的挫敗感比上週單。

    螢火蟲在行動
    click to enlarge 點擊放大

Related Posts: 相關文章:
  • How to add thumbnail previews of websites when you use Google search in Firefox如何新增的縮圖預覽網站,當您使用Google搜索在Firefox
  • How to move your Sidebar to the right side of Firefox如何移動您的工具欄,以右側的Firefox
  • How to add any search engine to the Firefox Search Bar如何添加任何搜索引擎的Firefox搜索欄
  • How to import your StumbleUpon favorites to your Firefox 3 Bookmarks如何導入你的stumbleupon的最愛您的Firefox 3書籤
  • How to add 70+ useful buttons to your Firefox Toolbar如何添加70 +有用的按鈕到您的Firefox工具欄
  • { 3 comments… read them below or 3評論…閱讀他們或低於 add one新增1 }

    1 1 Sumesh sumesh 08.18.08 at 6:13 am 08.18.08在上午06時13分

    I can’t believe you missed Web Developer toolbar !我不能相信你錯過了Web開發工具欄!
    But otherwise a good list, stumbled.但除此之外,一個良好的名單,偶然。

    2 2 Keith Dsouza 祁俊文dsouza 08.18.08 at 8:09 am 08.18.08在上午08時09分

    Yea I would add Web Developer toolbar, XPather and TamperData to the list, they are really life savers.雅我想補充一點, Web開發工具欄, xpather和tamperdata到清單中,他們是真正的生活儲蓄。

    3 3 Ky 肯塔基州 08.20.08 at 5:47 am 08.20.08在上午05時47分

    What about Web Developer toolbar?什麼Web開發工具欄? And Codetch?和codetch ?

    Leave a Comment留下意見

    You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 您可以使用這些HTML標記和屬性:的<a href="" title=""> <abbr title=""> <acronym title="">的<b> <blockquote cite=""> <cite>的<code> <del datetime="">的<em>的<i> <q cite=""> <strike>的<strong>