In many professions, tools can help drive the success of a project. Having the right tools determines how efficiently and effectively you can attain your objectives. However, finding the right tools can often be a time-consuming task, as you generally don’t know how well a tool will work until you spend time using it.

As one of a team of full stack developers here at Zion & Zion, I have many tools in my arsenal, but the following are ones I use on a daily basis. These tools have proven to me that any time spent testing and learning them has been well worth it. A majority of these applications or tools will be environment and language-neutral. There is a mix of browser extensions, applications, and web resources that all make a big impact.

By the end of this article, you should have a great toolset for web development that will make your life a little easier and save you a whole lot of time.

List of Best Web Development Tools

Applications:

  • PHPStorm
  • MAMP PRO
  • Postman

Browser Extensions (Specifically with Google Chrome):

  • IP Address and Domain Information
  • Wappalyzer
  • Google Analytics Debugger
  • Tag Assistant
  • Vue.js devtools

Web Resources:

  • Compress PNG/JPG
  • CrossBrowserTesting
  • CanIUse
  • BrowserHacks
  • WebPageTest

Applications

1. PHPStorm

Website: PHPStorm

Choosing an IDE (Integrated Development Environment) is a pretty big deal as a web developer, because it’s usually one you will commit to for a long time. It’s essentially the bread and butter of web development, as it’s where all your code goes. I’ve found PHPStorm made by JetBrains to be my favorite, and it’s by far the best on the market. It’s feature-rich, has a clean interface, and most importantly, it’s fast.

To see a full list of features available in PHPStorm, you can check out their site here.

2. MAMP PRO

Website: MAMP PRO

MAMP PRO is the greatest. It wasn’t too long ago that I was just using the free version of MAMP, which was amazing. But then I got a taste of MAMP PRO. MAMP PRO has unique features like multiple versions of PHP, multiple domains, and debugging tools. Best of all, it’s super easy to configure. This is one of the most significant and cost-saving tools you can have as it provides you with the ability to test sites, as well as create on the fly staging environments.

3. Postman

Website: Postman

Postman is a great tool for testing API calls. It’s great if you need to test authentication quickly, or to see if you’re getting a valid response. I’ve found it useful when trying to debug as well, or when you want to create test scenarios for an API you’re making.

Browser Extensions (Specifically with Google Chrome)

4. IP Address and Domain Information

Website: IP Address and Domain Information

This is one of those tools you’ll always want to have readily available. It can be very handy, especially during the debugging or launching stages of a site. Oftentimes, the DNS hasn’t updated yet and you want to know if the IP has changed, or you simply forgot to update your host file. This tool will quickly tell you.

5. Wappalyzer

Website: Wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It can tell you what type of CMS, eCommerce Platform, Web Server, JS Frameworks, and many more technologies are being used on any given website. This is very helpful when you need to get a report on a site for a client meeting or to present data about another site you haven’t worked on.

6. Google Analytics Debugger

Website: Google Analytics Debugger

If you ever need to create events, configure cross-domain tracking, or set up other advanced features within Google Analytics, GA Debugger gives you all output information in your console so you can see exactly what information is being passed. This can save a lot of time, instead of having to wait for data to show up in Google Analytics.

7. Tag Assistant

Website: Tag Assistant

As a web developer, I’m often tasked with making sure Google Analytics and/or Google Tag Manager is on a given website. This browser extension allows me to quickly check if they’re on the site, and what ID they have.

To properly debug with this tool, check out our recent article: Beginner’s Guide to Google Tag Manager.

8. Vue.js devtools

Website: Vue.js devtools

While technologic specific, this Vue debugging tool has proven to be extremely useful when working on these types of projects. This tool acts like a Vue specific console, allowing you to view your components and data related to those components. It should be noted that this tool will only appear on staging environments, so you don’t have to worry about the whole world having access to that data.

Web Resources

9. Compress PNG/JPG

Website: TinyJPG

Performance for websites is a top priority nowadays, so compressing your images is one of the first things you should do during optimization. This is a free and easy tool to quickly compress. If you’re dealing with many images, they also provide an easy to use API for mass compression.

10. CrossBrowserTesting

Cross browser testing is one of the best, and most important, parts of web development. Making sure your site looks good and works well on all browsers is such an important factor for usability. This tool allows you to test on multiple versions of various browsers via screenshots and live testing tools. Another great feature is that it allows for automation. You can create tests to ensure that certain functionality on your site is working as expected. This is a time saver as you don’t have to go into each browser across multiple versions and do these same actions over and over.

11. Can I Use

Website: Can I Use

Development is an ever-evolving field, so there are always new and exciting features available. Unfortunately, these latest and greatest features don’t always have the best browser support. Sometimes you need to confirm whether or not you can responsibly incorporate these features into your upcoming project. Can I Use shows you browser support for CSS, HTML, SVG, and JS features along with listing known issues which can be particularly useful in helping make these types of decisions.

12. BrowserHacks

Website: BrowserHacks

In case Can I Use didn’t detour you from using an awesome new feature, you can reference Browser Hacks. As the name suggests these are hacks, so while not ideal for the long run, it is nice to have while you are waiting for that browser support to come through. Sometimes it is worth the hack to implement something new and exciting on a website!

13. WebPageTest

Website: WebPageTest

As stated above, performance is incredibly important for a site. A slow site is no longer acceptable in today’s world. This is where WebPageTest comes in. This online tool scores your site on six different performance factors. This incredibly detailed report provides great insight into what is going on behind the scenes and outlines any areas in need of improvement.