Live Previewing Web Development in Real-Time

Here’s why and how you should always live preview your web development in real-time.

“Why should I preview my work during my web development?”

To see what you’re doing.

Seeing your changes immediately as you make them is absolutely essential to web development because so much of what you are doing amounts to small tweaks to position and design. Consider also that true web development should be mobile first and responsive to handle all possible devices. This means not only previewing on your workstation but also your phone and tablet.

“What’s the best tool for live previewing my web development?”

Browsersync.

There is objectively nothing better at the moment.

“What about the Live Server VSCode extension?”

Forget about it. It’s broken.

While I used and taught the Live Server VSCode extension for a while I have discovered very significant flaws starting with no longer being supported by its creator.

Beyond that I discovered that it completely screws up reference numbers to lines of CSS under the Chrome DevTools Elements - Computed tab. That huge flaw is a show-stopper — especially for beginners.

“Why not just open the .html file?”

It’s not enough.

Because very often much of your JavaScript will require that it come from a server as is the case with Phaser projects. You also cannot test things that have a server later, like WebSockets applications.