Lmst

FirefoxDevTools boosted:

We had fun squashing bugs in DevTools in Firefox
132, get the details in https://fxdx.dev/firefox-devtools-newsletter-132/

#webdev #css #serviceworker #a11y

We had fun squashing bugs in DevTools in Firefox
132, get the details in https://fxdx.dev/firefox-devtools-newsletter-132/

#webdev #css #serviceworker #a11y

@andy_blum it's a bit hard to tell like that, which keyboard shorcuts are not working?

FirefoxDevTools boosted:

TIL Firefox debugger can edit JavaScript files

I’ll spare you the long story of why I had to edit a JavaScript file, but today I learned that since Firefox 128 you can add a script override in the browser Debugger Panel. This downloads the JavaScript file in question, where you can edit it with your favourite editor.

https://odd.blog/2024/11/11/til-firefox-debugger-can-edit-javascript-files/

A context menu is open with the option "Add script override" selected.
The file highlighted is jetpack-boost.js located in a folder structure under app/assets/dist.
Other options in the menu include "Copy source URI," "Ignore source," and "Download file."

A context menu is open with the option "Remove script override" selected.
The file highlighted is jetpack-boost.js located in a folder structure under app/assets/dist.
Other options in the menu include "Copy source URI," "Ignore source," and "Download file."

The image shows a cat sitting comfortably on a black office chair. The cat has a tabby coat with a mix of brown, orange, and black markings, and it is looking directly at the camera with bright green eyes. The chair appears to be slightly worn, especially on the seat, which shows some signs of use. The background consists of a stone or brick wall, suggesting that the setting might be either outdoors or in an industrial or rustic indoor space. There is also a red and black striped fabric visible to the left side of the image. The overall scene gives off a cozy and relaxed vibe, with the cat being the focal point of attention.

FirefoxDevTools boosted:

Firefox 131 was released this week and we're really excited because it comes with new superpowers for debugging CSS variables and other Inspector improvements:

https://fxdx.dev/firefox-devtools-newsletter-131/

#css #webdev

Firefox DevTools Inspector rules view, showing a variable tooltip whose declaration value is `light-dark(hotpink, var(--primary-color))`. A computed value section has the following text in it `rgb(255, 105, 180)`. Below it is a `@property` section, describing the variable registered property information.

Firefox 131 was released this week and we're really excited because it comes with new superpowers for debugging CSS variables and other Inspector improvements:

https://fxdx.dev/firefox-devtools-newsletter-131/

#css #webdev

Firefox 131 is out with WebDriver BiDi updates!

We added support for the remaining arguments (cookies, headers, status codes, and reason phrase) in the `network.continueResponse` command. Plus, several bug fixes to enhance navigation: https://fxdx.dev/firefox-webdriver-newsletter-131/

#WebDriverBiDi #Testing

FirefoxDevTools boosted:

I've had this image forever, and I refer to it all the time.

For some reason, even with all the CSSing I do, I continuously forget which parts are called what. Thank you, kind JPG, for reminding me!

#css

A "cheat sheet" image describing every part of a CSS ruleset.

FirefoxDevTools boosted:

Servo now supports devtools again!

Thanks to eri, our latest Outreachy intern, you can now inspect the DOM tree, view styles, evaluate JavaScript, and read console messages.

Run servoshell with --devtools=6080 and connect via about:debugging in Firefox.

More details → https://servo.org/blog/2024/09/20/devtools/

On the left, it shows the DOM inspector with the tree view, CSS list and computed properties views. On the right is servoshell with servo.org opened.

Developer JavaScript console that shows commands and their results

Short and sweet, here's what's new in #Firefox DevTools 130: https://fxdx.dev/firefox-devtools-newsletter-130/

There's a lot happening behind the scene that we'll talk about in the coming posts!

#webdev #javascript #debugging

@ArneBab we still don't know to which instance we'll go, but we'll definitely still be on Mastodon!

FirefoxDevTools boosted:

🚀 Exciting news! #mozilla #firefox is proud to sponsor the #WeLoveSpeed 2024 Conference – the ultimate event for all things #WebPerformance, happening next Tuesday in beautiful Nantes, France 🇫🇷.

To celebrate, we’re giving away 1 FREE ticket 🎟️ and two 20% discount coupons 🎉 to the first three lucky folks who reply to this message! Don’t miss your chance to be part of this amazing event! ✨

Good luck! 🍀

@mozilla @WeLoveSpeed
https://www.welovespeed.com/

🚀 Firefox 130 is here! It brings WebDriver BiDi updates, including `browsingContext.navigationFailed` support, better network event handling, and more.

Check it out: https://fxdx.dev/firefox-webdriver-newsletter-130/

#WebDriverBiDi #webdeveloper

