コンテンツ
Chromeの開発ツールは優れていますが、インターネットブラウザにさらにエキサイティングな機能を追加して、ウェブのデザインと開発を容易にすることができます。
もちろん、物事をスピードアップするための他のツールがたくさんあります。私たちのお気に入りのWebデザインツールの投稿を参照してください。ただし、今のところ、Webデザイナーと開発者向けのお気に入りのChrome拡張機能を30個紹介します。
01.Gmailを簡素化する
Gmailが少し面倒になりすぎて自分の利益にならない場合は、Simplify Gmailに挨拶してください。これにより、過去数年間にGmailに忍び込んだすべての残骸やUIの悪い決定が一掃されます。 Gmailの元リードデザイナーであるMichaelLeggettによって作成されたこのツールは、気が散る雑然としたものをすべて取り除き、より簡素で機能的なバージョンを提供します。
02.スペクトル
ある種の色覚異常は、世界中で約2億人に影響を及ぼしますが、デザイナーのアクセシビリティチェックリストでは、色覚異常への対応が不十分なことがよくあります。ただし、Spectrumを使用すると、さまざまな種類の色覚異常に対してサイトをすばやくテストし、すべてが明確であることを確認できます。
03.CSSスキャン2.0
Chromeの開発ツールは、ボンネットの下でサイトがどのように機能するかを確認するための便利な方法ですが、CSSスキャン2.0は、見たいCSSの場合はさらに簡単です。要素にカーソルを合わせると、そのCSSがポップアップビューに表示され、シングルクリックでそのルールをコピーできます。これを使用して、テーマまたはテンプレートから特定の要素をコピーして、独自の用途に適合させることができます。これは、独自のコードのデバッグに最適です。
04.アミノ
これがもう1つの優れたCSSツールです。 Aminoは、ブラウザでスタイルシートを生成し、それらをWebサイトにリアルタイムで適用できるライブCSSエディタです。これにより、アクセスするすべてのサイトに永続的なデザイン変更を効果的に加えることができます。GoogleアカウントでChromeにログインしている場合は、スタイルシートが同期され、すべてのデスクトップデバイスのChromeからアクセスできるようになります。
05. Sizzy
レスポンシブウェブデザインは最近与えられたものであり、複数のビューポートにわたってデザインをチェックする簡単な方法が必要です。Sizzyは一見の価値があります。さまざまなデバイス画面サイズでレンダリングされたページのインタラクティブビューが表示されます。また、シミュレートされたデバイスキーボードの表示と非表示を切り替えたり、縦向きモードと横向きモードを切り替えたりすることもできます。
06.サイトパレット
次回、色をうまく利用しているサイトを目にしたときは、それを利用する簡単な方法があります。サイトパレットは、Webサイトからメインカラーを抽出し、共同編集者に簡単に表示できる共有可能なパレットを生成します。 Sketchテンプレートをダウンロードすることもでき、AdobeSwatchもサポートされています。
07.チェックボット
サイト上のすべてのリンクが実際に機能することを確認することは、すぐに使い勝手が良くなり、SEOを改善するための良い方法でもあります。 Checkbotは、壊れたリンク、重複するタイトル、リダイレクトチェーン、無効なHTML / JS / CSSなどをチェックするChrome拡張機能であるため、サイトの不正なリンクをすばやく監査して修正することができます。
08.トビー
Chromeを数時間開いた時点で、小指の幅のタブの紛らわしい巣になることは広く認められている真実です。トビーは彼らを飼いならすのに最適な方法です。これを使用すると、個々のブックマークのロードの代わりに、これらすべてのタブをリンクのコレクションに編成できるため、管理がはるかに簡単になります。
09. DomFlags
DomFlagsを使用すると、要素のスタイル設定プロセスが大幅に高速化されます。これは、DOM要素のキーボードショートカットを作成できる非常に優れた拡張機能です。これは、DOMをナビゲートするためのブックマークを持っているようなものです。これにより、DevToolsの操作方法が変わります。
10.非常に蛍光ペン
人々をディスカッションに参加させる興味深い方法は次のとおりです。ウェブ上の記事のハイライトを共有できるため、執筆の最も重要な部分に注意を引くことができます。
次へ：さらに10個のChrome拡張機能
