30 个 Web 开发者必备的 Chrome 扩展
fmms 13年前
<p>Chrome 已经是第二大最流行的浏览器,超过了 Firefox。 虽然Firefox 的功能更强大,但Chrome速度非常快以及每日大量新的扩展,这些都是令Web开发者振奋的理由。</p> <p>本文介绍30个 Chrome 扩展可以使你的编码和设计更加有效。</p> <p><strong><a href="/misc/goto?guid=4958326526807250805">Window Resizer</a></strong></p> <p>It resize browser window to emulate various screen resolutions.</p> <p><img class="aligncenter size-full wp-image-21155" title="custom-window-resizer" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/9918083b1a6712e6c148a103fec5fc52.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326527749540946">TagCloud</a></strong></p> <p>Tagcloud Save and restore window sessions over time and across multiple computers.</p> <p><img class="aligncenter size-full wp-image-21156" title="tab-cloud" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/7830ab2deb4030deaa058d0f4d316424.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326528542206324">Builtwith Technology Profiler</a></strong></p> <p>BuiltWith is a web site profiler tool. BuiltWith returns all the technologies it can find on the page.</p> <p><img class="aligncenter size-full wp-image-21157" title="built-with-extension" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/0dcbe9bb5c9ba3a216658f941e408b5c.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326529342056973">colorPicker</a></strong></p> <p>It can helpful for web developer to Pick color from current web page or change color(s) of any element in DOM.</p> <p><img class="aligncenter size-full wp-image-21138" title="color-picker" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/a3677cf05be81cdcd087031c6f9a1820.jpg" width="500" height="259" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326530131222793">Font Editor</a></strong></p> <p>Using this powerful extension for test different fonts and font sizes on any web pages</p> <p><img class="aligncenter size-full wp-image-21139" title="font-editor" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/09891a19d0f0470b7e4f4ce6f1fe46c7.jpg" width="500" height="259" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326530929636991">IE MultiTab</a></strong></p> <p>Another best resource for web developer to test web page view without leaving Google chrome and run ActiveX controls. you can view View of your desire page in IE within Chrome Tabs.</p> <p><img class="aligncenter size-full wp-image-21140" title="ie-tab-multi" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/bb4275b86f088eadc55536a70137a714.jpg" width="500" height="259" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326531710999277">HTML Validator</a></strong></p> <p>It is an extension to validate the HTML code of the current web page</p> <p><img class="aligncenter size-full wp-image-21141" title="chrome-html-validator" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/4cbbb223b7a681d4ee2b7738153a912e.jpg" width="500" height="259" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326532509678304">Sight</a></strong></p> <p>Sight is the Syntax Highlighter Chrome extension that makes reading code on the browser a joy.</p> <p><img class="aligncenter size-full wp-image-21142" title="sight-syntax-highlighter" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/8626fc63f9ef196836b133edf1cf6978.jpg" width="500" height="259" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326533312354411">StyleBot</a></strong></p> <p>It allows you to quickly manipulate the appearance of any website (using custom CSS).</p> <p><img class="aligncenter size-full wp-image-21143" title="stylebot-options" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/f0dcf07ac8af70047c66116b4301d5ac.jpg" width="500" height="313" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188696511720348">Palette for Chrome</a></strong></p> <p>It creates a color palette from any image. Just right-click on the image and select the ‘Palette for Chrome’ option</p> <p><img class="aligncenter size-full wp-image-21144" title="palette-chrome-extension" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/7c64c419dbd6f22007a9a13a922a11b8.jpg" width="500" height="375" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188707805512269">Web Developer</a></strong></p> <p>It adds a toolbar button with various web developer tools.</p> <p><img class="aligncenter size-full wp-image-21145" title="chrome web developer" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/51c1a8f2d716fd5195f272e524412cdc.png" width="500" height="313" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326535576907417">Google Font Previewer</a></strong></p> <p>It helps to choose a font from Google Font Directory with a few text styling options, and preview them on the current tab.</p> <p><img class="aligncenter size-full wp-image-21146" title="google-font-preview" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/0b17ff3bc3bee7d76917e9e0fb6fb406.jpg" width="500" height="344" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326536365214475">Google Mail Checker</a></strong></p> <p>Displays the number of unread messages in your Google Mail inbox</p> <p><img class="aligncenter size-full wp-image-21165" title="google-mail-checker" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/c43464e879005ce506d12564f0724ba0.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326537155423623">Pixlr Express</a></strong></p> <p>Quick fix you photos and images with pixlr express in browser image editing!</p> <p><img class="aligncenter size-full wp-image-21164" title="pixlr-express" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/5ba7ea9f5ddd678e0de6d820f2392fcd.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188676715298847">Chrome Sniffer</a></strong></p> <p><img class="aligncenter size-full wp-image-21163" title="chrome-sniffer" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/0b47cd6926fd576fe2b2aff6d4e30048.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188673892968265">Awesome Screenshot</a></strong></p> <p>It is another useful google extension that capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click…</p> <p><img class="aligncenter size-full wp-image-21148" title="awesome-screenshot" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/01f7796c1e46f573f53dd4776f45b46c.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958191002061008669">Google Similar Pages</a></strong></p> <p>Discover WebPages similar to the page you’re currently browsing.</p> <p><img class="aligncenter size-full wp-image-21149" title="google-similar-pages" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/ee18e76616d046d6ecb75aaae99afcb5.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188688028052774">Greplin</a></strong></p> <p>Search Greplin directly from your browser with this extension</p> <p><img class="aligncenter size-full wp-image-21150" title="greplin-social-media" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/b2cd596767aa03398b9db95bfd3e4786.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326540886966503">Instachrome</a></strong></p> <p>It helps you quick saving method to store your articles. It can help you make a collection of articles.</p> <p><img class="aligncenter size-full wp-image-21151" title="instachrome" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/1fbcde321c56fd3ef58755bfd823f927.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326541670096573">CSSViewer</a></strong></p> <p>CSSViewer is a simple CSS property viewer for Google chrome users.</p> <p><img class="aligncenter size-full wp-image-21154" title="chrome-css-viewer" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/e24ceb47be1a385572c613aa2cbb2c52.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188686605470616">Firebug Lite</a></strong></p> <p>It is popular extensions and provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading.</p> <p><img class="aligncenter size-full wp-image-21153" title="firebug-lite" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/c6afbe26d8a6ed9a56ab69aed6b8f5de.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326543191463430">PHP Console</a></strong></p> <p>Its display PHP errors/debugs in chrome.</p> <p><img class="aligncenter size-full wp-image-21152" title="php-console" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/32e57fb4947a7a37b7c248d40ec0dd40.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326543983495497">Speed Tracer</a></strong></p> <p>Speed Tracer is a tool to help you identify and fix performance problems in your web applications.</p> <p><img class="aligncenter size-full wp-image-21158" title="speed-tracer" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/9098ddd0a4a37f866850f621b8ecc89c.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958188693693724095">MeasureIt</a></strong></p> <p>Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.</p> <p><img class="aligncenter size-full wp-image-21159" title="measure-it" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/744c5aacc512007d5a1a41da9313b0cb.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326545519201479">LastPass</a></strong></p> <p>LastPass is a free password manager and form filler.</p> <p><img class="aligncenter size-full wp-image-21160" title="last-pass" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/db90cdd09b083691f9fd0d166bd11889.jpg" width="580" height="300" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326546312083127">SEO for Chrome</a></strong></p> <p>SEO for Chrome provides SEO Stats and Tools that make your daily SEO tasks easier</p> <p><img class="aligncenter size-full wp-image-21167" title="seo for chrome" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/aa483a3f0f118887640607b9ce2ea20b.png" width="500" height="313" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326547110085095">META SEO inspector</a></strong></p> <p>This extension is mainly aimed at web developers that need to verify the description tag.</p> <p><img class="aligncenter size-full wp-image-21168" title="META SEO inspector" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/698a016053555ef5edbd7b91d8b8205f.jpg" width="500" height="313" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326547895991190">Domain Availability Checker & Whois</a></strong></p> <p>This plugin checks a domains availability straight from your toolbar.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958326548695824757">Chrome Flags</a></strong></p> <p>Displays a country flag indicating the location of the websites you’re visiting.</p> <p><img class="aligncenter size-full wp-image-21169" title="chrome flags" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/c798ef3cc4889a1457c4b78a552704e4.jpg" width="500" height="415" /></p> <hr /> <p><strong><a href="/misc/goto?guid=4958326549502156663">FlashBlock</a></strong></p> <p>Flashblock is an extension for the Google Chrome that blocks all Flash content from loading. It then leaves placeholders on the webpage that allow you to click to download and then view the Flash content.</p> <p><img class="aligncenter size-full wp-image-21171" title="FlashBlock" alt="30 个 Web 开发者必备的 Chrome 扩展" src="https://simg.open-open.com/show/ac6b071156f789fb84989626a881a8c8.jpg" width="500" height="261" /></p>