🎞️ Videos → Advanced Frontend Debugging with DevTools Beyond Console.log

Introduction and DevTools Overview0:00

How do I say it? สวัสดีครับ Good afternoon and welcome. DevTools was really helpful in different areas of your workflows. I'm going to share a few tips with you today. Going to be fun, I hope.

The format of the talk is, I'm going to present a bunch of tools, and then you see what fit your workflow. I will send the slide later on, so don't worry if you don't catch some of the tips. So with that, let's start. Sometimes, I believe, unsubscribe to a newsletter seems

to be too easy. So you try to select a button, but it just won't, right? There's a little bit of trick behind it. And if you are a frontend engineer and you know how to use DevTools, I think that's where the magic coming in. So you can select the button and you say, "I want it to be a global variable." And you can trigger the click, programmatically. And then there's no cheating. Yeah, sorry. It's, of course, we know it's going to happen. So this kind of example remind me of what I built, probably, 10 years ago. I'm not sure if anyone of you built the same thing.

By the way, I'm going to share the code for that, so you can use it for your future reference.

But if your friend know how to use DevTools, then things going to be a little bit easy, I think. So now in DevTools, you can select the button. And then, okay, try to select a no button, very attention. And you can do $0.

I try to select it. You go in and do $0. So it just select the current selected element, right? You don't need to do 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚐𝚎𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝𝙱𝚢𝙸𝚍 or something. It just be able to select the button. But, yeah, of course, it's not working. We know it's going to happen.

So I think, right, the web has been around for,

probably, around 30 years since 1990 when Tim Berners-Lee introduced it. And the web has been going a long way. And, at the same time, the DevTools, the browser, which is what is serving the web, is also coming a long way. We got different tools from different vendors. There's Firefox, you see. There's something doesn't work. Okay, there's Chrome. That's mainly what we're looking to today. And also Safari, which is sometimes you need to look into it if you see a production issue on Safari. But likely, most of the time, you want to use DevTools of Chrome, anyway.

Exploring Chrome DevTools History2:50

So I try to look for the oldest version of Chrome DevTools I can find. So that is the version 15 Chrome. It's long time ago. And it's in 2011.

If you zoom in a little bit, right, the DevTools that we have more than a decade ago look pretty similar. You still got elements, resources, network, script.

And then comparing to what you have today, a lot simpler, in a way, but also packed so many more information comparing to 10 years ago. So today, we go a long way. So I try to show you some of that. And the fun fact is DevTools is the web application. And, probably, you can use DevTools to debug DevTools, but I never try it, and I don't know how it's going to work. But, technically speaking, it's possible. So you can go to GitHub and see how the component is built. It is very interesting to see how this kind of tooling was built from Google scale. And they have a lot of documentation. I think it's not on GitHub. It's in Google sources.

But do feel free to take a look later on. So I think Addy was mentioning a good tool can make a difficult job easy and an easy job faster. So I think, definitely, DevTools was playing around in an important part in your workflow, whether to trying to unsubscribe newsletter, or, more importantly, on your daily workflow on actively doing local development.

Basic DevTools Navigation and Shortcuts4:30

So where do we start? I think we start with something basic, right? I know everything early is basic, so stay with me. Don't leave the room. So we start with F12.

That's the easiest you can do, right? You right-click, you do inspect. And then you do whatever thing you can do. There's console, or you can press F12. That's the shortcut. Super easy. I think that's all. That's basic.

Next thing you can do, you can toggle the responsive window using shortcut, command+shift+M. If you are engineer, at the point of time, you just want to use keyboard for anything. So command+shift+M is not everyone using. You just click this icon on the top of this mobile. But do use it sometime. Quite helpful. And the last thing, not many people using is command+shift+P. Just open the command menu. And now there's so many things you can see from it. So do check it out. We only mention a few. Don't worry. But there's so many more that we can explore.

So there's a lot more, right? So you can go to setting and go to shortcut. So many more. I couldn't really mention all of them.

So, we're going to talk about a few things. There's console, the sources, and the network, and probably the last one is element. We'll see if we can do some live coding and all of that.

Speaker Introduction and Background6:01

But before we get into the detail, I'm Trung. I'm the Google Developer Expert in Angular. I've been running Angular Singapore and Vietnam, and I do speak at conferences here and there. In the past 10 years, I've been living in Singapore. I'm originally from Vietnam, but been calling Singapore home for past 10 years. Come and visit us. I believe Bangkok is one of the favorite destinations for people from Singapore. It's just so close, like two-hour flight. Things are affordable, great food, everything is great. So, do come visit Singapore as well. And I think personally, I got a lot of experience with Thailand before. That was me 10 years ago, more than that.

