Today, let us delve deeper into an extremely handy tool for web developers - the Changes Tab in Chrome DevTools. This feature proves to be beneficial while editing CSS directly from the DevTools. It offers a quick method to test things and identify optimal values.
With minimal modifications, say to a single class or value, tracking these changes is straightforward. However, managing and implementing the changes in the code becomes challenging when we trial larger modifications.
That's where the Changes Tab in your DevTools comes to your rescue. This tab keeps an accurate record of everything modified through the DevTools.
How can you access this nifty feature? Simply hit Cmd+Shift+P while you are in DevTools and look for "changes" in the prompted search.
Learn more about the Changes tab on the official Chrome DevTools documentation.
This feature also allows the possibility to directly save your changes from the DevTools to your project, subject to your project setup. This ability can exceptionally streamline your web development workflow. Learn more about this here.
However, worth noting, such a setup did not prove beneficial for my nextjs project.
Stay tuned for more such insights that can boost your development workflow manifolds.
