posthog-debugger

PostHog デバッガー

ブラウザー自動化ツールを使って、あらゆるウェブサイトの PostHog 実装を調査し、デバッグします。このスキルは、PostHog の設定内容や収集されているデータを開発者やプロダクトチームが正確に把握するのに役立ちます。

重要なルール

1. URL が提示されていない場合は、必ず最初に尋ねてください。
2. **ページへのログインが必要かどうか、必ず尋ねてください。**必要な場合は、まず Chrome からログインするようユーザーに案内してください。
3. **ブラウザーツールを使って移動し、調査してください。**Chrome DevTools MCP（mcp__chrome-devtools__*）または Playwright MCP（mcp__playwright__*）ツールを優先してください。
4. **複数の情報を確認してください。**PostHog の実装方法はさまざまです。スクリプト、ネットワークリクエスト、window オブジェクトを確認してください。
5. **調査結果を明確に報告してください。**見つかった内容を、構造化された形式で要約してください。
6. **何も変更しないでください。**調査は読み取り専用です。

初期フロー

ユーザーから PostHog の実装を調査するよう依頼された場合：

1. URL を確認します（提示されていない場合）
2. URL に ?__posthog_debug=true を付けて移動します
3. スナップショットを取得し、ログインが必要か確認します。ログインを示す情報を探してください
4. ログインが必要な場合は、ブラウザーで認証するようユーザーに依頼します
5. 認証後、調査を続行します

ログインページの検出

移動後にスナップショットを取得し、ログインを示す情報を探します：

• ページタイトルに「login」、「sign in」、「authenticate」が含まれている
• URL に「login」、「signin」、「auth」、「sso」が含まれている
• ページにユーザー名／パスワード欄がある
• ページに「Sign in with Google/GitHub/etc.」ボタンが表示されている

認証が必要なページのワークフロー

ログインページを検出した場合、またはユーザーからページへの認証が必要だと伝えられた場合：

1. ブラウザーは開いたままにします。すでに該当ページに移動しています

2. ユーザーにログインを依頼します：

   "This page requires authentication. Please log in using the Chrome browser I just opened. Let me know when you're logged in and on the page you want to inspect."
   

3. ユーザーが完了を確認したら、新しいスナップショットを取得し、認証済みであることを確認します

4. デバッグパラメーターがまだ付いていない場合は追加し、必要に応じて再読み込みします

5. 調査を続行します

利用可能なブラウザーツール

Chrome DevTools MCP

• mcp__chrome-devtools__navigate_page - URL に移動します
• mcp__chrome-devtools__take_snapshot - ページのアクセシビリティツリーを取得します
• mcp__chrome-devtools__evaluate_script - JavaScript を実行して PostHog を調査します
• mcp__chrome-devtools__list_network_requests - ネットワークトラフィックを確認します
• mcp__chrome-devtools__get_network_request - リクエストの詳細を取得します
• mcp__chrome-devtools__list_console_messages - エラーを確認します

Playwright MCP

• mcp__playwright__browser_navigate - URL に移動します
• mcp__playwright__browser_snapshot - ページのスナップショットを取得します
• mcp__playwright__browser_evaluate - JavaScript を実行します
• mcp__playwright__browser_network_requests - ネットワークトラフィックを確認します
• mcp__playwright__browser_console_messages - コンソールを確認します

調査ワークフロー

ステップ 1：デバッグモードでページに移動する

PostHog のデバッグモードを有効にするため、必ず URL に ?__posthog_debug=true を追加してください。これにより、コンソールに詳細なログが出力されます。

• URL にクエリー文字列がない場合：https://example.com?__posthog_debug=true
• URL にクエリー文字列がすでにある場合：https://example.com?foo=bar&__posthog_debug=true

ワークフロー：

1. デバッグパラメーターを付けて URL に移動します
2. スナップショットを取得し、読み込まれた内容を確認します
3. ログインページを示す情報を確認します：
   • URL が /login、/signin、/auth、/sso にリダイレクトされている
   • ページタイトルに「log in」、「sign in」が含まれている
   • ページにログインフォームの入力欄がある
4. ログインが必要と判断した場合：
   • ユーザーに「ページを開きましたが、ログインが必要です。Chrome でログインしてから、準備ができたらお知らせください。」と伝えます
   • ユーザーの確認を待ちます
   • 新しいスナップショットを取得し、認証済みであることを確認します
   • 必要に応じて、新しい URL にデバッグパラメーターを追加します
