Svelte Debugging

[00:00:00]
>> Occasionally it can be quite useful to inspect the piece of data as it's flowing through your application. One approach that we've already seen is using console.log. And you can use console.log inside your markup as well as inside your script tag. But if you want to pause execution as if you're using the debugger statement in JavaScript, you can use the debug tag with a comma separated list of all of the values that you want to inspect.

[00:00:24] So let's take this console.log here and replace it with debug user. And now when this changes, It actually pauses execution of the entire application. And it shows us where we are and then you can inspect the values as if you were using the debugger tag in your own JavaScript modules.

[00:01:04] And that's it, we've completed the entire Svelte tutorial. So we've covered a lot of ground. We've covered everything from the very basics of what a component looks like through to all of the advanced features that you might need to lean on when you're building a real world application.

[00:01:19]
>> Okay, so one question is what's slots? You have to bind a slot to an element, like a physical, or like a div, or whatever, if you didn't want that markup, is there a way to, that extra markup of the container? Is there any way to have that container markup?

[00:01:40]
>> No, it's something that's been talked about, right now you need to have a container element. Or you can add display contents and it will be as if it wasn't there
>> With page transitions, what's the easiest way to accomplish that? Are you gonna get into that? Like routing and stuff with sapper or what?

[00:01:59] We are but we're not gonna cover page transitions. It's basically like any other transition, we don't have a really good set of examples of page transitions, that's something that we need to work on honestly. It would be a little bit out of scope for today's course though.