I never thought that I would come back to be a speaker. I listen to a lot of Thai music. So, that's my favorite post-rock band, Inspirative. You know, anyone know? Oh, no, really? Okay. That's fine. We discover it later. And that's one of the dishes I tasted 10 years ago, still remember. But anyway, let's move on.

Speaker's Company: Ascenda7:08

And then last but not least, with Ascenda, we innovate toward loyalty program and try to make reward accessible. The company is based in Singapore, but we do hiring around the world. So, do check it out.

So, I want to share the screen later, but for the purposes of the interest, all right, all good.

Console: The Most Accessible DevTools Tool7:33

So, here we look into console, and I think console is the most accessible tool that you can have in DevTools, I believe. And that's why it's everywhere. You will see at least one thing, one 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐 from a production website here and there, definitely something. And that's the JSON card, that's the power of 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐. It's going to take the thing and show in the console. But let's look into this example. I think it's hopefully Can you see at the end? All good? So, that's simple React component. They just a few properties. And likely, when you're debugging, you're going to do one thing, 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐.

If you don't do it, and of course, we are different, but I do it. So, that's what you get, simple. All right. Yeah, you get 𝚒𝚜𝙻𝚘𝚊𝚍𝚒𝚗𝚐, and you got 𝚙𝚕𝚊𝚢𝚕𝚒𝚜𝚝, pretty simple. And when you zoom in this line of code, so actually, you need to type a lot, right? 𝚒𝚜𝙻𝚘𝚊𝚍𝚒𝚗𝚐, and then comma, and then whatever 𝚙𝚕𝚊𝚢𝚕𝚒𝚜𝚝. And then there's a shorter way. You just put it into an object. Because in JavaScript, when you do it this way, that 𝚒𝚜𝙻𝚘𝚊𝚍𝚒𝚗𝚐 becoming a key, and then 𝚙𝚕𝚊𝚢𝚕𝚒𝚜𝚝 also becoming a key, like becoming a playlist string. So, when you render it again, it's an object.

Is it super helpful? I couldn't tell, but it helped me type faster, right? You're going to save a little bit of time every day. It's going to add up. So, do definitely try to use it bit more frequent. Many of my team doesn't use it, so I should encourage.

Logpoints: Console Logging Without Code Changes9:13

The next thing is you can console thing

without writing console, which is like blow your mind. Like, how do we Is it even working? I will try to show some demo later on when I don't have to hold the mic, but now we can just look into the screenshot. So, this one is probably very small. Can I have the stand?

I think this one need to show you in the proper.

All right, let's see. Okay. So, I want to stop sharing the rest.

So, you can go to sources. I'm not sure if it's very small, right? Go to sources. Zoom in a bit. That's the one. That's what I'm trying to say. No worries, take your time. And then, when you are going into any line, you can right-click. That's right-click, okay? And there's something called add a logpoint. Do you know it?

No one know it. No one raise hand. So, I can see that is why you are in this room.

See, you right-click, you add logpoint. Okay, now let me zoom out a bit. Now it's too big. Okay, zoom in a bit and then you can do it slowly. So, it accept any expression, right?

So, you can just do the same thing that we do just now. You press enter. So, now, okay, the zoom thing doesn't work very well.

So, you see there's something on the left side. So, when you go to console again, let me just zoom in a bit. Hope it's still working. Okay, it doesn't seem to work. But it's not in the same component. So, I go to playlist. And it still doesn't work, really? That's what happened when you try to do live coding. Let me see again. Okay, I was in the wrong component. That's very unfortunate. But you get the idea. You go, I go to playlist listing. That's where I want, right? That is the line that you see just now. And then, I can do it again here, okay? Just below, anywhere below this line. So, I can do logpoint, okay?

All good.

All right, okay, slowly. Just to playlist.

It's not my usual keyboard, so it's quite slow. You go back to console and now it should work. Yeah, now it should work, right? It's like magic, huh?

So, okay, that's one of the logpoint.

But it is super useful, I think. The reason why it is so helpful because if you put console on your code, when you commit something, you might forget to remove it from your code. So, that's why maybe you need to have force push to remove the console. So, you need to do something local, right? And then, you have the source map anyway. You can see anything in this source tab. So, do try using it a lot more. So, back to the slide. It's still presenting. Okay, now I need to go through, right? Of course, it's easier to see. The next thing you can do, you can change

