25 个在Web开发领域应该使用的工具

作为一名Web开发和设计人员也有很多可以生您的开发工作更轻松的工具。在这里，已经收集了25个工具，适用不同的工作流程，你应该使用过。

Sublime Text 3

Sublime Text 3 is the latest incarnation of the powerful Sublime Text editor. While it is currently in beta, it is stable enough in my opinion to run as primary editor. If you don’t want to get on the beta, Sublime Text 2 is still the supreme editor that I would highly recommend.

Harvest

Regardless of whether you are billing by the hour or by the project, it is important to have an idea of how much time you spend on various tasks. Harvest makes time tracking simple and also let’s you keep track of client expenses, estimates and invoicing. With a nice UI and powerful reporting features, I think it is the best project time tracking app that I have tried for a web developer.

Trello

When it comes to project management systems, everyone really has their own preference. What I like about Trello is how customizable it is and that it can be used for a lot of different things. As a web developer, you don’t just have tasks that are either “Not Done” or “Done”, but have tasks that are “In Progress” which is an important state. Trello’s boards (Scrum methodology) allows you to cater to this need, while not limiting your own improvements and creativity in the way other scrum-focused systems do. Oh, and it is free!

Tower

Working with git as a version control system is almost a must these days. You definitely need to be on some version control. Personally, I like my daily git-work to be done using a nice GUI, which is why I use Tower as my main git client on my Mac. It makes committing, branching, tagging and all the daily git workflow stuff much quicker than terminal commands for me.

CodeKit

If you are writing your CSS code using a pre-processor like SASS (and you should be!), then you need to render this out as a CSS file and preferably compress it and minify it too. CodeKit helps you with this and also has support for other languages such as JavaScript and more. A versatile little application for your development app toolkit.

ImageOptim

It’s amazing how much images can be optimized and compressed before going on the web without loosing much quality. Even if you save from Photoshop using it’s Save for Web and Devices feature, the image can usually be compressed more. Make it a point to run all your web images through the free ImageOptim tool before uploading them to see direct speed and performance improvements.

MAMP/WAMP

Developing locally is a must if not because it is much more convenient and faster while offering greater control in combination with version control. MAMP for Mac or WAMP for Windows helps you get your local development server environment in check. For MAMP, I like their Pro version and that it helps me quicker assign and work with virtual hosts without getting into files. It just speeds my workflow up. Either way, you need this in your arsenal.

DeployHQ

Deploying from a git-repository to a shared hosting provider is not a happy story. Most hosts don’t have git on their servers and no SSH is available regardless, leaving you with FTP or in a best case scenario SFTP access. DeployHQ helps you with your deploy process and adds an extra dimension by allowing you to push (automatically if you want) to different servers, write special config files and generally improve your deploys. Highly recommended tool.

Bitbucket

While GitHub is one of the most popular ways of hosting git-repositories, I like Bitbucket a lot. It’s main advantage over GitHub is that it is team size based and not repository amount based. That way, if you are a small team (< 5), you get to host as many private repositories as you like for free.

PlaceIt

Eventually, we finish our beloved websites for clients and want to show them off. Sometimes it is nice to not just take a normal screenshot or simply place in a browser chrome but show them off on devices, in an environment. Images like this are quite engaging. This little site takes a website, or a website screenshot and places it in an environmental image which looks great in a portfolio or in a presentation about the project.

Poedit

If you are working with any sort of translation, be it through WordPress or any other CMS or even just PHP in general, then Poedit is the application to help you. It’s also free but they just updated with a premium version that let’s you translate WordPress projects a bit quicker.

Sequel Pro

While many hosts have a mySQL database tool such as phpMyAdmin installed on their servers, some don’t. Even if they do, Sequel Pro is a beautiful local interface on your Mac for any mySQL database allowing you to skip the command line management of databased and turn it into a GUI-based one instead.

Transmit

There are many FTP applications out and about for your use. I have for years stuck with Transmit because I like the way the app looks and functions and that it also now easily syncs my favorites across computers so that information is always current.

Live Reload

Does your typical workflow look like mine used to do? Write a piece of code, tab over to the browser, hit the shortcut for reloading, see the page update, jump back and do it all again. Live Reload enables automatic reloading of a browser tab when something changes. For CSS it automatically updates the page without a hard refresh making it even nicer. Try it out and save some time (and fingers) every day.

Screens

Once in a while I need to log into a server or remote computer to access or configure something. Screens is the nicest app that I have found to let me do this on my Mac. Sure it costs a little money but is well worth it overall. The app is also available on iOS with syncing.

ScreenFlow

As a developer you are probably like me creating video guides for your clients now and then. ScreenFlow is by far the best screen recording application on the Mac. It doesn’t just let you record your screen but has some pretty powerful editing features inside it as well. For PC users, I would highly recommend looking at Camtasia.

Gas Mask

There comes a time in a development process where you need to try out how a site looks on a new production server before you point the domain there. With Gas Mask you get a GUI-access to the hosts file on your Mac which you would otherwise edit via Terminal.

Clarify

On the topic of doing guides for clients, video guides (as with ScreenFlow above) isn’t the only way. A lot of the time, a text guide is sufficient or even preferred. I’ve found Clarify to help make the screenshot + writing procedure a little less cumbersome than it normally is.

Bugherd

BugHerd is the application of choice for me when I want to track bugs on a client website. Instead of ending up in the process of trying to send screenshots back and forth, Bugherd lets clients annotate the site and you can review where they were having issues, instead of having to guess. A pretty neat services that saves a lot of time.

Foundation

Foundation is my CSS framework of choice and the main alternative to 推ter Bootstrap. My reasons for using Foundation are mainly that it has been using the SASS language (which I favor over LESS) and that its flexibility and feature-set have been what I have needed.

Typekit

Being able to use Web Fonts is great. There are a lot of fonts available at Google Web Fonts, but for those paid fonts, Typekit has a great collection of web fonts that are simple to deploy on a site. Now that it is owned by Adobe, Typekit is also included in the Creative Cloud so if you are already a subscriber to that, you already have Typekit.

Adobe Edge Inspect

Checking mobile sites or responsive designs and debugging them is not a painless process. Adobe Edge Inspect at least tries to make it a bit less painful since it lets you both preview and inspect (using a web inspector) sites on your devices. You use the app on your computer and their companion apps on your devices. Edge Inspect is also a part of the Creative Cloud.

Proto.io

Doing prototypes and wireframes are an important part of an interface design process. Proto.io is a web app that helps you do prototyping for any device and with a great set of UI elements available. It is one of the better prototyping tools that I have found and at a reasonable price.

Evernote

What is Evernote doing here you ask? A note taking app? Quite! Evernote is a great place not only to organize project related notes but to save interesting articles you reed, tutorials and other reference material so that you can find them when you need them.

BrowserStack

Testing sites across multiple browsers is a big pain. Imagine if all browsers would render the same… Since that’s not the case, BrowserStack is one of many services to let you quickly get screenshots of how your site looks across a wide range of browsers and operating systems. It will give you a good overview so that you then can decide where you need to spend more work debugging potential issues.