Person mit Brain Box bekommt Idee
Lucas, Kiya | 14.08.2023

Understanding Changes Tab in DevTools

Web > Understanding Changes Tab in DevTools

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.

image

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.

Content
  • What is the purpose of the Changes tab in DevTools?
  • How to access the Changes tab in DevTools?
  • Can changes from the DevTools be saved directly to the project?
Lucas Meurer
Lucas (Softwareentwickler)

... ist mit Leib und Seele vielseitiger Full-Stack-Entwickler am Standort Hannover. Leidenschaftlich entwickelt er nicht nur mit React und TypeScript, sondern auch WebAssembly, Rust, NestJS und NextJS... mehr anzeigen

Github
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund