如何编辑Chrome中仅在我拖动内容时出现的css类？

Question

在我的网站项目中，当我在其上拖动某个元素时，元素只会改变样式。它通过向其添加CSS类来实现此目的。

问题在于我很难编辑此样式，因为我无法在Chrome中对其进行实时编辑。我必须编辑文件，重新加载网页，然后拖动一些内容以查看更改。

有没有办法在Chrome内部执行此操作？最奇怪的是，如果有某种方式冻结我的拖动然后能够编辑。有什么关闭？

Answer 1

• 浏览所需的页面
• 打开控制台（F12）
• 在Chrome检查器中选择“SOURCES”选项卡
• 拖动元素
• 点击F8冻结（如果您点击了实际页面F8上的任何位置 什么都不做，你的最后一次点击需要在检查员的某个地方，比如来源标签）
• 返回检查员
中的元素标签
• 它现在应该嵌套在触发元素的html
中

Answer 2

尝试这个技巧：

在您想要测试该类

的任何时候，在Google Chrome 控制台中输入

var elm = document.getElementById('yourElementId'); elm.classList.add('yourClassToTest');

（请注意：如果您想在Google Chrome控制台中创建新的换行符，则必须按SWIFT + ENTER）

此时您已在div上添加了要测试的课程。 只需使用Web检查器，即可更改/检查任何CSS属性。

此解决方案可让您避免手动拖动某些内容以查看您的课程/更改。