browser-sync
Keep multiple browsers & devices in sync when building websites. https://browsersync.io
A development tool that automatically reloads all your open browsers and devices whenever you change a file, and mirrors scrolling and clicks across them, making it easy to test a website on multiple screens at once.
BrowserSync is a development tool that keeps multiple browsers and devices in sync while you build a website. When you change a file, such as a CSS stylesheet or an HTML page, BrowserSync automatically reloads the page in every browser and device you have open at the same time. If you scroll or click in one browser, those interactions are mirrored in the others. This makes it easier to test how a site looks and behaves across desktop browsers, tablets, and phones without having to manually reload each one.
It works by injecting a small script into the pages it serves. That script connects each open browser back to a local server running on your machine and listens for change notifications. BrowserSync can serve a local folder as a simple static file server, or it can act as a proxy in front of an existing local development server so the sync features layer on top of whatever setup you already have.
The tool is installed via npm and is commonly used alongside build tools like Gulp or webpack. The README is brief and points to the project website at browsersync.io for a full list of features, configuration options, and integration recipes. The project is licensed under the Apache 2.0 license.
Where it fits
- Automatically reload a browser whenever you save a CSS or HTML file during local development.
- Test a website on a phone and desktop simultaneously with synchronized scrolling and clicks.
- Proxy an existing local development server to add live-reload on top without changing your setup.