Alt & Meta viewer:imgタグのaltとtitle属性やWebページのmetaタグ系を可視化

2020年9月26日

Web ページを作っている際に
img タグや meta タグを使用することが多いかと思います。
ただ、正しく設定されているかを確認するのが面倒な場合があるかと思います。

そんな時に便利な Chrome 拡張機能があります。
「Alt & Meta viewer」です。

まずは、下記の URL に Chrome でアクセスします。

「Alt & Meta viewer」
https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl/

altmetaviewer00

画面右上の「CHROMEに追加」ボタンをクリックします。

altmetaviewer01

確認画面が表示されます。よければ、「拡張機能を追加」ボタンをクリックします。

altmetaviewer02

インストールが完了しました。Chrome の再起動は不要です。

Alt & Meta viewerの使い方

使い方は、簡単そのものです。
ツールバーに「Alt & Meta viewer」のアイコンが追加されていると思うので
クリックします。

altmetaviewer03

そうするとポップアップメニューが表示されます。
メニューには、2つのボタンがあります。

・画像の Alt 表示
クリックすると
img タグに設定された alt 属性と title 属性および高さと幅を表示してくれます。

altmetaviewer04

・Title Meta 表示
クリックすると
meta 要素に記述されている内容が一覧で表示されます。

altmetaviewer05

GoogleChrome拡張

Posted by 管理人