Using console.log with @weweb_io

Let's talk about trying to do complex, you know, looping actions and whatever in WeWeb and trying to get a better understanding of how our app is actually behaving. Because things can get pretty complicated. We have different interactions, we want to know what it's thinking about at what different points. Sometimes we're copying and pasting in some JavaScript we might have done from ChatGPT. Sometimes we're just trying to use the mainline components. Sometimes we're getting something from npm. But if we want to have better visibility as to what's going on inside WeWeb, we should make— we should remember that WeWeb is just, you know, generating JavaScript that your browser is going to run. And often that means we can use JavaScript tools to learn more about how that code is running. And one of the best tools for doing that is called console.log. Let me show you how that works. We can— let's add a button. To this page, right? Nice and simple. Click me button. And of course, we can create workflows on it. We'll, you know, do a new workflow. And this can be a click workflow. We're going to add an action. Let's just, let's just say for the sake of argument, we're adding a loop or something. And we're going to loop with, you know, A, B, C in it, right? So we're going to loop over A and B and C. And we were going to do things with that, right? So probably what's going to happen here is we're going to, you know, have our action and the action is going to contain, you know, we're going to do things with collections or workflows or also sorts of stuff that we do when we're working within WeWeb. But if we want to find out what it's thinking about, we of course, while we're running it, we get access to information sort of over here, right? We'll find out what the flows were as we're sitting inside the editor. But when we're just sort of testing it in like the preview mode, or even when we've exported it, we want to know what's happening, right? And that's where we can use a great tool called console.log.. And the way we would do that is we can tab inside our action, we can go to where it says custom JavaScript, which is sort of one of my favorite go-tos. And the— and we don't need to do a lot in the custom JavaScript, we can click here where it says edit code. And that brings us to the middle here. And now we can say let us just do a console.log of information we happen to have handy. So one thing we happen to have handy is the fact is where we are in the loop right now, and that currently we're in loop index, you know, what the current index is of the loop. And we can stick that in here. Well, let's put a label first, I guess. Console.log label for the loop. You know, working in loop. And then we can say, let's, we can click, we don't drag, we just click it. We click the index, and then we We can also click the current item that we are working with. And maybe that's all we're gonna do right now. So the way console.log works, you can pass as many arguments as you want. So you use the term console.log, and then you put everything else into parentheses. You see how parentheses are wrapping around here? And then after those parentheses, you can have as many arguments as you want, just separated by commas. And one of the really cool things is you can just drop an object in there, and you'll be able to open it up. We'll be able to see what that looks like when we're actually looking at it. That. In fact, let me just sort of say, we'll also say comma items at the end. But we need to separate everything with commas in order for it to be— in order for it to know what to do. And you can combine this with like other JavaScript you've got in here. I find it super helpful for just seeing how the machine thinks as we go. So let's see how this works. So let's close this up. And what you'll find is if we were to test the workflow, the workflow doesn't do anything, right? Just shows us executing custom JavaScript. JavaScript. So it actually tells us less than it usually would if we were inside, if we were, you know, doing real things with collections or what have you. But let's talk about the magic part. And that magic part comes when I do inspect. Now I'm doing this by right-clicking and click, um, you know, right-clicking. There we go. And we can click inspect and you can see this thing over on the right. This, you know, ordinarily brings us to the elements tab. We're gonna click on the one that says console cuz it's super, super helpful. And we're going to click this little ban icon up here, which will clear it out. Now watch when I run test. See, it told us nothing over here, but now it gives us this little working in loop 0A. And that's because when we asked it to run this thing, we said working in loop. And the first thing we asked for was the index. And the index is A. The second thing we asked for was the item. And the item is B, and the item is the letter that's inside the loop, which is the B. And the third is to show us everything that's in here. And you can see how it's showing us the actual, in this case, object of items that are sitting inside that array. So you get the totality of everything in there. I could put something else arbitrary into here. I'm just gonna use it using a common JSON notation. I'm going to say, you know, X, Hello, we can actually have the, these things can be whatever kind of naming you want. You know, y variable from, and then we can have place name state change, right? So now what we've done is we added an object, an arbitrary object we're going to include and This can actually be really cool because it makes things a little bit more self-describing. So let's, let's, let's try this for a second. We will close up the JavaScript code now, and I will just run test. Now, this is all fine, and I think a reasonable complaint is that like just looking at this doesn't seem to be a huge improvement over what we got over here on the left. But the real magic is that like usually this information I get here on the left, I can get when I'm running this little test in the preview. But if I'm just in the mainline site, and I want to go to, I don't know, the main preview part, right, the part where I don't have as many of the editors going on, I can, you know, go over here. In addition to getting the WeWeb logs, I can get my JavaScript logs, right? Because it shows me all my working in Loop stuff. Now it will show me also the mainline WeWeb stuff over here. But this thing also works I publish, right? So if I were to go click publish, I could go publish the project. I can go back to the one that I actually have my pay project on. And it will also show me this same stuff. And the virtue of this is that you get information about how your code is thinking directly from your workflows as you progress through the site. So whenever you're getting to a point where like you're using your using, you know, ChatGPT-generated code, things are getting a little too deep. You're wondering what, you know, what's happening with these workflows, who's actually firing when, and you want to do that particularly from the context of a published site. I would encourage you just to, just to step back in, go into the workflow for the element. We'll go back over here to the workflow for the element and add in a nice simple custom JavaScript, one line. I know it looks long, um, that has a console.log describes what's going on and then what context you might be thinking about, and that will do so much for you to get a sense of how the computer is thinking in the middle. Once you've synchronized your thinking to the thinking of your browser, you will have a much shorter distance across to understand what's going on with your application and figure out how to solve the problems that are in front of you. Thinking about complicated parts of the app are definitely part of what we call the hardest 5% over a state change. If you want to learn more about what we're doing with JavaScript, we've got more in the channel. If you've got questions about how to use console.log, please hit like, please, you know, put comments down below. And if you've got harder problems, please check us out over at SayChange, because what we do every day is work on the hardest 5% through office hours and, you know, having really useful conversations. Looking forward to it. See you next time.