AIコードデバッガー — AIでサイトの壊れたコードを見つけて直そう！

デバッガーの精度は、あなたが渡すレポートの質に左右されます。「動きません」では推測が返ってくるだけですが、的確なレポートなら修正が返ってきます。次の4点を含めましょう。

• 失敗しているコード — 断片ひとつではなく、関連するHTML、CSS、JSをまとめて貼り付けてください。CSSのバグは3行離れたマークアップが原因のことが多く、JSのエラーは対象の要素も併せて必要です。
• 正確な症状 — 「ドロップダウンが一瞬開いてすぐ閉じる」は使える情報ですが、「メニューが壊れている」では不十分です。
• 本来期待していた動作 — 意図した挙動を伝えることで、複数ありうる修正案のうち本当に望んでいるものをAIが選べます。
• エラーメッセージの原文 — 行番号やスタックトレースも含め、コンソールのメッセージをそのままコピーしてください。この一文だけで原因が即座に特定できることもあります。

見た目のバグなら、コードと一緒に壊れたUIのスクリーンショットも貼り付けましょう。画像読み取り機能があなたの説明するズレを見て、原因のルールに結び付けてくれます。

フロントエンドのバグはいくつかの決まったパターンに集約され、AIデバッガーはそのどれにも素早く対応します。

1. 構造的なHTML — 閉じられていない<div>、インライン要素の中に入れられたブロック要素、スクリプトを密かに壊す重複したidなど。デバッガーはツリーを読み取り、不正なネストを指摘します。
2. CSSの詳細度とレイアウト — より詳細なセレクタに上書きされたルール、縮まないflexの子要素、スタッキングコンテキストがないために何も効かないz-index。どのルールが勝っているか、その理由まで教えてくれます。
3. JavaScriptの参照とタイミング — DOMの準備前に実行されるスクリプトによるCannot read properties of nullや、まだ存在しない要素に付けられたリスナーなど。
4. レスポンシブの崩れ — デスクトップでは問題なくても、あるブレークポイントで崩れるレイアウト。多くは固定幅やflex-wrapの欠落が原因です。

デバッガーができないのは、あなたのビジネスロジックを理解することです。コードに書かれている通りに修正するので、それがあなたの意図と一致しているかは自分で確認する必要があります。

検証できない修正は負債になります。ループを短く、レビューしやすく保ちましょう。

• 貼り付ける前に切り分ける — バグを再現できる最小のブロックまでページを絞り込みます。焦点の絞れたスニペットなら、すでに動いていた部分まで書き換えられることなく、的確な修正が得られます。
• 差分だけでなく説明を読む — 重要なのは、なぜ壊れたのかを理解することです。そうすれば同じ種類のバグが数セクション先で再発するのを防げます。
• 結果を差分で確認する — エディタやGitで修正後のコードを元のコードと並べ、何が変わったか、余計なものが紛れ込んでいないかを正確に確認しましょう。
• 修復より置き換えの方が安いなら再生成する — きれいなパッチでは手に負えないほどもつれたセクションは、そのブロックの新しく動くバージョンを生成して差し替えましょう。

修正済みのブロックはすべて標準のHTML、CSS、JavaScriptとしてエクスポートされるので、修正はあなたが所有する他の変更と同じように、コードベースとGit履歴の中で生き続けます。

以下は複数の事例を組み合わせた架空のシナリオで、開発者がAIデバッガーを使う典型的なパターンを示しています。顧客の実際の声ではなく、出発点となる型として捉えてください。

• CSSの上書きで行き詰まった開発者。 長いスタイルシートの中に埋もれた、変わらないボタンの色に20分を費やしていた。CSSを貼り付けると、どのセレクタが勝っているのか、その理由まで正確に教えてもらい、!importantの応酬なしにルールをきれいに書き直せた——2分で本来の作業に戻れた。
• フォームが動かないノーコードサイトのオーナー。 ビジュアルでサイトを構築したが、お問い合わせフォームが静かに機能せず、探すべきエラーもない。エクスポートしたHTMLとスクリプトを貼り付けると、要素が存在する前にリスナーが紐付けられていたことが分かり、送信とバリデーションが正しく動く修正版を得られた。
• 壊れたページを引き継いだフリーランサー。 ドキュメントが一切なく、モバイルで崩れるクライアントサイトを引き継いだ。崩れているセクションを切り分けてレスポンシブのバグの説明と修正を受け、修復不可能だった2つのブロックを再生成——完全な作り直しなしに動くページを納品できた。

プラットフォームについての最新の独立したレビューは、TrustpilotやCapterra、G2で確認し、日付順に並べ替えてください。AIビルダーに関しては、過去の平均評価よりも直近のレビューの方が参考になります。