In this series of blog posts I’m going to give you an overview of some of the tools that are commonly used by web developers to get their work done. You can expect some examples on how to install and use each tool but I won’t be going too deep. The main purpose is to simply give you an idea on what tools are available, how to use them and encourage you to integrate them into your workflow. Note that the tools that will be mentioned in this blog post aren’t platform specific so you can use them whether you’re developing in Windows, Linux or Mac. Over the coming weeks I’m going to walk you through the following:
- In-Browser Tools
- Text Editor
- Web Servers
- Command Line Utilities
- Package Managers
- Source Control
- Build Tools
- Language Compilers
- Coding Standards
- Boilerplates and Front-end Frameworks
First on the list is the browser tools. Browser tools are a set of tools that live on the browser which can help you in inspecting and debugging web applications.
Chrome Developer Tools
One of the most popular browser tool today is the Chrome Developer Tools. You can access it by pressing
Ctrl + Shift + I or
Cmd + Opt + I on your keyboard. By default this opens up the last panel that you have accessed.
- Elements – allows DOM inspection and modification, changes are reflected on the page as you update.
- Network – this is where you can view all of the HTTP requests made by your web project. The size and time it took to download each requested file are also viewable so the network panel is mostly used for evaluating the performance of your web project in terms of the HTTP requests that are made.
- Timeline – used for evaluating the performance of your web project in terms of frames and memory consumed
- Resources – kind of similar with the sources panel, but it doesn’t allow you to edit the source files. It also allows you to view and modify cookie and local storage information.
Useful Extensions and Plugins
- Web Developer – packs various extensions and tools to help in testing web pages [chrome] [firefox]
- Tincr – allows live reloading of web pages as you make changes to the source file. The saving of changes is also bi-directional which means that if you edit the file in the sources panel of the Chrome Developer Tools the changes will also get saved to the source file. Pretty sweet! [chrome]
- Pagespeed Insights – used for evaluating the performance of web pages based on industry best practices. It will give you some suggestions on how you can improve the performance of your website based on its evaluation. [chrome]
- YSlow – the same as Pagespeed Insights. [chrome] [firefox]
Firefox Developer Tools
The in-browser tool that started it all. It was already around before Chrome Dev Tools and Firefox Dev Tools came out. Most of the features are also the same with that of Chrome Dev Tools and Firefox Dev Tools.
In-browser tools are a nice way to easily design and test websites. They allow you to do almost everything right from the browser itself. The main benefit of this is instant feedback. You get to see what effect your changes have on the website right after making the change. Tools like tincr even make it possible to commit your changes to your source files so you won’t have to go back to the text-editor and commit your changes.