ResponsiveLab

A professional developer utility for responsive web previews and Flutter asset intelligence inside VS Code.

ResponsiveLab brings two essential developer tools directly into your Visual Studio Code workspace:

1. Responsive Lab: Test and preview any website across multiple screen sizes simultaneously on a single unified canvas.
2. Flutter Asset Doctor: Deeply scan Flutter assets, track static and dynamic references, audit file sizes, and jump directly to references in your Dart source code.

Features

🌐 1. Multi-Device Responsive Website Preview (Responsive Lab)

• Simultaneous Viewports: Test any URL (https://, http://, or localhost) across 8 default calibrated screen resolutions:
  • Small Phone: 320 × 568
  • Android Phone: 360 × 800
  • Large Phone: 412 × 915
  • iPad Mini: 768 × 1024
  • iPad: 820 × 1180
  • Large iPad: 1024 × 1366
  • Laptop: 1366 × 768
  • Desktop: 1440 × 900
• Device Controls:
  • Independent Reload (↺) for each device frame.
  • Orientation Toggle (⇄) to switch between portrait and landscape.
  • Close (✕) to hide viewports and focus on specific breakpoints.
  • Open in Browser (↗) for individual devices or the global URL.
• Adaptive Canvas Scaling:
  • Automatically scales device frames to fit comfortably inside the VS Code Webview without horizontal page overflow.
  • Scale selector supports: Fit View, 100% (Actual Size), 75%, and 50%.
• Security-Aware:
  • Validates and normalizes URLs.
  • Gracefully detects sites blocking iframe embeds (via X-Frame-Options or Content-Security-Policy) and offers a direct Open in Browser fallback.

🧟 2. Flutter Asset Analysis (Flutter Asset Doctor)

• Automatic Workspace Detection:
  • Detects pubspec.yaml in your workspace and parses declared asset entries under flutter.assets.
  • Discovers asset files recursively across declared directories and common asset folders (assets/, images/, icons/, etc.).
  • Supports standard image formats: .png, .jpg, .jpeg, .webp, .gif, .svg, and .bmp.
• Reference Tracking:
  • Scans all Dart files (lib/, test/) while ignoring build artifacts (.dart_tool, build, ios/Pods, etc.).
  • Detects static references such as Image.asset(...), AssetImage(...), ExactAssetImage(...), SvgPicture.asset(...), and exact string paths.
• Smart Status Classification:
  • ✓ USED: Confirmed static references in Dart code with exact usage count.
  • 🧟 UNUSED: Zero detected static or dynamic references.
  • 🟡 DYNAMIC ("Possibly dynamic"): Assets with zero direct static references when dynamic patterns (e.g. Image.asset('assets/$imageName') or variable arguments) exist in your project, preventing accidental deletion.
• Asset Size Analysis & Warnings:
  • Calculates exact file size and displays color-coded indicators:
    • 🟢 Normal: < 500 KB
    • 🟡 Warning: 500 KB to 1 MB
    • 🔴 Large Asset: ≥ 1 MB
• Interactive Asset Navigation:
  • Open Reference: Click any reference (e.g. lib/home.dart:42) to jump directly to that line and column in VS Code.
  • Open Asset: Open the raw image file inside the VS Code editor.
  • Find References: Triggers a global search for the asset path across your project.
  • Search & Filter: Instantly search by filename/path and filter by All, Used, Unused, or Dynamic.

🚀 3. Central Dashboard

• Launch the main ResponsiveLab Dashboard for a quick overview of your workspace, Flutter project detection, and fast single-click access to both tools.

Extension Commands

All commands are available in the VS Code Command Palette (Ctrl + Shift + P on Windows/Linux or Cmd + Shift + P on macOS):

Installation & Development

Prerequisites

• Node.js (v18 or higher recommended)
• Visual Studio Code (v1.138.0 or compatible)

Setup

Clone the repository and install dependencies:

git clone https://github.com/responsivelab/responsive-lab.git
cd responsive-lab
npm install

Compile Code

To compile TypeScript into JavaScript:

npm run compile

To run TypeScript compiler in watch mode during development:

npm run watch

Run Linter

npm run lint

How to Run with F5

1. Open the responsive-lab folder in VS Code.
2. Press F5 (or go to Run and Debug in the Activity Bar and click Run Extension).
3. A new VS Code Extension Development Host window will open with the extension loaded.
4. In the Extension Development Host window:
   • Press Ctrl + Shift + P (or Cmd + Shift + P).
   • Type ResponsiveLab.
   • Select ResponsiveLab: Open Dashboard, ResponsiveLab: Open Responsive Lab, or ResponsiveLab: Flutter Asset Doctor.

How to Package into a VSIX

To package the extension into an installable .vsix file:

npm run package

(Or run npx @vscode/vsce package --no-git-tag-version directly)

This will generate a file named responsive-lab-0.0.1.vsix. You can install it into VS Code by opening the Extensions view (Ctrl + Shift + X), clicking ... (Views and More Actions), and selecting Install from VSIX....

Known Limitations

1. Website iframe Embedding Restrictions:

   • Certain websites (such as google.com, github.com, or sites with strict X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none') forbid embedded rendering inside iframes.
   • For security reasons and compliance with web standards, ResponsiveLab does not attempt to bypass these browser security headers. When embedding is blocked, use the Open in Browser button provided on each device card.

2. Dynamic Flutter Asset Paths:

   • Static analysis cannot evaluate runtime string computations (e.g. final path = computeDynamicPath(); Image.asset(path);).
   • ResponsiveLab safeguards against false positives by tagging such assets as 🟡 Dynamic ("Possibly dynamic") whenever dynamic asset patterns or interpolations are detected in your Dart codebase.

License

MIT