Changing Program Behavior On-the-Fly with Conditional Breakpoints12:49

the program behavior on the fly. Because think about when you deploy code to prod or staging environment. Sometimes you want to test it out with a different value, right? There's a component. Let's say this component. I hope I can, okay, let's go back to the code. I think showing the code is easier. It's a lot more interactive.

So, here, let's say I got this code, like, locale.

It is going to come from a hook somewhere. And in a lot of use cases, you are not controlling of the value. And assuming you deploy the code to staging, right? You want to test it out with different value. So, that's the thing you see here below, right? That's the locale. So, you are try to do the same thing we did just now. I can see locale.

And then, I go to console. Okay, let me, okay, that's too small.

Up, down. Down, refresh.

Sorry. Too small, but now the code is en-SG.

And then, you want to try with, let's say…

Let me remove this first. I add again. So now you got a new thing called add conditional breakpoint. Anyone knows it? Just to confirm. So this add conditional breakpoint is like it's going to stop the program when a certain condition evaluate in value true. So you can use it to run some assignment, right? So let's say you want to say I want locale to be some other value. You can use it. Now it's too big again. So I can say locale to TH, to Thai, right?

I press enter. I refresh again. So now it's paused the execution because when you assigning something, the expression is going to return this value. So it is always be true if you assigning to something like a truthy value. So if I run F8, just let it run. You can see that now it changed to Thai. Even though the value of the hook is still en-SG,

but you change the behavior of the program. It helps you to try a lot of fun stuff when you like do a payment on e-commerce website, you can assign some value, things like that. Anyway, it's not the purpose of this talk, but this one is super helpful on debugging, I believe, right? Sometimes you really want to do it, but you just don't have the tool. So the pro tip is like because now if I refresh again, you see it paused execution. But you might not want it. Maybe there's like the component re-renders like 10 times, it's going to pause 10 times. It's not going to work. So you want to do something like in JavaScript,

we call it a comma operator. So you do this thing locale and you do comma false.

What it does is like doesn't matter what is the thing on the left side of the comma, it is always returned to the value of the second on the right side, which is always false. So you run something and you just let it run. It will not stop here because it's not true, right? The value, the function say add conditional breakpoint.

So if it's not true, it will not stop. So if I do it again, press, it just go.

And then the value is still Thailand, right?

You want to see is real. So if I wanted to see, I never tested out. Is it French? Is it No. DE?

I'm not sure. Let's try.

Oh yeah, see, it's working. Oktober, right? So sometimes you want to do it. Sometimes it's really helpful to get this functionality,

right? Okay. All of this is just some slide I prepare in case I couldn't do. So that's that's a comma operator I just mentioned.

When you run that, it just evaluate in the value. So it's going to be truthy. So do it with comma false. That is going to skip this breakpoint. All right, next thing.

Understanding console.dir for DOM Objects17:34

Anyone know about 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚍𝚒𝚛 does?

I think I'm in the right room. We are in the right room. So just stay until the end. So it basically... So, okay, this one we can just see the slide, easier. So in React, you likely is going to...

You're going to have the reference somewhere. And then you're going to assign it to HTML, right? A ref. And you want to do two things, right? You want to do 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐 for this ref. We want to see in the next slide, but we see the value. So if you do when you click button, it's going to show you something. So the 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐 is going to show you the first line. It's kind of useless. It's a beautiful version. It's like that's the element for you. But it's not something you interested in in most of the cases. You want the JavaScript DOM object to interact with it.

So that is the only use case I found 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚍𝚒𝚛 is helpful because it's going to list down all of the property without beautifying it in kind of the first line, I can see. So it's helpful sometimes, not all the time, but at least it's something to take note of.

Measuring Execution Time with console.time and console.timeEnd18:54

And next one is 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚝𝚒𝚖𝚎 and 𝚝𝚒𝚖𝚎𝙴𝚗𝚍. It's basically to measure the time when you run a function, right? So here, I got a very... I don't know, it's a slow

function. Doesn't do anything, it just keep trying to add up a sum until a billion.