FirefoxDevTools boosted:

#tinyCSStip Want to look inside various inputs, see how they're styled and maybe even change those styles?

✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM

✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true

#DevTools #Chrome #Firefox #CSS #code #coding #frontend #HTML #web #webDev #webDevelopment #dev

Screenshot of Chrome DevTools Settings, the Elements section under the Preferences tab. Shows the "Show user agent shadow DOM" option being checked.

Screenshot from about:config in Firefox. Shows the devtools.inspector.showAllAnonymousContent flag set to true.

Chrome DevTools screenshot. Shows inspecting an `input[type=number]` with the setting from before. Inside it we can see its shadow DOM, which includes a pseudo `::-webkit-inner-spin-button` (contained inside another pseudo, `-webkit-textfield-decoration-container`) with the following styles set on it:

```
input::-webkit-inner-spin-button {
appearance: auto;
display: inline-block;
cursor: default;
align-self: stretch;
opacity: 0;
pointer-events: none;
-webkit-user-modify: read-only !important;
flex: 0 0 auto;
}
```

We can also see the shadow DOM of an `input[type=color]`, which has inside a pseudo `::-webkit-color-swatch-wrapper`, which in turn contains another `::-webkit-color-swatch` component.

Firefox DevTools screenshot. Shows inspecting an `input[type=number]` with the setting from before. Inside it we can see its shadow DOM, which includes a `::-moz-number-spin-up` pseudo (contained inside another pseudo, `::-moz-number-spin-box`) with the following styles:

```
input[type="number"]::-moz-number-spin-up, input[type="number"]::-moz-number-spin-down {
writing-mode: horizontal-tb;
appearance: auto;
-moz-default-appearance: spinner-upbutton;
display: block;
flex-grow: 1;
cursor: default;
}
/* inherited from its parent */
input[type="number"]::-moz-number-spin-box {
writing-mode: horizontal-tb;
}
```

We can also see what's inside an `input[type=color]` - a `::-moz-color-swatch` pseudo.

FirefoxDevTools boosted:

Following up on this, on @FirefoxNightly, in @FirefoxDevTools the variable tooltip values are parsed similarly as we do in the Rules view, so it can help you, for example seeing that a variable is not set and that the fallback is used, and/or quickly see which color is returned by `light-dark()` ⚡️

This should ship in 131, which is in Beta/DevEdition next week!

Firefox DevTools rules view focus on a single declaration: `outline-color: var(--page-nav-button-outline)`.
A tooltip is displayed, pointing to the `var()`; it has 2 sections:
- the top one has the following text: `var(--unset, var(--page-nav-button-text-color))`. The `--unset` is struck through and has a gray color, while the second parameter of the var function has syntax highlighting
- below it, a computed value section, with the following: `light-dark(#1514a, #fbfbfe)`. This time, the first param is syntax highlighted, while the second one is struck through, and has a gray color.

FirefoxDevTools boosted:

With the following CSS:

```css
--a: var(--b);
color: var(--a, gold);
```

Hovering `var(--b)` in @FirefoxDevTools and Chrome DevTools show that `--b` is not set.
Hovering `var(--a)`, Firefox shows the declaration value, `var(--b)`, and will indicate that the computed value is an empty string, but it doesn't tell the whole story, you can't tell if `--b` is not set, or if it's an actual empty value.

Should we embrace spec language and say that `--a` is guaranteed invalid or is that too obscure?

@thedansimonson I shared our conversation with the Firefox for iOS team, hopefully things can be improved

@thedansimonson hello, we're not the right team to ask I'm afraid. I don't have an iPhone so I can't test, but I asked around and there should be a menu to open in a new tab (see screenshot)
If the link is long and the screen is small it can push the context menu off the screen, you can scroll it back on but it’s not obvious it’s there.
Could you share a screencast so we can see what happens for you?
If you can and have time, filing an issue on https://github.com/mozilla-mobile/firefox-ios/issues would be helpful

FirefoxDevTools boosted:

the debugging manifesto poster I've been talking about is finally available for sale! You can get it here for $20 US + shipping: https://store.wizardzines.com/products/poster-debugging-manifesto

it was redesigned and riso printed by Inner Loop Press and I'm SO delighted with how it turned out (https://www.innerloop.press/)

a debugging manifesto poster, risograph printed, neon pink and blue

* inspect, don’t squash
* being stuck is temporary
* trust nobody and nothing
* it’s probably your code
* don’t go it alone
* there’s always a reason
* build your toolkit
* it can be an adventure

Now in #Firefox DevTools 129: massive performance improvements, @starting-style support and accessibility fixes:

https://fxdx.dev/firefox-devtools-newsletter-129/

#webDev #CSS #webperf

Client Info