Firefox DevTools Deep Dive
Lakatos, Alex
No, Firefox DevTools are not Firebug. The web came a long way since Firebug,and so have the DevTools baked into Firefox. So let's go exploring! As the complexity of the web apps you build keeps moving, so do the FirefoxDevTools. In this session, Alex will give you the latest tips and tricks on FirefoxDevTools. We'll explore new and less commonly known features in performanceprofiling, JavaScript debugging and animation inspection. The session willgive you a productivity advantage when developing and debugging your webapplications.
 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. So 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 processes 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 will be available most of the time at the booth at the Mozilla booth in building case So don't hesitate to talk to me in French Spanish English Yeah I I I I I Yeah Everybody's squeezing squeezing to the middle Especially on that side To do I Okay, we're running a tight ship here, so we're gonna get started already five minutes over Um, 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 oil if possible If you're new to our 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 fall zone code of conduct, so have a quick look when we can please I'm gonna introduce our next speaker Alex Alex Lakatos His friends calling the locker But for some reason he's not fond of that means a JavaScript developer by dairy and a mausoleum by night Meers many hats and he's a reps council member and he's a tech speaker And In fact in his misguided youth he got a casino dealer license To develop websites If you have any questions, I'm gonna be out child after this and they're trying to make it on time How do you open developers this is just a Like a small little demo page I'm using and 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 Good I'm setting the console just because this was the first time 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 is more elements But I have this little search field here This is a selectors and I'm using material. So now this is gonna be an MDL button Now if I try to search for it is gonna show me My page has like four different buttons on it So I'm gonna cycle play them until I get the one I want okay So now I have my I have my bottom Come on screen size Good so I can see my CSI for my bottle right here It's not the color and I want it to be so I'm gonna try to look in here 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 reasons to color is gonna take me some time But I have this filter in Here and they can just say highlight color for me and then everything the festival with color is neatly highlighted for me This is serious. I look 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 we're just gonna say red I didn't happen to work in a company that's really fond of the style guides And I can 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 bug 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 doing 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 here and now I slightly 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 shows 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 will be really helpful for me Unless I 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 or 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 Okay, so it's gonna show me what exactly I said that was 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 developer tools 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 the line number I get this breakpoint right here that I can toggle on on it off I'm gonna tell the gods of Wi-Fi and do a refresh right now Things trust okay So I can I can Look at what's happening with my top title. I have this by the whole scope of it execution is 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 JavaScript 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 If I want to close this This a simple way. I don't have to like figure out what's happening I can either run and it's gonna run like go through I have the console on or just I'm talking about a breakpoint and that's it now We've got HTML CSS and JavaScript right, but that's not anything that happens when you do a webpage most of my My websites have issues with the method transport because the way HTTP works I'm never really sure how long it takes for my page to load like I can figure out how big my pages But then how long it takes to actually get that code that's not easy So we have the method tab here, which is every request you make I'm gonna try to Make this smaller I can so Come on come on come on Okay, so you have you have here two different sizes that's my biggest issues one of them is size it occupies In 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, I'm running a local server But the stuff I go online to get like my materials CSS The difference is is a huge 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 that something happening Doing transport that I'm not really sure about so I can inspect the whole request had those cookies Responsible 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 I think so, let's look at Something else Analytics, okay, so a significant example, I'm getting rid of analytics, right? And if I look at what's happening right there, it shows me every step of the HTTP request and I see that Connecting and sending and all transfer side to click really nothing whereas I have a lot connection that means I have too many connections when I load my page and it showed me you've had to wait for maybe 70% of the time just wait for a connection port to be available And then once you've 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 that I opened up my my tiny spank right there to see what's happening What I'm getting 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 locally session storage, but I grab me a 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 if I don't execute it in the page Maybe use grease mark or something like that. Oh, I do is I just go to the storage inspector go to the cookie inspect inspector the cookie and then I can just say no no And I changed my cookie in in depth of the little 30 seconds to change my cookies I didn't have to write fancy JavaScript for it I do this as a personal browsing preference and when I work with cookies So it helps me both ways In fact, this is the release version of Firefox But some of the things in here 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 Sessions for developers. I think Pascal mentioned that that addition now the problem with that addition is if Pascal gets his way with nightly He's gonna kill that addition. So I might as well nightly from now on To you to do that tools Let's power up nightly That tools, okay I always like to at least check out what's happening with that tools because well in six weeks or eight weeks or whatever They're gonna come and interview with 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 tools I read bug like the commit messages and stuff like that. One of the things I noticed is that for example in this version 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 love 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 This whole heads up display is open. So when that thing is open it is able to be HTTP cash. Why do this is My dog for instance is cashed. So when I change something I get refreshed 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 this in the JavaScript and hardcore stuff like that. Not my cup of tea How many of you used five bug before this? Okay, I'm a big nostalgic so I do want to know why I go to themes in here and which is the five-button 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-buttons was The nostalgic in me kind of likes the idea of going to a school once in a while Have the power of a new that is in the looking feel of the old five-buttons I think I'm quite in 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 when is that And Let me release it's not the whole idea is we created We created the bad fools in a national malware react three ducks and stuff like that We have the ballroom performance Inspector and the idea behind that is to move that fools outside in front of them so we can ship faster The whole idea behind is you guys shipping faster right now. So I Want to move that in front of them that can be shipped So I don't think he's gonna land on the tree is gonna land in a mo maybe Any more questions yes Is In console it just landed in the latest version so in console you might have to update or switch to nightly It's a bug then So we like the last iteration of our folks it should be there Any more questions You You You You You
 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. So 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 processes 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 will be available most of the time at the booth at the Mozilla booth in building case  So don't hesitate to talk to me in French Spanish English  Yeah  I  I  I  I  I  Yeah  Everybody's squeezing squeezing to the middle  Especially on that side  To do  I  Okay, we're running a tight ship here, so we're gonna get started already five minutes over  Um, 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 oil if possible  If you're new to our 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 fall zone code of conduct, so have a quick look when we can please  I'm gonna introduce our next speaker  Alex Alex Lakatos  His friends calling the locker  But for some reason he's not fond of that means a JavaScript developer by dairy and a mausoleum by night  Meers many hats and he's a reps council member and he's a tech speaker  And  In fact in his misguided youth he got a casino dealer license  To develop websites  If you have any questions, I'm gonna be out child after this and they're trying to make it on time  How do you open developers this is just a  Like a small little demo page I'm using and  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  Good  I'm setting the console just because this was the first time 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 is more elements  But I have this little search field here  This is a selectors and I'm using material. So now this is gonna be an MDL  button  Now if I try to search for it is gonna show me  My page has like four different buttons on it  So I'm gonna cycle play them until I get the one I want okay  So now I have my I have my bottom  Come on screen size  Good so I can see my CSI for my bottle right here  It's not the color and I want it to be so I'm gonna try to look in here 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 reasons to color is gonna take me some time  But I have this filter in  Here and they can just say highlight color for me and then everything the festival with color is neatly highlighted for me  This is serious. I look 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 we're just gonna say red  I didn't happen to work in a company that's really fond of the style guides  And I can 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 bug 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 doing 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 here and now I slightly 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 shows 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 will be really helpful for me  Unless I 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 or  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  Okay, so it's gonna show me what exactly I said that was 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 developer tools 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 the line number  I get this breakpoint right here that I can toggle on on it off  I'm gonna tell the gods of Wi-Fi and do a refresh right now  Things trust okay  So I can I can  Look at what's happening with my top title. I have this by the whole scope of it execution is 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 JavaScript  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  If I want to close this  This a simple way. I don't have to like figure out what's happening  I can either run and it's gonna run like go through I have the console on or just  I'm talking about a breakpoint and that's it  now  We've got HTML CSS and JavaScript right, but that's not anything that happens when you do a webpage most of my  My websites have issues with the method transport because the way  HTTP works I'm never really sure how long it takes for my page to load like I can figure out how big my pages  But then how long it takes to actually get that code that's not easy  So we have the method tab here, which is every request you make  I'm gonna try to  Make this smaller I can so  Come on come on come on  Okay, so you have you have here two different sizes that's my biggest issues  one of them is size it occupies  In 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, I'm running a local server  But the stuff I go online to get like my materials CSS  The difference is is a huge 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 that something happening  Doing transport that I'm not really sure about so I can inspect the whole request had those cookies  Responsible  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  I think  so, let's look at  Something else  Analytics, okay, so a significant example, I'm getting rid of analytics, right?  And if I look at what's happening right there, it shows me every step of the HTTP request and I see that  Connecting and sending and all transfer side to click really nothing  whereas  I have a lot connection that means I have too many connections when I load my page and it showed me you've had to wait for maybe  70% of the time just wait for a connection port to be available  And then once you've 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 that  I opened up my my tiny spank right there to see what's happening  What I'm getting 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 locally session storage, but I grab me a 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 if I don't execute it in the page  Maybe use grease mark or something like that. Oh, I do is I just go to the storage inspector  go to the cookie  inspect inspector the cookie and then I can just say no no  And I changed my cookie in in depth of the little 30 seconds to change my cookies  I didn't have to write fancy JavaScript for it  I do this as a personal browsing preference and when I work with cookies  So it helps me both ways  In fact, this is the release version of Firefox  But some of the things in here  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  Sessions for developers. I think Pascal mentioned that that addition now the problem with that addition is if Pascal gets his way with nightly  He's gonna kill that addition. So I might as well nightly from now on  To you to do that tools  Let's power up nightly  That tools, okay  I always like to at least check out what's happening with that tools because well in six weeks or eight weeks or whatever  They're gonna come and interview with 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 tools  I read bug like the commit messages and stuff like that. One of the things I noticed is  that for example in this version 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  love 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  This whole heads up display is open. So when that thing is open it is able to be HTTP cash. Why do this is  My dog for instance is cashed. So when I change something I get refreshed 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 this in the JavaScript and hardcore stuff like that. Not my cup of tea  How many of you used five bug before this?  Okay, I'm a big nostalgic so I do want to know why I go to themes in here and which is the five-button 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-buttons was  The nostalgic in me kind of likes the idea of going to a school once in a while  Have the power of a new that is in the looking feel of the old five-buttons  I think I'm quite in 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 when is that  And  Let me release it's not the whole idea is we created  We created the bad fools in a national malware react three ducks and stuff like that  We have the ballroom performance  Inspector and the idea behind that is to move that fools outside in front of them so we can ship faster  The whole idea behind is you guys shipping faster right now. So I  Want to move that in front of them that can be shipped  So I don't think he's gonna land on the tree is gonna land in a mo maybe  Any more questions yes  Is  In console it just landed in the latest version so in console you might have to update or switch to nightly  It's a bug then  So we like the last iteration of our folks it should be there  Any more questions  You  You  You  You  You
