ウェブ開発(web development)プロジェクトをスピードアップ、コラボレーション、監査するための便利なツールが必要なデザイナーの場合、Chrome拡張機能には多数のツールがあります。
このリストには、設計作業(design work)を行うすべてのユーザーがキットバッグ(kit bag)に入れる必要のある最も人気のあるツールとChrome拡張機能が含まれています。
1. DomFlags
DOM Flagsは、
開発者がブラウザツールを操作するための新しい方法を提供する使いやすいChrome拡張機能です。(Chrome extension)これにより、開発者は要素のスタイリングのタスクをスピードアップできます。
各要素のキーボードショートカットを使用して、ナビゲーションをブックマークできます。
私たちは皆、非常に詳細な要素を検査するのが難しいことを経験しており、迷子になりがちです。
DOMフラグを(DOM Flags)使用すると、スタイリング要素を追跡できます。これには、コンポーネントを正確に自動的に検査する機能が含まれています。これにより、DevToolsのワークフローと実装(DevTools workflow and implementation)が高速化されます。
DOMフラグを(DOM Flags)使用すると、変更を追跡できます。そして、作業している要素に焦点を合わせ続けます。
2. Sizzy
Sizzyは、デザイナーと開発者に、複数のビューポートでサイトをテストする簡単な方法を提供します。
Sizzyは、デザインをリアルタイムでチェックする簡単な方法を提供します。任意の数のデバイスと画面サイズのインタラクティブなビューを提供します。デバイスのキーボード(device keyboard)をシミュレートしてから、横向きモードと縦向きモード(landscape and portrait modes)を切り替える
こともできます。
Chrome拡張機能(Chrome extension)をインストールすると、ツールバーにボタンが追加されます。ボタンをクリックすると、Sizzyプラットフォームで現在の(Sizzy platform)URLが開きます。拡張機能はすべての「x-frame-options」ヘッダーをブロックするため、オンラインで任意のWebサイトを見ることができます。
Sizzyはオープンソースプロジェクトであり、(source project)ここで(here)コード全体を見ることができます。
3.チェックボット
Checkbotは、セキュリティの問題についてサイトをテストし、Webサイトページの読み込み速度を監査することもできます。設計者に典型的なエラーを特定する手段を提供し、サイトのセキュリティ(site security)、検索エンジン(search engine)、およびサイトの速度(site speed)の改善を推奨します。
50以上のベストプラクティス指標を使用して、ベストプラクティスSEO、壊れたリンク、重複コンテンツ(duplicate content)などについてWebサイトを監査します。このツールは、 CSS(CSS)、JS、およびHTMLも検証します。
Checkbotは、デザイナーとコーダーのエラー(designer and coder errors)
をリアルタイムで検出し、戻って作業を繰り返しチェックする手間を省きます。
壊れたページリンクを修正し、一意のコンテンツとページタイトルを確保し、リダイレクトチェーンを排除する(content and page titles)高品質のツール(quality tool)を探している場合は、このツールが役立ちます。
設計者にとっては、
CSSとJSを最小限に抑えるだけでなく、 (CSS and JS)CSSを縮小してブラウザーのキャッシュを活用する方法に関する推奨事項を提供するのに役立ちます。
4.GistBoxクリッパー
GistBoxは
、ウェブデザイナーにとって最も役立つChrome拡張機能の1つです。(Chrome)
GistBoxは、表示しているWebページ上の任意のコードブロックから(code block)GitHubGistを作成できます。
コードブロックの右上隅(right-hand corner)に小さなボタンが表示されます。このボタンを押すと、ポップアップが表示され、コードを要点(Gist)に保存できます。
マウスの右クリックで新しい要旨を作成し、後で調べて使用する(inspection and use)ためにコードのブロックを保存できます。
GitHubと統合することで、デザイナーと開発者はコードブロックを収集して操作したり、後で使用するために分類したりできます。これにより、便利で効率的な(convenient and efficient) Chrome拡張(Chrome extension)ツールになります。
5. ColorZilla
ColorZillaは、個々の(ColorZilla)Webデザイン(web design)プロジェクト用にタグ付け、ラベル付け、分類できる16進コードを収集するための非常に便利なChrome拡張機能です。
これにより、任意のWebページから色を抽出してColorZillaクリップボードに保存するスポイトツールを選択できます。
これを使用すると、後で使用するために、またWebデザインと開発(design and development)で一貫して色を使用していることを確認する方法として、カラーパレットをすばやく開発できます。
ColorZillaは、画像を(ColorZilla)CSSに変換できるように、カラーアナライザーおよび
CSS グラデーションエディター(gradient editor)としても機能します。
6.ワットフォント
この
Chrome拡張機能は、お気に入りのフォントを利用して、独自の(Chrome Extension)Webデザインプロジェクト(web design project)に組み込むことを希望するユーザーにとって、リアルタイムの節約になります。
WhatFont Chrome拡張機能(WhatFont Chrome extension)を使用すると、開発者は任意のWebページ上のほぼすべてのフォントをすばやく分析および識別できます。
拡張機能は十分に開発されており、検査ツールを開く必要はなく、フォントの上にマウスを置くだけで拡張機能が機能します。
それだけでなく、拡張機能は、Pages goingフォントを提供するために使用されているサービスを識別し(Pages)、GoogleFontAPIとTypekit(Google Font API and Typekit.)をサポートします。
7. LightShot
LightShotは、ページ全体またはページの一部をキャプチャして、アップロードまたはダウンロードするか、サードパーティの宛先(party destination)に送信することを可能にするクイックスクリーンショットツールです(screenshot tool)。
LightShotで撮影したスクリーンショットは、ソーシャルメディアで使用および共有したり、印刷したりできます。
画面の選択した部分に注釈を付けたり、テキストや矢印などを追加したりできます。しかし、おそらくWebデザイナー向けのこのシンプルなツールの最も優れた機能の1つは、画像を選択することで、オンラインで類似画像の完全なGoogle画像(Google image)検索を実行できることです。
LightShotは複数の言語で構成できます。
拡張機能は純粋なJavaScriptで記述されており、 (JavaScript)Windows、Chromebook、Linux、MacOS(Linux and Mac OS)でも機能します。デスクトップアプリケーション(desktop application)としてもアクセスできるため、複数のデバイスに依存しているWebデザイナーに最適です。
8.素晴らしいスクリーンショット
Lightshotと同様に、AwesomeScreenshotは画面と画像をキャプチャする拡張機能です。
ただし、Lightshotとはいくつかの点で異なります。素晴らしいスクリーンショットは、すべてのスクリーンショットを(Awesome Screenshot)Googleドライブ(Google drive)に接続するように構成できます。
ページ全体をキャプチャするために、ビューを超えている要素のスクリーンショットを撮ることができます。追加の編集および注釈ツール(editing and annotation tools)があり、コンマを使用すると、拡張機能内ですべてのトリミングと画像編集が可能になります。または、追加のAwesomeスクリーンショットアプリケーションを使用できます。
デスクトップ用のChromeアプリケーション(Chrome application)をインストールすることで、その機能を拡張することもでき
ます。この拡張機能では、ビデオキャプチャと共有も可能であるため、任意のサイトで作業するときに他の開発者やデザイナーと共同作業を行うことができます。
スクリーンショットに画像を追加したり、他の人に見せたくない要素を青や消去したりすることができます。(blue or erase elements)
9.キャッシュをクリアする
Clear Cache Chrome Extensionは、表示しているページのCookieとキャッシュをクリアできる高速でシンプルなツールです。これにより、いくつかの単純なページ要素をクリアするためにブラウザの設定ページに移動する必要がなくなります。
複数の編集を行っており、それらをリアルタイムで表示したいWebデザイナーにとって、これは古いデータを見るというフラストレーションの多くを取り除く優れたツールです。
キャッシュとCookieをクリアする必要がある場合もありますが、Chrome設定に移動するのは面倒です。キャッシュ(Cache)のクリアを使用すると、ボタンをクリックするだけで、キャッシュとグローバルまたはローカルのCookieを消去できます。
キャッシュ(Cache)のクリアを使用すると、ページからクリアする要素を構成できます。変数(Variables)には、現金(Cash)、ダウンロード、すべてのシステム、フォームデータ、現金(Cash)、インデックスデータベース(index database)、プラグインデータ、パスワードなどが含まれます。
10.Web開発者のGoogleChrome拡張機能
Web開発者のGoogleChrome拡張機能を使用すると、開発者と設計者は、ベスト(Web Developer Google Chrome Extension)プラクティスの設計(practice design)、コーディング、使いやすさ、検索エンジン最適化
の違反について、Webページを簡単に監査、分析、確認できます。
これは、リソースの閲覧に負担をかけずに、Webデザインに役立つ大量の情報を提供する優れたオールインワンツールであり、Webサイトまたはページ内の検索エンジン最適化(search engine optimization)要素にも関与します。
拡張機能は、複数のWeb開発ツールを備えたツールバーをインストールします。
このツールは、複数のデバイスでのベストプラクティスの使用(practice use)と矛盾するページサイズ、幅、および寸法を示します。埋め込まれたJavaScriptをチェックし、さまざまなデバイスのシミュレーションを通じてWebサイトを表示できます。
拡張機能は、Windows、Linux、MacOSでうまく機能します。コーディングと設計の問題(coding and design issues)に加えて、メタタグ情報(tag information)、応答ヘッダー、色情報(color information)、および地形情報への洞察も提供します。
このツールの主な機能と、開発者のChrisPedericksのWebサイト(Chris Pedericks’ website)でその全機能を確認できます。
ウェブデザイナーや開発者が使用できる高品質で便利な(designer or developer)Chrome拡張機能が他にもたくさんあることは間違いありません。
このリストは、最も人気があり便利なツールのいくつかを紹介しています。このリストにあるツールよりも便利または優れていると思われるツールに関する推奨事項はありますか？我々に教えてください。
Top 10 Chrome Extensions and Tools for Web Designers
If you are designer in need of some useful
tools to speed up, сollaborate or audit your wеb development projects, Chrome
extension has a multitude of tоols.
This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.
1. DomFlags
DOM Flags is a simple to use Chrome extension
that provides a new way for developers to work with browser tools. It allows
developers to speed up the task of styling elements.
Using keyboard shortcuts for each element you
can bookmark your navigation.
We’ve all experienced the difficulty in
inspecting highly detailed elements, and it’s easy to get lost.
DOM Flags enable you to track styling elements
includes a feature to inspect components with accuracy automatically. This, in
turn, will help speed up DevTools workflow and implementation.
DOM Flags enables you to track changes. And
maintain your focus on the elements you’re working with.
2. Sizzy
Sizzy gives designers and developers a simple
way to test their sites in multiple viewports.
Sizzy provides a simple way to check your
design in real-time. It offers an interactive view of any number of devices and
screen sizes. You can even simulate a device keyboard and then switch between
landscape and portrait modes.
Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.
Sizzy is an open source project, and you can see the entire code here.
3. Checkbot
Checkbot can test your site for security
issues and also audit your website page loading speed. It will provide
designers with a means of identifying typical errors and recommend improvements
in site security, search engine, and site speed.
Using more than 50 best practice metrics, it
will audit a website for best practice SEO, broken links, duplicate content and
more. The tool will also validate CSS, JS, and HTML.
Checkbot picks up on designer and coder errors
in real time saving you the trouble of having to go back and recheck your work
repeatedly.
If you’re looking for a good quality tool that
will fix broken page links, ensure unique content and page titles and eliminate
redirect chains this tool would be useful.
For designers, it can help you minimize your
CSS and JS as well as provide recommendations on how to minify your CSS and
leverage browser caching.
4. GistBox Clipper
GistBox is one of the most helpful Chrome
extensions for web designers.
GistBox can create a GitHub Gist from any code block on the webpage you are viewing.
At the top right-hand corner of any code
block, you’ll see a small button, which when pressed, will allow a pop-up that
enables you to save the code to the Gist.
You can create new Gists with a right mouse
click and save blocks of code for later inspection and use.
Integrating with GitHub enables designers and
developers to collect code blocks and manipulate them or categorize them for
later use. This makes it a convenient and efficient Chrome extension tool.
5. ColorZilla
ColorZilla Is an incredibly useful Chrome
extension for gathering hex codes which can be tagged, labeled and categorized
for individual web design projects.
It enables you to select an eye-dropper tool
that will extract the color from any web page and save it to the ColorZilla
clipboard.
With it, you can quickly develop color
palettes for later use and as a way of ensuring you are using color
consistently in web design and development.
ColorZilla also acts as a color analyzer and
CSS gradient editor so that you can convert an image to CSS.
6. WhatFont
This
Chrome Extension is a real time-saver for those wanting to utilize their
favorite fonts And incorporate them into
their own web design project.
WhatFont Chrome extension allows developers to
quickly analyze and identify almost any font on any web page.
The extension is well developed and rather
than having to open up inspection tools the extension works by merely waving
the mouse over the font.
Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.
7. LightShot
LightShot is a quick screenshot tool that
enables you to capture the entire, or part of any page and either upload it or
download it or send it to a third party destination.
Screenshots taken by LightShot can be used and
shared on social media or printed.
You can annotate and add text, arrows and more
to the selected portion of the screen. But perhaps one of the most brilliant
features of this simple tool for web designers is that by selecting an image
you can then proceed to do a full Google image search for similar images
online.
LightShot can be configured in multiple
languages.
The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.
8. Awesome Screenshot
Like Lightshot, Awesome Screenshot is a screen
and image capturing extension.
It does differ from Lightshot, however, in a
number of ways. Awesome Screenshot can be configured to connect all your
screenshots with your Google drive.
It allows you to screenshot those elements
which are beyond your view in order to capture the entire page. It has
additional editing and annotation tools comma allows for cropping and image
editing all within the extension.. or with the use of additional Awesome
Screenshot applications
You can extend its features by installing the
Chrome application for desktop as well. The extension also allows for video
capturing and sharing so that you can collaborate with other developers or
designers when working on any site.
You can add additional images to a screenshot
as well as blue or erase elements that you would rather not show to others.
9. Clear Cache
The Clear Cache Chrome Extension Is a fast and
simple tool that enables you to clear cookies and cache of the page you’re
looking at. It removes the need to navigate to the settings page of your
browser in order to clear a few simple page elements.
For web designers who are making multiple
edits and want to view them in real time, this is an excellent tool that will
eliminate much of the frustration of looking at old data.
There are times you need to clear your cache
and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you
erase your cache as well as global or local cookies at the click of a button.
Clear Cache will allow you to configure which
elements you want to clear from the page. Variables include Cash, downloads,
all systems, form-data, at Cash, index database, plugin data, passwords and
more.
10. Web Developer Google Chrome
Extension
The Web Developer Google Chrome Extension
allows developers and designers to easily audit, analyze and check their web
pages for any violations of best practice design, coding, usability, and search
engine optimization.
It’s a great all-in-one tool that is not heavy
on browse our resources yet provides a ton of information useful to web design
is also responsible for search engine optimization elements within a website or
page.
The
extension installs the toolbar with multiple web developer tools.
The tool will give you indications on page
size, width, and dimensions which make conflict with best practice use on
multiple devices. It allows you to check embedded JavaScript and view your
website through a simulation of various devices.
The extension functions well on Windows, Linux
and Mac OS. In addition to coding and design issues, it will also provide
insights into meta tag information, response headers, color information, and
topographic information.
You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.
No doubt there are a plethora of other high
quality and useful Chrome extensions that are web designer or developer could
use.
This list showcases a few of the most popular
and useful tools. Do you have any recommendations for tools which you think I’m
more useful or superior to the ones in this list? Let us know.
