動かざることバグの如し

近づきたいよ 君の理想に

ブラウザコンソールからフォームの入力値を一括確認するスニペット

javascript

やりたいこと

Webページのフォームをデバッグしていると、現在どのフィールドにどんな値が入っているか一気に確認したくなることがある。 DevToolsのElementsパネルから一つひとつDOMを追うのは地味に面倒だ。特にフォームの要素数が多い場合、全部確認し終わる前に値が変わっていたりする。

そこでChromeのコンソールにワンライナーを貼り付けるだけで、ページ上の全フォームのフィールド名と現在値を一覧表示するスニペットを作った。

コード

以下のコードをChromeのデベロッパーツールのコンソールに貼り付けて実行する

(() => {
  const forms = document.querySelectorAll('form');
  if (forms.length === 0) {
    console.warn('フォームが見つかりませんでした');
    return;
  }

  forms.forEach((form, formIndex) => {
    const action = form.action || '(action未設定)';
    const method = form.method || '(method未設定)';
    console.group(`=== Form[${formIndex}] action="${action}" method="${method}" ===`);

    const elements = form.querySelectorAll('[name]');
    if (elements.length === 0) {
      console.warn('name属性を持つ要素が見つかりませんでした');
      console.groupEnd();
      return;
    }

    const lines = [];
    elements.forEach((el) => {
      const name = el.name;
      let value;

      if (el.type === 'checkbox' || el.type === 'radio') {
        value = el.checked ? el.value : '(未チェック)';
      } else if (el.tagName === 'SELECT') {
        value = el.value;
        const selectedText = el.options[el.selectedIndex]?.text;
        if (selectedText) value += ` (${selectedText})`;
      } else {
        value = el.value;
      }

      lines.push(`${name}=${value}`);
    });

    console.log(lines.join('\n'));

    // FormDataでの確認（submitできる値のみ）
    console.group('--- FormData (送信される値のみ) ---');
    try {
      const fd = new FormData(form);
      const fdLines = [];
      for (const [k, v] of fd.entries()) {
        fdLines.push(`${k}=${v}`);
      }
      console.log(fdLines.length > 0 ? fdLines.join('\n') : '(空)');
    } catch (e) {
      console.warn('FormData取得エラー:', e.message);
    }
    console.groupEnd();

    console.groupEnd();
  });
})();

以下の画像のように分かりやすく表示される

picture 0