 We didn't catch the crashes that we used to catch before. So if we grow the community on the nightly channel, we don't we don't catch them on the On on the rock, so it's faster then you talked about automation Lot of the crashes that we have they are specific to the configuration of the people graphic cards antivirus Addons tons of things like the metric is gigantic Everything that we know we test Automatically, but what we don't know we cannot have tests for and that's what we are Looking for and and now we have just landed the electrolysis and electrolysis multi Multi-processed multi-multi-processes is on nightly now and we have quantum coming That's a lot of groundwork like important changes like hundreds of thousands of lines of code. That's all going to land and We will need this feedback Very very very early That's it answer your question I would be a little time at the booth at the Mozilla booth in the building case So don't hesitate to talk to me in French Spanish English Everybody squeeze in squeeze into the middle especially on that side Yeah To do So we're gonna get started Come on quick things, please use all the empty seats that you can in the middle squeeze in make room at the edges We're gonna have more people coming in just to cause a little disruption as possible plenty of room at the back Don't stand in the eyes of possible If you're new to the room, we have a room code of conduct check it out bitly Muslim slash Muslim CoC As I said, it's unique to this room separate from the falls in code of conduct. So have a quick look who we can please I'm gonna introduce our next speaker Alex Alex Lakatos His friends calling the lacquer But for some reason he's not fond of that. He's a JavaScript developer by dairy and a mausoleum by night Meers many hats He's a reps council member, and he's a tech speaker Little in fact in his misguided youth. He got a casino dealer license so Over to you Alex. Take it away So If you have any questions, I'm gonna be our child after this I'm gonna try to make it on time though, so Let's get started. How would you open developers? This is just a like a small little demo page I'm using and I'm shamelessly plugging my dog here even though it has one only one article So how would you use the how do you open the developer tools? most people go Right-click and then there's inspect element in here somewhere But that opens up like just the inspector on the element you click There's another way you can go to tools web developer and then pick your pick your tool from there Let's start with the console so I'm setting the web console just because this was the first and I always go there, but I want to show you inspector first the whole idea behind it is my My my blog is buggy, and I kind of want to fix my bottom here if I want to do that I have to select my bottom. It's kind of not really sure which one is my bottom There's more elements, but I have this little search field here I'll tell you how this CSS electors, and I'm using material so now this is gonna be an MDL Button Now if I try to search for it, it's gonna show me My page has like four different buttons on it So I'm gonna cycle clear them until I get the one I want. Okay, so now I have my Button come on screen size. So I can see my CSS for my bottom right here It's not the color and I want it to be so I'm gonna try to look in here for for colors basically Now There's a lot of CSS right so I don't know which one of them as the one I'm looking for but Trying to find the instance of color is gonna take me some time, but I have this filter Input here, and they can just say highlight color for me And then everything that has to do with color is neatly highlighted for me. This is Seriously, it looks orange. I'm gonna guess this is my my bottom here Now I want to make it red like every link on my side. So I'm gonna just go and say red I didn't happen to work in a in a company that's really fond of their style guides And I can't just say red in my in my CSS. I have to have a hex color We have no idea what the representation for hex right here So I'm gonna have to shift click on the little little dog there and see if you have a good presentation I have for that color. I'm gonna settle on a on hex now if I look closely And my designers do Sadly, I see that this red is a bit different from the red I have in the in the links So I kind of want to figure out what's the exact color for that I can go and select the links and search for color again, but that's it takes a while I'm lazy, so I'm gonna just click on this little button a color picker Appears and the bullet I'm not really good with this. I have no idea What's the exact red shade? So I'm gonna just use color picker and Try to pick the color from in here and now it's like in my color. It has the representation. I want There's up to four different representations in there This only has three because that color doesn't have a name I'm gonna just go with with the representation So I show you how to do HTML and CSS like play around with that But that's not all you do on the web, right? There's still JavaScript involved somewhere and if I look at my my console logs I can see I have some issues with my title. It's not exactly what the session type is on the schedule So if I want to fix that I kind of have to figure out where this comes from So I'm gonna go to the debugger I have a panel that showed me every JavaScript file that comes into play in the page Most of it comes off of the internet. So I'm just gonna look at my local files, but looking through it kind of has like 150 lines of code I have to figure out what my console log is. So I have this search Search input now Searching through one file wouldn't be really helpful for me Unless I really really knew my app well But this this input has Prefixes so I can search through all files. I can only search for a function definition of searching this file Directly go to a line. I'm gonna try to search in all files. I need to prefix that and say console And it's gonna show me that's not the best idea Let's see there Okay, so it's gonna show me what exactly I said that there's in my code if I go to that I'm gonna see my code now. I want to kind of stop execution at this point and figure out what that's happening there What I showed you so far is on par with other developers in the market One of the things we're lacking for now is the ability to live edit code in debugger So if I want to make changes, I'm gonna have to go back to my editor But for that, let's just stop execution right here and see what's happening when I click on them on the line number I get this breakpoint right here that I can talk it on on it off I'm gonna attempt the guards of Wi-Fi and do a refresh right now. I think it's trust. Okay So I can I can Look at what's happening with my top type. I have this the whole scope of it execution stopped There's nothing in the console because execution is stopped I have a visual indicator that says hey, there's something going on in this tab You need to pay attention and it shows me everything related to the jobs with That's running right there the instance of this even Even me which seems I'm undefined for now If I want to stop this whole I can I can even Make changes to objects that have been happening there, which is not the best idea But if I want to close this This is a simple way I don't have to like figure out what's happening. I can either run and it's gonna run like the console or just Uncover the breakpoint and that's it now With the HTML CSS and JavaScript, right, but that's not everything that happens when you do a web page most of my Websites have issues with the network transport because the way HTTP works I'm never really sure how long it takes for my page to load. I can figure out how big my page is But then how long it takes to actually get that code that's not that easy So we have the method tab here, which shows you every request you make I'm gonna try to Make this smaller. I can't So So you have you have here two different sizes, that's my biggest issue is one of them is size it occupies Transport and then the other one is size it occupies on this You're gonna see most of mine have the exact size and that's because well But the stuff I don't like to get like my material CSS The difference is it's like six times the difference and that means I can really treat my website to take as little time to transport as humanly possible now If I just do size if I just optimize for size and compress maybe jzip, that's part of the problem But the other part of the problem is there's something happening I Do in transport that I'm not really sure about so I can inspect the whole request had those cookies Responsive and But that's not my that's not my my issue my shy as I have no idea how long it took to do anything So let's look at Something else Analytics, okay Example See that Connecting and sending and all transfer side to click really nothing whereas I Have a block connection that means I have too many connections when I load my page and it showed me it had to wait for maybe 70 percent of the time just wait for a connection port to be available and then once it got to the server The server was kind of slow, and it made me wait until it gave me a response now if I own the server I can basically Turn down the waiting time to Little as possible and as for blood connections I Make a lot of them so I should stop but I had no idea this was happening with it I opened up my my timings paint right there to see what's happening One of the other things I do on a daily basis is deal with storage in one form or another we've got a storage tab that has cash storage cookies and In this to be you have local accession storage, but I drive the session story maybe local But it shows you everything that you've got in there I don't use local storage on this one. I've only got cookies Now one of the problems I have with cookies is they used to track me right and if I want to change a Cookie, so I'm not tracked anymore. I have to write some JavaScript to find the way to execute it in the page Maybe use grease mark or something like that. Oh, what I do is I just go to the storage inspector Go to the cookie Inspect inspect the cookie and then I can just say no no And I changed my cookie in in depth of it literally took 30 seconds to change my cookies I didn't have to apply fancy javascript for it I do this as a personal browsing preference and when I work I work with cookies So it helps me both ways. Now everything I showed you is in Firefox right now. This is the release version of Firefox But some of the things in here So some of the things in depth tools don't come in in the version of Firefox For the next 16 weeks or something like that So we have different versions for developers. I think Pascal mentioned the dead edition Now the problem with that edition is if Pascal gets his way with nightly. He's gonna kill that edition So I might as well nightly from now on I'm to you to do that tools Let's power up nightly That's okay One of the things that's not in the release version I always like to at least check out what's happening with that tool because well in six weeks or eight weeks or whatever They're gonna come and Interfume of my work basically in my productivity. So I like to stay ahead of the curve I always There's a new nightly version which incidentally is every day I go and try to see what changed in the developer teams We bug like the commit messages and stuff like that. One of the things I noticed is That is for example, and this motion has something to do with Come on. Come on. Come on Something to do with screenshots that it's not in the regular one So I can just screenshot the keyboard I opened up the settings page because I'm particular and I like to tweak my tools to suit my needs One of the things I do and you can do with this is the disabled HDB cache when this This whole heads up display is open. So when that tool is open it is able to be HDB cache. Why do this is My book for instance is cashed. So when I change something I hit refresh like 20 times and nothing happens And it's just driving me insane because cash is open now I can always make sure cash isn't open You can do disabled JavaScript and hardcore stuff like that. Not my cup of tea How many of you used five bug before this? Okay, I'm a bit nostalgic. So every once in a while I go to themes in here and which is the five-buck team just because It is when I did this talk in front of you know, I did it in front of students this week It kind of confused the hell out of them what five-buck was But the the the nostalgic in me kind of likes the idea of going to school once in a while I'm the power of the new defties and they look and feel of the old five-buck I think I'm quite on time and I have five minutes left for questions If you guys have any questions, yes, that's a really good question So the question was No Faster Any more questions? Yes Is It means it's a bug then It means it's a bug then I'm sorry, this is the first time around please love about women So the whole idea of source map is we had it in debugger for a really long time But a lot of people wanted to see it in console as well So we landed the last iteration of Firefox. It should be there Any more questions? If that's the case, thank you all and I'm going to be around the booth if you have