Patrick Brosset

Read the full article at https://css-tricks.com/minding-the-gap/

Read the full article at https://blogs.windows.com/msedgedev/2021/09/14/edge-devtools-93-personalization/

Read the full article at https://www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/

A progressive web app sample to play Yahtzee.

A progressive web app sample that lets you import and visualize GPS track files (*.gpx).

I recently launched https://devtoolstips.org/ (and on twitter) and made it an open-source project that anyone is welcome to contribute to on the github repo.

Read the full article at https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/

Learn how devtools and blink engineers across Microsoft and Google collaborated to create CSS layout tools for all web developers out there.

Last year, a crew of engineers, designers and PMs got together across Microsoft and Google, and we worked together on adding tooling dedicated to CSS Grid and Flexbox.

I'm almost coming up to a year at Microsoft, and I thought now would be a good time to look back and talk about it a little.

Read the full article at https://medium.com/web-on-the-edge/how-we-built-the-devtools-tooltips-4e9933abbd8a

Do you ever find yourself trying stuff out until they work?

The console panel in your favorite browser's DevTools can be a very powerful ally when troubleshooting problems in a web app.

CSS variables (or custom properties, depending on how you prefer to call them) are really cool, and chances are, you're already using them in your projects.

Over the past 6,5 years, while working at Mozilla, I was involved in a lot of different projects related to Firefox DevTools.

Read the full article at https://blog.logrocket.com/when-css-doesnt-do-anything/

I had a wonderful time meeting with Mozilla Tech Speakers from all around the world and doing a workshop about the latest Firefox DevTools.

A Firefox DevTools addon that lets you find elements that match arbitrary CSS style queries.

In this short article, I am exploring the relationship between two CSS layout features: CSS Grid and CSS Multi-Columns.

Aligning things in CSS has been a common source of frustration, fun and even memes for a long time.

Quickly visualize and remember the different alignment properties in various CSS layout types.

Visualize the effect of justify-content, align-content and align-items in various flex directions and wrapping modes

Read the full article at https://medium.com/mozilla-tech/a-quick-history-of-firefox-devtools-620d3074b510

Lately I've been thinking more about the future strategy for Firefox DevTools, and so I decided to write this article.

Read the full article at https://hacks.mozilla.org/2017/01/devtools-what-you-need-to-know/

WIP of a baseline, text-top/bottom and line-height visualizer for inline elements (works mostly in Firefox Nightly)

Read the full article at https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/

Read the full article at https://hacks.mozilla.org/2016/11/visualize-animations-easing-in-devtools/

As a web developer, you don’t often spend time thinking about white space, right?

Concept for a CSS Filter editor user interface

Today, browsers come with built-in tools that allow to inspect and debug existing web content.

There’s a few ways you can measure elements or distances between elements in Firefox DevTools.

This is the French translation of Manuel Rego’s (@regocas) post “Deep Dive into Grid Layout Placement”, published on February 1st, 2016.

Read the full article at https://www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/

This is a tool that provides the in-between values as computed by a browser when animating CSS properties.

CSS animations and transitions are awesome, but they’re also hard to get right.

If you’re a web developer and you’re interested in open source projects and you commonly use browser devtools in your activities then you might want to read on.

In this article we'll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the light in some browsers.

Want a nice gradient background on your site?

Read the full article at https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

This is a visualizer tool for CSS linear-gradients.

Click and drag anywhere in the screen to create a linear-gradient background.

I wrote a couple of weeks ago about how browser devtools should be thinking about addressing the needs of designers and it looks like that post was right on time!

I have recently started this series of videos with the idea of showing how various features of the FirefoxDevTools could be used to break-down and understand how seemingly complex CSS animations were done.

Browser DevTools are pretty complex.

Assign sound URLs to the sampler buttons, and start remixing the web.

See how a given timing function influences a simple animation.

Visualize how box-shadow applies to an element in css.

Understand how css border-radius works with this interactive demo that lets you control the horizontal and vertical radii of all 4 corners of a box.

This tool allows you to experiment with CSS transforms by entering any transform expression and visualizing the result of that transform on an element.