5. **ログインが不要な場合：**調査を続行します

ステップ 2：PostHog グローバルオブジェクトを確認する

window 上の posthog オブジェクトを調査するために JavaScript を実行します：

(() => {
  if (typeof posthog === 'undefined') {
    return { installed: false };
  }

  const ph = posthog;
  return {
    installed: true,
    version: ph.version || ph.LIB_VERSION || 'unknown',
    config: {
      token: ph.config?.token || ph.get_config?.('token') || 'not accessible',
      apiHost: ph.config?.api_host || ph.get_config?.('api_host') || 'not accessible',
      autocapture: ph.config?.autocapture ?? ph.get_config?.('autocapture') ?? 'not accessible',
      capturePageview: ph.config?.capture_pageview ?? ph.get_config?.('capture_pageview') ?? 'not accessible',
      capturePageleave: ph.config?.capture_pageleave ?? ph.get_config?.('capture_pageleave') ?? 'not accessible',
      sessionRecording: ph.config?.enable_recording_console_log !== undefined ||
                        ph.sessionRecording?.started ||
                        'check network',
      persistence: ph.config?.persistence || ph.get_config?.('persistence') || 'not accessible',
      debug: ph.config?.debug ?? ph.get_config?.('debug') ?? false
    },
    distinctId: ph.get_distinct_id?.() || 'not accessible',
    sessionId: ph.get_session_id?.() || 'not accessible',
    featureFlags: ph.getFeatureFlag ? Object.keys(ph.featureFlags?.flags || {}) : [],
    activeFeatureFlags: ph.getFeatureFlag ?
      Object.entries(ph.featureFlags?.flags || {})
        .filter(([_, v]) => v)
        .map(([k]) => k) : []
  };
})()

ステップ 2b：バンドルされた PostHog を確認する（リモート設定）

posthog が window 上にない場合は、_POSTHOG_REMOTE_CONFIG を使用するバンドル実装を確認します：

(() => {
  const remoteConfig = window._POSTHOG_REMOTE_CONFIG;
  if (!remoteConfig) {
    return { found: false };
  }

  const tokens = Object.keys(remoteConfig);
  const configs = tokens.map(token => {
    const cfg = remoteConfig[token]?.config || {};
    return {
      token,
      hasFeatureFlags: cfg.hasFeatureFlags || false,
      autocapture: !cfg.autocapture_opt_out,
      sessionRecording: cfg.sessionRecording || false,
      heatmaps: cfg.heatmaps || false,
      surveys: cfg.surveys || false,
      capturePerformance: cfg.capturePerformance || {},
      defaultIdentifiedOnly: cfg.defaultIdentifiedOnly || false
    };
  });

  return {
    found: true,
    bundled: true,
    configs
  };
})()

ステップ 2c：コンソールで PostHog のデバッグメッセージを確認する

?__posthog_debug=true を指定すると、PostHog は詳細なログを出力します。list_console_messages を使用して、[PostHog.js] の項目を確認します。

確認する主なメッセージ：

• [PostHog.js] Persistence loaded - 永続化の種類（localStorage、sessionStorage、cookie）が表示されます
• [PostHog.js] [Surveys] Surveys loaded successfully - アンケートモジュールが読み込まれました
• [PostHog.js] [Surveys] flags response received, isSurveysEnabled: X - アンケートが有効かどうかを示します
• [PostHog.js] [SessionRecording] - セッション録画の状態
• [PostHog.js] [WebExperiments] - ウェブ実験／フィーチャーフラグ
• [PostHog.js] set_config - 設定の変更

重要な違い：

• モジュールが読み込まれた = JavaScript ファイルが正常に読み込まれました
• 機能が有効になっている = PostHog の設定で機能がオンになっています

モジュールは読み込まれていても、無効になっている場合があります。たとえば：

[PostHog.js] [Surveys] Surveys loaded successfully  <- Module loaded
[PostHog.js] [Surveys] flags response received, isSurveysEnabled: false  <- Feature disabled

ステップ 3：PostHog スクリプトを確認する

ページ内に PostHog スクリプトがあるか確認します。

