Web開発の生産性を高める

最終更新日：2020年10月13日

私のようなWeb開発を行うのが好きな場合は、作業を簡素化し、生産性を向上させる優れたツールをWebブラウザーに含めることの重要性を知っておく必要があります。 これは、GoogleChromeとChrome拡張機能の包括的なサービスの場合であり、Web開発の生産性を向上させます。

はい、FirefoxはWeb開発に最適なブラウザであり、FirefoxDeveloperEditionはCSSのデバッグとテストに最適です。 ただし、Chromeには、最新のWeb機能のサポートを提供するツール拡張機能と、Web開発の生産性を高めるために多くのWeb開発者の間で人気のある開発者ツールの長いリストがあります。

Chromeマーケットプレイスには、開発者がウェブサイトやランディングページを開発してテストするのに役立つ、古いものから新しいものまで、最高の拡張機能がいくつかあります。 以下では、Web開発ツールボックスで「必須」として提案する最高の拡張機能のいくつかを紹介します。

Web開発の生産性を高めるChrome拡張機能

タグアシスタント

タグアシスタントは、Google Analytics、Googleタグマネージャーなど、さまざまなGoogleタグのインストールのトラブルシューティングに役立ちます。タグアシスタントを使用すると、ページにさまざまなGoogleタグが正しくインストールされていることを確認できます。 任意のページに移動するだけで、Tag Assistantが存在するタグを通知し、見つかったエラーを報告し、実装に加えることができる改善を提案します。 Google Analytics、Adwords Conversion Tracking、Google Tag Managerなど、ほとんどのGoogleタグがチェックされます。

WhatRuns

フレームワーク、分析ツール、WordPressプラグイン、フォントなど、Webサイトを実行しているものを見つけてください。 WhatRuns拡張機能は、ワンクリックでアクセスできるWebサイトで使用されているテクノロジーを見つけることができます。 開発者ツールやアドネットワークからWordPressプラグインやテーマまで、新しいツールやサービスも検出します。 それだけではありません。Webサイトをフォローして、新しいテクノロジーを使用したり、既存のテクノロジーを削除したりしたときに通知を受け取ることができます。

Vue.js Devtools

彼の名前は非常に明白です。 これは、Vue.jsアプリケーションをデバッグするためのChromeおよびFirefoxDevTools拡張機能です。 ChromeデベロッパーツールでVue.jsコンポーネントの階層を調べることができます。 ChromeDevToolsに「Vue」という新しいタブが表示されます。

React開発者ツール

Vue.js Devtoolsとして、React Developer Toolsは、オープンソースのReactJavaScriptライブラリ用のChromeおよびFirefoxDevTools拡張機能です。 ChromeデベロッパーツールでReactコンポーネントの階層を調べることができます。 Chrome DevToolsには、「コンポーネント」と「プロファイラー」という2つの新しいタブがあります。 [コンポーネント]タブには、ページにレンダリングされたルートReactコンポーネントと、最終的にレンダリングされたサブコンポーネントが表示されます。 3つのコンポーネントのいずれかを選択すると、右側のパネルで現在の小道具と状態を検査および編集できます。 ブレッドクラムでは、選択したコンポーネント、それを作成したコンポーネント、そのコンポーネントを作成したコンポーネントなどを検査できます。

JSONビューア素晴らしい

この拡張機能は、ブラウザでWebサイトまたはAPIリクエストからのJSON応答を視覚化するのに役立ちます。 それはあなたに素晴らしいJSONprettify体験を紹介します。 それはそれを素晴らしいものにする多くのユニークな機能を持っています。 これは、開発者がJSONをフォーマットまたはプリティファイし、グラフィカルビューでプロパティに移動するのに役立ちます。 グラフィカルビューの入力セクションに、サーバーの応答または提供されたJSONを表すフレンドリーでインタラクティブなグラフがあります。

METASEOインスペクター

