debug-threads.js

// Threads 結構調試工具
// 在 Console 中執行這個腳本來分析 Threads 的 DOM 結構

console.log('🔍 Threads 結構分析工具');

// 1. 檢查頁面基本資訊
console.log('📊 頁面基本資訊:');
console.log('- 網址:', window.location.href);
console.log('- 標題:', document.title);
console.log('- Body 類名:', document.body.className);

// 2. 搜尋可能的貼文容器
console.log('\n📝 搜尋貼文容器:');

const possibleSelectors = [
  '[data-pressable-container="true"]',
  'article',
  '[role="article"]',
  'div[data-testid*="post"]',
  'div[data-testid*="thread"]',
  'div[data-testid*="feed"]',
  'div[style*="border"]'
];

possibleSelectors.forEach(selector => {
  try {
    const elements = document.querySelectorAll(selector);
    console.log(`- ${selector}: ${elements.length} 個元素`);
    
    if (elements.length > 0 && elements.length < 20) {
      elements.forEach((el, i) => {
        const text = el.textContent?.trim().substring(0, 100) || '';
        if (text.length > 10) {
          console.log(`  ${i+1}. "${text}..."`);
        }
      });
    }
  } catch (e) {
    console.log(`- ${selector}: 錯誤 - ${e.message}`);
  }
});

// 3. 搜尋輸入框
console.log('\n💬 搜尋輸入框:');

const inputSelectors = [
  'textarea',
  '[contenteditable="true"]',
  'input[type="text"]',
  '[role="textbox"]',
  '[data-testid*="input"]',
  '[placeholder*="reply"]',
  '[placeholder*="回覆"]'
];

inputSelectors.forEach(selector => {
  try {
    const elements = document.querySelectorAll(selector);
    console.log(`- ${selector}: ${elements.length} 個元素`);
    
    if (elements.length > 0) {
      elements.forEach((el, i) => {
        const placeholder = el.getAttribute('placeholder') || '';
        const ariaLabel = el.getAttribute('aria-label') || '';
        const testId = el.getAttribute('data-testid') || '';
        console.log(`  ${i+1}. placeholder="${placeholder}" aria-label="${ariaLabel}" data-testid="${testId}"`);
      });
    }
  } catch (e) {
    console.log(`- ${selector}: 錯誤 - ${e.message}`);
  }
});

// 4. 搜尋按鈕
console.log('\n🔘 搜尋互動按鈕:');

const buttonSelectors = [
  'button',
  '[role="button"]',
  '[aria-label*="like"]',
  '[aria-label*="reply"]',
  '[aria-label*="讚"]',
  '[aria-label*="回覆"]'
];

buttonSelectors.forEach(selector => {
  try {
    const elements = document.querySelectorAll(selector);
    console.log(`- ${selector}: ${elements.length} 個元素`);
    
    if (elements.length > 0 && elements.length < 50) {
      const labels = Array.from(elements).map(el => 
        el.getAttribute('aria-label') || el.textContent?.trim() || '無標籤'
      ).slice(0, 10);
      console.log(`  前10個標籤: ${labels.join(', ')}`);
    }
  } catch (e) {
    console.log(`- ${selector}: 錯誤 - ${e.message}`);
  }
});

// 5. 檢查現有的 AI 按鈕
console.log('\n✨ 檢查 AI 按鈕:');
const aiButtons = document.querySelectorAll('.threads-ai-button');
console.log(`- 找到 ${aiButtons.length} 個 AI 按鈕`);

// 6. 分析頁面結構
console.log('\n🏗️ 頁面結構分析:');
const mainContent = document.querySelector('main') || document.querySelector('#main') || document.body;
console.log('- 主要內容容器:', mainContent.tagName, mainContent.className);

const feedContainer = document.querySelector('[data-testid*="feed"]') || 
                     document.querySelector('[role="feed"]') ||
                     document.querySelector('[aria-label*="feed"]');
if (feedContainer) {
  console.log('- 發現動態容器:', feedContainer.tagName, feedContainer.className);
  console.log('- 動態容器子元素數量:', feedContainer.children.length);
}

// 7. 提供建議
console.log('\n💡 建議:');
console.log('如果找不到貼文，請嘗試:');
console.log('1. 滾動頁面載入更多內容');
console.log('2. 點擊進入具體貼文頁面');
console.log('3. 重新整理頁面');
console.log('4. 檢查是否在正確的 Threads 頁面 (www.threads.com)');

// 8. 導出結果到全域變數
window.threadsDebugInfo = {
  url: window.location.href,
  possiblePosts: possibleSelectors.map(sel => ({
    selector: sel,
    count: document.querySelectorAll(sel).length
  })),
  inputs: inputSelectors.map(sel => ({
    selector: sel,
    count: document.querySelectorAll(sel).length
  })),
  buttons: buttonSelectors.map(sel => ({
    selector: sel,
    count: document.querySelectorAll(sel).length
  }))
};

console.log('\n📋 調試資訊已儲存到 window.threadsDebugInfo');
console.log('🎯 分析完成！');