Nick Taylor 0:51
So yeah, my name is Nick Taylor. I’m the host today for CF e dot Dev. This is a first monthly stream that you try it out. I’m super excited about it. Just want to thank Brian Rinaldi, me, who’s in the chat there for inviting me on. I’m super excited to do this. So about myself. I’m Nick Taylor. Like you can see, I’m a staff engineer over at Netlify. And if you want to find places where I am on the internet, I just dropped a link here. That’s my website that’s got my blogging, my streaming socials and all that. And I also stream on Twitch at MC dot live, I’ll drop that in the chat as well. So feel free to get a follow there. And also, if you’re not following CFE.dev, yet, give them a follow. Oh, cool. So Oh, into live coding view here. Oh, let’s just bring this in to also my first time using Spring merits a little clunky. Myself. All right. So we’re gonna go over a few things today, here. There’s been many times where I’ve been speaking with developers, and they’re unaware of some mugging tools they have access to. So I kind of want to go through those today. If you’re new to web development, this might be new to you. If you’ve been doing this for a while, you might be super familiar with like console dot log and other console methods. But there’s a lot of other things. So what we’re gonna do is, we’re gonna first start off with some console logging. And if you already know this stuff, you know, we’ll go through it fairly quickly. This is a live stream, live coding. So just like on Twitch, feel free to ask questions in the chat whenever you want to. I’m checking it pretty frequently. So happy to answer your questions. So I’m just gonna go to S code here. And I’m just gonna zoom in a bit here so folks can see. And we’re gonna start off logging here. So you see, right here, what doesn’t matter what thing and right now, I have created a React app in here. So this is the template from V. And this app run. So like, if I come back to the website here. See, this is a standard react site that you get when you first set it up. And if I click on here, see counting stuff. That’s pretty much anything in here. So let’s jump to dev tools. Now, if you’ve never used it, before, there’s shortcuts you can use, I usually a command shift I, Mac, but if you’re on Windows or Linux, it’s Ctrl Shift I. And depending on the browser use, you can use the F 12 key as well. So let’s go to the console here. And let’s clear this. And if we come back here, see that I’ve in this console log here, I can just shrink a few things down here. So you can see. I’ve added this anytime the app renders. So we have react here. So this app will rerender every time you click the button to the counter. Again, that’s not part of the stream. But that’s that’s just how React works.
Nick Taylor 4:45
Nick Taylor 8:54
Nick Taylor 11:03
And they’re like, here’s the app, there’s a bug that we’d like you to work on. And I have no idea what’s going on, I’ll typically leaning towards the debugger. I’ll still use some console logging, for sure. But this will help me get through things. So again, if I go back here, press, press Command, and I’m going to look for that file, app dot JSX. And I’m just going to give most of the screen real estate because basically, let me close this, just because I’m on wide screens, I want to make sure everybody can see here. So it doesn’t matter what the app is up here in the actual web browser window. So you can see here, I’ve got my funnel again. And so what I’m gonna do now is, I’m going to click on the numbers here on the side, these are the line numbers of file. And I’m going to click on number there, for example, you’re gonna see that it goes blue. It might be a different color in Firefox, I can’t remember, if you’re in VS code, I think it’s blue as well. Might be yellow. But anyways, I’m gonna refresh the app now. And then all of a sudden, gonna see if I scroll up for a sec. The app isn’t loaded yet. I can’t zoom in, unfortunately, but the browser is actually staying paused in the debugger, that little yellow lines, yep. And it’s because I’m in the debugger now. Because I said, Okay, when the program starts to run, the website loads, I want you to stop on this one. So that’s exactly what happened. And now, here, I have inspect stuff. Now, these things I can’t zoom in the popovers. But I think they zoom in. But you can see all of a sudden, you can start inspecting things, you can see, okay, this new state, which is a primitive, in React, and you don’t know react for the purpose of this, but it gives you an array, or a tuple, where it’s got a count, and a set count set counts, what increments the count when we’re clicking the button, and, and the count is the value that currently is. So already the okay the count zero. And then let’s just continue here. So you can click the play button, but I use my function key. So I’ll press f8 to do this to continue. And it runs. And now if I just bring this down, you’re gonna see that the count is zero. Now, I’m going to click again, it’s going to stop, we’re going to see the count one now. Nothing mind blowing about the app happening here, but we can see the count again. And then we can inspect other things here. I’ll see if I can show this. Might need to zoom down. Oh, yes. Okay, so we’re paused in the program. And there’s other things in here. We might not be able to get to all of it today. But we can see here, what’s called the scope. And we can see everything that’s available currently running in Java Scutellaria. In our app, we can see here, the counts one, there’s this function. And there’s some other things here, these, these things aren’t as important right now, this is just stuff from reacting. But the main point here is you can actually see things here in terms of inspecting the application, what’s going on the state it’s in. You can see the Global’s as well. So again, there’s some stuff here from the React. But it’s also stuff like local storage, for example, which is browser on the global window. So these are just some other things you can see. I’m just going to bring this back down again. Okay, so it’s pretty boring right now. stop the debugger. It says count is one. So let’s let this continue. It does it twice something when you’re running react developer mode, so it’s not a bug. Okay, so the counts want, we could click the button again, we’ll see it go to two now. But, you know, let’s do something more interesting.
Nick Taylor 15:21
So we already have these breakpoints. So we already know we can stop the program in a particular place. If you right click on the breakpoint that we’ve added, Bloom kind of sticking out here. This part I can zoom in native operating system, but it’s got a context where you can remove the break, you can edit it, disable it, disabling it is another thing like say, temporarily, I just want to stop there. And I’ll click on the calendar, and you see it’s not hitting. So that’s one thing. The next thing we can do is if I re enable it, we can say Edit. And this used to be able to see because it’s zoomed in. And so we have a few options here out breakpoint, which one is currently we have conditional breakpoint. And we have logpoint. We already saw what was which was just logging console logs, but only when the dev tools are open. But there’s this new one here called additional breakpoint. So we could do something like, I don’t know. Let’s say I’ll say I’m going to create some variable for some reason, but I’ll just say, I don’t know. Nick was here, equals one. And you’re gonna see all of a sudden, debugger. How’s it going? Hey, Judas, are you doing? So you can see now that breakpoint is orange color. And it’s got a question mark. And that’s because it’s conditional breakpoints. I’m just gonna go edit for a second. So I can get this variable now. And I’m going to come in the dev tools. And if we go back to the console, and I’m just going to create this global variables, so I’m just going to say, var liquids here. I’m going to say equals zero. Okay? Nothing special going on so far. And if we look at the breakpoint again, here, we’re gonna say, if Nick was here equals one, that’s when we want to actually stop is the fan. For folks in the chat, I got to see Stefan in person last week, so super excited about that. Okay, so we’ve got our conditional breakpoint here, and I’m clicking around and nothing’s happening. So now let’s come back into the console here, and I’m gonna say in was here, and I’m going to set it. And we’ll come back to the sources here. And I’m going to click here. And then all of a sudden, you see that breakpoint has thought, yeah, no, it was good to catch us fine. So the reason why it’s still it’s not obvious yet is the variable next year is equal to one now. This is super useful for when? Oh, yeah. That’s, that’s me. Let me hide that. That’s me getting used to stream yard. Thank you. Thank you. Great. Yeah. So like you saw, we were stop only when a certain condition was happening. And this is super useful. And like, it’s happened before, like, looping through something that’s happened in React, like, I don’t know, maybe I want to see like, as we’re mapping over things, stop when the key or stop variable is something and that’s the only time I can stop. Because without having a conditional breakpoint, what happens is you have a breakpoint like this, and it’s like, every time you try to look through things, it just keeps doing it and doing it. And it’s just takes a lot longer. Like, think of like the terrible example. But imagine you’re looking through something 1000 times, and you really only want to see what happens to the current state of the program. When is that 999 You ideally don’t really want to have to press EVO continue 999 times so the conditional breakpoints are really great for that. Okay, so let’s let this go. I’m just gonna let it continue.
Nick Taylor 19:35
Nick Taylor 24:07
Again, like I mentioned, this is a React app in developer mode, so it runs twice. But let’s see, we’ve got this hello function. So what I’m going to do is I’m going to refresh the page. We’ve got the debugger in. And I’m going to step down to the next piece of code. So you’re gonna see here it comes on to the Hello. And again, just talking about things here. You should be able, you can always use the scope here. There’s also watch where you can add stuff like you can look at window dot local location or locations, get one dot h ref, maybe hooks. This is another part of the debugging tools where you can actually see okay, well what is what is the location a trap? And these are things that can add so yesterday debugging and stops, the watch will apply to whatever you’re currently looking at. So in my case, there’s only one page right now, but I can see what the URL is. That’s just another thing. But what I want it to show is, okay, so we have this Hello, we know it’s going to console log. So if I press F 10, it just went to the next line. And if we go to the console, you’re gonna see it’s that Hello, which is expected. Now, let it run again. Okay, now we’re back. And I’m going to step back to the hello again. But instead of stepping over, think of it literally as stepping over a thing, instead of stepping into it. So I’m going to step in, and you want to step into things when you want to see what’s going on in a function or something. So I’m going to step in now. And then all of a sudden, you’re going to see I’m in the hello function. And this is the code is this is compiling into something else. But this is console log, essentially. But you can see here, I stepped into the code, as opposed to stepping over it, you know, sometimes want to know, a function is doing something already, and it’s fine, don’t want to step into it. So you just step over. So we’ll let that run again. So there’s that as well. Again, if you have questions, go for it.
Nick Taylor 26:30
Nick Taylor 29:37
And all of a sudden, I have the same browser tools that I use for debugging. I can use those to debug Node js. The first time I did this, I was like, holy cow. That’s like pretty cool. So the reason why is because we have added stuff but like at the time Like you can literally write notes as programmed in your editor, like some kind of just notepad equivalent, and you conduct the browser. So now, I have literally all the same tools I did before. So I can step in the code. And then it can console log. And here you’ll see a console log to fork. So for me, at least I find that super cool. Maybe you’d have to go in and do all the other things, too. Like I was making a breakpoint, which is a logpoint. Just, let’s, let’s just do that for fun. So let’s add a breakpoint. And let’s change it to a bug. Let’s just a yellow. Enter. Let’s press. Let’s continue here. Okay, my program is OK, my program finished running. So the debugger stopped. But let’s try it again. And if I come back here, okay, you’re gonna see, by run this, it’s gonna console log camp again. But it should also hug YOLO. And it did.
Nick Taylor 31:20
Yeah, no, that’s, yeah, there’s a lot of things. Honestly, in blogging. It’s understandable, especially if you’re starting out with web development, like, especially modern web development, there’s so much to learn these days. So but but a lot of these have been around for a long time. And they’re surfaced a lot better in editors now, which, which we’ll get to in a minute, I’m going to show you how you can deep up code in Node js next. So yeah, these things like, just for some historical context, like, I used to work in Microsoft taxall. And even before that, and Visual Studio, Visual Studio, but Visual Studio and its predecessor, you could actually use the debugger and everything. In, in those editors to like, you could actually debug in Internet Explorer page. I’m dating myself here, but you could actually stopped, like I can show you here in Visual Studio or Visual Studio dotnet. And do all the same things. So these things have been around the time when Mozilla browser previously nets, and then it became a Mozilla browser and Firefox, there were some tools that came out. And if he called Firebug, shadow to fire buckets, great project. It’s no longer required. But you could do all these things I’m showing now. Yeah, basically, as the tools got better, the like dev tooling in general has been like so good. I know people like to complain about things. For me, when web dev tooling space right now. Amazing. And there’s a lot of stuff we might not even get to today, but But getting back to note here. So we’ve been doing No, just plugging in the browser dev tools, which again, I think is pretty. Okay, that’s cool. But like, I’m a fan of VS code, or maybe you’re a fan of whatever editor you see, you know, like JetBrains, WebStorm, or whatever. And they all have debugging capabilities to enable their other editors now. So like, you know, so I’m gonna go and show you in VS code. But like, like I said, if you’re using WebStorm, or something, a quick Google will probably show you like, how to Node.js in WebStorm, for example, and it might even be set up automatically.
Nick Taylor 34:05
Okay, just gotta take a sip of coffee here. If I if I look like I’m melting on stream, it’s because I am. Unfortunately, flooding in my basement last week. I was like this industrial dehumidifier, my basement and it’s causing so much heat. So like, hands on. I feel like my face is melting. So I might have to do this occasionally. It’s it’s not tons of suntan lotion or whatever. Okay, so let’s come back here into VS code and let’s just maybe just add some more stuff here. I’m being lazy, so I’m just gonna use copilot create a loop so it can see the debug or an action. Sure. So Copilot Correct.
Nick Taylor 35:01
Okay. Okay, yeah, sorry. Yeah, in vs. Code debugger. Points are different dots. That sorry. So you can see here, I’ll put one here. And now the first thing you’re going to do is VS code. If you press and shift D or Ctrl, Shift D, it’s going to open up this debugger panel. So I’m going to say, Run in debug, I’m going to choose node j, s. And all of a sudden, I’n in, VS code and I’m to debug things here. And again, it’s not the browser dev tools, but you literally have all the same things. So this breakpoint, here, it stopped. Let’s come here, and I’m going to add a breakpoint. And it’s gonna look exactly alike. Or I’m gonna say automatic, which is odd point. And I’m gonna say, and they have different symbols VS code. So log point is, I’m gonna guess. And it’s just, it’s kind of like a sad like, mustard, yellow color. But let’s let it run. And now, I think if you’re debugging with VS code, see up top here, this toolbar is moving around. And this has got the plate but stepping to step over step out of the recycle thing. We start the debug process. So it just kind of restarts the program. So you can use those, but again, I like using the F keys. The only difference is when you’re in VS code, and you can like any change or some map to whatever, but I like the func keys for the bugging. So it’s the same thing. So like, if I press F 10, it’s going to go to the next slide, and so on. The only difference is when you press like we weren’t the browser before, you can press the play button can press a key which would continue the debugger in VS code at five. And it’s probably like, Visual Studio and Visual Studio. Not that it was at five and it still is, I believe, so that’s a subtle difference.
Nick Taylor 37:24
But anyways, I’m gonna press I’ve and to go, and you’re gonna see, I have my date and quite a bit. That’s why it’s a little busy in here. But if I open up the dev tools down here, sort of terminal, you’re gonna see I logged said YOLO. It also comes up before. And now I’m just up here. And again, access all the things that was mentioned before, so you can see all the variables here. Yeah, the debugger? I don’t know, you get used? But yeah, it’s depending on how you do it. Yeah. Like, what’s that thing again? It’s that year or, or even the button stuff, but But yeah, getting back to the side panel, I’m just gonna move this toolbar over, you’re gonna see this is kind of like what I was showing before. So it’s like the current scope, like where you are program. It shows you all the variables here. So the I, which is the counter in the loop set to zero, the count is four. This is undefined. That’s just the window. Now, there’s just nothing to find there right now. And you have your Global’s kind of like I was showing you before, a lot of these things, just Node.js stuff now. So I don’t really need to look into them. But there are things. So you can see like fetches that are for example. If you had stuff, you can put it in there, I can come here I can watch is like say like, account, it will show it. I can do other things. I can say count to you know, don’t show eight. So like you can even test out stuff, we can always use the the console too. So like in VS code, it’s called the debug console, like over here. So I can say console, log, a friends. And this is kind of like your browser Dev Tools console. Same idea. I have things all zoomed in here. So it’s a little tight for me.
Nick Taylor 39:39
Nick Taylor 43:09
I gotta press. Why? Oh, my. There we go. Catch it. Oh, no, wait. Let’s do this. Let’s do try. And let’s do this. And you would never really do this in code, probably. But there’s two things. So like, let’s deal with a breakpoint first. So run in debug. And let’s run. Okay, the error got. So it’s in the catch here. But I put an explicit breakpoint. Yeah, exceptions are? Yes. Different. Yeah. This is super handy when you’re not sure what’s causing the error. So like, obviously, when you’re writing your code, you do have tried catches and stuff. But let’s, let’s run this with out the breakpoint. Now. I’m going to run it again. And I’m going to say caught acceptance. So run in debug. This should stop. Okay, yeah. So here you go. I’ve got a try catch. But because I checked off odd exceptions, it goes, Oh, I’m stopping right here. And this can be super helpful just because the program has stopped like a lot of times you’ll get the error and everything’s just and this is just pointing to the file on my computer here, but this can be super helpful. Now let’s try the uncaught exceptions. I don’t know why I didn’t catch it before but let’s let this play. Okay.
Nick Taylor 44:50
Nick Taylor 47:58
Nick Taylor 52:14
Nick Taylor 54:46