(() => {
  const scripts = Array.from(document.querySelectorAll('script'));
  const posthogScripts = scripts.filter(s =>
    (s.src && (s.src.includes('posthog') || s.src.includes('ph.js'))) ||
    (s.textContent && (s.textContent.includes('posthog.init') || s.textContent.includes('!function(t,e)')))
  );

  return {
    found: posthogScripts.length > 0,
    scripts: posthogScripts.map(s => ({
      src: s.src || 'inline',
      async: s.async,
      defer: s.defer,
      type: s.type || 'text/javascript'
    }))
  };
})()

ステップ 4：ネットワークリクエストを確認する

ネットワークリクエストを絞り込み、PostHog の通信を見つけます。PostHog では、次のものが使われる場合があります。

標準ドメイン：

• *.posthog.com
• us.i.posthog.com / eu.i.posthog.com
• us-assets.i.posthog.com / eu-assets.i.posthog.com

カスタムプロキシドメイン（よくあるパターン）：

• ph.yourcompany.com
• analytics.yourcompany.com
• t.yourcompany.com
• パスに /array/phc_ を含む任意のドメイン（PostHog の設定）

確認するエンドポイント：

• /e/ または /capture/ - イベント
• /s/ - セッション録画
• /decide/ または /flags/ - フィーチャーフラグ
• /batch/ - バッチ処理されたイベント
• /array/phc_*/config.js - リモート設定（バンドルされた実装）
• /static/surveys.js - アンケートモジュール
• /static/recorder.js - セッション録画モジュール

カスタムプロキシの特定方法：

1. PostHog 固有のパス（/flags/、/array/phc_）を含むリクエストを探します
2. ネットワークリクエストの詳細で PostHog のヘッダーを確認します
3. リクエスト URL または本文に phc_ トークンが含まれているか確認します

ステップ 5：よくある問題を確認する

診断を実行します。

(() => {
  const issues = [];

  // Check if posthog exists
  if (typeof posthog === 'undefined') {
    issues.push('PostHog not found on window object');
    return { issues };
  }

  // Check for multiple instances
  if (window.__POSTHOG_INSTANCES__ && window.__POSTHOG_INSTANCES__.length > 1) {
    issues.push('Multiple PostHog instances detected - may cause duplicate events');
  }

  // Check if initialized
  if (!posthog.get_distinct_id || !posthog.get_distinct_id()) {
    issues.push('PostHog may not be fully initialized');
  }

  // Check consent mode
  if (posthog.has_opted_out_capturing && posthog.has_opted_out_capturing()) {
    issues.push('User has opted out of tracking');
  }

  // Check for debug mode in production
  const isDebug = posthog.config?.debug || posthog.get_config?.('debug');
  const hostname = window.location.hostname;
  if (isDebug && !hostname.includes('localhost') && !hostname.includes('127.0.0.1')) {
    issues.push('Debug mode is enabled in production');
  }

  // Check autocapture
  const autocapture = posthog.config?.autocapture ?? posthog.get_config?.('autocapture');
  if (autocapture === false) {
    issues.push('Autocapture is disabled - only manual events will be tracked');
  }

  return {
    issues: issues.length > 0 ? issues : ['No issues detected'],
    checksRun: true
  };
})()

ステップ 6：最近のイベントを取得する（デバッグが利用可能な場合）

デバッグモードがオンになっている場合、またはキューにアクセスできる場合：

(() => {
  if (typeof posthog === 'undefined') return { events: [] };

  // Try to get queued events
  const queue = posthog._requestQueue?.queue ||
                posthog.requestQueue?.queue ||
                [];

  // Get recent events from persistence if available
  const stored = posthog.persistence?.props?.$stored_events || [];

  return {
    queuedEvents: queue.length,
    recentEventTypes: [...new Set([...queue, ...stored].map(e => e?.event || 'unknown').slice(0, 20))]
  };
})()

ステップ 7：他の分析ツールを検出する

ネットワークリクエストとスクリプトをスキャンして、ページ上の分析／トラッキングツールをすべて特定します。名称がわかっているツールには既知のパターンを使用し、フォールバックとして未知のトラッキングスクリプトも検出します。

