There is a feature of Chrome DevTools that lets you:
- See the code of any given resource the current web page is using (like CSS and JavaScript).
- “Pretty Print” it (format it for readability)
- Save it to disk
- Use that saved version to override the live version, even on page refresh.
That last one is pretty awesome. If you’re debugging a problem that only seems to happen on the live website, it gives you a debugging tool that will allow you to get at the root of the problem.
We’ll use that feature here to figure out a weird bug I was experiencing.
Taken to the extreme, you could potentially even use DevTools as your primary code editor, since it’s capable of mapping files back to where your actual project is on disk.