Of course, it's not a real worst scenario, but there could be use cases it's going to take that long, right? And you want to take like measure how long it takes. You can use like performance tooling and things like that, but it's a bit complicated for sure, like on this diagram, it's just might be blowing anyway. So sometimes you just want to see how long this function is going to run. And you say 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚝𝚒𝚖𝚎 to start this. And you do 𝚝𝚒𝚖𝚎𝙴𝚗𝚍, the same string, right? The two strings need to be the same, exactly the same. And then you see how long it's going to take. And in this case, you can see that it takes almost a second, which is really slow.

Like when you try to click a button and this thing run, it's blocking everything. Like you couldn't really do anything. You click elsewhere, it doesn't work. So that is helpful when you try to debug. And I think let me try if I can show you the async

version. Okay, it's working. The synchronous version seems to be very straightforward.

But let's see if we can show debugging.

So I get two functions, right? There's a slow thing, it just does it blocking way. For add some slow async, I'm going to create a promise,

which means it's going to finish later in the future. So when I click a button, then I do the same thing

without await, then it's not going to work.

Let me remove await and async. Let me click again. So async is really fast. But because it's not really the time to finish the promise, it's just the time to call the function itself, right? So it's not what you want, and in a lot of use cases, you want to wrap it with async. And then inside, you just want to do await, like, to wait until it is ended.

So now we do again.

Zoom a bit more. A bit more. Okay. Easy. Time, timeEnd, async. Then go back, click. Like I said, it's very long, right? Almost a second. So that's how you do it with async function, you need to wait for it to run to get accurate time.

console.table and Other Console Utilities21:50

The next one, I think we can just see the slide, console.table. Not very useful. It just displays things in table format. Sometimes useful though, maybe you have just two, three properties, and you wanted to compare them, but just good to know.

DOM Element Selection Shortcuts: $, $$, $022:08

Next thing is more interesting, I think it's utility building with Chrome. Where usually you need to do 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚚𝚞𝚎𝚛𝚢𝚂𝚎𝚕𝚎𝚌𝚝𝚘𝚛, and now you just do dollar sign, inspired by jQuery, absolutely.

So maybe we should, in the code, easier again.

Okay. It's working. So if I go back to the code and I go to playlist.

Right? I select. Oh, it's very tricky. A bit tricky to show it on the code because everything is so big. So let's say I select this element on the element panel. You go to console, $0. That's it. That is the current selected element. You don't need to do anything else. Just $0. So let's say after select image, I'm going to select the h2 below.

So now $0 becoming h2, because it's the current selected. And $1 becoming the previous. So you can do it until like four times, right? The previous previous. But usually you just do the current one, I think that's easiest. So, that's the utility.

And then we got this dollar, dollar sign.

So I'll go to the next slide. This one is easy. Dollar sign is equivalent to

𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚚𝚞𝚎𝚛𝚢𝚂𝚎𝚕𝚎𝚌𝚝𝚘𝚛, just shorter. That's just shorter. Sometimes I forgot what it is, so I just use dollar sign. Dollar dollar sign, two dollar signs, which means 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚚𝚞𝚎𝚛𝚢𝚂𝚎𝚕𝚎𝚌𝚝𝚘𝚛𝙰𝚕𝚕, right? So you can select everything. It's going to return you an array of stuff to query. Nowadays, you likely not doing it all the time, but still helpful to know sometimes, right?

Next thing is interesting.

Styling Console Output with CSS24:18

console.log with style.

Anyone tried to open DevTools in Facebook before? You seen it?

So, you've been wondering how they can do this stuff, look so big and red?

Sorry. I got a call in Singapore. That's a door. So, as an engineer, you're going to try to look for it on the source code, right? You look for stuff with the exclamation mark, then you see it in the code. And then you see, oh, that's the stuff, absolutely, that's what I'm looking for. And then, oh, somehow they can inject some styling.

And then, that what I try to do, right? So basically, you can do this %c,

and then you can do some color or CSS property into it.

Not super helpful, but it's going to be something fun, I think. Something like that.

But the more interesting thing is like you can set some styling with CSS. Which means you can do something like you set the background image. Like you can render an image in console.

Why would you want this? I have no idea. But it just works.

I have no idea why you want to do it. But in case you are wondering whether it's going to work, yes, it's working. You can show an image in console. Of course, it's not a web version. It's not HTML, so right. It's good to know. I think that's all with console. Oh yeah, that's not all console. That's some of the most useful is the logpoint and the

conditional breakpoint where you can change the behavior.

Understanding and Clearing Cache in DevTools26:21

So we go to next thing is cache, right?