(() => {
  const scripts = Array.from(document.querySelectorAll('script[src]')).map(s => s.src);
  const hostname = window.location.hostname.replace('www.', '');
  const knownTools = [];
  const matchedScripts = new Set();

  const patterns = {
    'Google Analytics': /google-analytics\.com|gtag\/js/i,
    'Google Tag Manager': /googletagmanager\.com\/gtm/i,
    'Facebook Pixel': /connect\.facebook\.net.*fbevents/i,
    'LinkedIn Insight': /snap\.licdn\.com/i,
    'HubSpot': /js\.hs-scripts\.com|js\.hsforms\.com/i,
    'Hotjar': /static\.hotjar\.com/i,
    'Segment': /cdn\.segment\.com/i,
    'Mixpanel': /cdn\.mxpnl\.com|mixpanel\.com/i,
    'Amplitude': /cdn\.amplitude\.com/i,
    'Heap': /heap-analytics\.com|heapanalytics\.com/i,
    'Intercom': /widget\.intercom\.io|intercomcdn\.com/i,
    'Drift': /js\.driftt\.com/i,
    'Zendesk': /static\.zdassets\.com/i,
    'Crisp': /client\.crisp\.chat/i,
    'FullStory': /fullstory\.com\/s\/fs\.js/i,
    'LogRocket': /cdn\.logrocket\.com/i,
    'Sentry': /browser\.sentry-cdn\.com/i,
    'Datadog': /datadoghq\.com/i,
    'Snowplow': /cdn\.snowplow/i,
    'Rudderstack': /cdn\.rudderlabs\.com/i,
    'Clearbit': /tag\.clearbitscripts\.com/i,
    'Dreamdata': /cdn\.dreamdata\.cloud/i,
    'GrowthBook': /cdn\.growthbook\.io/i,
    'LaunchDarkly': /sdk\.launchdarkly\.com/i,
    'Optimizely': /cdn\.optimizely\.com/i,
    'VWO': /dev\.visualwebsiteoptimizer\.com/i,
    'Ahrefs': /analytics\.ahrefs\.com/i,
    'AdRoll': /s\.adroll\.com/i,
    'Factors.ai': /app\.factors\.ai/i,
    'Vector': /cdn\.vector\.co/i,
    'Leadfeeder': /sc\.lfeeder\.com/i,
    'Pendo': /cdn\.pendo\.io/i,
    'Chameleon': /fast\.chameleon\.io/i,
    'Appcues': /fast\.appcues\.com/i,
    'UserPilot': /js\.userpilot\.io/i,
    'Mouseflow': /cdn\.mouseflow\.com/i,
    'Lucky Orange': /tools\.luckyorange\.com/i,
    'Crazy Egg': /script\.crazyegg\.com/i,
    'Plausible': /plausible\.io\/js/i,
    'Fathom': /cdn\.usefathom\.com/i,
    'Simple Analytics': /scripts\.simpleanalyticscdn\.com/i,
    'Matomo': /matomo\.js|piwik\.js/i,
    'Klaviyo': /static\.klaviyo\.com/i,
    'Customer.io': /track\.customer\.io/i,
    'Braze': /sdk\.iad-\d+\.braze\.com/i,
    'OneSignal': /cdn\.onesignal\.com/i,
    'Insider': /insr\.io/i,
    'Mutiny': /cdn\.mutinycdn\.com/i,
    'Qualified': /js\.qualified\.com/i,
    'Chilipiper': /js\.chilipiper\.com/i,
    'Typekit': /use\.typekit\.net/i,
    'Google Fonts': /fonts\.googleapis\.com/i,
    'Cookiebot': /consent\.cookiebot\.com/i,
    'OneTrust': /cdn\.cookielaw\.org/i,
    'TrustArc': /consent\.trustarc\.com/i,
    'Osano': /cmp\.osano\.com/i,
    'Usercentrics': /app\.usercentrics\.eu/i,
    'OpenLI/Legal Monster': /widgets\.legalmonster\.com|openli\.com/i,
    'Nelio A/B Testing': /nelio-ab-testing/i,
    'Mesh': /mesh-interactive|withmesh\.com/i,
    'Reddit Pixel': /redditstatic\.com|rdt\.li/i,
    'Webflow': /wdfl\.co|webflow\.com\/js/i,
    'Dub.co': /dubcdn\.com|dub\.co/i
  };

  // Match known tools
  for (const [name, pattern] of Object.entries(patterns)) {
    for (const src of scripts) {
      if (pattern.test(src)) {
        knownTools.push(name);
        matchedScripts.add(src);
        break;
      }
    }
  }

  // Find unknown tracking scripts
  const trackingKeywords = /track|analytics|pixel|tag|beacon|collect|measure|metric|event|telemetry|monitor/i;
  const unknownScripts = scripts.filter(src => {
    if (matchedScripts.has(src)) return false;
    try {
      const url = new URL(src);
      const scriptHost = url.hostname.replace('www.', '');
      // Skip same-domain scripts
      if (scriptHost === hostname || scriptHost.endsWith('.' + hostname)) return false;
      // Skip common CDNs that host non-tracking code
      if (/unpkg\.com|jsdelivr\.net|cdnjs\.cloudflare\.com|ajax\.googleapis\.com/i.test(scriptHost)) return false;
      // Include if it has tracking-like keywords or is from a third-party
      return trackingKeywords.test(src) || true;
    } catch {
      return false;
    }
  });

  // Extract just the domain from unknown scripts for cleaner output
  const unknownDomains = [...new Set(unknownScripts.map(src => {
    try {
      return new URL(src).hostname;
    } catch {
      return src;
    }
  }))].sort();

  return {
    knownTools: [...new Set(knownTools)].sort(),
    unknownScripts: unknownDomains
  };
})()

