マークアップの検証

私はいつもマークアップを検証します.なぜ?いくつかの理由があります.

マークアップが無効であるなら、ブラウザは推測をより多くの時間を費やさなければならなくて、マークアップが最もそうであるべきものを解釈しなければなりません.これは処理に時間がかかります.

画面の読者は/同じ理由で失敗することができます.

クローラーが無効なマークアップを解釈しなければならないならば、検索エンジンはより速くあなたのサイトをインデックスします.

マークアップを検証するにはhttps://validator.w3.org/ そして、URLをペーストして、ファイルをアップロードするか、直接HTMLを入力してください.
これは、ローカルの開発には理想的ではない.だから、私は使用しているValidity エラーのマークアップをチェックするために何年もの間.
残念なことに、それは最近クロムウェブ店から取り除かれました☹️
幸運にも、W 3はValidation API 代わりに使用できます.
どのように独自の検証スニペットを作成できるかを見てみましょう!

スニペットの作成
Chromeのdevのツールでは、“ソース”スニペットに移動し、“+新しいスニペット”をクリックします.
次のコードをペーストします

async function valid(url = 'https://validator.nu/?out=json') {
  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'text/html;charset=UTF-8' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
    body: new XMLSerializer().serializeToString(document)
  });
  return response.json();
}

valid()
  .then(data => {
    console.clear();
    console.log(data);
  })

スニペットを保存し、「有効」に変更します.

このスニペットはPOST W 3のバリデータへの現在のページのマークアップとリターンjson 検証情報付き.
スニペットを押す⌘/CTRL+ENTER 最後の行のコードの後.
走りますか.グッド!将来、スニペットを走らせるには⌘+O (Mac)またはCTRL+O (当時)タイプ!valid .

出力の書式設定
今、すべての素晴らしい方法を使用してconsole , 出力をフォーマットしましょう.
置換console.log(data) で

const error = data.messages.filter(msg => msg.type === 'error');
const warning = data.messages.filter(msg => msg.type === 'info' && msg?.subType === 'warning');

if (warning.length) {
  console.group(`%c${warning.length} validation warnings`, "background-color:#FFFBE5;padding:1px 4px");
  warning.forEach(msg => {
    console.groupCollapsed(`%c${msg.message} (line: ${msg.lastLine})`, "background-color:#FFFBE5");
    console.table(msg)
    console.groupEnd();
  })
  console.groupEnd();
}
if (error.length) {
  console.group(`%c${error.length} validation errors`, "background-color:#D93025;color:#FFF;padding:1px 4px");
  error.forEach(msg => {
    console.groupCollapsed(`%c${msg.message} (line: ${msg.lastLine})`, "color:#D93025");
    console.table(msg)
    console.groupEnd();
  })
  console.groupEnd();
}

スニペットを保存する⌘/Ctrl + S ,

それから、それぞれの警告-またはエラー行を展開することができます.

後者はconsole.table() , しかし、console.dir – またはエラーを提示したい任意の方法.

結論
私は今、再びローカルマークアップを検証する高速方法を持っている!外部サイトまたは「コンテンツセキュリティポリシー」を持つサイトでスニペットを使用している場合は、問題に遭遇し、スニペットを更新する必要があります.