「HTMLエラーチェッカー」の3秒チェックで凡ミスを防げ！【Chrome拡張機能紹介】
タグの閉じ忘れのようなちょっとしたミスは、3秒で確認して安心しましょう。
本記事では、GoogleChromeの拡張機能とその使い方をご紹介します！
Chromeの拡張機能って？
拡張機能は chromeウェブストア からインストールすることができます。
様々な拡張機能が扱われており、その数は日々増えています。
その機能によって、インストールをするだけで自動に動くものや、拡張機能のアイコンをクリックすると作動するものまで、様々です。
HTMLエラーチェッカー とは
[blogcard url=”https://chromewebstore.google.com/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf”]
HTMLエラーチェッカー は、HTMLの開始・終了タグの過不足などを検出するChromeの拡張機能です。
divタグやliタグなど、うっかり閉じタグをつけ忘れた！なんてことありませんか？
表記崩れの原因が、「閉じタグを正しくつけたら一瞬で解消した！」というのもありがちですね。
拡張機能のインストールと使い方
では早速、インストールして使ってみましょう！
インストール方法
1、chromeウェブストアの、HTMLエラーチェッカー のページ を開く
[blogcard url=”https://chromewebstore.google.com/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf”]
2、右上の「Chromeに追加」をクリックし、拡張機能を追加
インストールはこれだけです！
右上のパズルマークをクリックすると、追加されていることがわかります。
画鋲マークをクリックすることで、上部のバーに常に表示されるようになります。
頻繁に利用する場合は、HTMLエラーチェッカーのアイコンを常に表示しておくと便利です！
使い方
使い方はとってもかんたん。
エラーチェックをしたいページを開いて、拡張機能のアイコンをクリックするだけ！
すぐにソースチェックが始まります。
問題がない場合は、こんな表記になります。
閉じタグに誤りがあると、こうなります。
大量に誤りがでているように見えますが、実は</div>タグを1つ消しただけ。
周囲に影響が出てしまっている状況のようです。
おわりに
いかがでしょうか？
今回はWEBページ全体のスクリーンショットを取得するchrome拡張機能、「HTMLエラーチェッカー」をご紹介しました。
効果的なツールを上手に使いながら、作業効率UPを目指していきましょう！
