HTML InspectorはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

正しいマークアップは閲覧者、Webクローラーそしてそのコンテンツを取得するブラウザにとってもメリットがあります。作成したHTMLが正しく書かれているかチェックするWebサービスは数多くありますが、それらはソースコードを静的に読むだけです。HTML InspectorはJavaScriptを使ってレンダリングされた内容を読み込むことが可能です。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.21.11_thumb.1372169150.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.21.11.1372169150.png)
例。実行するとチェックが開始されて注意が一気に表示されます。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.22.09_thumb.1372169161.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.22.09.1372169161.png)
ChromeのWebインスペクタであれば対応するDOMがハイライトされるので修正箇所が分かりやすいです。

HTML InspectorのメリットとしてはAjaxやJavaScriptによって作成されたコンテンツに対しても適用できることでしょう。単純に実行することも、独自のルールを追加したり、除外するタグを指定することもできます。自社のコーディング規約に沿っているかどうかといったチェックにも最適です。

MOONGIFTはこう見る

最近のHTMLは静的(またはサーバサイドで処理した)HTMLを出力するだけで完結しません。JavaScriptで表示内容を指定したり、Ajaxで取得したコンテンツとテンプレートを合わせて表示したりすることも数多く行われます。その結果、最初に出力したHTMLを解析するだけではコンテンツのチェックが難しくなっています。

これまで外部URLからコンテンツを取得してサーバサイドで処理を行っていたサービスも、今後はブックマークレットなどを使ってコンテンツを転送した上で解析を行う方がいいかも知れません。サーバサイドで見えるものとクライアントサイドが見えるものが大きく異なる時代になっていると言えるでしょう。

Introducing HTML Inspector — Philip Walton

philipwalton/html-inspector