フロントエンド開発者向けの 10 個の Chrome 拡張機能 (共有)

この記事では、フロントエンド開発者向けの 10 個の Chrome 拡張機能を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. CSSViewer

このツールは次の目的で使用されます。要素の CSS プロパティを表示するのに役立ちます。これにはフローティング ウィンドウが含まれており、ページ上の要素の上にマウスを置くと、その CSS プロパティをすべて表示できます。ショートカット キーを使用して、CSSViewer のフォームで選択した要素のスタイルを簡単にコピーできます。

おそらく、Chrome 独自の開発者ツールでは十分ではないのに、なぜそれを使用する必要があるのか​​と疑問に思われるかもしれません。

実際、このプラグインはブラウザの開発者ツールよりもさらに高度な情報を表示します。基本要素の幅と高さのボックス モデルに加えて、有効なすべてのスタイルなども含まれています。

2. Augury

Aury は Rangle によって作成されました. Angular プロジェクトのデバッグ、分析、最適化のために io によって構築された DevTool 拡張機能。

Auury は、DevTools で豊富な UI を提供します。次のことができます。

• コンポーネントの依存関係注入 (DI) ツリー図を表示します。
• コンポーネントのプロパティを編集および変更します。コンポーネント
• イベントの発行
• Wait...

個人的には、コンポーネントの変更検出トリガーがどのようにコンポーネントを通過するかを理解したいときに機能すると思いますツリー どこまで深く進むかに役立ちます。
あなたが Angular 開発者で、DevTool で Augury を使用したことがない場合、これは残念です。 Augury には、Angular アプリケーションをブラウザから直接デバッグするために必要なものがすべて揃っています。ぜひ試してみてください。

3. React 開発者ツール

これは、React チームによって開発された優れた DevTool です。

Augury と同様に、React Developer Tools は、React コンポーネントのイベント フローを監視できる豊富な UI を提供します。 React コンポーネントのプロパティと状態を検査し、それらを自由に変更し、変更がコンポーネント ツリーに伝播するのを監視できます。

4. JSONView

ブラウザは一般に、JSON データの表示があまり得意ではありません。データは多くの場合、純粋な白黒で密集して表示されるため、特に深くネストされた属性を見つけようとする場合、データを理解することが非常に困難になります。
JSONView は、JSON データをフォーマットして整形します。それらは色鮮やかなツリー ビューで表示され、プロパティと値の識別が容易になります。

5. ライブラリ スニッファー

私は通常、Web ページがどのフレームワークに基づいて構築されているか、またはサイトがどのライブラリを参照しているかを知りたいと考えています。
Library Sniffer はこの点で非常に役に立ちました。このツールは、Web ページが React などに基づいているかどうかに関係なく、Web ページに関する詳細情報を提供します。 Angular、Vue、Svelte、Wordpress、その他のプラットフォームまたはフレームワーク。

6. Web 開発者

Web 開発者はブラウザにツールバーを追加します。このツールバーには、プログラマーとデザイナーの両方が日常業務で生産性を向上させるために使用できる便利なツールが多数含まれています。要素へのアウトラインの追加、ルーラーの表示、ページ上のすべての壊れた画像の検索、ページ レイアウトの変更、画像の操作など、その範囲は多岐にわたります。
これらの頻繁に必要な機能がデフォルトの DevTools インスペクターに追加されます。

7. LambdaTest

マルチブラウザの互換性は、Web 開発者にとって常に厄介な問題でした。さまざまなブラウザーでの Web サイトのレンダリングは、開発者が常に考えていることです。

通常、マシン上で任意のブラウザを起動して Web サイトをテストできるように、さまざまなブラウザをマシンにインストールすることを選択します。
この拡張機能はすべてを行ってくれます。これにより、デスクトップとモバイル デバイスのさまざまなブラウザを使用して Web ページのスクリーンショットを撮ることができ、互換性に関する質問に対して迅速かつ決定的な回答が得られます。

8. カラーピック スポイト

ColorPick Eyedropper には、Web ページ内の要素の上にカーソルを置くフローティング パネルがあり、要素の色が表示されます。要素をクリックすると、選択した要素の色がクリップボードにコピーされます。これは、色の検索、コピー、ペーストにかかる時間を短縮する優れた方法です。

9. CSSPeeper

要素スタイルを検査およびコピーするためのもう 1 つの優れたツールです。

CSSPeeper を使用すると、Web ページ内の任意の要素の上にマウスを移動し、マウスを 1 回クリックするだけで要素のスタイルをコピーできます。

Chrome インスペクター ツールの要素から CSS スタイル コードをコピーしてみたことがあれば、CSSPeeper がもたらす価値を簡単に理解できるでしょう。

10. WhatFont

Web を閲覧するとき、通常、何が起こっているのかが目に留まります。ページ内で使用されるフォント。テキストに興味があり、そのテキストに使用されているフォントを確認したいとき、私は無意識のうちに右クリックして開発者ツールを開き、そのソース コードを表示します。しかし、これでもまだ面倒です。

WhatFont フォントを見やすくします。テキストの上にマウスを置くと、使用されているフォントをすぐに確認できます。

結論

上記は私自身の理解に基づいていますが、これらの拡張機能を使用すると、作業がより簡単かつ迅速になります。

上記の内容に追加したいことがあれば、コメントを残してお知らせください。ありがとうございます。

元のソース: https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e

詳細プログラミング関連の知識については、プログラミング教育をご覧ください。 ！

以上がフロントエンド開発者向けの 10 個の Chrome 拡張機能 (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。