search

microsoft / vscode-edge-devtools

A VSCode extension that allows you to use browser devtools from within the editor. The devtools will connect to an instance of Microsoft Edge giving you the ability to alter CSS styling, perform diagnostics, and debugging. Get it now at http://aka.ms/devtools-for-code
https://docs.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension
MIT License
752 stars 256 forks source link

CSS Mirror Editing with Sourcemaps: Known Issues and Feedback #965

Open antross opened 2 years ago

antross commented 2 years ago

This issue is where we will collect feedback specific to using CSS Mirroring with source-mapped files. Support for mirroring edits across source maps is a follow-up for #476 that enables using this feature with languages such as SASS or with CSS which gets bundled during build. See CSS Mirror Editing with Sourcemapped files (Sass, React...) for more details and a demo of how the feature works.

Testing Pre-requisites:

Known Issues

  1. [ ] Changes to selectors are not mirrored back to the original source file.

  2. [ ] New properties added at the end of the block don't indent correctly if a source map entry exists for the closing curly brace } (webpack + sass-loader behavior).

  3. [ ] New properties added at the end of the block get inserted before the last property of the block if no source map entry exists for the closing curly brace } (default sass CLI behavior).

  4. [ ] Creating/editing property names to use invalid characters (e.g. `--`) can cause mapping to get out-of-sync.

  5. [ ] Inserting new properties into an empty block (e.g. after deleting all existing properties) inserts them before the selector if no source map entry exists for the closing curly brace } (default sass CLI behavior).

  6. [ ] Editing a selector in a single-line source block (e.g. .foo { color: #fff }) causes property edits in that block to be incorrect.

  7. [ ] Changes applied due to panel-level undo/redo (e.g. Ctrl+Z) don't get mirrored to original source (they do work if undoing while editing a property directly).

CubeBR commented 2 years ago

I'm not sure if it's the same subject, but is there a way to disable the synchronization of CSS between the dev tools and vscode? I use Chrome's Dev Tools a lot for testing, and this "feature" just broke half of my stylesheet and disappeared with the undo buffer along with it. Not to mention the lack of line breaks and organization which causes a terrible headache that didn't exist with a simple copy paste.

antross commented 2 years ago

@CubeBR if it's related to CSS without source maps there is a known issue with formatting that's affecting all Chromium-based DevTools (see this Chromium bug which was recently fixed). The fix should be in Canary soon. Formatting of source-mapped code is not affected by this issue.

We're generally tracking issues with non-source-mapped sync'ing in #476 but you can turn this off using the "Toggle Mirror Editing Off" button in the sidebar of the extension:

image