Stop Screenshotting CSS. One Script That Gives Claude Everything.

You see something wrong on your site. A button's the wrong colour, a heading's too big, a layout's broken. You need Claude to fix it — but Claude can't see your screen.

So you screenshot it. Or you open the browser's developer tools, try to find the right panel, copy some CSS rules, paste them to Claude. Claude asks for more. You go back, copy something else, paste again. Five minutes of back-and-forth and you still haven't fixed anything.

This is the bottleneck nobody talks about. Not prompting. Not Claude's ability. It's getting what Claude needs from your browser — the technical data behind what you see on screen — without spending ages hunting for it yourself.

You don't need to understand what that data means. Claude does. You just need to get it there.

Not a developer? There's a step-by-step version of this guide that walks you through every click from scratch — no experience needed.

The fix: one script, full context

It's a JavaScript snippet you paste into your browser's DevTools Console. It grabs everything about the selected element — every CSS rule hitting it, which file each rule comes from, the computed styles, the parent chain, the selector path — and copies it straight to your clipboard.

Then you paste it to Claude. Claude has the full picture. No follow-up questions about "what rules are matching" or "what's the parent element." It's all there.

What Claude actually sees

Here's a trimmed snippet of real output from running the script on the Download button shown in the beginner guide's screenshots:

=== OUTER HTML ===
<a href="/media/templates/site/theaidirector/downloads/signal-dark-joomla5.zip"
   download="" class="taid-btn-gradient">Download Signal Dark — Joomla 5 Template</a>

=== CSS SELECTOR ===
main#taid-main > div.taid-container > div.taid-content-wrap:nth-child(3) >
  div.taid-content-primary > div.taid-component-panel > ...
  > a.taid-btn-gradient

=== COMPUTED STYLES (key properties) ===
  display: inline-block;
  width: 424.333px;
  padding: 14.4px 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(124, 58, 237) 0%, rgb(6, 182, 212) 100%);
  color: rgb(255, 255, 255);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.48px;
  box-shadow: rgba(124, 58, 237, 0.4) 0px 0px 28px 0px,
              rgba(0, 0, 0, 0.4) 0px 2px 8px 0px;

=== MATCHED CSS RULES ===
/* template.css */
.taid-btn-gradient {
  display: inline-block;
  background-image: linear-gradient(135deg, rgb(124, 58, 237) 0%,
                    rgb(6, 182, 212) 100%);
  color: rgb(255, 255, 255);
  font-weight: 600;
  padding-top: 0.9rem;
  padding-right: 2.25rem;
  padding-bottom: 0.9rem;
  padding-left: 2.25rem;
  border-radius: 8px;
  letter-spacing: 0.03em;
  box-shadow: rgba(124, 58, 237, 0.4) 0px 0px 28px,
              rgba(0, 0, 0, 0.4) 0px 2px 8px;
}
/* template.css */
.taid-component-panel a.taid-btn-gradient {
  color: rgb(255, 255, 255);
  text-decoration-line: none;
}

=== PARENT CHAIN ===
a.taid-btn-gradient
  div.taid-demo-hub-cta
    div.taid-demo-hub
      div.com-content-article__body
        div.com-content-article.item-page
          div.taid-component-panel
            div.taid-content-primary
              div.taid-content-wrap
                div.taid-container
                  main#taid-main.taid-main

The HTML. The exact CSS rules matching, with the source file. The computed values. The full DOM context. Claude can diagnose any CSS issue from this output alone.

How to use it

1. Open DevTools (F12 in any browser) and click the element you want to debug in the Inspector tab.
2. Switch to the Console tab. Paste the entire script from below and press Enter.
3. Done. The debug info is on your clipboard. Ctrl+V to Claude.

One paste in, one paste out. Five seconds instead of five minutes.

Do this often? You can bind the script to a single key. Hit Super+D — the script loads to your clipboard. Ctrl+V in Console, Enter — the debug output replaces the script on your clipboard. Ctrl+V to Claude. You never open a file, never copy anything manually. The clipboard does all the work.