When you are developing like a web application, some people might say, "It works on my machine." Maybe your version is cached somehow. I don't know, right? So it is more like a myth, right? We know that you need to do force reload, command shift R, something. But no one really validates that. So we try to solve it now. So think about cache is like there's a box in a browser. When you visit the first time, there's nothing in the box. Nothing at all. But then the next time you visit it, because you visit it the first time, and the first time the browser is going to try to save something in the box. So subsequent, it will try to look for the box first. If it has some stuff, then it just returns from the box. Why not? Why would you want this? Of course, now it saves time and data, right? It's not like we don't know why. Obviously, it saves time and data. So it only requests for the non-cached version from the server instead of keep asking the server all the time.

So, okay. I think it's very small, but it is the non-cached version of my website. And then I got a cached version. Don't worry. You don't have to see anything. But the important thing is it's a lot lighter.

And it's a lot faster. That's the whole idea. That's it. The cache is going to speed up the speed of the website.

And there's different kind of cache. You see that there's memory cache. We're storing in RAM. RAM is random access memory. So what I learn in computer science degree, it basically means faster. And then certain things go into disk cache in the hardware

like in the disk, right? Like when you reload, it might still be there. In RAM, when you restart the machine, it's gone.

So Google Chrome is deciding it based on several factors. But I think one of the factors is the resource size. So it depends on how big the file is, then it's going to decide on where to store what.

But that is just the basic about the cache. But the more important question you are going to ask is

how do you clear this? Like when you deploy to prod, how do you make sure that the cache is gone? That's involving like certain setup. But let's say you wanted to test it out on some machine and you want to just test the latest version.

So we are going to look into next slide. And also, it's going to be helpful when you do active local development. You wanted to test it out in the latest version. So there's a few approaches that you can think of. There's three things, right? I think most of us know a few. But these three things I discovered recently. So there's clear browser cache. There is empty cache and hard reload and disable cache.

Clear browser cache is simple.

You right click again into any resources, and there's the option say, "Clear browser cache." That's it. Easy, simple. It's going to say, "Yeah, of course. Going to clear." And it's important it's going to clear everything. So it's not just clearing this resources cache. Clearing everything. And then you need to refresh again. The second approach is like this one, if you long press

the refresh button when the DevTools is open, this is going to open. Right? There's a

Is it dialog something? There's a popover below is going to open. There's three option: normal reload, hard reload, and then empty cache and hard reload.

And that is, someone has asked the same question, "What is the difference?" 13 years ago.

In 2013, 11 years ago.

So, that's my version of trying to explain it. So, normal reload is look for the cache. That's easy, that's simple. Hard reload, it just trying to load everything from server, right? Without looking for the boxes. But maybe, you only hard reload your website, but maybe the third party from like Google Analytics and stuff is still on the cache. So, it might still get from the cache. I think so. I hope. I assume. We couldn't find the official resources from Chrome. That's why I assume.

And then, empty cache is just basically clear the whole thing and then trying to do it again, fresh.

So, I think for us, most of the case,

we want the third option. Yeah. The second option works as well, but you want to have the clean state, do the third option. And then, the last option, I think that's everyone know. Do you turn it on all the time?

Because I do. I do turn it on all the time. And the reason why it works because Chrome now is forcing on of the HTTP requests to have this header called `𝙲𝚊𝚌𝚑𝚎-𝙲𝚘𝚗𝚝𝚛𝚘𝚕: 𝚗𝚘-𝚌𝚊𝚌𝚑𝚎`. To explain about cache and ETag and all of that is going to take another 40 minutes session. So, I'm going to come back next year and talk about it. But for now, that's all we need to know. So, you have it. There's three option to have your website fresh.

Hope it answer, clear browser cache on the DevTools itself.

The second one is when you press right click or long press it for a while, you see three option. And the last one is a checkbox. Most of us is going to look for the third one. Yeah. And then there's a lot more. There's like service worker cache and back and forth. Is it back forth? BF cache. Like when you navigate into the thing and go back, it doesn't really load the previous website.

It's called BF cache in Chrome. This video is super helpful. And I want to share it in the end. Don't worry. Let me see how long I have. Okay, I have like seven minutes.

Snippets: Storing and Reusing Code in DevTools33:08

So, next thing is snippets. When you need to run the same code over and over again, you can look for snippet. And instead of you copying the file somewhere, you can store it in Chrome. So, let me see. All right. So, in this video, I will go to snippet.

