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?”

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 is objectively and definitively the best for the job now.

“What about the Live Server VSCode extension?”

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?”

Because very often much of your JavaScript will require that it come from a server as is the case with Phaser projects.