 Good morning people. I Hope that this talk will be a cool for wake up, but okay, so Welcome everyone this talk is about discovering the Firefox developer tools that we have in all the version of Firefox What are the difference with the other tools that has? Competitors and the other tools that we have as the web developer and many other things, so First of all me. I'm Daniela Keshavrate. I am in the italian at the italian anchor embassy and I'm involved too many things about open source and I am a Mozilla volunteer of Mozilla, Italy in the case and As Mozilla's we call in that way and one of the two many things for Mozilla But I don't want to get boring talking about me because I think you are here to listen about the topic of the talk, so I Think that we are here because we are hacker We love to see how works the staff discovery this assembly change it whatever So this is a screen doing a room maker fair of an old we can call computer. I don't know but was pretty cool to see how works hold Okay, and so we love to see The stuff of what's going on inside what works because we want to improve it change it as we want so the developer tools are our screwdriver sonic screwdriver, etc and Very often we want to change everything. We are hacker of after all We are there doing many many crazy things here, so we want to alter and do it as we want and Often also to destroy in this case These cave China cable broken a motor board I don't know when I touch it the motor but turned on automatically. I have no idea why but Burned So we love to see how works we want to change as we want I also we want to break only to see what's happened I also destroyed the internet as party shirted that way, but this is another story so I Think that many of us know fire bug because was the first tool that enable us to to interact with a browser a change the web page and Firebug was the most famous because wasn't wasn't only for Firefox, but that's a for Chrome and was the king for years and Was very important because enable us in the first era of websites that we can interact with the DOM and After the page without save reloading blah blah blah but the problem that is a way an extension and Was one of the most? Extension that is low down your experience about because it's easy so And also the problem that is not integrated Natively so many people continue to use this extension also today that is obsolete You cannot install now on Firefox table anymore because use the old framework and is not Asynchronous Multi-process blah blah blah so you cannot install anymore today is dead is not a developer Developed anymore, but there are too many developers that continue to use it Is your choice of course, but now we would see why you have to think that is dead You need to switch to another tools so There is also a documentation about migrating from firebug to Firefox developer tools That to because they mainly they meant developer of fire of fireback now is a Mozilla employee had implemented many of the things on Firebug inside Firefox developer tools, so you will find The most of the future they are working on because the firebuck as we say was a huge project with too many things But they in integrating many of the future of firebug, so Let's see talk about the Firefox developer edition Mozilla Release Firefox. We know but the problem is that As a long time to release a new version and developers want the last feature to improve the development So was a problem because this table now require like Four months to arrive six four depends on the moment to arrive in the stable So to await a new feature for the developer tools, you have to wait like an all-of-the-year effort developers is too much time So Mozilla release different version of Firefox. We have the Firefox table the as air that is for the enterprise But okay There is the beta and there is the Aurora version the Aurora is the middle between the nightly and the beta Now the Aurora doesn't exist anymore now There is only beta between nightly and stable in that way they remove it a step to release new feature So now to have a Firefox for the reason we're seeing 406 because now to have a new feature now to have four months and They say that we need feedback. We need to improve the browser. So Who can suggest to us report bugs better than developers that use Firefox? So they chosen to move at the time Aurora now beta a branded different version of Firefox with a few settings already enabled for Firefox itself and few teams so The first definition is the most stable respect the nightly of course with nightly have the most fear updated Features, but you know it's nightly. Maybe a day work Maybe a day not and we are developer. We need something that works So it's better to use developer edition and nightly for web browsing as daily So you can install this feature Firefox is updated dialy automatically outside Linux and Linux here and as you can see this is the developer edition is Firefox, but Now we'll see the difference between the stable with the feature Usually as developer I think that to see how much is powerful Every software it's important to see the configuration because we can see how much we can change without after the code So let's see the settings. So I'm sorry. That is in Italian because I'm Congenial booty. So we check out to the translation. So I'm sorry, but I will translate for the important things here and This is Develop the settings of the developer tools. Yeah, I Have to see yep It's better now okay, and This is an a frame with written in react. I will talk to get later. Okay, so this is the The settings as you can see here You have all the panel that you can enable in Firefox So so when you see all this missing a tool probably because you have turned it off in the settings So here you can have the DOM that for me was one of the most interest feature of fire bug because least all the DOM stuff happening like in fire bug and And you have only to enable so you can change Because when you start extension can be a huge list of tabs. So you can enable the the tools that you need And that's you can have developer tools like here this one to add in the developer tools These are other feature that Firefox developer tools has like the rulers that now we will see but I think one of the most interesting things is The editor here you can alter the settings of the editor because that's built-in an editor and Change the teams For the people that love fire bug. There is the fire bug thing that's inside the developer tool so you can change also this one and There are features so you can try it without I do a list of all the fish So we can close and come continue One of the things that I saw when I say, okay the developer tools when I switch it from fire bug They are starting to get interesting was I say very stupid because we are developers so we doesn't care so much about the sign but always we have to work with CSS so you need also rulers and This kind of stuff inside firefox. Oh, I have the spectrum open Okay, you as you can see we have the ruler and we have also tool that's enabled to you to do these and Check the sides of everything you are doing on the page They are they can be as I can say simple or not so much disruptive But we don't the tool set we will see that is very important because starting through the basis the specter is the As we can say is looking inside the engine of the webpage and as I can see I read a right on this light to remember to what to do because There are too many things so this is the specter we already know is not so much different from others One of the most interesting things that it's poor web also the tool and it's poor interactive and we have a complete Drop-down menu right menu with other features that many came from Fireback to like the copy of the selectors so many people that continue to use fireback only to copy the selector of what they select and also This one I think is one of the most useful now. I'm interacting with the slides So I don't want to change because I can't broken and they cannot work. So One I think it is one of the most interesting because often we have to interact with something that Waiting an action from us on the page in this difficult respect So in that way we can flag in that state these dumb element that we are selecting with over active and focus And we can also change we are adding attributes Aftering the attributes right here or of course Double-clicking here. We can copy etc and we can see The dome I don't want to get boring because these are the basics of all the web developers so I want to see only the difference with the other stuff and As we can see we have This kind of feature that are the classic of firebuck the animation we will see now works the font panel, but These are two basic stuff for web developers One of the things that I saw the last months that are working on the developer tools team is this we say Oh, there is already in Chrome. Yes, but it was missing the developer tools of firefox So I say that finally we have also the support to see the assless rules and reported with the flag But I think that the time when the firefox developer tools are raised it was this one There is my friend that work in the WordPress accessibility team and Use firefox developer tools mainly for this feature because work with accessibility and we can have in the Again in the spectrum this one What is in that way we can see only the event? added on a dumb element in that way Actually, I don't remember these are reading chrome But in that way we he can see what are all the event because with accessibility we have to check there are tab Press of the keyboard or whatever as maybe when there are too many events with accessibility they can Deplicate also with the using the press of the key so in that way he can inspect what is happening on the page and We can see the code reference in us in a selector So it's very helpful when you see why this action is not happening in my element because I can select in the dome Open this window and we will see is added Often is a problem of selector, but we can see also the code inside here And the cool part was that initially when they released it there was no support for frameworks in the screen here We see G query because many of the framework that we use and we do a callback They are wrapper over an event listener. So when in Italy, we cannot see the real code So the specter can navigate to the last callback and see what is the code associated To the dumb element so I can assure you that is very very helpful when we have problems trying to understand Not only because you can copy and past and try in this crash pad But you can see what is happening on the page now if you are in this line There are a few few dumb event, but you try with an angular hub J angle RGS hub you can see there are too many dumb event, but you can inspect everything from here so one of the stuff that Graphic designer loves and developers to is to show to the customer that we are working on the website So usually we use the stamp key of the keyboard But like me I work with tree monitor. I have the key the screen of those that you monitor have to cut is boring I want to select only a part of the page from the specter as in this you see in this gift We can select the the dumb element with the right menu. We have do a screenshot of the selector automatically generate As you can see screenshot of the node Though you have a screenshot only this part that you selected in the dome Of course you have also the button to do a screenshot of all the full page Also, not only the view that you have the vf port, but that's all the page So this is helpful This is very helpful when you have to do makeup mock-up Etc. I can I alter a few colors with the specter screenshot Now I do access a before send to the customer and destroy the design very easy to do it with a click This one it's interesting. I try also with the actually The repo of the beige and his work without problem This is the json source view when you open a json in the browser You will see a something that have no sense because it's not a syntax highlighted. There is no Identation automatically automatically firefox Do this so we can expect the json of rest api json again In firefox and we have few tools inside the search I can I use it with the wordpress rest api that sometimes can be a huge stuff I can't filter without probably also with the github api. There is the search filter and we can Interact very easily from the browser. We don't need to have to download those another tool because we are reading firefox Of course this works also with the local file This is for I don't know here how many people have to work with photoshop game But kind this kind of stuff we are developing so The css filter are pretty cool Because we can alter the photo like with the filters of a graphic tool now. There is the support on css Firefox has a dispensary view to simplify the access to all the property as you can see Often this case of an image and do whatever you want This one was Interesting I saw many people use firefox developer tools for education about Development because you can have the access inside the tool about the documentation of css only with the right click on the class Automatically download from mdn so these are very helpful because save you to you to go on Google and again Go to mdn and find the page etc. You can do automatically from here So save you few clicks on the browser This is also interesting because now there are too many unit sides. We are European So we have the metric system. We are very cool for this point of view But there are also too many other metrics is a unit system like for font etc. We can switch very easily clicking This can be helpful when you have to try with the to understand the PI etc What is unit size is another one because the conversion is automatically so This is the dragon drop was initially on firefox now. There is also on chrome So it's not so much you you feature, but you can drag and drop the element I can come I show that is very helpful to understand probably with problem with floating a kind of stuff because you can drag and drop As you say again, there is the red menu. I've done again a screenshot in italian's for again and Very often the red menu can add a new feature and we get not Against a newsletter about it, but it's very it's important to check what is happening in the red menu this is one of the most interesting because When you have to work with CSS it's important to see in in the page. What are the select the DOM element that are Getting action from CSS we can highlight from the spectrum of the element clicking on this icon So in the page we can expect every rules that we want So we have problem with the why this is red because there is the class is different. We can expect very easily from here This is what is one of the most last fish you and now they have only firefox life powerful that way was very highly promoted now. There is the support us in chroma and I think I said safari The grid tool what are grid we know at the timing for layout in html There was the tables, but tables are not for layout Next floating but floating is not very good In the meantime the released flexbox another way to do a layout of the page now There is a new standard that is the grid the grid is a grid as you can see and you can Configure the element like a grid like at the time of table But with div and other stuff the spectrum enabled to use to see the grid that is hidden Usually on the page and I'll tell it from the developer tools And this is one of the future most developed right now and there are often Motley updates that improve the user experience that are also other talks only about this feature So for people interested in grid API CSS API look on internet you can find many other information These at the time was very interesting because we know JavaScript is cool, but it's low CSS animation is very fast The problem is that I can have a timeline like with the video editor. Yes Firefox are right now you can see all the animation of the selector that they are using and like with a video play and stop This helpful to understand why this lagging what what is happening right here and you can also scroll The selector so this is very cool and you cannot expect the change of the probability right here. We are Seeing what is happening with the opacity because for CSS we can say Change the probability buzzed on the key frame. We can expect from here and turn it on blah, blah These at the time when I saw this feature say, okay, it's not so much cool because It's only a drag and drop to see the position of the element exception zeta But it's pretty cool because when you work with the absolute element you can drag and drop automatically change The position top left or whatever. So it's helpful also to work with the strange layout that doesn't work as we want and To enable we have only to go here and click here. So pretty easy these again is for came from Graphics, but it's helpful also for animation because we want maybe a bump a jump or something that is Scaling, etc. We can have this interface when we do animation with CSS a alter the timing the movement Whatever in that way visually is more better. They're doing manually trying every single position on the cable for this one I prefer I chosen to show a video because Other is also the YouTube channel of five thousand developers. So here we can see that is expecting a bootstrap team And now this feature is in developers at the time when we do this video was only on the nightly So I cannot show for that reason. There is a video we can turn it off a Class that is in an element without alter the spectrum because we have the checkbox You can see how it's stupid because every time you have to write again But I can confirm you that to you that when you have to work too much on this kind of this can save you too Many clicks because important to us to save clicks not any more K press, but that's a click so you are these right here now I can Broke everything I think you can remove the class at the on the element Use a full for prototyping Now we have an editor This is a long story because Now we can have in Firefox as CSS and JavaScript editor that can open save Eden file without need another editor installed of course this works with the local file and auto remotely, but yeah It's always useful for prototyping or to avoid copy and past and doing with the spectrum I wish her and our works we have the style editor right here This is automatically loading all the CSS loaded in the page also for web best of the extension or Remote resources that are not asked like this case YouTube the YouTube CSS here and we can Write as we want save and we have Other kind of things depends of course of the CSS that we are opening I I don't think that is okay. We can also have the media. We want to go to the media specific of the sides Right here. There are only the modality for print a screen, but we can have media query I can click here Automatically go to the media print when we have too many rules with the responsive can be very helpful to save your time Here also of course explain what are the rules in this case? This is not responsive because there are slides, but it's inside your Firefox tools And you can create a new file import from here But this is not enough Because we are hacker Firefox support the cable decay They came up of Veeam and max a sublime enabling in the settings so for people that love to use Veeam I don't know many are here and want to start a flame war here about developer tools But you can enable inside your firefox a user you can see the hot decay map the shortcut whatever of these tools These is source map. I don't know many here use coffee scripts as type script blah blah blah blah They are practical languages But they probably suspect in your browser because they are compiled in javascript when you expect javascript to CSS They are not the original ones. We have no idea what is happening. I can't debug something like that. So Firefox like chrome or the other browser use this Standard this source map So when you load the cough coffee skip this case javascript file automatically It can open the coffee file on the right line of the method so you have only to enable in your compiler and you can expect from here as you can see and I can I can say it's pretty cool whether to work in a large code base with compiled stuff These is one of my favorite tool of firefox is the only one that remember the shortcut and Is the responsive view in the meantime is improved a lot now as a preset of Devices you can of course add your own and set manually the sides so I can you I work in a me and a little screen I can set a huge via port from here and The results so as you can see there are two icon right here You can do the screenshot or enable the touch events from here but the results are new feature from the responsive view These is a positive in action with the old graphic but as you can see here we have the style editor and We can interact from here clicking on the media query and change dramatically the sides So we all want to see the action on a specific unit side. We can click from here and what you got it stretch or whatever So it's automatically the cool party is automatically This is the most I think throttling was the most missing feature from firefox dev tools that chrome As now the results on firefox You can do the throttling of the network from here and see what happening with the old the rest of the tool Of course, so it's a simple feature, but it can port and now We have here a very fast speed in Italy is not the same. So this is important to have to see what happening This is the console. Well, I don't think there is too much to talk about it because we know what do but now we have feature about Ayak Ajax CSS or floor many of the future we can feature because very quickly can be very a long stuff of boring because reports all the Prefix and the CSS rules or whatever. So it's better to feel so what is happening right here But I want to add this slide because We are developers. We want to our shortcut all the developer tools are like a standard of Shortcut as code to use only in the console. So this is work also in chrome and not all in firefox This taken from the documentation again, but these work at some chrome. So We are expecting the slides. We want to get this dumb element. I said, this is the light that is active right now if I do Dollar zero as you can see there is not a complete I Can do the zoom a little bit. We see that is the select element So you have not to write the selector Etc. Because automatically I can do it that way with zero in chrome The here that the standard is different in chroma to Oc the preview selected element You have dollar one dollar two dollar three to see the previous element selected in firefox is different because we can do it That way I selected the element we have Using console is the English version save in the console the elements selected So I can have two three four save it in our position is not changing selecting in that way. I save this one Go here as you can see 10 zero is the other slide selected But this is memory. So I can switch the selection. This is memory I want another one using console again will be 10 1 champ 2 champ 3 I save in the console I can do as usual I Have to move the selection. Okay. I can do As in the sample That way I can interact directly in the console with the shock like a cache variable as you want as we can say everything else of a dollar zero And this is also in chrome So pretty useful when we are to expecting what is happening wrong There is also the shortcut. There is the double dollar is a shortcut for document query selector all dollar only one for query selector to save to you to write all these stuff because the problem javascript is verbose So you can see one of the cooler and now is copy We have a shortcut method that is exist only in console to copy what you are passing from a method as an example I want to copy the in HTML that I printed here in I do copy Now it's my the clipboard on this operative system. So I can do This of course is again chrome and Firefox So you can do it very quickly Magic and you can also do inspection as any simple I working from console I finally find my selector and want to search again in the dome. I can do expect We have all the information here of the dome element right here There are quickly Shortcut to do the developer job. There is also this one dollar underscore This is to access the last value Output in the console. So we are doing as an example two double plus two We have four we want again four without to do all the formula We write dollar underscore we have four because save the last output Now the javascript error reported in the console directly to the documentation This is a feature all your Firefox. We can see Writing automatically when there is an error the poor the link point to them in the end documentation of the error So this is helpful to find what is happening. I have no idea a stack overflow has too many stuff about this error I kept a documentation developers love the documentation but not to write it but Median is returned from people that work only on it. So it's very complete. Don't worry There is also the javascript a bugger that now it's very very powerful now We will see why and that you can see these interacting with I think a react HEP. No Backbone I think so we can see that a little bugger can recognize few different Frameworks the the gif is not updated but now recognize also with the icon recognize the specific framework And you can see all the method of the class inside here break point inside the browser Is that the bugger so we don't have to talk about so much about it But then the interesting part is we'll see in the later This is the network. I saw many people that do CEO or Work as sysad mean that was using fire back only to see the performance of website because they are managing the CDN But developer tools as the network tools too. So you have no need to only choose fire back for this One of the interesting things for people that works with the framework that we have an idea what is happening inside So is it now Firefox can see this the stack trace of the Ajax call so when you add the console we have the call you can click and see what where is called the finding the power The specific function with the structure. It's a structure stack trace. So it's inside your tool This is one of the most interesting last feature again There is the video because with the slides locally. It's not so much realistic we can see That's This is now seeing the network per performance in the page We see the package version and empty cash version the status So we can see what is happening with the case in the browser and without caching Right in the browser So can be very helpful when you are trying to improve the performance of your page The profiler is was one of the first feature of the Firefox developer tools Usually I show with the huge page that you webgl animation etc. But to save time I will avoid and The cool part that is patient with the GL object of the browser So you can expect is as low level what is happening inside the JavaScript engine and you can export these Output and load the in the specific tools to see the profiling There is one of cadet and remember right now the names, but you can save this recording inspector later with other tools this storage The storage is enabled to you to filter and change local storage such as storage cookie index DB and whatever I don't know many of you work at with the Europe Cookie law at the time when there was the European cookie law was important to see Oh, I have cookie more upside. I have no idea with this you can see and that's a change The value is helpful when we have working as a simple with web extension or JavaScript application and red and bright on these values this scratchpad is my I think it is most favorite feature of the tool because Now there is the test pilot extension that enabled to have a scratch pad you have a scratch bar and now Here this is a scratch pad. You can write your JavaScript code here save Open a local file save a local file format for the internet So you can find a cool snippet of stock workflow put here run a series run is running on the page So you don't need to use the console because it's very uncomfortable here. You have a scratch pad So you as an example we have to start a web an extension for the browser I prototype here and next I move through the extension So you can save and doing like in the console right here Of course, you can use also as block a scratch pad for your notes, but it's for developers. So Maintain Yeah, you remember what a value Yeah, perfect up. Yes. So is a is helpful for the timing in case you need something more Of course, we have the debugger that is an editor. So you can have tabs of I because I think it is not updated a browser, but you can have tabs of what is happening here So you can have all the same feature with different file this is again for Graphic people the color picker in the page and again the rules because rules are important rulers and all rules and And of course this one support the copy and paste automatically when you click copy in the clipboard. So Is that the ball again? Of course One of the most lattice feature is that now the Firefox developer tool support the developer tools API of Chrome for web extension So now there is this the extension for react.js angular.js ember many others in the undone Mozilla store so you can download the use extension for developer tools this is a little list and They're working so you can install and use extension or develop of course extension for your Developer tools so using a JavaScript API so in the future and I will be see many other tools for the Firefox developer tools This is an example of extension. This is an inspector for web socket Done by the outro of firebuck. So I can see it's pretty cool You can inspect the web socket But when you have to work with too many web socket can be helpful because we're so good are too many So you can inspect inside and you can install in Firefox This is for develop Extension so it's a part of developer tools. I have to do I supposed to do a talk yesterday about that But problem I didn't about web extension But it's helpful to load temporary an extension inside your browser and develop with the tools that we already saw Is Yes, list also the service was here the proper that right now is an old screen. So now it's improved also the interface In fact the interface is completely different. We have the special also of the single tab and service worker But right near I am not using service worker, but in case you have the list of said we work Now I as you can see I've done a zoom of this the tools because the develop Firefox developer tools are written in react So this is a github repo a project completely different from Mozilla this different team and can work also stand alone And they could part that you want to improve the developer tools because I want to do a patch I can download this and Out reloading the version that I work inside my Firefox version So I can patch the developer tools the loading and loading from here. There is a video about to save time Because I want to get boring You can do it. We are we are harkers. So I don't need to explain many things. I think As I can say the baggage TML you saw the debugger in the screens but The cool part that I say is our standalone so you can expect other browser or no Yes, stuff from the same tool it for developers at the timing with Internet Explorer Safari different version of Internet Explorer again Firefox chroma the The problem was that every different browser has different depth developer tools with different features So the bug can be difficult because I have to remember all the feature how works But be the hot K are different in that way we can use all the same tool With all the features that we saw in all the rest of the browser because there is a remote in the bugging protocol So we can use also with the Android Firefox for Android chroma for Android Chrome for iOS from Firefox in that case from the baggage TML As you can see from this screen This is opening the same app from Node.js Firefox and Chrome and control remotely with the baggage TML. These are old screen now It's more powerful is one because is an external project Receive too many patches. So it's very very quickly with new feature very very easily and the baggage TML was the first one Now they are working on the profiler. There is already a rep on that there are Starting to migrate also the profiler so we can use also the profile of Firefox profiling for that stuff This is one of the last feature that was crazy Interesting because the web assembly is a new can we can say standard? I don't know here. How many people know about that the cool part that was a standard burn from the smgs and What is we are developing in C++ or hacking quake or doom as usual because doom can run everywhere also in the browser And we want to run in the browser at the time. There is mscripten mscripten is a tool by Mozilla that you go C C++ Rust application Compiling JavaScript so you can run FF me peg in the browser Libre office as an example use this tool to import in the browser manufacturer and This compile in pool JavaScript so my B FF me peg can be like 30 megabytes of JavaScript and Can be not fast. So they created this new standard. It is web assembly that is in the middle CSC C++ is compiled. It is kind of assembly that run inside the browser So it's more fast. It's binary and you can interact also with other Framework. I know that he with angular gs. They are prototyping using web assembly for angular gs So in that way those browser support web by assembly run the web by assembly visual. It is more more fast and That we show an example Ignore the audio, but the cool part is that here, right? Why is not ht? a moment Okay, this is a tool online, but the web by assembly support right now is also in Chrome So you can write your c code here. This is an example of the feature of course You can use the command line tools you see the web by assembly version right here And what is happening inside Firefox or Chrome? So you can also write the rightly web by assembly, but the problem with by assembly is binary So it's very verbose, but you can we can write c other tools only with our Usual developers tools and the results a cool demo. I can try to add a I forgot to open Of web by assembly in action Because Mozilla to show how much is the performance of this tool Taken and I know yos demo or using WebGL running in the browser so the problems that use Like 200 megabytes of stuff to download because they are HD texture, but it's in pushy D So in the meantime that is download we can go over with the next stuff. I will see at the end when it's finished so We have developers will have documentation to read not to write There is all the links that you can find about the Firefox developer tools documentation Shortcut the YouTube channel of the main developer of Firefox developer tool So you can see the last feature that has releasing you can find out So this is an example to try the future that I show to you is like a tour that Step by step we say now click here open the tool do this and see what is happening There is also an account Twitter so you can find Okay, it's after the demo This is a web bus. I have an NVIDIA GTX 7 350 This is on my laptop Is a poor webGL in web assembly? There is audio when finished the image there is that sort of interaction There's that sort of music, but it's not important This is a demo for a US. So It's not very fluid on my laptop, but I assure you this in a desktop. This demo, of course is very fluid but I Think that the most to see the performance is easy to show it's important to show these Are in real time with the web assembly? So you have a game you can run in the browser the demo was very very very cool. I did when they released it But so this works out in chrome. No worry. It works out in other browser. No slowly poor Firefox So this is a web assembly in action So all the application that you have you can run inside the browser with the web assembly or compile in javascript with the Other stuff off the cool part of a bus and that you can interact with the other javascript Scripts in the page between them. So there is another talk about that, but it's the documentation again and This is the hand of the talk. I want to get boring because we are developers We know to use developer tools I want to close with hotkey because they have the proper to remember them with all the different tools that we use so in mdn you can find all the documentation for every single tool also the tool that didn't show to you and The demo of everything. So this is the end of the talk so for question of our stickers. Hey, I'm here Yeah actually not because is In another repo is outside But seems that is not Creating problem. I know that right now. There is a working on from Facebook to change the license because you know The Apache Foundation open a huge discussion because I know also the WordPress Foundation want to integrate react so actually there are no problem and In case there was Mozilla as a huge very strong department about only to study policies So there was there was fix in any case Yes, I can repeat that Yeah Yeah Yes Yeah Yeah, you can do it. There was a slide that they removed but in this One of the future that support also in chrome and other tools that your code you can write the bugger is a specific Function for console that automatically stop the process of the javascript open the debugger and the line where you write the bugger So I cannot do it right now because I can broke again the slides or because that so there is no much javascript But you can imagine you are developing a huge web app the bugger not what you can open the debugger You can do the stack trace and see the value of the variable. I and I said why remove it is light. But yes Yes You can do it but is manually so Do you have to open the? Here do this stop the here we have the play and pause you have to do it manually this part So it's better to save a run from here, but you cannot expect from here Yeah, the behind yes Yeah, yeah, the beautifier. Yes, it's also for javascript CSS So because initially was the release it all this tool for a beautify the code the next day Oh, it's a free editor. We can improve it. So this is the first beat if I work so see for CSS and javascript without problem Yeah, yeah Yeah, yes Yeah This is a good question because I don't develop with react and I don't know what is happening with stuff like that but Because the tool the the developers that develop the tools use the developer tools again So I think that is the support because they cannot develop without this kind of feature But is on github the debugger the schedule so in case you can ask here So they have different rely cycles. So they are very likely to rest to reply to you Any other questions? No, we ever develop as we have no question. We have the documentation