CSS Mirror Editing: Known Issues and Feedback

[flynnolivia]

CSS mirror editing is an experimental feature that automatically applies changes made in the DevTools panel to CSS files in your workspace. See the GIF below for a small demonstration!

Enabling CSS Mirror Editing This feature is available starting in v1.3.1. To enable CSS mirroring you will need to target Canary (Settings->Browser Flavor->Canary), then look for the "CSS Mirror Editing" section in the sidebar after opening the DevTools.

This issue is a central location where we will collect:

• Known issues/bugs
• Typical workflows surrounding this tool (i.e., how do you use this tool, or how would you like to be able to use it?)
• Other feedback / suggestions to improve the feature

[codepo8]

The mirroring explanation and button also shows up when Canary isn't the browser flavour and doesn't work. We should check the version number and only light it up when an Edge of the right version is used as the target.

[mok-liee]

oh my god 😱 i actually have to sleep but still briefly browse the web and see THIS. wow, i'll test it out tomorrow right away! but i want to get rid of my questions now. all questions that are answered with no are automatically feature requests:

• [ ] does it work with bundler like webpack? (cause the output css is not everytime the src css/scss)
• [ ] is there a plan for firefox and chrome support?

thank you so much 🙏🎉

[Steve6030]

What am I doing wrong that I don't have the option for css mirroring?

VS Code: Version: 1.60.2 Commit: 7f6ab5485bbc008386c4386d08766667e155244e Date: 2021-09-22T11:59:27.195Z (1 day ago) Electron: 13.1.8 Chrome: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Darwin x64 21.1.0

Microsoft Edge Version 93.0.961.52 (Official build) (x86_64)

Microsoft Edge Tools for VS Code v1.3.1

Thanks in advance!

[codepo8]

What am I doing wrong that I don't have the option for css mirroring?

Microsoft Edge Version 93.0.961.52 (Official build) (x86_64)

Thanks in advance!

Hi there, currently this only works with a newer version of Edge. You need to set the target of the extension to "Canary" in the settings and get a Canary version. Once stable hits 96, this will not be needed any longer.

[mok-liee]

