问题描述
我在开发工具中为多个元素更改了 CSS。
因为很多变化,我忘记了在哪里对元素应用新值。
例如,
<div class='one'> hello </div>
<div class='two'> hello </div>
<div class='three'> hello </div>
<div class='four'> hello </div>
<div class='five'> hello </div>
<div class='six'> hello </div>
<div class='seven'> hello </div>
<div class='eight'> hello </div>
例如,在 HTML 上面,我为每个元素更改了很多次,现在我想应用所有更改的值,但是由于更改太多,我无法检查与原始 CSS 的差异。
附言
我使用 React 和 webpack,所以 More tools > Changes
对我来说不是正确的方法
解决方法
您可以转到 Sources > YourCSSFile > Local Modifications...
在这里您可以看到您在所选 CSS 文件中所做的所有更改。
也很高兴知道:“本地修改...”链接仅在对所选文件进行了真正更改的情况下才会出现。
,由于您使用 Webpack 来运行 css 预处理器,因此您可以修改 Webpack 配置来为您的 css 创建源映射。这会将生成的 css 文件映射到 scss/less 文件,以便 devtools 将显示预处理的文件。然后就可以使用已经提到的方法在Chrome devtools中看到变化了。
以下是启用 sass/scss 文件源映射的 Webpack 配置的 Webpack sass-loader docs 示例:
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,use: [
"style-loader",{
loader: "css-loader",options: {
sourceMap: true,},{
loader: "sass-loader",],};
less-loader docs 展示了如何为较少的文件配置源映射,基本相同。
您还可以让 Webpack 为您的 React 代码生成源映射,这使得调试更加容易。 Here's an answer to another question 显示了如何设置。
如果您启用源映射,我建议仅在开发中启用它们,而不是在生产中启用它们。 Webpack 文档中有关于 using environment variables in the config 和 setting up your config for development 的页面可能会有所帮助。