JS Reveal — 動的DOM可視化ツール

JSがDOMContentLoaded後に追加したDOM要素をタイミング別に色分け可視化。Googlebot・AI検索が見落とすコンテンツをSEO/AIO分析できます。

JS Reveal は、JavaScript が DOMContentLoaded（DCL）後に追加した DOM 要素を、追加タイミング別に4色で可視化する SEO / AIO 分析ツールです。 Googlebot、ChatGPT、Perplexity、Google AI Overview などの検索エンジン / AI 検索は、JavaScript の実行完了を待たずに第1段階クロールを行うことがあります。その結果、クライアント側レンダリングで表示されている重要コンテンツ（商品情報、FAQ、レビュー、価格、構造化データ等）が検索結果や AI 回答に反映されないケースが頻発しています。 JS Reveal を使えば、こうした「検索エンジンから見えないコンテンツ」を一目で特定でき、SEO 監査・AIO 対応・SSR 導入の優先度判断を劇的に効率化できます。 ━━━━━━━━━━━━━━━━━━━━━━ ◆ 主な機能 ━━━━━━━━━━━━━━━━━━━━━━ ■ タイミング別4色ハイライト JS が追加した要素を、追加タイミングに応じて4色で色分け表示。 🟡 黄（DCL〜1秒）: Googlebot が拾える可能性あり 🟠 橙（1〜3秒）: インデックス遅延リスク 🔴 赤（3秒以降）: Googlebot が見落とすリスク大 🟣 桃（SEO致命的）: H1〜H3 が JS 追加 → ランキング致命傷 ■ Bot視点モード（Alt+B） JS 追加要素を visibility:hidden で非表示にし、Googlebot が第1段階で見ている世界を再現。SSR の欠損が即座に判明します。 ■ SEO診断（自動） 以下の項目を自動検出: ・H1 タグが JS 追加 / 存在しない ・canonical リンクが JS 追加 ・FAQPage JSON-LD が JS レンダリング（AI 引用不可） ・Product JSON-LD の aggregateRating / price が null ・FAQ セクションが JS レンダリング ■ JS依存率の定量化 ページ全体の可視テキストに対する JS 追加分の割合（0〜100%）を表示。閾値による色分け: ・緑（<20%）: 安全。概ね SSR 済み ・橙（20-49%）: 警戒。一部コンテンツが Googlebot の第1段階で欠落する可能性 ・赤（≥50%）: 重大。大半のコンテンツが見えない可能性 ■ インスペクトモード ハイライト要素にホバーすると、以下の情報が表示されます: ・タグ名と追加タイミング（DCL からの経過ミリ秒） ・追加元スクリプトの URL（ライブラリ経由 / アプリコード判別） 原因となった JS ファイルを即座に特定できます。 ■ フルページスクリーンショット スクロール+合成方式でページ全体を 1 枚の PNG として保存。固定ヘッダーは冒頭に 1 回だけ写る設計。クライアント報告書にそのまま貼り付けられます。 ■ Markdownレポート自動生成 JS依存率・タイミング別内訳・SEO診断・タグ別集計を含む診断サマリーを、ワンクリックでクリップボードにコピー。GitHub Issue、JIRA、チャットにそのまま貼り付け可能。 ■ 診断履歴 直近 20 件の診断結果をローカルに保存。カードをクリックして再訪問できます。 ■ キーボードショートカット Alt+H: ハイライト ON/OFF Alt+B: Bot視点モード ON/OFF ━━━━━━━━━━━━━━━━━━━━━━ ◆ こんな方におすすめ ━━━━━━━━━━━━━━━━━━━━━━ ・SEO コンサルタント / 内製 SEO 担当者 ・AI 検索（AIO）対応に取り組むマーケター ・SPA / React / Vue / Nuxt / Next.js のサイト運用担当者 ・SSR / ハイドレーション境界の検証を行うフロントエンドエンジニア ・ヘッドレス CMS 導入プロジェクトのテクニカルリード ・クライアントへの SEO 提案資料を作成する Web 制作会社 ━━━━━━━━━━━━━━━━━━━━━━ ◆ プライバシー ━━━━━━━━━━━━━━━━━━━━━━ 本拡張機能は、一切の個人情報・利用状況情報・コンテンツデータを外部に送信しません。すべての設定と診断履歴は、ユーザーのブラウザ内の chrome.storage.local にローカル保存されます。第三者ライブラリ・トラッキングコードも一切含みません。 詳細: [プライバシーポリシーの URL をここに記載] ━━━━━━━━━━━━━━━━━━━━━━ ◆ 技術的特徴 ━━━━━━━━━━━━━━━━━━━━━━ ■ MAIN world でのパッチ MutationObserver では非同期マイクロタスク化により失われてしまう「追加元スクリプトの URL」を、Element.prototype を MAIN world で同期的にラップすることで確実に捕捉します。 ■ 4色タイミング分類 document_start で MutationObserver を起動し、各要素の追加タイミングを performance.now() で正確に記録。DCL からの相対時間で3段階に分類します。 ■ 構造的に正しい JS依存率 分子と分母の両方で同じ「可視リーフ要素の innerText 合計」を使用。jsChars ≤ totalChars が数学的に保証され、100% を超える異常値は発生しません。 ━━━━━━━━━━━━━━━━━━━━━━ ◆ 対応ブラウザ ━━━━━━━━━━━━━━━━━━━━━━ Google Chrome 116 以降（Manifest V3 対応版） Microsoft Edge (Chromium 版、Chrome 拡張互換) Brave、Arc、Opera など Chromium 系ブラウザ ━━━━━━━━━━━━━━━━━━━━━━ ◆ ライセンス ━━━━━━━━━━━━━━━━━━━━━━ MIT License（オープンソース）