概要

Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。

Chrome extension

Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
Page Ruler -

画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
ColorZilla -

カラーピッカー。デザイナーさんからPNGだけ頂いた時など。
ただ opacity は区別できないので、それはPSDで確認が必要。

The easiest way to identify fonts on web pages.
WhatFont -

フォントの確認用

Extract CSS and build beautiful styleguides.
CSS Peeper -

フォントやカラー、paddingやmarginなどがサクッと分かるシンプルなAll in one的ツール。
個人的にはassets一覧が表示できるため、レスポンシブ時にちゃんとretina用画像が出ているかどうかなどをサッと確認する時に使ってました。

Clear your cache and browsing data with a single click of a button.
Clear Cache -

キャッシュをクリアしたい時に。デフォルトだとキャッシュのみで、CookieやLocalStorageを消したい時はオプションで細かく設定できるのでそちらで。

This extension helps develop your websites with per pixel accuracy!
PerfectPixel by WellDoneCode -

Webページに透過させた画像データをかぶせてデザイン通りに一致するかどうか確かめる。
かぶせた状態でCSSを1pixelずついじって一致させていく。

A chrome extension for testing responsive web page,inspired by @MalteWassermann's work.
Viewport Resizer -

レスポンシブなサイトを作る上で、手軽にスマホやタブレットのサイズに切り替えて検証できるツール

Spoofs & Mimics User-Agent strings.
User-Agent Switcher for Chrome -

User Agentに基づいて画像や文言の出し分けを行う時、簡単に切り替えるためのツール

サーバサイドで実装している時はvimさえあればそこまで問題はありませんでした。
一方Webフロントを実装する際は、PhotoShopのショートカットキーを覚えたりこういったExtensionを使うのとそうでないのは効率の良さが段違いでした。

投稿日：May 17th 2017