フロントエンドの最適化のためのChrome拡張機能

フロントエンドの最適化のためのインストール可能な標準のGoogle Chrome拡張機能。



Jsスイッチ


ここからインストール-chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje

これにより、実際にはすべてがシンプルになります-jsなしで何かを見たい場合-右隅のボタンをクリックして出来上がりです。

次のロットはクッキーになります


chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-iconすべても非常にシンプルで、定期的に使用できます。 必要に応じて修正できます

前の2つの拡張機能がさらに一般的でない場合、次の拡張機能は何らかの理由で忘れられます。



PageSpeed


フロントエンド側でアプリケーションのパフォーマンスを改善できます。

developers.google.com/speed/docs/insights/using_chrome-この素晴らしいプラグインを読んでインストールできます。

簡単に言えば、Ctrl + Shift + Jを押します-コンソールが開きます。 インストール後、追加のページ速度アイコンがそこに表示されます。 目的のページに移動し、pagespeedメニューの[分析]ボタンをクリックします。 ページがリロードされるのを待っており、最適化のヒントをお読みください。 また、画像のサイズを小さくするための優れたヒントもあり、既に処理されたオプションは、コンソールから直接、一意のリンクを介して選択できます。





スピードトレーサー


Googleオーブンから直接、まだhot- chrome.google.com/webstore/detail/speed-tracer-by-google/ognampngfcbddbfemdapefohjiobgbdl

それをインストールします-そして、右上隅にある緑色のタイマーアイコンを見てください。 少しわかりにくいですが、理解するのは非常に簡単です。 目的のページでアイコンをクリックします。 録音が既に開始されているウィンドウが開きます。 次に、古いウィンドウに戻り、ページをリロードします。 トラッカーを使用してウィンドウに戻り、赤い丸を押して記録を停止します。 さらにメニューには3つの虫眼鏡アイコンがあります。 +、-、<>。 最後のオプションをクリックすると、すべてのアクティビティがスケーリングされます。 出来上がり、あなたはあなたのページの読み込みスケジュールを楽しむことができます-誰が読み込んでいるか(DOM、js、レイアウトの描画など)のように。 また、右上に図を含むアイコンがあります-すべてが円グラフで表示されます。



左から、対応する拡張機能のアイコン。 認識できるようにします。

これらはすべてインストール可能な非標準のプラグインでしたが、ボックスには何が入っていますか?

コンソールを開き、タブを確認します

ネットワーク


ページのどの要素がロードにかかったかをミリ秒単位で示すすばらしいタブ。 それに行き、ページを更新します。 たとえば、htmlが非同期に追加されない場合のjsの読み込みをどのように待っているかを明確に確認できます。また、誰がウィークリンクであるか、どの画像またはスクリプトが他よりも長く読み込まれているかなどを追跡できます。

最後にもう1つの標準モジュール:

プロフィール


Google Chromeコンソールの[ネットワーク]タブの横にあります。 このモジュールは、jsおよびcssの統計を収集し、cssまたはjsのロードされた各部分のパーセントまたはミリ秒(列の任意の値を2回クリック)で値を表示できます。



All Articles