Hi, my css is not reflecting to the src :(

i am using:

• Edge Browser: Version 96.0.1025.0 (Offizielles Build) canary (64-Bit)
• Microsoft Edge Tools for VS Code v1.3.1
• vscode 1.60.1

my launch.json is like:

    {
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "request": "launch",
      "type": "vscode-edge-devtools.debug",
      "url": "http://localhost:3000"
    }

and my settings.json is like:

  "vscode-edge-devtools.browserFlavor": "Canary",
  "vscode-edge-devtools.pathMapping": {
    "/": "${workspaceFolder}\\frontend"
  },
  "vscode-edge-devtools.mirrorEdits": true

the browser is launching, dev tools are running in vscode, if i click on a class in dev tools the src scss is opening in vscode but every change that i made in the devtools are not reflecting to the scss file.

what can i do more?

[codepo8]

the browser is launching, dev tools are running in vscode, if i click on a class in dev tools the src scss is opening in vscode but every change that i made in the devtools are not reflecting to the scss file.

what can i do more?

Hey there, SCSS is currently not supported, the mirroring only works with plan CSS files. We're working on it but we're hitting some issues with going backwards on the transpilation.

[omarragab1219]

VS Code Version: Version: 1.60.2 (Universal) Microsoft Edge Version 94.0.992.31 (Official build) (x86_64) macOS Big Sur

when i run my index.html file on localhost:8080 for example and try to edit the CSS in the dev tools, the extension properly tracks my location within the CSS file(highlights the correct area) BUT it does NOT edit anything in my CSS file as I change things within the dev tools(yes i checked that css mirroring was enabled in settings and in the sidebar). (also stable and default are the only settings that let me launch an instance without an error).

[viswatejavissamsetty]

Hi Team, This feature was so nice but its not changing style parameters for frame works like React and Angular. Will you please update it to work smoothly with frameworks like react and Angular. Thanks.

[Enteleform]

I want to set vscode-edge-devtools.mirrorEdits to false, but when I reload VSCode, it automatically gets reset to true.

[o-t-w]

I tried using this in conjunction with the Live Preview extension (also from Microsoft) by navigating to http://127.0.0.1:3001/ in the newly opened Edge tab but my CSS changes never appeared inside the editor. This is using a plain .css file referenced in a link tag in a index.html

[codepo8]

I tried using this in conjunction with the Live Preview extension (also from Microsoft) by navigating to http://127.0.0.1:3001/ in the newly opened Edge tab but my CSS changes never appeared inside the editor. This is using a plain .css file referenced in a link tag in a index.html

These are two different extensions that's why it doesn't work. You need to install the Edge DevTools extension and start the browser from there to get this functionality. We're considering working with the live preview extension soon.

[chozze]

Once running local server in WSL and mapping the CSS source files into \wsl$ project folder, it does not work. Am I right to conclude, it's not compatible with project files under WSL?

[dev-bjoern]

I am using styled components inside jsx files. Any hope to get that working there?

[vanowm]

Love this feature. Unfortunately it's constantly loosing connection, I have to refresh within the browser to get it restored which also not 100% proof. But that is not the worst of the problems, the worst offender is that it corrupts CSS files when enabling/disabling an item, it randomly inserts end of a comment blah */ next to the line it modified, so I constantly have to monitor with jshint, which shows when file gets corrupted. Again, this happens randomly and from what I could tell after a long time using VSCode (an hour or so). Restarting the browser usually helps for a bit, but restarting vscode itself helps for much longer time.

My launche.json:

{
  "name": "Launch Edge",
  "request": "launch",
  "type": "pwa-msedge",
  "url": "http://localhosts/experiments/tcone/",
  "webRoot": "${workspaceFolder}",
  "outputCapture": "console",
  "console": "internalConsole",
  "attach": "restart",
  "restart": true,
//   "trace": true,
  "sourceMap": false,
  "runtimeArgs": [
      "--auto-open-devtools-for-tabs"
  ]
},

Visual Studio Code

Version: 1.61.2
Electron: 13.5.1
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
Edge: 95.0.1020.30 (Official build) (64-bit)
OS: Windows_NT x64 10.0.19043

[KillDozerX2]

Any updates on sass support?

[ak5k]

WSL

Also having problems with projects running in WSL.

Even when project root is set to corresponding Windows filesystem path in Edge developer tools workspace settings, VSCode still tries to open files for Mirror editing through URL (e.g. http://localhost:8080/index.html), when running in WSL.

Following this guide in Microsoft Edge DevTools Extension docs. This works as expected in non-WSL environment.

[billie-spektor]

Any updates on the issue reported by @Enteleform with regards to not being able to turn off this feature permanently? I have the same problem. "vscode-edge-devtools.mirrorEdits" resets to true when reloading the vs code window.

[imranisdev]

Does this work with React?

[codepo8]

Does this work with React?

There is a pinned issue about this - if you create Sourcemaps, it should work.

[chadmoore]

Is this supposed to work w/ WSL at this point?

[m-salman-afzal]

Just started today with HTML/CSS. Not working with WSL.

[flyyuan]

Does this work with postcss?

[henrikvilhelmberglund]

It would be nice if this extension could disable autosave with afterDelay while editing CSS with mirror editing enabled because it seems like this combination doesn't really work, I had to disable autosave or my edits would get deleted instantly.

[codepo8]

It would be nice if this extension could disable autosave with afterDelay while editing CSS with mirror editing enabled because it seems like this combination doesn't really work, I had to disable autosave or my edits would get deleted instantly.

Could you explain what you mean by AutoSave? CSS Mirroring as it stands does not automatically save the file, it just modifies it. Could it be that you are using live server or other extensions that do the live reload and save of the file instead?

[henrikvilhelmberglund]

It would be nice if this extension could disable autosave with afterDelay while editing CSS with mirror editing enabled because it seems like this combination doesn't really work, I had to disable autosave or my edits would get deleted instantly.

Could you explain what you mean by AutoSave? CSS Mirroring as it stands does not automatically save the file, it just modifies it. Could it be that you are using live server or other extensions that do the live reload and save of the file instead?

I'm using the native (I think) autosave feature in VS Code, the thing you find when searching for autosave in the settings. If you enable it and change the type to afterDelay and the delay to 400ms VS Code will just save after 400ms which doesn't really work with CSS Mirroring because it seems like it expects you to not save the file while you're editing in Edge Devtools. For example just setting a background color in Edge Devtools and clicking the color picker and quickly selecting a few different colors will desync the mirroring (until you go back to the stylesheet itself and give it a new value and save).

I changed it to onFocusChange instead and it works better but it's still possible to break if you click around a lot. Not really sure how to explain it but I hope this helps!

[captainbrosset]

Closing this issue which has now served its purpose I think. We can always come back to it later if needed.

[lopugit]

Oh damn yo impressive 🤤🤤🤤