Web制作者向けGoogle Chrome拡張機能まとめ（2021年版）
こんにちは！
フロントエンドエンジニアの中島です。
最近はスマートリモコンとスマートプラグを導入し、
家電のIoT化に没頭しております。
アレクサと連携させて寝ながら家電を操作できるのは最高です。
今回はWeb制作者向けGoogle Chrome拡張機能についてまとめていきます。（エンジニア寄りのものが多いかもしれません）
TDK Meta Checker
閲覧しているページのtitle・description・keywordなどのメタ情報を確認しやすく表示します。
地味に面倒なメタ情報の確認。
記事詳細などページ毎にメタ情報が異なる場合に重宝しています。
Copy All Urls
開いている全てのタブのURLをクリップボードにコピーできます。
また、クリップボード内のすべてのURLを新しいタブで開けます。
サイトマップからURLをまとめて開いたり、修正ページをまとめてプロジェクトチームやクライアントへ展開したりとなかなか便利な機能です。
Clear Cache
キャッシュと閲覧データをクリアできます。
Cookieは特定のドメインに対してのみ、または特定のドメインを除くすべてに対して、グローバルに削除できます。
ワンクリックでCookieを削除できるのが便利ですね。
Cookieを扱う実装の動作確認で、都度シークレットモードを立ち上げたり、ブラウザの設定から削除するのは手間なのでおすすめです。
WhatFont
ページ上のフォントをワンクリックで簡単に調べることができます。
デザイナー向けのツールかと思いきや、エンジニアの私も酷使しています。
正しいフォントが指定されているか、デベロッパーツールを介さずに確認できるのはいいですよね。
Wappalyzer
Webサイトで使用されているテクノロジーを明らかにするクロスプラットフォームユーティリティです。コンテンツ管理システム、eコマースプラットフォーム、Webフレームワーク、サーバーソフトウェア、分析ツールなどを検出できます。
気になるサイトで使用されているフレームワークやライブラリを検出に使っています。
Awwwardsなどにノミネートされているイケてるサイトがどのような技術を使われているのか、トレンドを追ったりするのにも使えるかと。
Koala Inspector - Inspect Shopify Shops
Shopifyストアの使用されているテーマ、アプリ、管理用ドメイン、商品情報などを検出できます。
Shopify構築にあたってテーマ選定の参考や競合分析にもおすすめです。
使用アプリの検出精度はイマイチのようなので要注意。
Google 翻訳
閲覧しているウェブサイトを簡単に翻訳できます。
Chromeにはデフォルトで全文翻訳機能がついていますが、フレームワークやライブラリのドキュメントなどは文章とソースコードが混在していることが多いので全文翻訳をかけるとカオスな状態に...。
このツールは選択範囲をリアルタイムで翻訳することができます。
Lighthouse
Googleが公式に提供しているツールであり、Webサイトのパフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWAについてのチェックを行うことができます。
主にパフォーマンスの確認に使用しています。
各チェック項目に対して改善点を細かく検出してくれるのでおすすめです。
クオリティーの高いサイトを制作したエビデンスとして残すのも良いかもしれないですね。（現在はデベロッパーツールのAuditsタブからLighthouseを実行することも可能です。）
Window Resizer
ワンクリックでブラウザの画面サイズをPC・タブレット・スマホなど、各デバイスごとのサイズに変更できます。
レスポンシブデザインの表示確認に使用しています。
1px単位での設定やプリセットとして登録することも可能です。
The QR Code Extension
閲覧ページのQRコードを生成し、ウェブカメラを使ってQRコードをスキャンすることができます。
スマートフォンやタブレットの実機確認に酷使しています。
GoFullPage - Full Page Screen Capture
WebサイトのスクリーンショットをPNG、JPG、PDF形式で保存することができます。
スクリーンショット系の拡張機能は他にもいくつかありますが、GoFullPageではスクリーンショットの履歴を管理することができます。
また有料ですがEditor機能も存在しており、キャプチャに対してテキストやシェイプを追加することも可能です。
他にもおすすめしたいですが...
キリがないのでよく使う拡張機能をまとめてみました。
便利な機能を駆使して、効率化を図っていきましょう！
それではまた。
この記事が気に入ったらサポートをしてみませんか？