I'm not sure if it is very small. Can you see it? I'm not very sure. Okay, maybe we do a live coding again. That's, obviously, showing video doesn't work very well.

So, you can go into, you do command shift P, right? You can do snippet. Show snippet, right? I got a few already. I got a console image that you can render an image.

And CSS layout debugger, which is super helpful. So, I going to run it now by right click and then say run.

I need to make this thing on the left smaller so that you can see. Not sure if it's very clear. But this is going to just put a box in every single element in the page with a random color. Sometimes you wanted to see like how the composition of your layout look like. So, that could be helpful. The next thing I got is like alt text. Let me see if I have it. I don't. Google. So, that is Google I/O. And then if you go to Explore, see on section. And then I want to run another snippet. It's called, what's the button again? Okay, let me go to Sources, right? Here. No, not this. This one.

Snippets. And then you do alt text. So, this is actually very simple. It is going to put an outline into every single image that doesn't have the alt attribute. Like, doesn't have the alternative text if the image is not found. But don't worry, I want to share the code at the end, but you can run it. And you can see even like website of Google, there's a lot of stuff was missing. Some cover photo is missing alt text. I was questioning. But yeah, it's helpful when you trying to debugging something. So, that is snippet. And I don't have a lot of time left.

Understanding Console Messages with AI Assistance35:48

So, we jump into understand console with message, like with AI, right? It is 2024. We cannot leave the room without talking about AI.

Let me see. Let's do it in the slide mode. So, you need to turn it on first.

And then, we all know that this is a cross-origin when you are trying to make a request to the same origin, the same URL domain, it's going to work. But you try to cross domain, like GitHub to OpenAI, it will not work unless OpenAI explicitly say I allow GitHub to do it, for example.

So it needs to configure it on a server and then it's going to return you a header. That is basic stuff I hope you all know about. If you don't know, that's fine. I mean, I learned it when I need to debug a bug, so that's normal. So it's going to work if you add in a header.

But let's say, you see a bunch of error and you don't know where to go, where to start. And that is very common. So you can look for this thing on the right side. Now it's like understand this error, right? Look for it. Click. And then it's going to say, okay, we want to collect some data, going to give you some response. So that is AI in the DevTools for you. So you don't need to paste the error message into ChatGPT. So that is the error, right? So, the explain seems to be very accurate, right? I got a frontend application built with React. And then there's a Node.js server.

And then I don't have this header configured.

And then it suggests me something to do, right? It suggests me to say, okay, add this line or add this line.

But in a lot of use cases, when you are developing, like some other team or some other company, they are controlling the API layer. You don't have control. And you need to connect to the staging server, for example, right? You know, sandbox. One minute left. Sorry. Okay. Need to go faster. So I can add it to my code. But the interesting thing is like you can start to override the header locally.

So you can just select the failed request and you say override header. So Chrome is going to ask for a bunch of permission and all of that. And then, I need to go faster. At the end. And then you see that there's a lot of stuff, but now you can add a header. This thing is new. You can add a like override a header locally.

And then I'll just going to add it. Sorry, I need to run it fast because it's ended.

But you can see a lot of icon to mark that this thing is override, right? And then, afterward, now it's still error.

But after you override, it goes through. Because it simulates that this request is going to return me this header so that the browser doesn't retell me the issue anymore. So that is super helpful when you are depending on the other team, for example, to add it for you.

Wrap Up and Q&A39:25

Okay. We skip the whole thing at the end. I think I don't have enough time. So, with that, the best tool,

like the one you don't think of, it just works. You know something. The next time you come back, it's more like a muscle memory. It just works. You don't have to think. And remember the last three things. I think the last three is so important, so helpful.

And then these two, like, you know, we usually learn when you are sitting next to other colleagues when you are doing pair programming. But now we do remote working, so it's rare to see it. So I hope that you got this idea. And I got a very packed schedule today, like I start in Singapore, like 7:00 a.m. I landed to Bangkok. I got lunch. I brought a snack. So do find me after the talk to redeem some of the snack from Singapore. And yeah. ขอบคุณครับ Thank you so much.

That's the end of my talk. Hello. Thank you so much. I love this session. Open for the question. What is the slide? That's the link. That's the QR code.

Let's scan again. Thank you. Thank you, Trung Vo manager. Manager at Ascenda. Thank you. Okay. Can we take a photo with you?

Yay!

Thank you so much.

Okay.