カテゴリー: 開発ツール

HTML 属性抽出ツール

サイト側で企画したツールツールが見つからない?

貼り付けた HTML からすべてのタグとその属性を一覧表示

HTML を貼り付けると、すべてのタグとその属性名・属性値を見やすい表として一覧表示します。解析はすべてブラウザ内で行われ、コードが実行されることはありません。

検出されたタグ数3検出された属性数11
タグ属性
ahref="/pricing" class="nav-link" data-track="pricing"
imgsrc="/logo.svg" alt="LocalTools" width="120" height="32"
inputtype="email" name="email" required placeholder="you@example.com"

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

トラッキング用の属性、欠けている id、はぐれた data- 属性、一貫性のない class などをマークアップから見つけ出す作業は、たいてい生の HTML を目で追ってスクロールすることになります。このツールは貼り付けられた HTML のテキストをトークン化し、見つかったすべてのタグをその属性とともに一覧表示するので、実際に描画することなくドキュメント全体のマークアップを一目で確認できます。

使い方

  1. 入力欄に HTML を貼り付けるか、サンプルを読み込んで形式を確認します。
  2. タグとその属性の一覧を確認します。
  3. マークアップ全体で欠けている属性、重複した属性、想定外の属性がないか探します。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

貼り付けた HTML 内のスクリプトは実行されますか?
いいえ。HTML はトークナイザーによってテキストとして読み取られるだけで、描画や実行、外部リソースのリクエストは一切行われません。
マークアップはどこかにアップロードされますか?
いいえ。すべてブラウザタブ内の JavaScript で処理されます。
崩れた HTML にも対応していますか?
完全な HTML パーサーではなく軽量なトークナイザーであるため、一般的な手書きや生成されたマークアップにはよく対応しますが、特殊な、または大きく崩れた入力は見落とすことがあります。