Firefox_DevTools_Deep_Dive_0_203.png Firefox_DevTools_Deep_Dive_204_4055.png Firefox_DevTools_Deep_Dive_4056_4307.png Firefox_DevTools_Deep_Dive_4308_4595.png Firefox_DevTools_Deep_Dive_4596_9959.png Firefox_DevTools_Deep_Dive_9960_10415.png Firefox_DevTools_Deep_Dive_10416_10823.png Firefox_DevTools_Deep_Dive_10824_11675.png Firefox_DevTools_Deep_Dive_11676_11879.png Firefox_DevTools_Deep_Dive_11880_11927.png Firefox_DevTools_Deep_Dive_11928_12347.png Firefox_DevTools_Deep_Dive_12348_15995.png Firefox_DevTools_Deep_Dive_15996_16343.png Firefox_DevTools_Deep_Dive_16344_25499.png Firefox_DevTools_Deep_Dive_25500_26735.png Firefox_DevTools_Deep_Dive_26736_27467.png Firefox_DevTools_Deep_Dive_27468_27635.png Firefox_DevTools_Deep_Dive_27636_27791.png Firefox_DevTools_Deep_Dive_27792_30191.png Firefox_DevTools_Deep_Dive_30192_30719.png Firefox_DevTools_Deep_Dive_30720_31151.png Firefox_DevTools_Deep_Dive_31152_31247.png Firefox_DevTools_Deep_Dive_31248_34895.png Firefox_DevTools_Deep_Dive_34896_37511.png Firefox_DevTools_Deep_Dive_37512_37628.png
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. So 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 processes 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 will be available most of the time at the booth at the Mozilla booth in building case So don't hesitate to talk to me in French Spanish English Yeah I I I I I Yeah Everybody's squeezing squeezing to the middle Especially on that side To do I Okay, we're running a tight ship here, so we're gonna get started already five minutes over Um, 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 oil if possible If you're new to our 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 fall zone code of conduct, so have a quick look when we can please I'm gonna introduce our next speaker Alex Alex Lakatos His friends calling the locker But for some reason he's not fond of that means a JavaScript developer by dairy and a mausoleum by night Meers many hats and he's a reps council member and he's a tech speaker And In fact in his misguided youth he got a casino dealer license To develop websites If you have any questions, I'm gonna be out child after this and they're trying to make it on time How do you open developers this is just a Like a small little demo page I'm using and 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 Good I'm setting the console just because this was the first time 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 is more elements But I have this little search field here This is a selectors and I'm using material. So now this is gonna be an MDL button Now if I try to search for it is gonna show me My page has like four different buttons on it So I'm gonna cycle play them until I get the one I want okay So now I have my I have my bottom Come on screen size Good so I can see my CSI for my bottle right here It's not the color and I want it to be so I'm gonna try to look in here 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 reasons to color is gonna take me some time But I have this filter in Here and they can just say highlight color for me and then everything the festival with color is neatly highlighted for me This is serious. I look 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 we're just gonna say red I didn't happen to work in a company that's really fond of the style guides And I can 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 bug 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 doing 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 here and now I slightly 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 shows 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 will be really helpful for me Unless I 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 or 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 Okay, so it's gonna show me what exactly I said that was 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 developer tools 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 the line number I get this breakpoint right here that I can toggle on on it off I'm gonna tell the gods of Wi-Fi and do a refresh right now Things trust okay So I can I can Look at what's happening with my top title. I have this by the whole scope of it execution is 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 JavaScript 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 If I want to close this This a simple way. I don't have to like figure out what's happening I can either run and it's gonna run like go through I have the console on or just I'm talking about a breakpoint and that's it now We've got HTML CSS and JavaScript right, but that's not anything that happens when you do a webpage most of my My websites have issues with the method transport because the way HTTP works I'm never really sure how long it takes for my page to load like I can figure out how big my pages But then how long it takes to actually get that code that's not easy So we have the method tab here, which is every request you make I'm gonna try to Make this smaller I can so Come on come on come on Okay, so you have you have here two different sizes that's my biggest issues one of them is size it occupies In 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, I'm running a local server But the stuff I go online to get like my materials CSS The difference is is a huge 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 that something happening Doing transport that I'm not really sure about so I can inspect the whole request had those cookies Responsible 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 I think so, let's look at Something else Analytics, okay, so a significant example, I'm getting rid of analytics, right? And if I look at what's happening right there, it shows me every step of the HTTP request and I see that Connecting and sending and all transfer side to click really nothing whereas I have a lot connection that means I have too many connections when I load my page and it showed me you've had to wait for maybe 70% of the time just wait for a connection port to be available And then once you've 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 that I opened up my my tiny spank right there to see what's happening What I'm getting 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 locally session storage, but I grab me a 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 if I don't execute it in the page Maybe use grease mark or something like that. Oh, I do is I just go to the storage inspector go to the cookie inspect inspector the cookie and then I can just say no no And I changed my cookie in in depth of the little 30 seconds to change my cookies I didn't have to write fancy JavaScript for it I do this as a personal browsing preference and when I work with cookies So it helps me both ways In fact, this is the release version of Firefox But some of the things in here 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 Sessions for developers. I think Pascal mentioned that that addition now the problem with that addition is if Pascal gets his way with nightly He's gonna kill that addition. So I might as well nightly from now on To you to do that tools Let's power up nightly That tools, okay I always like to at least check out what's happening with that tools because well in six weeks or eight weeks or whatever They're gonna come and interview with 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 tools I read bug like the commit messages and stuff like that. One of the things I noticed is that for example in this version 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 love 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 This whole heads up display is open. So when that thing is open it is able to be HTTP cash. Why do this is My dog for instance is cashed. So when I change something I get refreshed 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 this in the JavaScript and hardcore stuff like that. Not my cup of tea How many of you used five bug before this? Okay, I'm a big nostalgic so I do want to know why I go to themes in here and which is the five-button 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-buttons was The nostalgic in me kind of likes the idea of going to a school once in a while Have the power of a new that is in the looking feel of the old five-buttons I think I'm quite in 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 when is that And Let me release it's not the whole idea is we created We created the bad fools in a national malware react three ducks and stuff like that We have the ballroom performance Inspector and the idea behind that is to move that fools outside in front of them so we can ship faster The whole idea behind is you guys shipping faster right now. So I Want to move that in front of them that can be shipped So I don't think he's gonna land on the tree is gonna land in a mo maybe Any more questions yes Is In console it just landed in the latest version so in console you might have to update or switch to nightly It's a bug then So we like the last iteration of our folks it should be there Any more questions You You You You You
are specific to the configuration of the people very early That's it answer your question I will so have a quick look when we can please I'm gonna There's another way you can go to tools web with that But that's not all you do on the web JavaScript file that comes into play in the page and In this to be you have locally session work basically in my productivity. So I like to console it just landed in the latest version so