protip: if you need to clear out some saved data (like cookies) for a particular site, Chrome dev tools has a handy “Clear site data” function. You can get to it from the “Application” tab: or from the command palette which you can invoke with ctrl+shift+p: To me this is much more convenient than trying to go through the normal user settings for clearing There is also chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost
Today I learned that if you have the chrome devtools open, then Chrome will suppress the confirm form resubmission dialog: This threw me off for a minute because I couldn’t figure out how the page was maintaining the state when I would refresh after a post. I couldn’t find it documented anywhere but it’s a nice convenience during development though it could be confusing if you’re unaware of it.
I just heard about a promising new design tool called Penpot that positions itself as an open-source alternative to Figma. They recently added support for CSS grid layout which I’m looking forward to testing out. https://www.smashingmagazine.com/2024/04/penpot-css-grid-layout-designing-superpowers/
Today I learned that if you need to test in older versions of Chrome then you can download prior snapshots of Chromium builds as standalone executables. The tricky part is figuring out which build snapshot corresponds to which version of Chrome, which involves several steps detailed in the Chromium wiki. Fortunately, someone put together a site to lookup by Chrome version and link to the correct build on the archive site....
Today I learned that you can add //# sourceURL=<anything>.js special comment to an inline script tag to have it show up as a separate javascript file in the dev tools sources tab. This makes it a bit easier to work with especially when you have a huge inline script tag you’re dealing with. It even works with eval() too if you’re unfortunate enough to be dealing with that. https://devtoolstips.org/tips/en/name-evaluated-files/
Today I learned about the local overrides feature of Chrome Devtools that lets you “you can override HTTP response headers and web content, including XHR and fetch requests, to mock remote resources even if you don’t have access to them”. This came in handy for me when trying to debug an issue that I wasn’t able to reproduce locally. The official docs do a nice job showing how to enable the feature but just make sure you delete the override once you’re done otherwise you might wonder why the page has stopped updating....
Today I learned that the little .cls button in the Chrome devtools is a handy way to toggle classes on an element: I imagine the trend of using utility classes was the main motivation for this feature (although apparently it’s been there for a few years and I only just figured out what it was for).
Today I learned about a devtools feature that helped me debug the styling of an element that would disappear when the input element lost focus which happens when you click over to the devtools. If you press ctrl+shift+p to open the command palette in DevTools, and type “focus”, you’ll see a command to “Emulate a focused page” which will leave the focus on the element in the page even when you click into the DevTools....
Today I learned about the Changes tab in Chrome devtools. When you’re tweaking CSS styles in Chrome DevTools, you can see all the changes you’ve made by clicking the “Changes” tab in the bottom “drawer” in DevTools. It’s especially nice because you can then copy the changes to your clipboard and paste them into your actual source file. You can open it from the command palette (ctrl+shift+p) and typing “show changes”....
Chrome devtools has a pretty decent recorder feature that can record and playback your UI interactions. It’s currently in preview but it’s been working well for me so far. It’s especially handy if you have to keep repeating the same 5 steps every time you reload the page to test your code. It automatically waits for UI elements to load and it’s pretty easy to tweak the recorded steps and export as a puppeteer script: https://developer....