Loading

プレオ日誌

blog

Chromeの便利な拡張機能

初めまして、フロントエンドエンジニア の松高です。

2018年3月に専門学校卒業し、2018年4月に新卒として入社いたしました。
コーディングを担当しています。

専門学校に入学した当初から コーディングだけは好きでした。
様々な要望に応えられるよう、技術力アップのため 今も勉強の毎日です。

 

社内では有名なのですが、松高 Appleマニアです。笑

MacBook Pro, iPhone X, Apple Watch, iPod nano, AirPods, iPad Air…
今使っているバッグは、Apple社が公認している 物を使用しています。
そしてとうとう この間、検証用 兼 プライベート用で 新作iPadを買ってしまいました。。

さてさて、私の Apple好きは置いといて。。

Chromeの便利な拡張機能

今回は Chromeの便利な拡張機能について です。

Chromeは webブラウザの一つです。
世界シェアで Internet Explorerを超えて、1位になっています。
Chrome拡張機能は、ウェブストアからダウンロードすることができます。

それではwebデザイナー・コーダーに、様々な場面で使える オススメの拡張機能を 紹介します。

HTMLエラーチェッカー

HTMLエラーチェッカーは、開始・終了タグの不足を検出する拡張機能です。

何行目のどの閉じタグが無いだとか、逆に 完璧かどうかも教えてくれます。

HTMLは、多少 文法的に間違っていても 目をつぶってくれるときもあれば、
動作しないときもあります。

HTMLを書き終えた後や、CSSが効かない時に 使ってみるのをオススメします!

Page Ruler

Page Rulerは、ブラウザ上で 長さが測れる拡張機能です。

コーダーのあるあるだと思うのですが
「 イラレ上では 余白が50pxなのに、ブラウザ上では line-height分の余白が入って 、若干ずれるやん!」

部分的に見れば、1pxのずれですが、
ホームページ全体で見ると、1pxのずれが積み重なって大きなずれになります。

 

Page Rulerと、ブラウザのデベロッパーツールの二刀流で 、そのストレスを減らすことができます。

Alt & Meta viewer

Alt & Meta viewerは、画像の alt属性やサイズが 一目で分かる拡張機能。
SEOでなかなか順位が上がらない時や、ホームページの読み込み速度が遅いと感じた時に便利です!!

それ以外にも、meta情報とうも簡単にチェックすることができます。

FireShot


FireShotは簡単に、ホームページをスクリーンショットすることができます。

・ページ全体をキャプチャ
・表示部分をキャプチャ
・選択範囲をキャプチャ

の3種類から選ぶことがきます。

 

Clear Cache

Clear Cacheは、ブラウザのキャッシュを消去する拡張機能です。

 

普通は、
1 . 右クリックをして検証を表示
2 . リロードの所で右クリック
3 . キャッシュの消去とハード再読み込み

または スーパーリロード

なのですが、色々工程が多くて面倒。

 

Clear Cacheをダウンロード後、オプションから一番をチェック。

それだけで今後は、右上のボタンをクリックするだけで、キャッシュを消去してくれます。

いかがでしたか?

今回紹介した拡張以外にも、便利な拡張機能はたくさんあります。
時間があるときに、検索してみるといいかもしれません。

ただ、Chrome以外の  Internet Explorer, Microsoft Edge, Firefox, Safari等での、検証は忘れないように心がけましょう。

この記事を書いた仲間

松高 泰市 フロントエンドエンジニア

松高 泰市が書いた他の記事

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

TOPへ戻る