0

I change CSS in dev tools for several elements.

because of many changing, I forgot where I apply new value to elements.

Is there any function to check the difference from the original page?

example,,

<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>

For example, above HTML, I change many times for each element, and now I want to apply all changed values but due to too many changes, I lose my way to check the difference with my original CSS.

p.s. I use React and webpack, so More tools > Changes is not proper way to me

devstefancho
  • 2,072
  • 4
  • 17
  • 34

2 Answers2

0

You can go to Sources > YourCSSFile > Local Modifications...

Here you can see all changes you made in the chosen CSS file.

Also good to know: The "Local Modifications..." link only appears, if really changes were made to the chosen file.

JKD
  • 1,279
  • 1
  • 6
  • 26
  • I use Webpack, so there is no CSS file in my Source tab, In Source tab, there is only one single file which is main.css (that import all .scss and .less files). and I edit CSS directly to Elements-tab not to Source-tab – devstefancho Jan 25 '21 at 09:10
0

Since you are using Webpack to run css pre-processors, you can modify your Webpack config to create source maps for your css. This maps the generated css file to the scss/less files so that the devtools will show the pre-processed files. Then you can use the methods that have already been mentioned to see the changes in Chrome devtools.

Here's an example from the Webpack sass-loader docs of a Webpack config that enables source maps for sass/scss files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

The less-loader docs show how to configure source maps for less files, and it's basically the same.

You can also have Webpack generate source maps for your React code, which makes debugging a lot easier. Here's an answer to another question that shows how to set that up.

If you enable source maps, I recommend only enabling them in development, not production. The Webpack docs have pages about using environment variables in the config and setting up your config for development that might help.

Mxy
  • 1
  • 1