【Google Chrome】web開発で必須となる拡張機能7選！
はじめに
こんにちは！マンハッタンコードのみちこです。
今回はフロントエンドに強いマンハッタンコードがオススメするweb開発で必須となるGoogle Chromeの拡張機能についてご紹介します！
どれも作業の効率が上がるものばかりなので気になったものがあれば導入してみてください！！
拡張機能の導入方法
以下のchromeウェブストアから検索を使って各拡張機能を見つけます。
注意点としては現在ログインしているgoogleアカウントに拡張機能が追加されるので、アカウントに間違いがないか確認しましょう。
Webに関するもの
Vue.js devtools
Vue.js Devtoolsは、Vue.jsの開発をサポートする拡張機能 です。これを導入するとコンソールを開かなくてもデータの中身などを確認することができるようになります。
lighthouse
Lighthouseは、ウェブページの品質改善の指針をパフォーマンス・PWA・アクセシビリティ・ベストプラクティス・SEOの6点でチェックしてくれる拡張機能です。
CSS Viewer
CSS Viewerは、マウスオーバーだけでCSSを確認できる拡張機能です。
機能的にはChromeに標準で搭載されているデベロッパーツールに劣りますが、この拡張機能は起動時間が短くクリックしなくても見れるので圧倒的に手間が少なくなります。
WhatRuns
WhatRunsは、Webサイトで使われているフレームワーク・プラグイン・スクリプト・フォントなどがワンクリックで確認できる拡張機能です。
ColorPick Eyedropper
ColorPick EyedropperはWeb上のページやロゴ、ヘッダー画像などの色コードが確認できる拡張機能です。
カラーコードを知りたいところにカーソルを持ってくるだけで抽出することができます。
META SEO inspector
META SEO inspectorは、閲覧中のWebページに設定されているタイトルタグやメタタグなどのメタデータを閲覧中のWebページ上で確認できる拡張機能です。
その他
Google Translate
Google Translateは、Web上の英単語や英文を範囲選択するだけで翻訳をしてくれる機能です。
Chromeには標準で翻訳機能がありますが、全てのページに対応しているわけでもないので、範囲選択するだけですぐに翻訳を表示してくるこの拡張機能はかなり便利です。
終わりに
今回はGoogle Chromeで使える拡張機能について紹介させていただきました。
エンジニアの方だけでなく、デザイナーの方も導入するだけで作業が快適になること間違い無いのでぜひインストールしてみてください！
株式会社マンハッタンコードってどんな会社？
お仕事のご相談・ご依頼マンハッタンコードは、フロントエンドの開発に特化しております。エンジニアリングから、デザイン、プロジェクト推進などアプリ開発を総合的に請け負うことが可能です。弊社のホームページからお問い合わせください
この記事が気に入ったらサポートをしてみませんか？