回答形式

調査後、構造化された概要を提示します。事実に基づいて簡潔にまとめ、依頼がない限り、コメントや推奨事項は含めません。ひと目で状態がわかるように絵文字を使います。

ステータスを示す絵文字：

• ✅ = はい／有効／アクティブ／インストール済み
• ❌ = いいえ／無効／見つかりません
• ⚠️ = 警告／問題を検出

## PostHog Implementation Summary

### Status
✅ Installed / ✅ Installed (bundled) / ❌ Not Found

### Implementation Type
[Global window.posthog / Bundled (not exposed globally) / Custom proxy]

### Configuration
- **Version:** [version]
- **API Host:** [host] ([US/EU Cloud] / [Custom proxy] / [Self-hosted])
- **Project Token:** [full token]
- **Persistence:** [localStorage/sessionStorage/cookie/memory]

### Features (Module Loaded → Feature Enabled)
| Feature | Module Loaded | Enabled |
|---------|---------------|---------|
| Autocapture | ✅ / ❌ | ✅ / ❌ |
| Session Recording | ✅ / ❌ | ✅ / ❌ |
| Surveys | ✅ / ❌ | ✅ / ❌ |
| Heatmaps | ✅ / ❌ | ✅ / ❌ |
| Feature Flags | ✅ / ❌ | ✅ / ❌ |
| Web Vitals | ✅ / ❌ | ✅ / ❌ |

### Identifiers
- **Distinct ID:** [id]
- **Session ID:** [id]

### Feature Flags
[List of active flags or "None loaded"]

### Network Activity
- Events endpoint: ✅ / ❌
- Session recording: ✅ / ❌
- Decide/flags endpoint: ✅ / ❌
- Surveys endpoint: ✅ / ❌

### Issues Found
✅ None detected
— or —
⚠️ [Issue description]

### Script Loading
- **Source:** [CDN/Self-hosted/NPM bundle/Custom proxy]
- **Loading:** [Async/Sync/Defer]

### Other Analytics Tools Detected
[List of recognized analytics, tracking, and marketing tools]

### Other External Scripts
[Third-party script domains not matched to known tools]

よくある質問と回答方法

「このページでは PostHog はどのように実装されていますか？」

調査ワークフローをすべて実行し、完全な概要を提示します。

「PostHog のトラッキングは機能していますか？」

1. posthog オブジェクトが存在するか確認します
2. ネットワークリクエストが送信されているか確認します
3. コンソールにエラーがないか確認します
4. オプトアウト状態になっていないか確認します

「どのイベントがトラッキングされていますか？」

1. 自動キャプチャの状態を確認します
2. /e/ または /capture/ へのネットワークリクエストを確認します
3. イベントキューへのアクセスを試みます
4. $pageview、$pageleave などが有効かどうかを記録します

「セッション録画は有効ですか？」

1. 録画設定の構成を確認します
2. /s/ へのネットワークリクエストを探します
3. sessionRecording オブジェクトの状態を確認します

