* [Browsershots](http://browsershots.org/) makes screenshots of your web design in different operating systems and browsers * [Browserling](https://browserling.com/) is an interactive cross-browser testing site. Fully interactive sessions, not static screenshots. * Accessibility - [Evaluation, Repair, and Transformation Tools for Web Content Accessibility](http://www.w3.org/WAI/ER/existingtools.html) - lists validation tools for validating, testing and fixing web content to make it more accessible. ### 代码编辑器[◊](http://coderlmn.github.io/code-standards/#_code_editors "Permalink") A great code editor can spark productivity in exceptional ways. Many developers prefer rudimentary text editors, others prefer powerful integraded development environments (IDEs). What follows is a general listing of some of the more well-known tools, it would be impossible to list them all. Aptana Aptana Studio is a powerful, free and open source Ajax development environment which runs stand-alone or within Eclipse. Aptana Studio offers tooling for Ajax including HTML, CSS, DOM, and JavaScript editing and debugging, plus support via additional free plugins for PHP, Ruby on Rails, Adobe AIR, Apple iPhone development. It also features full SVN repository integration for committing, branching, tagging, merging and repository browsing.[Aptana](http://aptana.com/). [Linux, Mac, Windows] Geany Geany is a text editor using the GTK2 toolkit with basic features of an integrated development environment. It was developed to provide a small and fast IDE, which has only a few dependencies from other packages. It supports many filetypes and has some nice features. [Geany](http://www.geany.org/). [Linux, Mac, Windows] Notepad ++ Notepad++ is a free (free as in "free speech", but also as in "free beer") source code editor and Notepad replacement, which supports several programming languages, running under the MS Windows environment. [Notepad ++](http://notepad-plus.sourceforge.net/uk/about.php). [Windows] e TextEditor E is a new text editor for Windows, with powerful editing features and quite a few unique abilities. It makes manipulating text fast and easy, and lets you focus on your writing by automating all the manual work. You can extend it in any language, and by supporting TextMate bundles, it allows you to tap into a huge and active community. [e TextEditor](http://www.e-texteditor.com/). [Windows] Edit Plus EditPlus is a text editor, HTML editor and programmers editor for Windows. While it can serve as a good Notepad replacement, it also offers many powerful features for Web page authors and programmers. [EditPlus](http://www.editplus.com/). [Windows] Homesite HomeSite 5.5 provides a lean, code-only editor for web development. Advanced coding features enable you to instantly create and modify HTML, CFML, JSP, and XHTML tags, while enhanced productivity tools allow you to validate, reuse, navigate, and format code more easily. Configure Adobe (formerly Macromedia) HomeSite to fit your needs by extending its functionality and customizing the interface. [Homesite](http://www.adobe.com/products/homesite/). [Windows] TextMate TextMate claims to be the "Missing Editor" for Mac OS X. A general purpose editor with a sparse interface, the real power is in it's extensibility. Features column selections, recordable macros, snippets, auto-pairing of brackets and other characters, clipboard history, code folding, tab-triggers, tabbed placeholders and mirror typing. And that's just for starters. Anything that can be done via scripts through the Mac command line can be done through custom commands, allowing an extremely high degree of customization and expansion of the feature set. TextMate's "bundle" format has been adapted by many other code editors including the aforementioned e TextEditor. [TextMate](http://www.macromates.com/). [Mac] Espresso Espresso was created by the same fellow that created the innovative CSSEdit CSS editor. Espresso features syntax highlighting, code folding, code completion, document outliner/navigators, projects, powerful find features, and built-in file transfer publishing capabilities. Finally, it has a powerful "Sugar" feature set which allows the creation of custom commands and plugins. [Espresso](http://macrabbit.com/espresso/). [Mac] BBEdit BBEdit is the grand-daddy of Mac code editors for web development. Features syntax highlighting, exceptionally powerful text manipulation tools, multi-file searches, a scriptable API, text clippings, and extensive Mac Automator features. [BBEdit](http://www.barebones.com/products/bbedit/). [Mac] TextWrangler The free "little brother" of BBEdit, it is a powerful raw text editor with a massive text manipulation feature set. Searches, regular expressions, text transformations, syntax highlighting and code navigation tools for a variety of different language environments.[TextWrangler](http://www.barebones.com/products/textwrangler/). [Mac] Coda Coda from Panic software is a powerful IDE with code editing, terminal, remote file management, and help documentation all built into one UI. Aiming to be a one stop shop for your web development workflow, it also features SVN integration and a new plug-in builder with powerful scripting support and TextMate bundle importing. Finally, code clips and live multi-user editing are also supported. [Coda](http://www.panic.com/coda/). [Mac] UltraEdit Another editor that's been around for ages, this is an immensely robust and powerful text editor, able to open files limited only by the amount of memory on your computer. The feature list is virtually too much to list, with a massive list of text manipulation features, project support, powerful search and replace, hex editing, function lists, a massive list of languages supported (600+) remote file ftp, telnet, ssh, file comparison, scriptable macros, tools and compiler support, and much, much more. [UltraEdit](http://www.ultraedit.com/products/ultraedit/). [Linux, Mac, Windows] Sublime Text A relatively new editor, Sublime Text is a new approach in editors. "Open Anything" searches through file names and file contents, with remarkable efficiency. Incredibly powerful selection controls allow editing text in multiple locations at once and the "Minimap" gives you a bird's eye view of the open file so you can find your place easily. Actively being developed, new features are being added and the community around the editor is rapidly expanding. Macros, auto-complete, snippets, build tools, the list of features goes on and on. Supports Linux and Mac starting with version 2. [Sublime Text](http://www.sublimetext.com/). [Linux, Mac, Windows] Vim If you have to ask, it's probably not for you. [Vim](http://www.vim.org/) [Linux, Mac, Windows] ### Google Chrome 扩展[◊](http://coderlmn.github.io/code-standards/#_google_chrome_extensions "Permalink") Developer Tools Not actually an extension for Chrome, but built right in (shares much with Safari's Web Inspector, both being derived from WebKit.) This suite of tools features a DOM inspector, basic JavaScript debugger, profiling tools, network loading inspector and timelines, page resources inspectors, and more. [Developer Tools](http://code.google.com/chrome/devtools/docs/overview.html). code cola A pop-up panel with CSS editing tools for examining and modifying the styles on a given page. [code cola](https://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn). Firebug Lite for Google Chrome You really don't need to install an extension to use Firebug Lite with Chrome, though the extension is nice because it enables one-click application of the Firebug Lite script to any page you are working with. Not the full Firebug feature set, but close. [Firebug Lite](https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench). HTML5 Outliner The HTML5 Outliner adds a pop-up with a generated HTML5 outline of the current page's header hierarchy. Helps for checking your pages' organization against the new HTML5 header outlining algorithms. [HTML5 Outliner](https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo). Pendule Nice set of tools for showing data about and interacting with the current web page. Very similar to the [original web developer toolbar for Firefox](http://chrispederick.com/work/web-developer/). [Pendule](https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi). Web Developer for Chrome Chris Pederick, the original developer of the original Web Developer toolbar for Firefox has ported the majority of it over to Chrome. There you have it. [Web Developer](http://chrispederick.com/work/web-developer/). ### Firefox 插件[◊](http://coderlmn.github.io/code-standards/#_firefox_plugins "Permalink") FireFTP FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. [FireFTP](http://fireftp.mozdev.org/). Firebug Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. [Firebug](https://addons.mozilla.org/en-US/firefox/addon/1843). Firequery FireQuery is a collection of Firebug enhancements for jQuery integrated into Firebug.[Firequery](https://addons.mozilla.org/en-us/firefox/addon/firequery/). Firecookie Firecookie adds cookie viewing, editing, and deletion to Firebug. [Firecookie](https://addons.mozilla.org/en-US/firefox/addon/firecookie/). CSS Usage CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. [CSS Usage](https://addons.mozilla.org/en-us/firefox/addon/css-usage/). Greasemonkey Allows you to customize the way a web page displays using small bits of JavaScript.[GreaseMonkey](https://addons.mozilla.org/en-US/firefox/addon/748). Web Developer Toolbar Adds a menu and a toolbar with various web developer tools. [Web Developer Toolbar](https://addons.mozilla.org/en-US/firefox/addon/60). JSView Adds an item in the status bar that displays all external JavaScript and CSS files loaded on a given page. Allows you to click on and view the files and things like their URLs. Great way to pull file URLs to put into Charles for remote debugging. [JSView](https://addons.mozilla.org/en-US/firefox/addon/2076). Live HTTP headers When running, captures all HTTP traffic from the browser, which enables you to see what files are being requested as well as information about the requests and server responses.[Live HTTP Headers](https://addons.mozilla.org/en-US/firefox/addon/3829). Quick Locale Switcher A tremendous help when doing internationalization, Quick Locale Switcher allows you to change the locale sent along in the browser's user-agent HTTP header, telling servers to display content for you in other locales. [Quick Locale Switcher](https://addons.mozilla.org/en-US/firefox/addon/1333). Screengrab Screengrab sits in the Firefox status bar, allowing you to capture and copy or save screen shots of everything from selections of a web page to the entire page, even parts displayed "below the fold." [Screengrab](https://addons.mozilla.org/en-US/firefox/addon/1146). Total Validator Enables one-click access to sending your page through a markup validator. No better way to quickly check for missing or mismatched tags! Also available as a standalone application. [Total Validator](http://www.totalvalidator.com/tool/extension.html). ### Opera 扩展[◊](http://coderlmn.github.io/code-standards/#_opera_extensions "Permalink") [Dragonfly](http://www.opera.com/dragonfly/) is Opera's developer tool similar to Firebug. ### IE 插件[◊](http://coderlmn.github.io/code-standards/#_ie_plugins "Permalink") **CompanionJS, DebugBar, IE8 Dev tools**. ### Charles 代理[◊](http://coderlmn.github.io/code-standards/#_charles_proxy "Permalink") [Charles](http://www.charlesproxy.com/) watches all requests and can tell you a lot of information about them. Also supremely useful is Map Local which lets you use a local file in place of a given URL (good for replacing a minified js with a full one). ### Fiddler[◊](http://coderlmn.github.io/code-standards/#_fiddler "Permalink") From the site: ["Fiddler ](http://www.fiddler2.com/fiddler2/)is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language." ### Speedlimit[◊](http://coderlmn.github.io/code-standards/#_speedlimit "Permalink") [Speedlimit](http://mschrag.github.com/) is a Leopard (works in snow leopard) preference pane for limiting your network bandwidth to one of a couple different speeds—768k DSL, Edge, 3G, and Dialup. Good for testing your lowest supported speeds or when you want to know how your app will function in real world speeds. ### 教程和工具[◊](http://coderlmn.github.io/code-standards/#_tutorials_amp_tools "Permalink") * [CSS Cheatsheet](http://lesliefranke.com/files/reference/csscheatsheet.html) * [CSS Links](http://www.dezwozhere.com/links.html) * [Clean CSS](http://www.cleancss.com/) * [Fluid Grids Code Generator](http://csswizardry.com/fluid-grids/) ### 图标[◊](http://coderlmn.github.io/code-standards/#_icons "Permalink") * [Famfamfam silk icons](http://www.famfamfam.com/lab/icons/silk/) * [Sweetie](http://sublink.ca/icons/) * [Paul's bookmarks for more icons](http://delicious.com/paul.irish/icons) * [Fugue Icons - 3,100 icons in PNG format.](http://p.yusukekamiyamane.com/)