Skip to content

WRONG_CONSOLE.md

Latest commit

 

History

History
92 lines (65 loc) · 2.46 KB

WRONG_CONSOLE.md

File metadata and controls

92 lines (65 loc) · 2.46 KB

CRITICAL: You're Looking at the WRONG Console!

The Problem

You're seeing Figma's application logs (touchstart violations, vendor files), NOT your plugin's logs.

The Solution

There are TWO DIFFERENT CONSOLES in Figma:

  1. Browser/App Console (WRONG - what you're seeing now)

    • Shows Figma's internal code: vendor-core, figma_app, etc.
    • Shows violations and warnings about Figma itself
    • This is opened with F12 or browser DevTools

  2. Plugin Console (CORRECT - what you need)

    • Shows YOUR plugin's code: code.ts, ui.html
    • Shows logs starting with 🚀, 📨, 🎨, etc.
    • This is a SEPARATE window opened from Figma's menu

How to Open the PLUGIN Console

Method 1: From Figma Menu (Easiest)

  1. In Figma Desktop/Web app
  2. Go to: Plugins → Development → Show/Hide Console
  3. A NEW DevTools window will open - THIS is the plugin console

Method 2: From Plugin UI

  1. Right-click INSIDE the plugin UI window (the small popup)
  2. Select "Inspect Element" or "Developer Tools"
  3. This opens the UI console

What You Should See

When Plugin Loads:

🎨 UI HTML Script Tag Executing - This is the plugin UI!
🎨 Window location: data:text/html...
🎨 Parent exists: true
✅ DOMContentLoaded - UI fully loaded

When You Click Convert:

🔘 Convert button clicked!
📊 JSON data length: 1234
✅ JSON parsed successfully
📦 Parsed data type: CANVAS
📦 Has children: true
📤 Sending message to plugin code via parent.postMessage

In the Plugin Console (separate window):

🚀 Plugin code.ts loaded and running
📡 Setting up message listener...
📨 Message received from UI: convert-json
📦 Full message: {"type":"convert-json"...
✅ convert-json message detected
🔍 JSON Data received: {"type":"CANVAS"...

Current Build

  • ✅ UI logging added: Console logs in ui.html
  • ✅ Plugin logging added: Console logs in code.ts
  • ✅ Size: 36.8 KB (code.js), 19.9 KB (ui.html)

Test Steps

  1. Close and reopen the plugin in Figma
  2. Open BOTH consoles:
    • Plugin Console: Plugins → Development → Show/Hide Console
    • UI Console: Right-click plugin UI → Inspect
  3. Paste test JSON (from test-figma-console.js)
  4. Click Convert
  5. Check BOTH consoles for the logs above

If you STILL don't see logs, the plugin isn't loading at all - check that you're running the dev version from Plugins → Development → figma-html-push