How to view the Scss's @debug result in vscode or in browser dev tools?

Question

How can I watch @debug result in scss?

I'm using the Live Sass Compiler by Glenn Marks in VSCode. Is there a way I can see the debug output in the terminal or chrome console?

Code example:

@debug 'hello world';
@debug math.div(10, 3);

Answer 1

Yes, you just need to set showOutputWindowOn to Debug. You can see details in the settings

Answer 2

More specifically (as from another answer pointed out); (in multiple diff ways)::

• |-| ctrl+shift+p > Preferences: Open Settings (UI) (workbench.action.openSettings2) > Workspace > Live Sass Compile > Settings: Show Output Window On > Debug

• |-| ctrl+shift+p > Preferences: Open Workspace Settings (JSON) (workbench.action.openWorkspaceSettingsFile) > paste "liveSassCompile.settings.showOutputWindowOn": "Debug"

• |-| ctrl+shift+p > exec liveSass.command.showOutputOn.debug

• |-| (or you may use comments as an output, as a workaround...)

Reference::

answer above

https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md#livesasscompilesettingsshowoutputwindowon

https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md#livesasscommandshowoutputon

https://github.com/ritwickdey/vscode-live-sass-compiler/issues/234#issuecomment-762474594 (outdated?)