The script

Copy this entire block. No installation, no extension, no dependencies. Works in Firefox, Chrome, and Edge.

function debug(el) {
  if (!el) { el = $0; }
  if (!el) { console.log('No element selected. Pick one in Inspector first.'); return; }

  const lines = [];

  const outer = el.outerHTML;
  lines.push('=== OUTER HTML ===');
  lines.push(outer.length > 3000 ? outer.slice(0, 3000) + '\n... (truncated)' : outer);

  lines.push('\n=== CSS SELECTOR ===');
  lines.push(cssPath(el));

  lines.push('\n=== XPATH ===');
  lines.push(xPath(el));

  lines.push('\n=== COMPUTED STYLES (key properties) ===');
  const comp = getComputedStyle(el);
  const props = [
    'display', 'position', 'float', 'clear',
    'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',
    'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
    'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
    'border', 'border-top', 'border-right', 'border-bottom', 'border-left',
    'border-color', 'border-width', 'border-style', 'border-radius',
    'background', 'background-color', 'background-image',
    'color', 'font-family', 'font-size', 'font-weight', 'line-height',
    'text-decoration', 'text-transform', 'letter-spacing',
    'overflow', 'z-index', 'opacity',
    'flex', 'flex-direction', 'flex-wrap', 'align-items', 'justify-content', 'gap',
    'grid-template-columns', 'grid-template-rows',
    'box-shadow', 'outline',
    'appearance', '-webkit-appearance',
  ];
  for (const p of props) {
    const v = comp.getPropertyValue(p);
    if (v && v !== '' && v !== 'none' && v !== 'normal' && v !== 'auto'
        && v !== '0px' && v !== 'rgba(0, 0, 0, 0)' && v !== 'start'
        && v !== 'visible' && v !== 'baseline' && v !== 'stretch') {
      lines.push('  ' + p + ': ' + v + ';');
    }
  }

  lines.push('\n=== MATCHED CSS RULES ===');
  try {
    const sheets = [...document.styleSheets];
    for (const sheet of sheets) {
      try {
        const rules = [...sheet.cssRules];
        for (const rule of rules) {
          if (rule.selectorText && el.matches(rule.selectorText)) {
            const src = sheet.href ? sheet.href.split('/').pop().split('?')[0] : 'inline';
            lines.push('/* ' + src + ' */');
            lines.push(rule.selectorText + ' {');
            for (let i = 0; i < rule.style.length; i++) {
              const prop = rule.style[i];
              const val = rule.style.getPropertyValue(prop);
              const pri = rule.style.getPropertyPriority(prop);
              lines.push('  ' + prop + ': ' + val + (pri ? ' !important' : '') + ';');
            }
            lines.push('}');
          }
        }
      } catch (e) {}
    }
  } catch (e) {
    lines.push('(Could not read stylesheets: ' + e.message + ')');
  }

  if (el.style.cssText) {
    lines.push('\n=== INLINE STYLES ===');
    lines.push(el.style.cssText);
  }

  lines.push('\n=== PARENT CHAIN ===');
  let node = el;
  let depth = 0;
  while (node && node !== document.documentElement && depth < 12) {
    const tag = node.tagName.toLowerCase();
    const id = node.id ? '#' + node.id : '';
    const cls = node.className && typeof node.className === 'string'
      ? '.' + node.className.trim().split(/\s+/).join('.') : '';
    lines.push('  '.repeat(depth) + tag + id + cls);
    node = node.parentElement;
    depth++;
  }

  const result = '\n\n\n\n\n' + lines.join('\n') + '\n\n\n\n\n# Next batch: ';
  copy(result);
  console.log('Copied ' + result.length + ' chars to clipboard.');
  return result;
}

