概要

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

Chrome extension

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

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

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
ColorZilla - chrome.google.com

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

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

フォントの確認用

Extract CSS and build beautiful styleguides.
CSS Peeper - chrome.google.com

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

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

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

This extension helps develop your websites with per pixel accuracy!
PerfectPixel by WellDoneCode - chrome.google.com

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

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

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

Spoofs & Mimics User-Agent strings.
User-Agent Switcher for Chrome - chrome.google.com

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

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

投稿日：May 17th 2017