「どのフィーチャーフラグが有効ですか？」

1. posthog の featureFlags オブジェクトを確認します
2. /decide/ へのネットワークリクエストを探します
3. すべてのフラグとその値を一覧表示します

「実装に問題はありますか？」

診断チェックを実行し、結果を報告します。

「EU クラウドと US クラウドのどちらを使用していますか？」

api_host の設定を確認します。

• us.i.posthog.com = US クラウド
• eu.i.posthog.com = EU クラウド
• app.posthog.com = レガシー（デフォルトは US）
• カスタムドメイン = セルフホストまたはプロキシ

会話例

ユーザー:「https://example.com/ の PostHog はどのように実装されていますか？」

Claude:「デバッグモードを有効にして example.com に移動し、PostHog の実装を確認します。」

[デバッグモードを有効にして https://example.com?__posthog_debug=true に移動] [JavaScript のチェックを実行] [コンソールで PostHog のデバッグメッセージを確認] [ネットワークリクエストを分析]

Claude:

## PostHog Implementation Summary

### Status
✅ Installed

### Implementation Type
Global window.posthog

### Configuration
- **Version:** 1.96.1
- **API Host:** https://us.i.posthog.com (US Cloud)
- **Project Token:** phc_abc123def456ghi789jkl012mno345
- **Persistence:** localStorage+cookie

### Features (Module Loaded → Feature Enabled)
| Feature | Module Loaded | Enabled |
|---------|---------------|---------|
| Autocapture | ✅ | ✅ |
| Session Recording | ✅ | ✅ |
| Surveys | ✅ | ❌ |
| Heatmaps | ❌ | ❌ |
| Feature Flags | ✅ | ✅ |
| Web Vitals | ✅ | ✅ |

### Identifiers
- **Distinct ID:** 018d4f2a-1234-7abc-def0-123456789abc
- **Session ID:** 018d4f2a-5678-7xyz-abc0-987654321xyz

### Feature Flags
- `new-checkout-flow` ✅
- `beta-features` ❌

### Network Activity
- Events endpoint: ✅
- Session recording: ✅
- Decide/flags endpoint: ✅
- Surveys endpoint: ✅

### Issues Found
✅ None detected

### Script Loading
- **Source:** CDN (us-assets.i.posthog.com)
- **Loading:** Async

### Other Analytics Tools Detected
- Google Tag Manager
- Google Analytics
- HubSpot

### Other External Scripts
- cdn.example-vendor.com

---

例 2：カスタムプロキシを使用する認証が必要なページ

ユーザー:「https://app.example.com/dashboard の PostHog を確認してください」

Claude:「デバッグモードを有効にしてそのページに移動します。」

[https://app.example.com/dashboard?__posthog_debug=true に移動] [スナップショットを取得し、ログインページが表示されることを確認]

Claude:「ページを開きましたが、ログインが必要です。開いたばかりの Chrome ブラウザーでログインしてください。ダッシュボードが表示されたらお知らせください。」

ユーザー:「ログインしました」

Claude: [新しいスナップショットを取得し、認証済みであることを確認して、調査を実行]

## PostHog Implementation Summary

### Status
✅ Installed (bundled)

### Implementation Type
Bundled (not exposed globally) via custom proxy

### Configuration
- **Version:** 1.257.2
- **API Host:** ph.example.com (Custom proxy)
- **Project Token:** phc_abc123def456ghi789jkl012mno345
- **Persistence:** sessionStorage

### Features (Module Loaded → Feature Enabled)
| Feature | Module Loaded | Enabled |
|---------|---------------|---------|
| Autocapture | ✅ | ❌ |
| Session Recording | ❌ | ❌ |
| Surveys | ✅ | ❌ |
| Heatmaps | ❌ | ❌ |
| Feature Flags | ✅ | ✅ |
| Web Vitals | ✅ | ❌ |

### Identifiers
- **Distinct ID:** (not accessible - bundled)
- **Session ID:** (not accessible - bundled)

### Network Activity
- Events endpoint: ✅
- Session recording: ❌
- Decide/flags endpoint: ✅
- Surveys endpoint: ✅ (module loaded, feature disabled)

### Issues Found
✅ None detected

### Script Loading
- **Source:** Custom proxy (ph.example.com)
- **Loading:** Bundled in app