From 100ddfca08000c80cae0c44f54d7e032c98ebde7 Mon Sep 17 00:00:00 2001 From: Christian Heilmann Date: Fri, 29 Jan 2021 18:31:18 +0100 Subject: [PATCH] Added a section to the README to set up live reload on you project folder (#262) * added docs * code style --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index f5ada2fa..ee4c91f7 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,26 @@ You can now use the high-fidelity tools to tweak your CSS and inspect network ca ![Microsoft Edge Tools - Demo](basic_usage.gif) +#### Setting up your project to show live changes in the extension + +Out of the box the extension does not track live changes to the code you write. If you want the browser to automatically refresh when you changed a file, you need to set up a live reload environment. For this you need Node.js and npm on your machine. + +Say you have a folder with your production files on your hard drive called `my-project`. + +Preparation step: Install Node.js and the reload package + +* Download and install [Node.js](https://www.nodejs.org) (you only need to do this once). +* Install the [reload NPM package](https://www.npmjs.com/package/reload?activeTab=readme) + * Open command prompt and run `npm install reload -g` to install the package globally + +Attach the extension to your live reloading project + +* Navigate to your `my-project` folder in your command prompt and run `reload` +* Open VS Code and open the directory +* Go to the extension and launch an instance +* Navigate in the browser of the extension to `localhost:8080/{file name you want to open}` +* All changes that are saved in this folder now trigger a refresh + #### Opening source files from the Elements tool One of the features of the Elements tool is that it can show you what file applied the styles and event handlers for a given node.