Webページ内にあるメタデータを検査するのに役立ちます。通常、閲覧中は表示されません。 メタデータは、通常のHTMLメタタグだけでなく、XFNタグ、さまざまなmicroformats、最近導入された正規属性、フォローなしリンクなどです。この拡張機能は、主にサイトのHTMLを確認する必要があるWeb開発者を対象としています。ウェブマスターのGoogleガイドラインに従いますが、通常は表示されないが興味深いサイトプロパティを明らかにする可能性のあるページコンテンツに興味がある人にも。 また、レポートを印刷またはPDFとして保存したり、お好みのツールでデータをコピー/貼り付けしたりできる印刷/エクスポートオプションもあります。

HTMLスタイルのクイックビューア

HTMLDOM要素スタイルのクイックビューア。 マウスを動かすだけで、ターゲットのスタイルが表示されます。

CSSViewer

CSSViewerは、ChromeおよびFirefox用のシンプルなCSSプロパティビューアです。 CSSViewerを有効にするには、ツールバーアイコンをクリックしてから、現在のページで検査する要素にカーソルを合わせます。

フォント忍者

任意のWebサイトからフォントを識別し、ブックマークして、試して、購入します。 フォントファイルを分析して、より正確な結果を取得します。 テキストをロールオーバーして、フォント名とCSSプロパティを取得します。 メインの拡張ウィンドウには、Webサイトで使用されているすべてのフォントの概要も表示されます。 フォントに関する詳細情報を入手できます。 利用可能なスタイルの数、それらのファウンドリ、および価格を確認してください。

アダプティブが大好き–モバイル/レスポンシブテスト

レスポンシブウェブサイトをテストするためのツール。 ILOVEADAPTIVE Chrome拡張機能は、ツールバーにボタンを追加します。 ボタンをクリックすると、現在のタブで現在のURLが開きます。 主な機能には、複数のデバイスで一度にURLをプレビューする、デバイスをフィルタリングする、OSをフィルタリングする、数量を変更する、ズームする、iOSパネルを表示する、横向きと縦向きに切り替えるなどがあります。

Webバイタル

健全なサイトの指標を測定します。 Web Vitalsは、Web（https://web.dev/vitals）で優れたUXを提供するための重要な品質シグナルです。 この拡張機能は、Core Web Vitalsを測定し、読み込み、対話性、およびレイアウトシフトのメトリックに関するフィードバックを即座に提供します。 これは、これらの指標がChromeによって測定され、他のGoogleツールに報告される方法と一致しています。

ページルーラーRedux

Web Developer \ Designerの定規で、任意のWebページの要素を測定するための完璧なピクセル寸法と配置を取得します。 Page Ruler Reduxは、Web要素のピクセル単位で完全な測定値を取得できるコアWeb開発者およびデザイナーツールです。 これは、Webサイトのフロントエンド開発、Webデザイン、またはWeb要素の完全なピクセル測定を取得するために必要なタスク向けに設計されています。

グリッド定規

グリッドを作成し、それらの距離を簡単に測定します。 Photoshopスタイルの垂直および水平グリッドを作成できます。 グリッド間の距離も測定する定規があります。

概要

この拡張機能は、Webページ上のすべてのHTML要素の概要を示し、要素の境界を確認できるようにします。 拡張機能は、すべての虹（赤、オレンジ、黄色、緑、青、藍、および紫）の色をサポートします。 また、適用後にアウトラインを削除する機能もあります。

モバイルブラウザエミュレータ

デスクトップでモバイルおよびレスポンシブWebページをテストします。 マウスを1回クリックするだけで、最も一般的なモバイル画面の解像度を選択できます。 アクティブなタブのページが別のウィンドウで開きます。

これが、Web開発の生産性を高めるためにChromeブラウザに含めるべきChrome拡張機能のリストです。 はい、はい…上記のリストに含まれていない他の便利でクールな拡張機能があります。 しかし、時が来たら、私はおそらく将来のブログにリストされるであろう他の素晴らしい拡張機能を探求し続けます。