 For the past decade, he has been acquiring knowledge in web development and design, and is currently working as a full stack designer. Talking about mastering developer tools, here we welcome the much-awaited presentation by Mr. Surendra Tresta. Hello. Check. Can you guys hear me? All right. So, namaskar. Sorry to be unable to answer that introduction. So, mastering developer tools session my name is Devade Namaskar. So, a short introduction. My name is Surendra Tresta. And I am a learner, because I haven't learned for 10 years. I haven't learned yet, but I can still learn. I don't know how to learn, but still, I'm still here. Like me, I don't know how to learn. And I've learned a lot. And my front-end development or development, I've learned in this 10-year-old learning. But I can't share it with you guys. So, I'm asking you guys. So, technical difficulties are coming, and I haven't been able to do it on full screen. So, I'm going to show you the demo. The font size isn't good, so I'm going to give you a feedback. And I'm mostly a full stack designer. I've never done anything like this. And during the development, I've been working as a back-end developer. But mostly, I like to call myself as a front-end developer. And at the start, I'm a wide-developed developer. So I'm inspecting everything and developing from scratch. I can't imagine developing without the tools. So, the tools aren't there. They're not there, so it saves a lot of time. Before I started my career, I didn't learn how to learn. I don't know how to develop tools or YouTube. I can easily access it. And at the same time, I was including my own page and used the time for 8 hours in the office. So I'll let you know more about the developer toolbars. How to use it? Productivity increases. And the code name is Kapal Tanda Tanda. How many Kapals do you have? What is the time of Kapal Tanda? There is time for coffee. Better debugging and quality assurance is also helpful. So let's start with Chrome Live Editor. How many of you know about Chrome? You can directly load the project and write the code. Do you know? Okay. So I see a lot of you guys. So I'm not encouraging you guys to use Chrome to do all your development. There are a lot of handy words here. Mostly WordPress or other websites where the client hasn't managed to give me full access to their website. Front-end changes are gone. Sort of JavaScript fixes are written. But it takes time to access it. You project it. Directly in Chrome, sort of like this, I've seen full-fledged development. What I want to say is that the PSP code highlighting, I don't know if it's because they got rid of it, but HTML and CSS highlighting are there. You can load your project on Google Chrome. And you can also do file mapping. First, you have to do a live preview to load the file in Chrome. First, you have to do mapping. Now, you have to do overrides. Actually, I'm going to do demo now. How can I do it? Let me go to sources here. Is this readable enough? You can see it. You can see the light on the front. How do you deem it? You can see it on the back. So, in Chrome, if you go to the sources tab, if you have enough room, you'll see. And it's a file system. I've already loaded it here. Actually, I'm going to remove it and add it here. You can use WordCamp. I've already folded it. If you go to the file system, you can see I have this WordCamp 2022. I selected a folder. And I have access to it. If I allow it, it's going to load a whole of the project in Google Chrome. Now, I have to pop out a full ID to use the code editor. Now, I'm going to do general coding. And the benefits of this are the PSP support, the syntax highlighting, the development of Google Chrome. So maybe you can raise a support ticket to request a feature. But index.stml is used to highlight the HTML. If you have local files, I can easily make changes here directly. The HTML is saying something. I delete something, save it, and reload the page. I'm still in Google Chrome. Everything is running. I don't have any code. I don't have any syntax highlighting. I don't have any other PSP files. I just don't have any documentation data. The local file is directly here. And just in case, there is a minified code, you can click on the double call and it will beautify it. So you don't have a lot of control on how you can format things. But it gets the job done. So if you don't have ID enabled or if your dad is working in the computer, you can open the code and make a folder, you can map it. You can load the file in the same way as in the overwrites. I have loaded the site of the old camp. Let me find this. So old camp is done. I can do overwrites. I don't know what local overwrites can enable. If I don't write the code directly, I can save it. I can do local overwrites. I can just map it with the CSS. This is enabled in the sphere. Now I am in the section. The background is red. Can you see it? You can do local overwrites. Imagine a scenario, you don't have access to the full-fledged live site, but you still want to do some front-end development. You can have directly overwrites enabled. You can do the local map. It starts writing your local changes into your local files. Then you will be able to provide whoever your client is, just the file that you just modified. In this case, I can easily modify the style.css. Later on, provide whoever my client is, just this file. Then they can upload it in their site or code changes. Another interesting thing that you can do here is you see a lot of images. There are other features. You can write your code to play around. If you don't want add-messages, if you don't want extension-insult, it does nothing, but just select images and hide them. If I run them, it gets rid of the images in these pages. You can create multiple images. You can create multiple images. You can create multiple images. Let's go back. The body feature is there. As I am running the time constrict, I won't be able to share everything, but I will share some glimpses of what I can. Next is buy to all-out, hello to console. I started developing most of the developer using all-out. I wrote JavaScript and I didn't know what code was there. All-out is working. Logging is not an intention. We didn't know that before. After getting into development, when I learn that console is available, you can really use console to equate your messages and have better debugging, better log. All-out is for debugging. You can use console to read development messages. It's non-intrusive. You won't be able to see the inspector toolbar open. I don't know how to use all-out. For example, I have a plug-in without license. Client doesn't have developer-intended messages. Console.info there are licenses not applied. We can use console. I will give a link. You can see the details of console API. Most of the sites are here. Moving down, in the common console method, you can use console.log. There is a general log highlighting. Console.warn, console.error. Console.time and time are really interesting. You can benchmark your time. How long it took you to execute that code? As I request, you want to make your code efficient. It will tell you how many seconds it took your code to execute. Similarly, console.table. If you don't like the directory structure, you can use console.table. The key value pair is console.message. Console.directly-collapsible. Another interesting fact about console is I found that Facebook if someone has told you to paste code, don't do this one. Big companies, they put vacancyannouncement in console.log. You can also style those. If you are curious enough to inspect the sites that you like, you can also find vacancy messages that they are hiring in console. Generally, there are many ways to install a console. For example, console. By the way, if you have methods, in root.table, there is a function called console.directly-collapsible. For example, if I write a pretty message, I will run it. Sorry, wrong window. It will run in this site. If I go to console, sources, I will write the code. So, I will write a pretty message. I have a function called console. If I write a pretty message, I can format it in the console. And console messages can be written in console messages. These are different levels of console. The first LO1 you see is a warning message. You can do computation inside console.log or object. So, I am moving on using breakpoints. This is one of the interesting features. I had known this earlier, it would have saved me a lot of time. It is difficult to track where your code is going. If you come to source, manually debug, it will be difficult. If you go to pages, you will have to scroll through your code. Wherever you are working on something else in the code. So, debugger is something really useful while doing coding. So, for example, I have this sources here. What does debugger do? I am going to uncomment this page. So, you see, once the page started loading, the inspector bar is on. Code execution is halted. It is called positive debugger. It is undefined. Because the code execution halted one line before. So, it is still not defined because you are new. I can step over. And now if I hover over car, it says it has three doors. Engine state is off. So, your global scope or local scope, you get a better idea of what your code is doing. So, I have this exception handling. So, try catch. So, I start the car. And after that, I hover over car. Engine state is off. I am going to hover over the car. Engine state is called Idle. So, object is a dynamically mapping map. It is going to hover over the car. You get a pretty idea of what is going on throughout your code. So, I play console.log. It is going to handle car. I am going to drive car. It is going to handle car. So, first, it came here. It broke. So, attribute modification connection. So, moving on use a break point. You can add a break point manually. It is loaded script. You can open the main.js. In main.js, you can add a break point manually. It is a break point. You can disable it. It is a break point. You can add a break point. It is useful inside the attribute. It is a custom debugger. You can add it. For example, you are mutating any object on DOM. So, you put JavaScript and you try to change the attribute of element or there are like event listener or you are modifying the DOM tree. So, this is the case. We can attach debuggers like break on attribute soft remodification, node removal. It goes and breaks to a point to a code which is trying to update or mutate the DOM tree or add some attributes. You can see the screen. You can still see the screen. So, now moving on to the next. Emulation and performance thoughtling. So, oftentimes we are equipped with high performance computer like 2LGB RAM 6432GB and usually the clients that we are developing our code has really low performance computer. So, it works on our and it can be because of slow connection like in case of case. You have to emulate it. You won't find it in Firefox. So, all of these tools I am talking about you have to use Firefox how to do it. You have to use Chrome for everything. You have to use thoughtling and emulation. Big application you want to slow down your computer and see how it's working. So, if it's not already visible you can use this wheel cog and then you will be seeing CPU thoughtling and network thoughtling. I can slow down my computer six time. So, it will slow down my computer six times. So, it will slow down my computer six times. I can't handle it because of processing. I can't slow down it. I have tried to benchmark it. So, let me run that benchmark code. So, in that benchmark code I am just randomly generating loop and then I am trying to see how efficient it is. I can show that loop. It is just a loop Let's see what the difference is. It took six milliseconds. So it came down to one millisecond. How well my application is performing really becomes helpful. And one of the useful features for emulation is print rendering. There are many things to do with print. I personally have to work with print. The first place is Command P. And then you start fine-tuning it. So it becomes really time-consuming to design for print. Fortunately, Firefox has it easily. So if you go into more tools and then use rendering. So in rendering, you will find that there's this thing called emulate CSS media type. So emulate media type, if you offer print. So your entire emulation goes to print media. And then you can start seeing. And your print is a different behavior. The title is only for print. I have written CSS. And often I have a new site or even a site. It's a print user. It's a site where nobody prints the website. So you can use this emulation to emulate for print. And then do all your development. You can also find emulation inside this responsive tab. This map is also low-network. For example, this is a network throttling. Fast 3G, slow 3G, or custom-made 64kbps. You can also use it. It's for emulation. And another thing now finally is debugging your devices. So today everyone has a background browser. Even mobile has Chrome. And everyone is rendering using Internet Explorer. When they moved on to Chromium-based browser. The new one is using the same engine as Chrome. So there are differences and issues that are not similar. But in some weird cases, the issue you see in the device can be emulated in the browser. Chrome inspect devices. If you go to this URL. So I have this open here. So remote target. And let me see if my mobile is connected here. And see if I can demonstrate this. My phone is stuffed. Wow. So if you have your devices open. And remote target. I need a device list. So I'm trying to set up and see if this works. Unfortunately. I don't know why. So I'm trying to boot my phone here. Unfortunately it just died. So screencast automatically works. So you see that transparent bar. So that's the Android growth blank space. So for an iPhone. And if you're using a Mac. If you use Safari. You can directly inspect in Safari. Without doing anything. You can directly inspect on your iPhone. Or iPads. Using Safari. But for Android devices. If you have USB debugging enabled. So you can find further reading in that URL. You can just search on Google developer. Dev tools for remote debugging. So it's gotten by one. If you're inside. And. This phone is still loading. So. Let's see if we can manage this. So regardless. Your phone. Okay. So it's not working. So. So you have to trust me on this one. I didn't fake this screenshot. So you can use your mouse. On the on your computer. On your mouse. Up down. Real devices. Scrolling. So. You can inspect from here. And then you can do your. Development from debugging. Directly connected with your devices. Right. So. I think that's all what I had to share for today's presentation. So. Lastly question there. So I'm leaving this session with asking for more answers. So. If at least one or three people can tell me of. Exciting features. Exciting tool that you use for development. You can share now. Or if you have any few questions regarding this presentation. You can ask now. Any questions. All right. Can someone give you the mic please. I can hear. Question. I like the typography. And CSS. There's an experimental feature. So you can enable and see the. All the fonts and their sizes and the colors. Oh, okay. So in the computer model. Yeah. Thanks. So what it just mentioned is like in the elements. You can have the feature. Cool feature that you can use is this computer thing. So I also find this very helpful. So rather than struggling on. Where your CSS is. You can go to computer and then you can find. The actually applied styles. And it's my expand. You can find where you're. The actual styling is being applied from. And also you can scroll down to see the render forms and stuff like that. Anymore. For the crowd. All right. All right. So. Wrapping up to my session. I would like to say everyone to. Work smart not hard. So I hope you'd be exploring further more. You've got it. So. Thank you very much.