How to use Local Explorer for local development

Remember the old days of building custom tools to view and edit data in your local bindings or just deploying your app and testing it in production because the dashboard is the easiest way to see what's going on under the hood of your application. Well you can say goodbye to the old days because Local Explorer is here. Local Explorer is an interface that's designed to inspect and update the state of your bindings during local development. Let's switch to my computer and let me show you what it is and how it works. So right here on my computer I have an app I'm working on. It's a to-do app that has a bunch of bindings. I can go start up the local dev server by running npm run dev and here you see I have quite a few bindings. I have a durable object for real-time communication, I have workflows, I have KB, I have B1 and I also have R2. I'm just going to open up this app in the browser by hitting the B key to open it up in the browser and here you see the to-do app which is an overkill to-do app because it has all of those bindings which is like super overkill for this but it's a really complex app and has some state in it. How do I go to inspect the state of the bindings like what's in the KB or what's in the D1? That's where Local Explorer comes in. So I can switch back to the terminal and hit the E key to open up Local Explorer and this opens up my app in the cdncgi.explorer and here is the Local Explorer to see the state of my bindings. So I can go see what's in the D1 database and I can see what's in the to-dos table. Of course I can go on to edit this or delete this or manipulate the table however I want. I can also see the durable object I have here as well as the KB namespace with all of the data I need. I have an R2 bucket with some uploads so I can see the files I have uploaded to the to-do app and really cool is I can also inspect the workflow and this is really cool especially when you have complex workflows. You can see what's running what's completed and it makes debugging your workflows really easy. But one other addition to the Local Explorer which is a really cool feature is what you see on the home page which is a prompt you can copy to use with your coding agent and that's because the Local Explorer is powered by an open API spec API and this means that other coding tools can interact with it, inspect the state and manipulate the data that's in the local state of your application. So you can see the API by visiting the forward slash API route and this is the open API API for the data that's been saved through Local Explorer which represents the local state of your worker application. So this is really good because it's gonna make it really easy for you to inspect the state of your bindings for you to debug your application especially when building complex workflows and also to interact with the local state of your application from a coding agent or other tools. Local Explorer is available in Wrangler 4.82.1 or later and you can access this through the Wrangler CLI and also the Cloudflare Vite plugin. If you love to see other videos we made on cool features that shipped during the Agents Week, go check out our YouTube channel homepage and don't forget to subscribe when you're there. I'll see you in the next one. Peace!