mcp-web-inspector 0.4.0 → 0.4.1

package/dist/toolHandler.js

@@ -5,6 +5,7 @@ import { getToolInstance, isBrowserTool, executeTool } from './tools/common/regi
 let browser;
 let page;
 let currentBrowserType = 'chromium';
+let currentDevice;
 let networkLog = [];
 let sessionConfig = {
     saveSession: false,
@@ -39,6 +40,7 @@ export function resetBrowserState() {
     browser = undefined;
     page = undefined;
     currentBrowserType = 'chromium';
+    currentDevice = undefined;
     networkLog = [];
 }
 /**
@@ -308,6 +310,17 @@ export async function ensureBrowser(browserSettings) {
             // Reset browser and page references
             resetBrowserState();
         }
+        // Check if device preset has changed (requires browser restart)
+        if (browser && browserSettings?.device && browserSettings.device !== currentDevice) {
+            console.error(`Device preset changed from ${currentDevice || 'none'} to ${browserSettings.device}. Restarting browser...`);
+            try {
+                await browser.close().catch(err => console.error("Error closing browser on device change:", err));
+            }
+            catch (e) {
+                // Ignore errors when closing browser
+            }
+            resetBrowserState();
+        }
         // If browser exists and viewport settings changed, resize the viewport
         if (browser && page && !page.isClosed() && browserSettings?.viewport) {
             const { width, height } = browserSettings.viewport;
@@ -344,11 +357,16 @@ export async function ensureBrowser(browserSettings) {
                 deviceConfig = CUSTOM_DEVICE_CONFIGS[playwrightDeviceName] || devices[playwrightDeviceName];
                 if (deviceConfig) {
                     console.error(`Using device preset: ${device} (${playwrightDeviceName})`);
+                    currentDevice = device;
                 }
                 else {
                     console.error(`Warning: Device preset ${playwrightDeviceName} not found`);
+                    currentDevice = undefined;
                 }
             }
+            else {
+                currentDevice = undefined;
+            }
             console.error(`Launching new ${browserType} browser instance...`);
             // Use the appropriate browser engine
             let browserInstance;
@@ -487,6 +505,15 @@ export async function ensureBrowser(browserSettings) {
             const playwrightDeviceName = DEVICE_PRESETS[device];
             // Check custom configs first, then Playwright's built-in devices
             deviceConfig = CUSTOM_DEVICE_CONFIGS[playwrightDeviceName] || devices[playwrightDeviceName];
+            if (deviceConfig) {
+                currentDevice = device;
+            }
+            else {
+                currentDevice = undefined;
+            }
+        }
+        else {
+            currentDevice = undefined;
         }
         // Use the appropriate browser engine
         let browserInstance;

package/dist/tools/browser/content/screenshot.js

@@ -14,7 +14,7 @@ export class ScreenshotTool extends BrowserToolBase {
         const screenshotsDir = sessionConfig?.screenshotsDir || './.mcp-web-inspector/screenshots';
         return {
             name: "screenshot",
-            description: `⚠️ RARELY NEEDED: Screenshots are NOT useful for LLMs to analyze layouts, margins, or alignment issues. Use inspect_dom(), compare_positions(), or measure_element() instead - they provide precise numerical data. Only take screenshots for: (1) sharing with humans for visual confirmation, (2) documenting test results, or (3) verifying colors/images. Screenshots are saved to ${screenshotsDir}. Example: { name: "login-page", fullPage: true } or { name: "submit-btn", selector: "testid:submit" }`,
+            description: `📸 VISUAL OUTPUT TOOL - Captures page/element appearance and saves to file. Essential for: visual regression testing, sharing with humans, confirming UI appearance (colors/fonts/images). ⚠️ NOT for layout debugging (positions/sizes/alignment/margins) - use inspect_dom/compare_positions/inspect_ancestors/get_computed_styles instead (structural data is token-efficient, screenshots require ~1,500 tokens to read). Screenshots saved to ${screenshotsDir}. Example: { name: "login-page", fullPage: true } or { name: "submit-btn", selector: "testid:submit" }`,
             inputSchema: {
                 type: "object",
                 properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-web-inspector",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Web Inspector MCP: Give LLMs visual superpowers to see, debug, and test any web page.",
   "license": "MIT",
   "author": "Anton",