概要

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

Chrome extension

Page Ruler

chrome.google.com

 

365 Shares

172 Pockets

Page Ruler

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja

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

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

ColorZilla

chrome.google.com

 

763 Shares

7 Users

428 Pockets

ColorZilla

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

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

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

Whatfont

chrome.google.com

 

2122 Shares

23 Users

13 Pockets

WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

The easiest way to identify fonts on web pages.

フォントの確認用

CSS Peeper

chrome.google.com

 

524 Shares

10 Users

325 Pockets

CSS Peeper

https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

Extract CSS and build beautiful styleguides.

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

Clear Cache

chrome.google.com

 

963 Shares

12 Users

265 Pockets

Clear Cache

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

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

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

PerfectPixel

chrome.google.com

 

225 Shares

14 Users

250 Pockets

PerfectPixel by WellDoneCode

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

This extension helps develop your websites with per pixel accuracy!

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

Viewport Resizer

chrome.google.com

 

95 Shares

1 Pocket

Viewport Resizer

https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm?hl=ja

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

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

User-Agent Switcher for Chrome

chrome.google.com

 

5038 Shares

32 Users

533 Pockets

User-Agent Switcher for Chrome

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ja

Spoofs & Mimics User-Agent strings.

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

まとめ

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

投稿日：May 17th 2017

元記事：http://christina04.hatenablog.com/entry/2017/05/17/015739