如何在 chrome devtools 中检查我的 css 更改

如何解决如何在 chrome devtools 中检查我的 css 更改

我在开发工具中为多个元素更改了 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 的页面可能会有所帮助。