コーディングの際にオススメのChrome拡張機能
コーディングする際に非常に役に立つChromeの拡張機能を以下述べます。
目次
SEO META in 1 CLICK
https://chromewebstore.google.com/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc
タイトルやディスクリプションなどのメタ情報が確認できます。altやhタグの階層も表示してくれます。
モバイル電話シミュレーター – レスポンシブサイトテスト
https://chromewebstore.google.com/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk
スマホ表示が確認できます。各デバイスごとのフレームもあるので、非常に見やすいです。
WhatFont
https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
文字のフォントの種類、大きさなどを確認できます。
Measure-it
https://chromewebstore.google.com/detail/measure-it/jocbgkoackihphodedlefohapackjmna
ドラッグして、要素のサイズを計測することができます。文章の要素間を正確に測るのに便利です。
PerfectPixel by WellDoneCode (pixel perfect)
https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
デザインデータの画像を透かして、作成したページに差違がないか確認できます。ピクセルパーフェクトのコーディングを目指すなら必須のプラグインだと思います。
Wappalyzer – Technology profiler
https://chromewebstore.google.com/detail/gppongmhjkpfnbhagpmjfkannfbllamg?utm_source=item-share-cb
サイトで使用されているCMSや技術、言語などが確認できます。サイトの調査する時に便利です。
HTMLエラーチェッカー
https://chromewebstore.google.com/detail/ohdllebchmmponnofchalfkegpjojcaf?utm_source=item-share-cb
HTMLの開始・終了タグの過不足などを検出します。どのコードが間違っているか詳細を表示してくれるので分かりやすいです。
CSS Peeper
https://chromewebstore.google.com/detail/mbnbehikldjhnfehhnaidhjhoofhpehk?utm_source=item-share-cb
要素をクリックすると、サイズ、フォントサイズ、背景色、文字色など色々確認できます。要素間の余白も図ることができます。
Lighthouse
https://chromewebstore.google.com/detail/blipmdconlkpinefehnmjammfjpmpbjk?utm_source=item-share-cb
サイトの表示速度、アクセシビリティなどを評価してくれます。どのようなところを改善すればいいのかも上げてくれます。表示速度はSEOに関わるので、チェックしましょう。