Skip to main content
CSS is fun and cool and I like it.

#174: Using Local Overrides in DevTools

There is a feature of Chrome DevTools that lets you:

  1. See the code of any given resource the current web page is using (like CSS and JavaScript).
  2. “Pretty Print” it (format it for readability)
  3. Save it to disk
  4. 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 … Read article “#174: Using Local Overrides in DevTools”


Using DevTools to Improve the UX Design to Development Process

I’d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it’s a required skill, but because even a baseline understanding of coding can make designs better and the hand-off from design to development smoother.

As a UX Designer, I am always looking for good ways to both explore my UX design problems and communicate the … Read article “Using DevTools to Improve the UX Design to Development Process”


Firefox DevTools WebConsole 2018 retrospective


DevTools for Designers

This is such an interesting conversation thread that keeps popping up year after year. The idea is that there could (and perhaps should) be in-browser tooling that helps web designers do their job. This tooling already exists to some degree. Let’s check in on perspectives from a wide array of people and companies who have shared thoughts on this topic.… Read article “DevTools for Designers”


How to stop using console.log() and start using your browser’s debugger


Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad)


What do we call browser’s native development tools?

You know, that panel of tools that allows you to do stuff like inspect the DOM and see network requests. How do the companies that make them refer to them?

I think it’s somewhat safe to generically refer to them as DevTools. Safari is the only browser that doesn’t use that term, but I imagine even die-hard … Read article “What do we call browser’s native development tools?”


“View Source” in DevTools

When the conversation about the value of “View Source” rolls around, the #1 response I hear is along these lines:

No way, Jose! I use View Source all the time! It’s very useful when you want to look at the raw HTML, not the DOM.

Yes, that is useful, and yes, there is a difference. But just because you are looking at DevTools doesn’t mean the DOM is the only thing you can see.… Read article ““View Source” in DevTools”


View Source

I remember seeing this Tom Dale tweet a while back. It’s literally about the browser’s ability to look at the HTML of the document you’re looking at as it first arrived. Now the tweet is stirring up a new round of conversation.… Read article “View Source”


Inspecting Animations in DevTools

I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could’ve hoped: it lets you control and manipulate CSS animations and visualize how everything works under the hood.… Read article “Inspecting Animations in DevTools”