如何在 Chrome 中编辑仅在拖动某些内容时出现的 CSS 类？答案

【问题标题】：How can I edit a css class in Chrome that only appears when I drag something?如何在 Chrome 中编辑仅在拖动某些内容时出现的 CSS 类？
【发布时间】：2015-06-04 14:43:59
【问题描述】：

在我的网站项目中，元素只有在我将某些东西拖到它上面时才会改变样式。它通过向它添加一个 CSS 类来做到这一点。

问题是我很难编辑这种风格，因为我无法在 Chrome 中实时编辑它。我必须编辑文件，重新加载网页，然后拖动一些东西来查看更改。

有没有办法在 Chrome 中做到这一点？最神奇的是，如果有某种方法可以冻结我的拖动，然后能够进行编辑。有什么接近的吗？

【问题讨论】：

先把样式放在静态元素上....然后当你满意的时候再在可拖动元素上使用样式....？

标签： css angularjs google-chrome-devtools

【解决方案1】：

试试这个技巧：

在谷歌浏览器控制台中输入你想测试该类的任何时间

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

如果我必须点击我想拖动的项目，我的最后一次点击怎么能在检查器中？
这能帮上忙吗？：stackoverflow.com/questions/7540379/inspect-helper-clone