Devtools on Brandon Pugh's Blog

Clear site data

Thu, 27 Jun 2024 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Chrome devtools ignores form resubmission

Wed, 12 Jun 2024 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Penpot

Wed, 22 May 2024 00:00:00 +0000

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/

Thank you for keeping RSS alive. You're awesome.

Reply by email

Locally test on old version of Chrome

Mon, 20 May 2024 00:00:00 +0000

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. Then you download and extract the zip file and run the single executable, i.e. chrome.exe.

Thank you for keeping RSS alive. You're awesome.

Reply by email

sourceURL pragma

Mon, 29 Jan 2024 00:00:00 +0000

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/

Thank you for keeping RSS alive. You're awesome.

Reply by email

Local overrides in Chrome DevTools

Mon, 11 Dec 2023 00:00:00 +0000

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.

https://developer.chrome.com/docs/devtools/overrides

Thank you for keeping RSS alive. You're awesome.

Reply by email

Toggle CSS classes in Devtools

Fri, 13 Oct 2023 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Emulate page focus

Mon, 28 Aug 2023 00:00:00 +0000

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.

This post shows several other techniques you could potentially use but I found this option to work best for my scenario.

My favorite technique is this clever javascript snippet you can run from the console:

setTimeout(function () {
  debugger;
}, 3000);

Thank you for keeping RSS alive. You're awesome.

Reply by email

Find all CSS changes in Chrome DevTools

Tue, 15 Aug 2023 00:00:00 +0000

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

One caveat I’ve noticed is that it doesn’t show styles you’ve added directly to an element as an inline style.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use the Chrome devtools recorder to automate UI testing

Tue, 11 Jul 2023 00:00:00 +0000

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.chrome.com/docs/devtools/recorder/

Thank you for keeping RSS alive. You're awesome.

Reply by email