function cssPath(el) {
  const parts = [];
  while (el && el.nodeType === 1) {
    let sel = el.tagName.toLowerCase();
    if (el.id) { parts.unshift(sel + '#' + el.id); break; }
    if (el.className && typeof el.className === 'string') {
      sel += '.' + el.className.trim().split(/\s+/).join('.');
    }
    const parent = el.parentElement;
    if (parent) {
      const siblings = [...parent.children].filter(c => c.tagName === el.tagName);
      if (siblings.length > 1) {
        sel += ':nth-child(' + ([...parent.children].indexOf(el) + 1) + ')';
      }
    }
    parts.unshift(sel);
    el = parent;
  }
  return parts.join(' > ');
}

function xPath(el) {
  const parts = [];
  while (el && el.nodeType === 1) {
    let idx = 1;
    for (let sib = el.previousElementSibling; sib; sib = sib.previousElementSibling) {
      if (sib.tagName === el.tagName) idx++;
    }
    parts.unshift(el.tagName.toLowerCase() + '[' + idx + ']');
    el = el.parentElement;
  }
  return '/' + parts.join('/');
}

debug($0);

Make it even faster: one keyboard shortcut (Linux)

This is written for Linux — it's what I use. The script itself works in any browser on any OS. The keyboard shortcut below is for MATE desktop, but the AI prompt at the end will adapt it to whatever you're running.

On Linux with MATE desktop, here's how to bind it to Super+D:

1. Install xsel if you don't have it:

   sudo apt install xsel

2. Save the script somewhere permanent (e.g. ~/tools/debug-element.js), then run:

   gsettings set org.mate.Marco.keybinding-commands command-9 \
     "/bin/sh -c 'cat ~/tools/debug-element.js | xsel --clipboard --input'"
   
   gsettings set org.mate.Marco.global-keybindings run-command-9 '<Super>d'

Now the workflow is:

1. Click the broken element in Inspector
2. Super+D — the script is now on your clipboard
3. Ctrl+V in Console, Enter — the script runs, and the debug output replaces the script on your clipboard
4. Ctrl+V to Claude — full debug context, pasted

Read that again. You never open a file. You never select text. You never copy anything. Your clipboard gets written to twice — first with the script, then with the debug output — and each time you just paste. Three keystrokes from "I see a problem" to "Claude has full context." That's the floor. You physically cannot get the information to Claude any faster without a browser extension.

Other Linux desktops: The gsettings commands above are specific to MATE (Marco window manager). If you're on a different desktop environment, paste this into Microsoft Copilot (free) or any AI assistant:

Make this keyboard shortcut work on my Linux setup.
I want Super+D to copy ~/tools/debug-element.js to my clipboard.

Here's the MATE version — adapt it for my desktop environment:

gsettings set org.mate.Marco.keybinding-commands command-9 
  "/bin/sh -c 'cat ~/tools/debug-element.js | xsel --clipboard --input'"
gsettings set org.mate.Marco.global-keybindings run-command-9 '<Super>d'

My setup: [tell it your distro and desktop environment]

macOS

Paste this into Copilot or any AI assistant:

I'm on macOS. I have a JavaScript file at ~/tools/debug-element.js.
I want a keyboard shortcut (Cmd+Shift+D) that copies the file contents
to my clipboard. Give me step-by-step instructions.

Windows

Paste this into Copilot or any AI assistant:

I'm on Windows. I have a JavaScript file at %USERPROFILE%\tools\debug-element.js.
I want a keyboard shortcut (Win+D or similar) that copies the file contents
to my clipboard. Give me step-by-step instructions.

Why this matters more than you think

The quality of Claude's CSS fixes is directly proportional to the context you give it. A screenshot tells Claude what's wrong. The debug output tells Claude why it's wrong — which rule is winning the specificity war, which file it comes from, what the parent chain looks like, whether an inline style is overriding everything.

That's the difference between Claude saying "try adding !important" and Claude saying "your .nav-item a rule at specificity 0,1,1 is being overridden by .taid-menu a at 0,1,1 — same specificity, but it appears later in template.css. Move it below or increase the specificity."

Better context. Better fixes. Less back-and-forth.