VSCode 有没有自动 Toggle 注释的插件？

[JCZ2MkKb5S8ZX9pq]

使用场景

• CSS 文件调试，需要经常切换一些描边或者背景色来判断位置，搞完再注掉。
• 其他文件调试，比如临时输出点信息啥的。虽然好的规范是 log 打好点，但实际场景中还是很多临时的情况。

设想的解决方案

• 比如某行带上一个行尾注释，比如//debug or #test，就有个插件可以自动 toggle 这行的注释。
• 或者其他的标记方法，比如类似 bookmarks 插件的那种。

[14]

这个插件很接近作者需求，可惜只支持 console.log ，可以用快捷键添加、批量注释、批量删除
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

[limaofeng]

通过 css 标颜色定位元素不是一个好习惯，还是多用浏览器的调试界面吧！
至于 JS 调试，我用过最方便且强大的插件是 Wallaby.js ，它可以不是通过添加 log 实现变量查看，加注释就可以了，结果是在 vscode 里面直接看到。不过这玩意收费，价格还不便宜。

[s]

control+/ ?

[JCZ2MkKb5S8ZX9pq]

@limaofeng
简单的 CSS 根本不用看，盲写都行。
需要的都是很复杂的多条件嵌套的场景。
比如动画，比如不可见区域的嵌套，不可见区域的嵌套加动画，面板多状态下的子组件形态变化，等等。

[JCZ2MkKb5S8ZX9pq]

@14 谢了，我去试试，js 的也需要的。

[JCZ2MkKb5S8ZX9pq]

@14
其实前端调试有一个简单的 chrome 插件是
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi

原理是添加 outline （不占空间）和 hover 的 box-shadow ，但美中不足是不支持伪类。
有兴趣可以试试