Chromeには、ちょっとした手間を省くのに役立つ無料のツールが満載の拡張機能ストアがあります。
ここに、おすすめの拡張機能をご紹介します。
Web Developer
場合によっては、作業中にJavascriptを無効にしたり、画像を非表示にしたり、ソースコードをすばやく表示したりする必要があります。これらの例は、Web Developerができることのほんの始まりに過ぎません。これはデベロッパーのためのオールインワンのパッケージです。
CSS Peeper
デザイナーのためのプログラムパッケージであるCSS Peeperは、ウェブサイトにネストされたCSSコードを抽出することができます。コードのページを掘り下げる代わりに、この拡張機能を使用してオブジェクトのプロパティを表示したり、隠れたアセットをエクスポートしたりすることができます。
エクストラクタの代わりにCSSエディタが必要ですか？ Stylebotを使用すると、インターフェイスからCSSを操作したり、他のユーザーのスタイルをダウンロードしたりすることができます。
Awesome Screenshot
これは、任意のサイズのスクリーンキャプチャを取ったり、編集したり、ページを記録したりするための重要な拡張機能です。
ColorZilla
ColorZillaは、シンプルですが必須のプログラムです。任意のWebページから陰影をつかむことができ、選択したプログラムに貼り付けるRGB / Hex / etcコードを与えることができるカラーピッカーです。
その他の便利な機能には、カラーピッカーとエディタ、グラデーションジェネレータ、パレットビューアーなどがあります。
Browserling
他のブラウザやデバイスでサイトをテストして、エラーや矛盾がないことを確認する必要がありますが、プラグインのみを使用する必要がある場合は簡単です。Browserlingを使用するだけで、2番目のブラウザを起動して読み込む時間を節約できます。
WhatFont
美しいフォントを見て、それが何であるかを知ることよりも大変なことはありません。幸いなことに、WhatFontはフォントファミリ、型サイズ、TypekitやGoogle APIによってサービスされているフォントを識別します。
Gallerify
ページから画像を抽出する必要がありますか？ Gallerifyは背景の写真を読みこみ、検索して探しているものを見つけて、すぐに数千の画像をダウンロードできます。個々の画像を探したり、隠された要素をCSSで掘り起こすことはありません。
Window Resizer
オンラインストアを運営している場合は、モバイルデバイスでウェブサイトを確実に管理することが不可欠です。多くのサイト構築プログラムには応答テスターが付属していますが、より高速な結果を望んだり、これらのツールにアクセスできない場合は、Window Resizerを試してみてください。スマートフォンやタブレットを含む複数の画面解像度をテストできます。
Perfect Pixel
あなたのウェブサイトの最終結果がモックアップからほんの少し離れているときは、かなりイライラしますね。PerfectPixelを使用すると、編集中に画面上に画像を重ね合わせることができ、すべてが正しいことを確認することができます。
Web Developer Checklist
あなたのウェブサイトは最高のものですか？速く、壊れたリンクは含まず、安全ですか？ワールドワイドに公開する前に、Web Developerチェックリストを使用して、すべてが網羅されていることを確認してください。
Highly Highlighter
後で戻ったり、いくつかの調査をするのに、ある領域をマークする必要がありますか？この拡張機能では、それらを保存してハイライトをウェブ上で共有できるため、その記事のどこにいたのかを忘れることはありません。
Check My Links
リンクが詰まったページを慎重にスキャンしたり、壊れたリンクをスキャンする必要がある以上にわずらわしいことはありません。問題のリダイレクトを明確に強調するには、この拡張機能を使用します。ページ間を1時間クリックするのではなく、エラーを修正するのに時間を費やすことができます。
Page Ruler
2つの要素の間の距離を知る必要があるときは、Page Rulerを試してみてください。このエクステンションにはフリルがありません。色を選択し、測定したいものの間にボックスをドラッグするだけです。
Pesticide
クイックCSSデバッガが必要な場合は、Pesticide for Chromeをお試しください。ページ上のCSS要素の位置を見ることができます。非常にシンプルですが、フロントエンド開発に役立つかもしれません。
Data Saver
Date Saverは訪問したサイトを最適化します。また、どのページが最も多く使用されているかを示すため、データに優しいウェブサイトに切り替えることができます。
PHP Ninja Manual
しばらくコーディングしていないと、忘れることはありませんか？あなたの記憶をたどって時間を無駄にするのではなく、PHP Ninja Manualを開いて探しているものを入力するだけです。検索時間が短縮され、プログラミング時間を長く取ることができます。
RescueTime
RescueTimeはあなたが仕事をさぼってFacebookにどれくらいの時間を費やしているかについての事実を教えてくれます。もう時間を浪費しないで済むでしょう。
Clear Cache
キャッシュとCookieをクリアする必要がある場合もありますが、Chromeの設定に移動するのは面倒です。Clear Cacheを使用すると、ボタンをクリックするだけでキャッシュやグローバルまたはローカルのCookieを消去できます。
Spectrum
チャート、データ、その他のメディアが含まれている場合、あなたのページを色盲の人々にも適したものにすることができます。Spectrumでは、最も一般的な老眼など、さまざまな色覚障害をシミュレートできます。
※本記事は19 Essential Chrome Extensions for Every Web Designerを翻訳・再構成したものです。
▼こちらの記事もおすすめです！
おすすめ新着記事
おすすめタグ