WPT Inspector 📦

WPT Inspector is a Visual Studio Code extension designed for web developers who need total control over their file sizes and performance impact.

Unlike standard analyzers, this tool estimates the real-world weight your files will have within your final production bundle, displaying metrics directly inside your editor.

🚀 How to Use

Once installed, WPT Inspector works automatically. Here is how you can interact with it:

1. Live Gutter Metrics

As soon as you open a supported file (.ts, .js, .astro, .vue, .svelte), you will see a small text in the gutter (next to the line numbers) showing the estimated production size in KB.

• Real-time updates: The size updates as you type and save your changes.
• Color coding: It helps you identify at a glance which files are getting too heavy.

2. Analysis Dashboard

Want a birds-eye view of your whole project?

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
2. Type and select: WPT Inspector: Show Analysis Dashboard.
3. An interactive panel will open, listing all your components and files sorted by their impact on the final bundle.

3. Supported Frameworks

The extension is pre-configured to understand the build logic of:

• Astro (.astro)
• React / Next.js (.jsx, .tsx)
• Vue (.vue)
• Svelte (.svelte)

✨ Features

• Real-Time Gutter Annotations: View the estimated bundle size on the first line of every file as you code.
• Auto-Refresh: Metrics update automatically whenever you save a file (Ctrl+S).
• Comprehensive Analysis Panel: Generate a detailed report of all project modules, sorted by their real bundle impact.
• Smart Navigation: Click on any file in the report to open it instantly in the editor.
• Modern Framework Support: Built for .astro, .vue, .svelte, .ts, .js, .jsx, and .tsx.

🚀 Installation

1. Clone this repository.
2. Run npm install to install dependencies.
3. Press F5 to open the Extension Development Host window and test the extension.

🛠️ Available Commands

Created with ❤️ for performance-driven developers.

❤️ Support the project

If WPT Inspector has helped you, consider supporting its development. Every donation helps keep the tool updated and free for everyone!

💸 Donate via PayPal