5 Firefox Addons for the Average Web Developer À¥ °³¹ßÀÚÀÇ Æò±Õ 5 firefox ºÎ°¡ ±â´É¿¡ ´ëÇÑ

by Ross McKillop on August 18, 2008 ·Î½º mckillop¿¡ ÀÇÇØ 2008³â 8¿ù 18ÀÏ

firefoxÀ¥ µðÀÚÀÎ & dev
Heya StumbleUpon visitor, I hope your day is going well and your boss thinks you're hard at work. ¾È³çÇϼ¼¿ä stumbleupon ¹æ¹®ÀÚ°¡ ÀÖ¾úÀ¸¸é ÁÁ°Ú ´ç½ÅÀÇ ÇÏ·ç°¡ ÀßµÇ¾î °¡°í ÀÖ°í »ý°¢À»ÇϰԵȴٸé, Çϵå Á÷Àå¿¡¼­ ´ç½ÅÀÇ »ó»çÇÕ´Ï´Ù. If you liked this page, please feel fre to give it a thumbs up, I'd be hugely appreciative. ¸¸ÀÏ ´ç½ÅÀºÀÌ ÆäÀÌÁö¿¡ À̸§À» ½áÁֽʽÿÀ ÃÖ°í¾ß, ±× ÁÖÁ¦¿¡ ¸Å¿ì °¨»çÇÕ´Ï´Ù.

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°ú ÀÚ¹Ù ½ºÅ©¸³Æ® ÆÄÀÏ¿¡¼­ ¹®ÀÚ¿­À» ÃßÃâÇÏ´Â ¸ðÁú¶ó ÀÀ¿ë ÇÁ·Î±×·¥À» ·ÎÄà ¶óÀÌÁ¦ÀÌ¼Ç ÇÁ·Î¼¼½º¸¦ ´Ü¼øÈ­Çϱâ"¶Ç´Â "µð¹ö±× webstart ÀÚ¹Ù ¾ÖÇø´ ¹× ÀÀ¿ë ÇÁ·Î±×·¥À» ½ÇÇà"ÀÌ ¸ñ·ÏÇÕ´Ï´Ù. These addons are intended for ¡°the rest of us¡± - people who grudgingly have to edit our own web sites. ¸¦À§ÇÑ ÀÌ·¯ÇÑ ºÎ°¡ ±â´ÉÀº "¿ì¸®ÀÇ ³ª¸ÓÁö ºÎºÐ"- »ç¶÷µéÀº ¿ì¸® ÀÚ½ÅÀÇ À¥ »çÀÌÆ®¸¦ ÆíÁýÇØ¾ß ÇÒ »ç¶÷ grudginglyÇÕ´Ï´Ù.

  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. firefox ºÎ°¡ ±â´É measureit

  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). ±×°ÍÀº ÃÊ ´ÜÀ§·Î Ç¥½ÃµË´Ï´Ù (À§¸¦ 1000 ºÐÀÇ 1 ÃÊ).

    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. ¶Ç, ½Ã°£ÀÌ Ç¥½ÃµË´Ï´Ù ÃÊ ´ÜÀ§·Î, À§·Î¸¦ 1000 ºÐÀÇ 1 ÃÊ.

    The third number displayed is the total page size (number of bytes/kilobytes/megabytes used to display the page). Á¦ 3ÀÇ ¹øÈ£ Ç¥½Ã´Â ÃÑ ÆäÀÌÁö Å©±â (¹ÙÀÌÆ® / ų·Î ¹ÙÀÌÆ® / ¸Þ°¡ ¹ÙÀÌÆ® »ç¿ëÇÏ¿© Ç¥½ÃÇÏ´Â ÆäÀÌÁö). This value includes both bytes fetched from the server and bytes fetched from the browsers cache. ÀÌ °ªÀº ¼­¹ö¿¡¼­ ¸ðµÎ Æ÷ÇÔÇÏ°í ¹ÙÀÌÆ® ¹ÙÀÌÆ® ¹ÝÀÔ ºê¶ó¿ìÀú¿¡¼­ ij½Ã¸¦ ¹ÝÀÔÇÕ´Ï´Ù.

    The forth and final number is the total number of ¡°requests¡± used to fetch the page content (images, style-sheet, javascript etc). Á¦ 4ÀÇ ÃÑ ¼öÀÔ°ú ÃÖÁ¾ ¼ýÀÚ´Â "¿äû"Áß°í¸¦ °¡Á®¿À·Á¸é ÆäÀÌÁöÀÇ ÄÜÅÙÃ÷¸¦ (À̹ÌÁö, ½ºÅ¸ÀÏ - ½ÃÆ®, ÀÚ¹Ù ½ºÅ©¸³Æ® µî). Again, this value includes both data downloaded from the server and cache requests. ¶Ç,ÀÌ °ªÀº ¼­¹ö¿¡¼­ ¸ðµÎ Æ÷ÇÔ µ¥ÀÌÅ͸¦ ´Ù¿î·Îµå ¹× ij½Ã ¿äûÀ»ÇÕ´Ï´Ù.

    firefox ºÎ°¡ ±â´É ·Î¸®

  5. Source Viewer Tab ¼Ò½º ºä¾î ÅÇ
  6. Source Viewer Tab ¼Ò½º ºä¾î ÅÇ is a simple but extremely helpful 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 À©µµ¿ìÇÕ´Ï´Ù. ÃæºÐÇÏÁö ¾ÊÀº °æ¿ì, ¶ÇÇÑ ¿ÏÀüÈ÷ ´Ù¸¥ ÀÀ¿ë ÇÁ·Î±×·¥À» ÁöÁ¤ÇÒ ¼öÀÖ½À´Ï´Ù ¼Ò½º¸¦ º¼ ¼öÀÖ½À´Ï´Ù ( ¸Þ¸ðÀå, ÅØ½ºÆ® ÆíÁý±â - ¾î·µç ±ÍÇÏÀÇ ¿¡µðÅÍÀÇ ¼±ÅÃÀº).

    ¼Ò½º ºä¾î¸¦ ÅÇ ¼³Á¤
    Source Viewer Tab settings ¼Ò½º ºä¾î¸¦ ÅÇ ¼³Á¤

    firefoxÀÇ ÅÇ ÆäÀÌÁöÀÇ ¼Ò½º¸¦ Ç¥½Ã
    Source Viewer Tab displaying HTML source in a tab ¼Ò½º ºä¾î¸¦ Ç¥½ÃÇÏ´Â ¼Ò½º¸¦ ÅÇ ÅÇ

  7. IE View Lite ÁïÀÌ ¹®¼­°¡ Àû¿ëµÇ´Â Lite°ú
  8. IE View Lite ÁïÀÌ ¹®¼­°¡ Àû¿ëµÇ´Â Lite°ú is fairly self explanatory. Àº ¸Å¿ì ÀÚ¸íÇÕ´Ï´Ù. It allows you to view a page in 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)¸¦ ÁöÁ¤ »çÆÄ¸® ´ë½Å¿¡ÀÌ ÇÁ·Î±×·¥À» »ç¿ëÇÏ¸é ¿î¿µ üÁ¦¸¦ »ç¿ëÇÏ´Â °æ¿ì ¿¢½º Áï

    Right-click a blank spot on any web page and select View This Page in IE to do just that. ¿À¸¥ÂÊ - Ŭ¸¯ÇÏ¿© ºó ÀÚ¸®¿¡ ¾î¶² À¥ ÆäÀÌÁö·ÎÀÌ ÆäÀÌÁö¿¡¼­º¸±â¸¦ ¼±ÅÃÇÕ´Ï´Ù ÁïÀÌ ±×·¸°ÔÇÕ´Ï´Ù.

    ¼Ò½º ºä¾î¸¦ ÅÇ ¼³Á¤

    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. Áï »çÆÄ¸® ´ë½Å¿¡ »ç¿ë (¿î¿µ üÁ¦ x¿¡ ÇÑÇÔ), ÀÎÅÍ³Ý Å½»ö±â À§Ä¡¸¦ º¯°æÇÏ·Á¸é / usr / ºó / ¿­±â¸¦ Ãß°¡ -ÀÖ´Â »çÆÄ¸®ÀÇ ¸Å°³ º¯¼ö Çʵ带ÇÕ´Ï´Ù.

    ÁïÀÌ ¹®¼­°¡ Àû¿ëµÇ´Â Lite°ú ¼³Á¤À»
    IE View Lite set to use Safari ÁïÀÌ ¹®¼­°¡ Àû¿ëµÇ´Â Lite°ú »çÆÄ¸®¸¦ »ç¿ëÇϵµ·Ï ¼³Á¤

  9. Firebug ºÒÀ»
  10. Firebug ºÒÀ» is without question the most advanced addon in this list. ´ëºÎºÐÀÇ °í±Þ ºÎ°¡ ±â´ÉÀºÀÌ ¸ñ·Ï¿¡¼­ Áú¹®À»ÇÏÁö ¾Ê°íÀÖ½À´Ï´Ù. 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. ³ª´Â ÃÖ±Ù¿¡ ¸¹ÀÌ »ç¿ëÇϰí ÀÖ¾ú (»õ·Î¿î ÁÖÁ¦¸¦ ´Ü¼ø µµ¿ò)ÀÇ ¾î´À ºÎºÐÀ» È®ÀÎÇÕ´Ï´Ù. ÀüÅõ ±Ù¹« Áö¿ø ÆÄÀÏÀº ±×µéÀÇ ¹æ½ÄÀ» ·»´õ¸µÇÏ´Â ÀÏÀÌ ¹ß»ýÇÏÁöÇÕ´Ï´Ù. 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 Ŭ¸¯Çϸé È®´ë

