Web Developer Workflow Tools: A Beginner’s Guide

Here's a primer for the tools all web developers should get to know, from basic Bash commands to web browser add-ons that will debug your web apps and automate navigation tests, plus continuous integrations pipelines.

Keep in mind this article is intended to cover the tools that the largest number of web developers will share a need to learn, not a comprehensive listing. So don't get too mad if your favorite tool isn't here! (For example, I intentionally left out WYSIWYG website builders 😉.)

Command Line

The command line is an interface that allows you to interact with the operating system through a console, and it can go a very long way to facilitate and even automate tedious and routine tasks.

You shouldn't be afraid of getting your hands dirty with the console. The time you'll spend learning some basic scripting will most definitely pay off.

Bash Tools (Linux, macOS)

Bash is the most popular shell for the "Unix-like" operating systems such as Linux and macOS.

Your mastery — or at the very minimum, a basic knowledge — of the Bash shell can save you a lot of time. Things like locating and renaming files, finding and replacing text strings, can literally take just a few seconds with commands like locate and grep with sed, respectively.

Become proficient in Bash by reading the Bash Quick Start Guide.

PowerShell (Windows)

PowerShell is the "bash-like" task automation and configuration management framework from Microsoft. It comes with a command-line similar to that of the [Command Prompt](https://ift.tt/1GmS2n8 (CMD)), but it also includes modules and a proper scripting language. But keep in mind that scripting is PowerShell in nothing like scripting in Bash. Except for a few exceptions, the commands have entirely different names, meaning that you'll need to learn these separately.

PowerShell 7 (under development) is intended as a successor to PowerShell Core 6, which was introduced as a successor to PowerShell 5. Who knows, folks at Microsoft might figure the naming thing out by version 8 or 9. 🤷‍♂️

Cygwin (also Windows)

You missed the Bash on Windows? Miss it no more! For those of you used to the power of the Bash shell but working regularly on a Windows environment, there's an alternative.

Cygwin is a POSIX-compatible environment that runs natively on Microsoft Windows, where the installation directory behaves like the root and follows a similar directory layout to that found in Unix-like systems.

Code Editors

You almost certainly know what a source-code editor is, but you might not know about some of their power features, such git integration.

There are integrated development environments (IDEs) such as NetBeans and Eclipse — but they're bloated with features we mostly won't care about anyway.

As web developers, we're more inclined towards cross-platform tools. Let's take a look at a few of them.

Atom

Not surprisingly, as it's developed by GitHub, Atom has the finest embedded Git control of any text editor, specifically aimed for GitHub repositories.

But that's not all. The "hackable text editor for the 21st Century" is incredibly easy to customize (see the docs), and a rich packages and themes ecosystem has flourished around it. Be sure to check out the blog and discussion forums to see what's been cooking, as there are plenty of regular updates.

Sublime Text

Sublime Text is the oldest product in this list (it's been around since 2008), and the only one that's not free. It's still very popular, and was the first editor to introduce many of the features we considered a given today in any decent code editor, such as "goto anything", "goto definition", and "multiple selections", among others.

It also has a companion Git client with a very sleek interface, Sublime Merge, introduced in 2018.

Visual Studio Code

Visual Studio Code (not to be confused with Visual Studio is another very popular code editor right now, which includes power features such as:

• IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.
• Inline debugging to analyze coding issues right from within the editor.
• Version control with Git commands built-in (learn how to use version control).
• Extensions and customization which run in separate processes, ensuring they won't slow down the editor (learn more about extensions).
• Cloud integration with Microsoft Azure to deploy and host sites, store and query relational and document based data, and scale with serverless computing.

Read our Visual Studio Code power user's guide to become a VS Code pro, and dive even deeper with the book Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers.

The Runners Up

Although not so popular, Brackets is worth mentioning, as it’s primarily focused on web development, with a very interesting feature called Live Preview, which gives real-time connection to your browser to instantly visualize changes to CSS and HTML on screen.

Notepad++ is a drop-in replacement for Windows Notepad, very minimalist and lacking some power features we mentioned such as Git integration, but it's still a powerful, lightweight application to edit code.

Command Line–Based

As for commaind line–based editors, you've got Emacs and Vim … and endless flame wars about which one is better!

Browser Tools — Debugging, Debugging, Debugging

The web development tools shipped by some browsers aren’t quite website builders or IDEs, as they neither assist in the direct creation of a web page nor are a replacement for a code editor. Rather, they help to test the user interface (UI) of the project you're working on.

Back in the day, you’d need a number of extensions to make for a decent debugging environment, but nowadays most browsers have great built-in tools to help web developers.

Some tools you can expect to find:

• A DOM inspector to edit HTML and CSS code directly on the document object model (DOM), view event listeners, and set DOM mutation breakpoints.
• A console to view and filter log messages, inspect JavaScript objects and DOM nodes, and run JavaScript code in the context of the active window or frame.
• A debugger to control the execution flow stepping through code, and set watches and breakpoints.
• A network monitor to inspect requests and responses from the network and browser cache, including asynchronous XMLHttpRequest (XHR) — all of which can be very useful to identify bottlenecks.
• An accessibility inspector to access the page's accessibility (a11y) tree, allowing you to check what's missing or otherwise what needs attention to make your site available to as many people as possible.
• Performance measurement to profile execution time and system resources required by the site and walk JavaScript call stacks.
• Memory measurement to track memory consumption and compare heap snapshots at different stages of the code execution.
• A storage manager to handle cached data, cookies, web storage, and even IndexedDB structured data.
• A service worker manager to handle and debug service workers with updates, unregisters, and start/stop of individual workers.
• An emulator to test for different screen resolutions, and even different location coordinates.

Chrome DevTools

Google Chrome comes with a comprehensive and incredibly well-documented set called DevTools.

In fact, it's a good idea to visit Google's Tools for Web Developers, as you’ll find plenty of useful resources.

Firefox Developer Tools

Firefox first introduced the DOM inspector in version 3, and ever since then its Developer Tools are a state-of-the-art set that comes with extra goodies such as Eyedropper, taking screenshots, and rulers, to name a few.

Likewise, the Mozilla Developer Network (MDN) is a mandatory resource for web developers.

Safari Developer Tools

Because of its lack of features and poor support to web developers, Apple Safari is a pain to work with, and, like Internet Explorer back in the day, it would be nice not to have to deal with it. But you just have to.

It does ship Web Development Tools that aren't nearly as comprehensive as the aforementioned ones, and all the documentation you'll get is what someone may have written over a lunch break. (Yes, that's all there is.)

Others

Even Microsoft Edge, the successor of infamous Internet Explorer, has a decent set of Developer Tools!

And if you fancy good old Opera, check this Stack Exchange answer to see how you open its developer tools.

Learn the Chrome and Firefox DevTools with Browser Devtool Secrets.

JavaScript Tools

Since the arrival of Node.js (the runtime environment that executes JavaScript code outside the web browser), JavaScript has been used not only to enhance user interfaces but to write command-line tools and for server-side scripting programs, effectively establishing the "JavaScript everywhere" paradigm.

Consequently a whole ecosystem has emerged around it, and here are some tools you need to know.

npm

The Node package manager (npm) claims to be "the world’s largest software registry", and it’s an essential tool as it is the main way to distribute JavaScript code these days.

As listed on its website, you can use npm to:

The post Web Developer Workflow Tools: A Beginner’s Guide appeared first on SitePoint.