Monday, Monday, Monday, open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node module, barbecue tips, get workflows, breakdancing, soft skills, web development, the tastiest, the craziest, the tastiest web development treats. Coming in hot, here is Wes, Maracuda, Boss, and Scott El Toro Loco Tolinski. Welcome to Syntax in this Monday Tasty Treat.
We're going to be talking about that Firefox, the Firefox that we know and love. It's the browser that Wes and I have been using for quite some time now just to really just acclimate ourselves into the world of Firefox and really talk about how it's changed our development workflows and everything over the course of the past month or so. My name is Scott Tolinski. I'm a developer from Denver, Colorado, and with me as always is Wes Boss.
Hey, everybody. Hey, Wes. This episode is sponsored by LogRocket. Now, LogRocket is the session replay application that allows you to see why your bugs are happening and not just that bugs are happening, not just that they exist, and not just that your users are experiencing them, but you'll get to experience them just like your users are, and maybe that's going to be the catalyst for you to fix some of these bugs.
And what LogRocket gives you is a pixel-perfect replay of exactly what your users saw whenever they hit a bug. It even shows you your read-up store. It shows you their network activity. It shows you their console login errors, and it works just about any sort of front-end platform that you could imagine.
So check out LogRocket at LogRocket.com forward slash Syntax. Sign up today and get 14 days for free, and check out Steve the Magic. I feel like I'm inventing taglines for these companies, but see the magic. That is not approved by LogRocket Marketing, Scott.
Yeah, that's not approved. There's a slogan to stop guessing why bugs happen. It's pretty good. It's pretty good.
See the magic. Yeah, maybe I was going to see the magic. Oh, awesome. Well, let's get into it.
So about, I think about a month ago, I said, I'm going to use Firefox for the rest of the year. So I used it all of December, and I used it actually for recording this on January 6th. So I've been using Firefox for almost five weeks now, and I know, Scott, how long have you been on it as well? Pretty much the same exact amount of time, because you said, I'm going to do that, and I said, me too.
Yeah, we've got an episode out about it. So I should just say up front, I have a course called CSS Grid, where Firefox, CSS Grid.io, Firefox sponsored that, so they paid me to make the course, and to use Firefox in the course, and I'm very clear about that. They are not paying for any of this. This is just us, as developers, trying to figure out, like, is the switch over to Firefox worth it?
I've tried it many times over the years, and this time I thought I'd give it, like, an honest shot, and try to actually do development and daily browsing on it. So that's what we're going to do, we're going to go through DevTools, we're going to go through the browser experience, we're going to go over some tips for setting it up and getting switched over, and then finally we'll talk about some of the things we didn't like about the switch over from Chrome, and finally, will we stay with it? Like, is it going to be our daily browser? Yeah, yeah, which is, you know, I have no conflicts of interest, so just FYI, except for that course I released called Firefox.
No, I'm just kidding, I did not. I like Firefox. So, yeah, let's get into it with, I guess, do you want to kick it off, the DevTools? You know, or maybe I'll kick it off with the DevTools, how about that?
Yeah. Yeah, the DevTools in Firefox are better than the Chrome's DevTools. I don't really have a problem saying that, they're better in most ways that I've come to use. In fact, visually, they look nicer, they feel better, all of the DevTools extensions that I use and love, like React DevTools, it's the exact same, and actually with one added benefit is every time I close the Developer Tools tab, the tabs don't reorder themselves and react to the end of the list, so that little bit of it is nicer to me.
But for the most part, I have actually really loved these DevTools, and I didn't have to change my workflow at all, because everything was exactly where I expected it to be, no frills, no extras, the stuff that I use every day, the debugger, the network tab, the general inspector, all that stuff is as good or better than the Chrome version of it in my mind. The biggest switch for me was learning how to do Command Option K to open up the console instead of Command Option J, so I had to move my finger over one key. I just hit Escape. No, like when you're on a website, and you're just browsing, and you want to open up the console directly, or are you one of these people that right-clicks Inspect Element and then clicks over to the console?
Please don't tell me you're them. Well, okay, yes, I am doing it, for some reason, I've never, ever gotten the keyboard shortcut for Inspector or any of those, but I always leave DevTools open. I mean, I don't use DevTools a lot on sites that aren't my own, and since I'm only working on one site, which is usually Level Up Tutorials on localhost, and I basically never close that connection, I leave that open 24-7 with a DevTools open, like I never close it ever, so. That is no way to live your life, Scott.
So, for everyone listening, Command Shift C will open up the Inspect Element, so it'll immediately open it up so that you can inspect any element on the page, and Command Option J. Command Option J. Oh, sorry, Command Option K. How am I supposed to remember this?
Open up console. You just do it like 10 times, and then it will become second nature. I'm going to set it on my own. I'm going to set it on my own.
Yeah. Well, that's actually one downside I saw, is that there's no, like, keyboard settings in Firefox. You can install, like, add-ons or something like that. Yeah.
So, that's the first thing I was going to do. I'm just going to remap this to be like Chrome, but I got used to it over the time. Yeah. What else?
CSS Grid and Flexbox Inspector, miles ahead of Chrome. They're fantastic. Fantastic. If you want to visualize what's going on with your Flexbox and Grid layout, visually seeing them rather than reading some code is super important, and they are – there is a Grid Inspector on Chrome, but it's not nearly as good as – like, I would say it's, like, 27 times better in Firefox.
27. I would say it's 27 times better as well. I definitely agree with that. I love the little checkboxes that you can say, okay, show me the lines, show me the numbers, show me the areas.
Like, those kind of things are really nice. Yeah. But for the most part, I feel like the Inspector and the layout tools and all these things within Firefox are so thoughtful and so well done that it makes going back to Chrome to use these kind of a huge bummer because I love being able to select – okay, so I'm on a – let's say I'm on a div here. This is like a parent div.
It will tell me all of the different layouts that exist as children within this div, and I can just use these checkboxes to click one of these individual little layouts, and then I can see the grid, the box model, all that stuff directly below it, and then I can hover over and see the different zones and see how they're working. And to me, it's all just so visual and elegant that I absolutely love using this for anything like this. Because they've got this, like, neat little – like, if you have a web font or any font, really, and you're in the rules tab and you hover over top of the font, it will show you a quick angry fox or whatever that thing is. It will show you what font that is.
If you go to the fonts tab, it will show you what fonts are system fonts and which ones are web fonts. It will show you the line height, the size. You can turn the italics on and off. Man, it's just – there's just so much.
And it's not something that you use every day, but when you do have trouble with your fonts, being able to peer in with these tools is great. Yeah. I found the animation, like, the keyframe animation stuff to be not as much fun. It's a little bit more – you can see what's going on, but it doesn't – like, the Chrome version is sort of like an upper-fax-y kind of thing where you can really work with the keyframes a little bit more.
This is just sort of like, okay, here's how the animation plays out. Oh, yeah. Maybe I'm missing something there, but I don't love that aspect of it comparatively. I haven't actually used that in Firefox just yet because I know in Chrome you can scrub back and forth.
Yeah. It looks like you can do that in Firefox. It looks like you can, but have you tried to do it? No, I have not.
Mine isn't letting me do it. I've got one open right now. Yeah, you can. Mine doesn't play the animation, though, when I scrub.
Go to – here, let me show you. So, it's funny, Wes just said he was doing a screen share. We see the same exact interface, and he has the ability to scrub over his animations, and I do not. I'm looking at the exact same thing, and my playhead exists.
I see the playhead. I cannot grab it. I don't know why. But we should say – are you on Firefox Developer?
I'm on Firefox Developer. Okay. That's as am I. Yeah.
I'm just going to go to the – where's the animation? It's like extras or whatever. Extras. Three little dots.
Three little dots. Top right. Top right. Three little dots.
More tools. More tools. More tools. Oh, yeah.
Oh, they're very similar in both of them. They even use the same colors. Yeah. Well, I just wish – I just wish I could scrub online.
Who knows? It's probably just a version of my Firefox. Well, that makes me feel a little bit better about these then. I always get a little bit bummed out that I couldn't do the scrubbing action.
Yeah, because you do a lot of keyframes on your website, right? I do. And I really know that kind of work, so. That's an important one for you.
So, what else do we have here? The Changes tab is pretty cool. So, if you are inspecting an element, and then you change a few things, you delete a property, and you change the color of something, and you go, okay, great. Now, I need to mirror that to my CSS.
That's in my editor. If you go to the Changes tab, it will show you what you have then changed from that actual element, and you can just copy-paste it over. I didn't use that. That's cool.
Yeah, it's pretty cool. There's a lot of stuff you have to dig into, and it's very similar to VS Code in that way, where you're like, oh, I had no idea that was actually a thing. Yeah. I really like these developer tools, and I like the way they look.
I like the way it feels. I'm a big fan of this. So, yeah. There's a couple of things that were not great in my experience, so I was just kind of keeping tabs over the last month as to what it was.
And there's a couple. First is, if you throw an error in a promise, or sorry, if there is an error thrown in a promise of the file that it happened in, the line number it happened, the network URL, and the promise response, it gave me so much information about what went wrong, and Firefox gave me uncaught exception, undefined, uncaught exception, object. Like, not an actual object, just the word, object. It's always helpful, yeah.
Yeah. So, like, I've just been tweeting all this stuff, and Harold Kirschinger, Kirschner? Kirschner. I'm probably butchering that.
That's not even that. That's not even that. So, if you have any qualms with the developer tools, just tweet at Harold. He's amazing, and he wants to see Firefox succeed, obviously, so he linked me to some of the bugs that they're actually working on this.
So, all of the qualms I have are currently being worked on, and it looks like it will, I don't know, eventually soon be in. But that was a big one for me, because I would say maybe five times over the month, I had to open up Chrome and just make the error happen in Chrome, just so I could get a little bit more context into what was happening. And this is specifically with errors that got thrown inside of promises. The other sort of thing that bit me was cross-origin errors were silent.
So, in Chrome, when you have an error that is like a, what was it, like a blocked cores issue. So, you try to do something... Can you make sure you share these screenshots in the episode notes? Because these screenshots are really helpful, because I didn't have some of these issues.
Yeah, totally. Here, let me... Yeah, that's why I was logging them as they happen, because even a month is not necessarily enough time to run into all these issues. But luckily, I write a lot of errors, so I was able to get into this aspect.
But the one issue was that I had captions file on one of my videos, and that captions file was being loaded from a domain name that didn't support cores. And when something like a cores issue happens in Chrome, it will tell you in the console, this request was blocked, and this is where the request was made. And in Firefox, it just tells me nothing in the console. And if you go to the network tab, it doesn't necessarily show you that it was blocked.
It just says that it has not yet returned or wasn't returned. So, it was very evident in Chrome that it was blocked both in the network tab and the console. And I probably burned half an hour trying to figure out what silly issue that was, and very clearly, there was no cores there. So, that was a big one.
So, I see in your console screenshot here that you don't have the XHR and requests filters checked. Yes, everybody said that. Okay, I only say that because I really like those. Yeah, but those are...
XHR and requests, those are logging absolutely every single request. Yeah. So, every single CSS image. So, you load the page with those on, and your console is just filled with, like, 100 things, which is way too much.
Yeah, but you could change the level from... No, next, you can't. No, you can't change the level. No, I even talked to, like, the devs that far, because everybody's like, you're an idiot.
Turn those on. No, that's not what they're for. And, like, I don't necessarily want those on, because every single ping to a server from, like, a tracking library or every single CSS or image that's loaded, then that muddies off the console. That's too much.
I just want to see requests that failed in the thing, and there's no way to do that. Believe me, I spent lots of time trying to look into this. I believe it. Well, you know, I've been doing a lot of GraphQL server work right now, where I'm working on a new API feature, and I've been using the...
I really... To be honest, I don't know what Chrome is like in this regard, because I haven't done the comparison, but I've been really liking how Firefox presents the requests in the console, like, just the visual way that it's throwing that in there. I'm not having to go to my network tab, but not only that, just the ability to look at them the way they have them. Do you know me, Fireup and Chrome?
Does Chrome do the same thing? I think so. I have not ever looked. And it maybe doesn't...
I mean, it obviously doesn't do it by default. My Firefox does it by default. Okay, here it is. Log HTTP requests.
Okay, so it looks like it does. Yeah, okay. That's a feature that was on by default for me for Firefox developer tools, and isn't on by default in Chrome. So, like, the very first thing I'm doing right now is going to Chrome and checking that box, because I really like seeing those requests while I'm debugging my API.
And that was a big, important thing for me. There's something to be said for, like, the defaults in user experience. Like, people don't necessarily know... Oh, yeah, you just might not know it's even there.
Yeah, yeah. Whatever, console filtering. This is one I use a lot. It doesn't seem like a lot of people use it.
So, you know when you get, like, garbage in your console from a plugin, or, like, especially if you are using, like, an ad blocker, you get, like, errors in your console because you blocked it, right? Yeah, the YouTube API is noisy. I'm going to tell you that. So, so true.
And often when I'm doing a course, I get these things from, like, a browser extension or for something that's totally unrelated. And I don't want these huge errors in my console because I have to say, oh, don't worry if you see that error. It's actually fine. So what I do is you can negate those errors by filtering them out with a minus sign in front of them.
So instead of filtering your errors for ones you want to see, you can filter out errors that you do not want to see. And that's based on the URL or the actual text in the error or the source of the actual error. And that is not, you can't do that in Firefox. But again, I talked to the folks at Firefox and I said, like, hey, can you do this?
And it looked like within 12 hours, they said, no, you can. It's not, it's not in, it's in nightly, apparently, but it's not in what's the version that we're using for developer edition just yet. So I'm looking forward to getting that because I use that a lot to filter out. And that was something that nobody else said that they use.
So maybe it's just an edge case for me. Finally, one is the service worker tools are not great. There is, there is the ability to use service workers, but the Chrome service worker dev tools are fantastic. And that's something that I need to tell people how to use a lot because people always email me.
They've done some other course on localhost 3000 and that course put a service worker and then they email me. They're like, what's going on? I can't see anything that you're in. Like you can really have a cache version of the last tutorial that you did on there.
So that's actually why I try to use random ports for each of my courses as well. They don't just run into things like that. Interesting. Yeah.
Another one I haven't, I don't do a lot of service worker work. So yeah. No, me neither. Well, so that's like dev tools.
How was the browsing experience for you? Great. Fantastic. I, for the most part, I really enjoyed using it as my daily.
And I had, I think in other, or other times when I've gone to use Firefox, I found myself going back to Chrome after some bit of time. And I didn't really feel like I needed to do that. I mean, I think one of the biggest things for me was that I have my one password, my password manager all set up. And because of that, it made logging into any site trivial.
So instead of having to, you know, hunt for passwords, relog into everything, I got all that autofill coming in from one password. And I really enjoyed the fact that it all just worked for me. It was an easy transition over to Firefox. It felt like the easiest transition I've ever.
done to a different browser. Yeah, that's one of my tips here is import your history and your bookmark because that just makes that initial, it's like it doesn't have all of my comforts that I had. You can just import those all in Firefox and then you're already past that hurdle. I really like the privacy aspect of it.
So when you go to Facebook, they recommend that you install this Facebook container and they have this idea of container tabs that the browser or the website runs in a container, meaning that if you're on another website, it can't then ping facebook.com because you're not logged in and I'm sure they're still tracking you, but you're able to like put these bad websites in a container and they're not able to reach outside of that or do any cross-domain tracking, things like that, which is pretty cool. You don't need a Facebook container if you don't go to Facebook and don't have a Facebook account. Yeah, I know. It's like a necessary evil.
That's like the only way I can contact most of my friends. My family has like a group on there and I don't know, it's a marketplace. I have an account, but I don't use it. It exists just to be like existing and then, you know, I don't go to Facebook anymore.
I really don't like it. Oh yeah. Yeah, I wish, I think Facebook's days are, at least how it is, are a bit numbered. I'd say almost all of my friends no longer post.
The only thing is private groups are pretty popular. Unfortunately, everyone's like, well, use WhatsApp. I'm like, please come over and convince my entire family to move over to WhatsApp, right? Like, it's frustrating.
Anyways, I found it extremely stable versus Chrome Canary. So maybe like once every two or three weeks, Chrome Canary would get some weird thing. You can't complain about this because the whole point of Chrome Canary is that you are the Canary. But that said, Chrome just did random crashes and stuff like that.
And I like using Canary because you got the latest version of all the APIs and things like that. I like to be a couple months ahead of things that are being rolled out. But I found that it's extremely stable. There's like a bunch of little CSS bugs that I kept running into on Chrome and none of those existed.
You'd have to update the browser just to even like confirm if it was a browser issue or issue with your code. So I was always checking, trying to update constantly. And then I kind of like zero Chrome only experiences. So like, I think that whole like this website is best viewed on Chrome.
I don't think that that's really a thing anymore. So that's nothing you really have to sweat too much about. Yeah, yeah. For the most part, it was a seamless transition and the browser experience was really nice.
What else? Oh, something that I really liked is that the theming in Firefox was really easy. This is just a low hanging fruit, but I installed a plugin and I created a level of tutorials theme that was basically, you know, matched my website really nicely. And I love it.
I love having my level of theme and I love that it took me about five seconds to make, you know, I didn't have to, you know, go into any files or do anything to create this. Right. You have to code it. Yeah.
I immediately went on thing and there's like four people that have made a Cobalt 2 Firefox theme and I tried them out. There's one that's pretty good. I'm pretty happy with it and it feels neat to be able to style the tabs and everything on your browser. I'm a big fan of that.
There's some other stuff you can turn. These are set up and switch over tips. Turn compact mode on. That will just make the tabs and stuff a little smaller.
I'm always big on making the GUI of an editor or something as small as possible and giving you more room for the content. So there's a setting called compact mode. Where was that? Where was that setting located?
So there's not a lot of like setting settings in Firefox. You have to go to this like weird page that is, is it about config? Yeah, about colon config and then you have to search for the setting and it just, it's basically like you remember in Windows days you would edit like your H key current user or something like that. What was that?
That thing where you would edit it? I don't know. I don't really, I don't remember my Windows days. Oh, there we go.
Yeah, basically it's just like a key value editor that you can use to set your settings in there. Another one I did is I set the tab min width to zero. That's one thing that bugged me is that if you have lots of tabs the browser gets pretty muddy. Like if I'm recording a course and I have like eight tabs open because we've got docs, you get your back end, your front end, your graph, your off the ground and a couple other things.
Chrome does a much better job at making just showing the icon. So in order to make that work I had to set the tab min width to zero and then I had to go a little bit further and hack the CSS so that it would just show the fab icon which is a bit of a bummer. So that's one thing I still like a bit better from Chrome is the UI of all the tabs was just a bit cleaner and it handled lots of tabs and little tabs and things like that a little bit better. Yeah, I would have to agree but only so slightly it didn't really come up for me I don't think.
Yeah, one of the things here new tab just blank is really good so when you open a new tab they try to like suggest news stories and silly stuff like that and I never like that because when I'm recording a course it shows like news and like the websites I've been on which is annoying so like I have an extension in Chrome that just gives me a blank page when you open a new tab and you can just customize that new tab page on Firefox and just delete everything and it's just white which is great. Light theme in DevTools so light theme in your DevTools dark theme on your editor is my way of life. I know you like the dark theme for it, right? Yeah, I can't even imagine being in the mind space where I want a light theme in my DevTools or in an Instagram text editor.
Not only thank you, yeah. No, not a light theme on text editors that's, no, you shouldn't do that but you should use a light theme in your DevTools. No, come on, no. Okay, whatever.
I'm so used to the light theme from Chrome that I just couldn't get into the dark theme which is funny because it makes no sense. I've been using dark theme on Chrome for ever and ever. Really? Yeah, I'm not switching.
Okay, what else we got here? Oh, one thing that really bugged me was the casting the tabs. Oh, Chromecast, yeah. Yeah, so for those of you who don't know in Colorado if a Colorado Avalanche hockey game is not on TV then you can't like watch it because of some dispute with Comcast right now.
It's absurd. So I find myself pirating a lot of streams of Colorado Avalanche hockey games and I like it for a lot of them they don't have cast support in the player so you cast to the tab. Cast to the tab put on the TV, whatever. There's no cast support for tabs in here so I have to go over on Chrome and then go to the link and all that stuff I would just prefer if this was available in Firefox to be able to cast a tab but I understand why.
Oh yeah, there's like an extension I turned on thankfully I don't do a whole lot of Chromecasting from my computer but if you are a heavy user of that then you'll have to probably switch. Actually, as a bit of an aside there's this awesome Chrome extension called Video Stream that lets you just cast any file straight to your Chromecast and not as like a tab cast but actually throws the file over which is awesome and treating you something like that. Other things that I didn't like was the URL search bar so I'm used to I always do like TWI and then hit tab and then you can search within Twitter or YouTube and hit tab and on Firefox you have to type at Twitter and then search it and then somebody told me that if you are on a website like YouTube you can right click on the search bar and click add a keyword for the search so you can do like YT for YouTube and then in your browser you just type YT space and then go for it. So it's probably about 90% of what I want but I just want it exactly like the Chrome version where I can just type out any website that has a search hit tab and then search within that website.
Yeah, I don't use it a ton but I can see that being extremely useful. There's no Firefox support for Apollo DevTools right now which the reasoning is good because Yeah, there was support for it at one point They pulled it from I guess you download it and it's all yourself but apparently Apollo DevTools uses eval which could be a security issue so Firefox detects that extension uses eval and pulled it which makes me feel good about Firefox actually scanning the code but it makes me feel bummed as me wanting to use the DevTools so that's a bit of a bummer especially as someone who uses like I need that in my course and I'm going to have to tell absolutely everybody in my course go use Chrome for this. What's funny is that as much as I love Apollo the DevTools have never worked super well for me like the cache wouldn't be updated or I ran a especially they launched their local state thing I would run a query and just like wouldn't work and then you'd have to refresh the page or something to get it to reflect those changes so that was always a huge bummer for me. Yeah I agree.
So question is will you stay Scott are you going to stay on Firefox or are you going to go back? You know what I'm going to stay I bet you really like that I like that so much I'm going to stay on Firefox for the considerable future really the annoyances that I have with it are so minor in comparison for the most part I think the privacy aspects of it those sort of security things I think are big enough pluses for me that I don't feel like I want to go to Chrome anymore at all and I'm really happy with Firefox you know I really like the DevTools I think are probably the biggest influencer for me for wanting to stay I just really have gotten used to and really like the DevTools in a way that I don't necessarily have that same joy in Chrome one little minor thing CPU usage sorry we didn't really touch on this CPU and memory usage to me has been just as high as Chrome it has not been better so I thought that would be better but it's not are you going to stay Wes? Yes I think so the one thing I didn't do is switch over to the Firefox app on iOS which sometimes annoyed me because like my history wasn't there and that is obviously solved they have a good iOS app so I just need to do that I was sort of I think I was just sort of waiting to figure out if I was going to go for it entirely and I'm pretty happy there's some qualms that I have but obviously Firefox is listening because they want to hear what are your pain points with this type of thing and they're listening very clearly anytime I tweet anything not even mentioning them they swoop in and say yeah this is being fixed or okay how would you like to approach this so yeah I feel pretty good about it it's pretty exciting that Firefox again is at a spot where it's a really good contender and much better in a lot of cases that was the case in like what like 15 years ago when I switched over and started using Firebug it was like oh it's so much better right and they're back at that spot yeah so I think that's it if you have switched over to Firefox I'd love to hear what your thoughts on it the pluses the minuses tweet us at syntaxfm so I think that's it yeah that's good yeah cool absolutely thanks for tuning in catch you on Wednesday peace head on over to syntax.fm for a full archive of all of our shows and don't forget to subscribe in your podcast player or drop a review if you like this show