Categories
Applications Coding Design

Two more Firefox Dev Tools tips for inactive CSS and tracking changes you make

If you spend a fair amount of your time in your browser’s page inspector examining and tweaking CSS, then you’ll probably find these two sets of features in the Firefox Page Inspector to be really helpful.

Track changes you make

Firefox Developer Tools offers a great way to track CSS changes we make while testing CSS solutions for users. Here’s a terrific video that explains how to use this awesome tool:

You can also find information about this in the MDN documentation, here.

Identify and understand inactive CSS

I came across another useful feature of the Firefox Page Inspector. From Firefox 70 (launched in the last few days), you can now see not only which CSS code is inactive, but also why 😲. Here’s an example:

I haven’t encountered this in practice just yet, but I can already see the explanations to be enormously useful. The links in the pop-ups will take you to the excellent MDN web docs for more information.

You may also want to watch this video explanation too:

Both of these sets of features are really useful!

Categories
Applications Coding Design

The Chrome browser inspector has a very cool feature

I primarily use Firefox Developer Edition as my day to day browser. I use the excellent Firefox page inspector several times a day to troubleshoot issues for our customers, and write CSS for a variety of tweaks on sites that I use.

As much as I enjoy using the Firefox page inspector, I noticed a feature in the Chrome Dev Tools that I really like, and would love to see introduced to Firefox. It’s bit like a heads-up display that’s very helpful for seeing an element’s styles at a glance.

If I select an element in Firefox, I see fairly basic information about the element such as the element’s dimensions, and the type of element it is, like this:

Selecting an element in the Firefox page inspector

On the other hand, when I select the same element using the Chrome page inspector, I see more information about the element, like this:

Selecting an element with the Chrome page inspector

Chrome provides not only information about the image’s dimensions, and the type of element it is, but also other useful information such as the font color, style, and margins (in this case).

Even though I can see all the details of the element in each browser’s inspector panel, this extra information when I select an element is a really nice touch.

unsplash-logoFeatured image by Abby Anaday
Categories
Applications Useful stuff

Screenshots from my browser console? Oh Firefox, you spoil me!

This is awesome, particularly the ability to screenshot specific elements using element-specific flags:

Firefox DevTools has now added a screenshot command, so you can take screenshots directly from the Console

Categories
Applications

Oh Firefox, You Little Resource Hog

I love using Firefox as my primary browser. I prefer using it for a variety of reasons. Lately, though, I’ve noticed that it’s become a bit of a resource hog, and I can’t work out why? I’ve disabled add-ons that I don’t need, and it still uses about 1.4GB of RAM at a minimum for pages that Chrome uses a quarter of RAM for.

Has something changed in Firefox’s architecture? One thought I had is that maybe this has to do with something like page pre-fetching (I think Firefox does that), or something along those lines. I want to sort this out. Chrome seems to be so much better at resource management at the moment.

Update (2018-03-18): Mozilla shared this page to help troubleshoot Firefox memory issues: Firefox uses too much memory (RAM) – How to fix | Firefox Help

Photo by ideadad on Unsplash

Categories
Design Social Web

A little Firefox nostalgia

The Firefox 3 robot
The Firefox 3 robot declares victory. Design apparently by Nobox.

I’ve started using Firefox a lot more lately. The browser feels like a new beast lately, especially Firefox Nightly which I started using because of the CSS Grid Inspector tool.

Firefox 55 was released on the stable channel yesterday and it is also pretty snappy. Chrome is starting to feel a little sluggish by comparison (although it’s possible that I’m imagining it).

I found myself thinking back to the marketing campaign for Firefox 3 back in 2008 (I think). At the time, Firefox wasn’t on its current 6-8 week release cycle so developments took a bit longer.

For some reason, Firefox 3 was a big deal back then. I don’t remember why but I do have a vivid memory of the robot imagery that Mozilla used to publicise the release. I found this image on Flickr earlier this afternoon.

Almost a decade later, there is still something about this robot imagery that I love.

Firefox making moves on Chrome

If you’re curious about this “new” Firefox that people are talking about lately, you may find this article interesting:

It’s tempting to just dismiss this browser as a “has been” and stick with Chrome. Chrome is a great browser and dominates the Web. Still, I think having a spunky challenger with a strong focus on an inclusive and open Web is important.

Just as it successfully challenged Internet Explorer back in the day, Firefox could help keep Chrome in check where it counts.

Categories
Applications Tutorials

One of the weirdest Firefox unboxing videos ever!

When it comes to unboxing videos, this Firefox unboxing video is the weirdest I’ve ever seen!

I have Firefox set as my default browser on my work laptop, primarily for performance reasons: Chrome is just too heavy for my somewhat underpowered Lenovo laptop, even running Ubuntu Linux.

Categories
Applications Policy issues

The web was built by hand

I’ve been a Firefox fan since Firefox was in pre-1.0 beta. Even though it isn’t my primary browser at the moment (wait 5 minutes, my defaults can change without notice), I still love what it stands for and the work the Mozilla Foundation is doing. This video nicely encapsulates that mission:

I love this idea that the web was built by hand (which, if you think about it, it was). Firefox may not be the hot browser right now but it is largely the reason why we have a more open web today.


Photo credit: Lego Firefox by Johnathan Nightingale, licensed CC BY-SA 2.0

Categories
Applications

Removing the annoying blinking cursor in Firefox

One of the reasons I stopped using Firefox as my primary browser was something pretty small, but annoying: a seemingly random cursor on the screen. I couldn’t work out how to stop it from appearing when I clicked on the screen until I found this forum post titled “Firefox shows a blinking “edit” cursor in the body of all websites when I click” –

Clicking a button within a webpage puts a blinking text cursor in the body of the site, as if editing a Word document. It’s not causing any other problems besides being really annoying and distracting, but it only just started today. I’ve tried restarting Firefox with add-ons disabled, as well as reinstalling Firefox clean.

Fortunately the solution turns out to be pretty simple:

This is likely caused by switching on caret browsing and you can toggle caret browsing on/off by pressing F7 (Mac: fn + F7).