[digg] [del.icio.us] [ÆäÀ̽º] [±¸±Û]
Related Posts: °ü·Ã °Ô½Ã¹° :
  • How to add thumbnail previews of websites when you use Google search in Firefox À¥»çÀÌÆ®ÀÇ Ãà¼ÒÆÇ ¹Ì¸®º¸±â¸¦ Ãß°¡ÇÏ´Â ¹æ¹ýÀ» »ç¿ëÇÏ¸é ±¸±Û °Ë»ö¿¡¼­ firefox
  • How to add any search engine to the Firefox Search Bar ¾î¶² °Ë»ö ¿£ÁøÀ» Ãß°¡ÇÏ´Â ¹æ¹ý °Ë»ö ¿£Áø¿¡ ºü
  • How to import your StumbleUpon favorites to your Firefox 3 Bookmarks ±ÍÇÏÀÇ stumbleupon¸¦ °¡Á®¿À´Â ¹æ¹ýÀ¸·Î ´ç½ÅÀÇ ¸¶À½¿¡ µå´Â 3 Áñ°Üã±â¿¡ firefox
  • How to add 70+ useful buttons to your Firefox Toolbar 70 + À¯¿ëÇÑ ¹öưÀ» Ãß°¡ÇÏ´Â ¹æ¹ýÀ» firefox µµ±¸ ¸ðÀ½
  • How to update the Firefox search bar to use the new Google icon ¸·´ë¸¦ ¾÷µ¥ÀÌ Æ®ÇÏ´Â ¹æ¹ýÀ» »ç¿ëÇÏ´Â °Ë»ö ¿£ÁøÀÇ »õ ±¸±Û ¾ÆÀÌÄÜÀ»
  • { 3 comments¡¦ read them below or (¡¦ Àо ¾Æ·¡¿¡ 3 °³ÀÇ µ¡±ÛÀ̳ª add one Çϳª¸¦ Ãß°¡ } )

    1 1 Sumesh sumesh 08.18.08 at 6:13 am 08.18.08¿¡¼­ ¿ÀÀü 6½Ã 13ºÐ

    I can¡¯t believe you missed Web Developer toolbar ! À¥ °³¹ßÀÚ Åø¹Ù¸¦ ³õÄ£ ¹ÏÀ» ¼ö ¾ø´Ù!
    But otherwise a good list, stumbled. ÇÏÁö¸¸ ´Ù¸¥ ÁÁÀº ¸ñ·ÏÀ» ¹ß°ßÇÕ´Ï´Ù.

    2 2 Keith Dsouza Ű½º dsouza 08.18.08 at 8:09 am 08.18.08¿¡¼­ ¿ÀÀü 8½Ã 9ºÐ

    Yea I would add Web Developer toolbar, XPather and TamperData to the list, they are really life savers. ÀÌ·¸°Ô ³ª´Â À¥ °³¹ßÀÚ µµ±¸ ¸ðÀ½À» Ãß°¡, xpather ¹× tamperdataÀ» ¸ñ·Ï¿¡, ±×µéÀº Á¤¸» Àλý º¸È£±â.

    3 3 Ky ÄËÅÍŰ ÁÖ 08.20.08 at 5:47 am 08.20.08¿¡¼­ ¿ÀÀü 5½Ã 47ºÐ

    What about Web Developer toolbar? À¥ °³¹ßÀÚ Åø¹Ù¸¦ ¾î¶»°Ô? 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> ÀÌ·¯ÇÑ ÅÂ±×¿Í ¼Ó¼ºÀ» »ç¿ëÇÏ½Ç ¼öÀÖ½À´Ï´Ù : <a href="" title=""> <acronym title=""> <abbr title=""> <blockquote cite=""> <b> <cite> <code> 'datetime=""> <em> <i> <del <strike> <q cite="">