Exploring Svelte DevTools

Hi. I was just looking through a couple of Svelte applications I haven't touched in a while.
I don't know about you, but I can't even remember what I had for dinner yesterday,
let alone a codebase I haven't touched in a month or so.
And that's just a small website or a hobby project.
I think we can all agree that it would be really nice if we can somehow find a way to help us visualize the applications that we're working on.
Imagine not having to build a mental model from scratch every time.
How the hierarchy is structured, how components interact between each other, which one are using which,
what props are exposed, and the state of individual components.
Which one uses the bind directive, what events are being exposed, and many other stuff.
Well, we don't need to, because that's exactly what Svelte DevTools are built for.
Let's start off by getting the extension from the Chrome web store, which we can do by searching for it here,
or clicking the link on the GitHub repository, which will take you to this page, where you can add the extension to your browser.
Just click on the "Add extension", and there we go! Svelte DevTools extension has been added to our browser.
I've prepared a quick example for us to take a look here.
All we need to do to activate our extension is to run our dev server.
As you can see, I'm running on localhost 5173 right now.
Next, we'll just need to open up our dev tools, and we can see that there's a new Svelte panel at the toolbar.
We can click on it, and be presented with this page.
Now, don't worry, this is normal, because prior to us clicking on the Svelte panel, there's no code running on the website.
So, all we need to do right now is to reload our localhost, and there we go!
I've gone ahead and expanded all of the necessary codes for us to look at.
We can see at the right section, there's the props, events, and state for the components that we've selected.
And for the HTML elements, we can see the attributes and events.
We can navigate through our application using the keyboard arrow keys, or using the mouse button.
There's also this text area with bind value.
We can try to change this, let's say "Hello Svelte Summit".
When I press enter, it should change everywhere on the website, and also the extension itself.
There we go!
Now, you may notice that when we're navigating through our components, something lights up at the top right on the middle here.
We can click on that to inspect the actual HTML element on the element stack.
So, if we go to the main element here, and we click on this, it will take us directly to the corresponding HTML elements here.
Now, for the other non-HTML nodes, which are like the container elements or components, or the application root,
there's no corresponding native elements, so we cannot go directly there.
But, the Svelte DevTools extensions do provide a way for us to take a look at it in more detail, which is through this $n variable.
We can open up our console by clicking escape, and we can type in the $n, and see what this actually is.
Here's another example from the Svelte website, which should demonstrate that it works with SvelteKit out of the box.
Now, let's say we want to remove the banner here.
Now, there's this shell with the banner bottom height props. I can try to reset this to 0, and it should be gone.
And there we go! It's as simple as that.
There's a lot more to come for our browser extension now that it's out.
There's still a lot of things to polish, and definitely many to improve, like Firefox support, code profiling, and possibly some performance optimizations.
So please, if you have any ideas or suggestions, leave them down in the issues page, and I'll make sure to check them out.
I really hope you're as excited as we are for Svelte DevTools and the future of Svelte.
Enjoy the rest of the summit! I'm Igna, signing out.