Anthony Fu | Vite Devtools | ViteConf 2025

Hello everyone. Good morning. And I'm like I I don't know how to express my feeling. It's just like it's like we have been doing VidCon for so long, but like this is the first time we do it in person. So I'm so happy to see your face here. I'm so happy to be here and to do the uh to do the sharing with you. And in case you don't recognize me because I cut my hair, my name is Anthony Fu. And I'm a coding member of uh Vue and NX and also I create a few open source tool. I

maintain um some tool you probably use hopefully and currently working at NX lab which right now becomes part of our cell and they are sponsoring us uh working full-time open source. I recently moved to Tokyo and I'm really taking a intensive learning of Japanese so my English got roasted probably. So please bear with me. So um for today's topic um that's let's go straight to the point and let's talk about va tools. So

you probably heard about some news or some rumors about that. So I just not keeping it as secret I just go straight to say um so if you have so you might have heard about the V+ plan. So I think like we keep mentioning about this. So which M2B provide as a a unified tool chain for JavaScript ecosystem and starting from vs we are basically building roadms on underlying oxe which

provide um faster and more consistent linking formatting and bundling and minifications and on top of vit um we're also integrating vas as part of the v plus ecosystem to testing for both node and and browser environments. So with such an ambitious uh road map we also want to provide some UI dev tools for better visualizations and analyze experience which is where vde dev tools come into um come into play. So for

giving a more concrete example, we know that we have a CLI that we use daily. It's called VDAB for dev servers and then we have VB build uh for bundling of the production uh bundle. And then we're going to have vit test which is u running v test under underlying for running your test suit. And then we have vit linked and vit format uh which powered by o ox linked that you use the same parser as vit and and the rodon and

then we have we might have v lab as um then we have vlab as Kevin just mentioned uh to provide to to um to have you to bundling uh for libraries on top of um tsd and the rod and so on. So as we mentioned the goal is to provide a singlei uni uh a single unified tool chain which with incredible performance for javascript ecosystem. So regarding for v dev tools are it going to be present as a cli flag as d- ui for all

the sub commands. So showing um the UI interface for each operations and help you to understanding the internals better and this is not working right now but just to to demonstrate what is and okay so first thing first why we need a dev tools and before we talk about why I'd like to first discuss what is dev tools like in my mind and when we talk about dev tools they can be either means a general developer tools or a a

specialized term dev tools So I would define uh like general developer tool as a tools for developers. So in that sense the tool we use dailies uh um like uh vit v test view n etc are all actually uh dev developer tools but on the other hand the specialized uh dev tools we usually means the tools for using tools better like for example we know that chrome has a built-in dev tools that we use to inspect our page and then we have