【2021年版】chrome拡張機能のオススメ厳選【Webコーダー向け】

2021.10.03

Webコーディング作業の確認などで役立つ、Webコーダーの私が実際に使用している『オススメのchrome拡張機能』を紹介します！

chrome拡張機能のオススメ

HTMLエラーチェッカー
CSS無効化くん
Lighthouse

HTMLエラーチェッカー

HTMLエラーチェッカーは、その名前の通りに、「HTMLのエラーがないかを確認」してくれる拡張機能です。

HTMLの開始・終了タグの過不足などを検出してくれます。問題ないときは「タグはおそらく問題ない」と表示されます！笑

とてもわかりやすいですね◎
アップロード後に、ブラウザ上で確認できるので、HTMLコードの最終チェックにちょうど良いです。

HTMLのタグ不足は、運良く（？）見た目では分からない時があるので、大事な確認になります。
また、予期せぬ崩れの原因に閉じタグがないという単純な原因もあります。まずは「HTMLエラーチェッカー」で調べてみると早いです。

CSS無効化くん

CSS無効化くんは、ブラウザ上で使用している「CSSと画像をすべて無効（非表示）」にしてくれます。こちらも名前の通りの機能で分かりやすいですね！
CSSを無効にすることで、HTMLのマークアップを視覚的に確認することができます。

基本的にWebページは、CSSで綺麗に装飾がされていますよね。デザイナーさんのおかげで”人間の目で見た時”には「見出し」や「本文」が分かると思います。
しかし、コンピュータに「見出し」や「本文」と言った情報を伝えるのは、CSSで作ったデザインではありません。「見出し」や「本文」といった情報を伝えるには、HTMLタグによる正しいマークアップが必要です。
こちらの内容については、「HTMLタグとは？」の記事でも説明しています。

つまり、chrome拡張機能「CSS無効化くん」を使うことで、CSSを無効にしてくれます。

ブラウザ上でHTMLマークアップが正しく出来ているのか？最後にしっかり確認しましょう。適切なマークアップの指定ができているのか、簡単に確認ができる、便利な拡張機能です。

Lighthouse

Lighthouse（ライトハウス）は、Google公式が提供している「Webサイトの分析・診断ができるサイトチェックツール」です。

Lighthouseの診断項目

Performance（パフォーマンス）
Accessibility（アクセシビリティ）
Best Practices（ベストプラクティス）
SEO
Progressive Web App（プログレッシブウェブアプリケーション）

Webサイトの質を高めるための改善に役立つ項目ばかりです。

また、診断結果はスコアとその項目に関する改善ポイントが表示されます。スコアは各項目ごとに、△0–49、□50–89、〇90–100で表示されます。

また、診断結果では、直すべきポイントも解説してれます。（言語はデフォルトが英語なので、日本語に翻訳しましょう笑）

100スコアを目指せるように改善していけると、Webサイトの質が上がるのでSEOにも効果的です。

別記事で、SEOやLighthouseの改善方法についても書いていきたいと思います！