css-mirroring-sourcemaps-demo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Demo App for CSS Mirroring</title>
    <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Demo app to test sourcemap support of the VS Code Edge DevTools extension</h1>
    <img src="./logo.png" alt="The Microsoft Edge logo">
    <a>This is a basic app to test the sourcemap support for CSS mirroring in <a href="https://aka.ms/devtools-for-code">the Edge DevTools extension for Visual studio code</a>.</p>

    <img alt="screenshot of the app inside VS code" src="sourcemaps-demo.png">
    
    <p>To run the app and test the functionality follow these steps:</p>
    <ol>
    <li>Make sure you have the Microsoft Edge DevTools for Visual Studio Code extension installed</li>
    <li>Clone this repo or <a href="demo.zip">download the zip</a> of this app and unpack it</li>
    <li>Open the folder in Visual Studio Code</li>
    <li>Run `npm i` in the Terminal</li>
    <li>Run `npm start` in the Terminal</li>
    <li>Switch VS Code to "Run and Debug" and run "Launch Edge and Attach DevTools" (the project is already configured to use <a href="https://www.microsoftedgeinsider.com/download/canary">Edge Canary</a>, just make sure you have it installed)</li>
    <li>Start editing Styles in DevTools and watch them sync!</li>
    </ol>
    
    <p>We have an <a href="https://github.com/microsoft/vscode-edge-devtools/issues/965">issue open in the Extension repository</a> and we'd love to get your feedback there!</p>
    <script src="script.js"></script>
</body>
</html>