クロムdevtoolsの隠し機能

あなたがウェブ開発者であるならば、あなたは確かに若干の時間をブラウザーdevツールまたはウェブコンソールでポンキングすることを費やします.要素の検査、CSSの変更やコンソールでのコマンドの実行-これらの基本的なことは、すべてのWeb開発者がブラウザ開発ツールを使用する方法を知っていることです.しかし、あなたのデバッグ、開発、およびWebデザインをより効率的にするために、あなたのブラウザの中でできることは、さらに多くあります.ここでは、いくつかの隠されたまたは知られているクロムdevtoolsの既知の機能を知っている必要があります、あなたは毎日使用されます.

テーブルとしてプリティプリント配列

JavaScript(例えば、データの可視化を作成する)のデータの多くの作業では、物事は最初にしようとすると、必然的にWebコンソールに行って、データを表示する必要がありますconsole.log . これによりJavaScriptオブジェクト(JSON)が生成されます.これは、2 D配列の場合には、ハード読み込みと便利な情報を見つけるのが難しいでしょう.しかし、単純な修正プログラムがあります.

すべてを取るに置き換えることですconsole.log with console.table . この関数は簡単に1 Dと2 D配列を表示することができますが、この関数を便利にするには、列名を正しく表示することができ、これらの列ごとにソートすることもできます.したがって、上記のようなテーブルを得るには、以下の形式でデータを使用します:

[
  { "country": "Austria", "percentage": 11.6429, "year": 2012},
  { "country": "Belgium", "percentage": 8.5718, "year": 2012},
  { "country": "Czechia", "percentage": 3.1569, "year": 2012},
  { "country": "Denmark", "percentage": 13.0096, "year": 2012},
  { "country": "Estonia", "percentage": 8.3903, "year": 2012},
  { "country": "Finland", "percentage": 23.3728, "year": 2012},
  { "country": "France", "percentage": 10.1641, "year": 2012},
  { "country": "Germany", "percentage": 7.4749, "year": 2012},
  { "country": "Greece", "percentage": 9.2186, "year": 2012},
  { "country": "Hungary", "percentage": 10.4749, "year": 2012},
  { "country": "Iceland", "percentage": 13.9053, "year": 2012}
]

マルチカーソルの使用

すべてのコードエディターで最も基本的な機能とショートカットの一つは、マルチカーソルとマルチセレクトです.あなたが私のように効率的にしようとしているならば、あなたは確かにこれらの近道を良い使用に入れます:
マルチカーソル使用CTRL + Click :

マルチカーソルは便利ですが、非常に正確ではなく、少し面倒なときに選択し、テキストの発生の多くを置き換える必要があります.これらのケースの場合は、はるかに適して使用することができますCTRL + D ショートカット

上記のGIFでは、どのように使用できるかを見ることができますCTRL + D 選択するCTRL + U 簡単に変更するか、置換するテキストの出現を選択解除します.

コマンドパレットの使用

Chromeのdevtoolsにはたくさんのツール、タブ、ファイル、コマンドなどがあります.名前や場所を覚えていて、どこにいても誰も見つけられないかもしれません.そのためには、コマンドパレットを使用してCTRL + Shift + P . このパレットでは、ショートカット、パネル、コンソールの設定、タブ、設定などを見つけることができます.

あなたがそれを省略するならばShift このショートカットではなく、使用CTRL + P , それはあなたが開くことができるすべての利用可能なファイルのリストを与える.あなたのウェブサイトが多くのソースファイルを持っているならば、これも便利でありえます.

便利なカラーピッカー

私はおそらく、無制限に、フォントや色、およびCSSではないを調整しています.少なくとも少し簡単に色を調整するには、あなたが変更したいのCSSのカラーフィールドをクリックして色を要素を見つけることによって開くことができるカラーピッカーを使用する必要があります.
これは素晴らしい機能ですが、本当のゲームチェンジャーは、カラーピッカーが開いている間だけでウェブサイトから任意の色を選択する機能です-ように:

ダークモード

上記のスクリーンショットとGIFから、あなたはおそらく私がChrome DevToolsでダークモードを使用していることに気づいたでしょう.だから、場合はどのように暗いモードにライトモードから変更する方法を疑問に思っているし、devtoolsの右上隅に移動することができます- 3垂直ドットのアイコンをクリックし、次の選択ツールをして設定を選択します.設定メニューで設定を選択し、最終的に暗いテーマを設定します.それだ!暗い側へようこそ!

cssプロパティの定義

CSSでの作業は多くの試行錯誤(少なくとも私にとっては、私にとっては)と、IDEとさわやかなブラウザータブの編集コードの間で行くのではなく、なぜいくつかの時間を節約して、devtoolですべてを行うのか?そのような時間節約のトリックの1つを使用することですCTRL + Click CSSプロパティが定義されている場所を見つけるには、ソースファイルで編集できるようにします.

ウェブサイトをデザインモードで編集可能にする

別のCSS/デザイントリックは、直接ウェブサイト上で何かを編集するデザインモードを使用することです.HTMLとCSSのソースファイルを変更する必要はありません-ちょうどクリック/ページ上の何かを強調表示し、それを変更!このモードをちょうどタイプdocument.designMode = "on" コンソールに入り、デザインを始めましょう.

条件付きブレークポイント

IDEを使用してブラウザで実行しているJavaScriptを正しくデバッグするのは、一般的に非常に難しい/迷惑です.したがって、IDEを使用する代わりに、devtoolsデバッガを活用しましょう.
デバッガでの基本的なブレークポイントの設定は、実際には興味深いことではありません.しかし、条件付きブレークポイントはどうですか?場合によっては、1000以上のレコードを反復して、特定の条件が満たされたときだけ、そのバグの表面を知っているforループがあるかもしれませんif 返り値false . この条件が満たされたときだけブレークポイントで停止するには、条件付きブレークポイントを設定できます.

まず、既存のブレークポイント(赤いドット)を右クリックし、[ブレークポイントの編集]をクリックし、目的の式を挿入します.この式がtrue ブレークポイントがトリガされ、我々はチャンスがポークする必要があります.この条件付きブレークポイントは、if ステートメント-任意の行にすることができますし、その式は、コードの実行を通過するたびに評価されます.
休止中の実行中にバグを探している間、あなたは、タブを見るために疑わしい変数を加えることを考慮するかもしれません.変数を追加するには、次の操作を行うことができます

低速インターネットのシミュレーション

ほとんどの人は、それぞれの関数、操作、またはファイルの負荷がかかるかを見ることができるdevtoolsのネットワークタブについて知っている.ほとんどの人が知らないが、ネットワークのタブを使用して、インターネットの接続を使用して遅いインターネット接続をシミュレートすることです.次のようにします.

追加し、このプロファイルを選択した後、すべてのそれを行うには、ページをリフレッシュし、どのようにひどいインターネット接続で実行を参照してください.注意してください-これを試みることによって-あなたは本当にあなたのウェブサイトは本当に遅くなる(うつ病の個人的な経験)を実現する可能性があります.

ウェブサイトパフォーマンスの測定

パフォーマンスの話題で、Chrome DevToolsがアプリケーションプロファイリングに関して我々に何をすることができるかについて調査しましょう.プロファイラを実行するには、devtoolsのパフォーマンスタブに切り替える必要があります.このタブで私たちはCTRL + Shift + E . このプロンプトを起動プロファイラと同時にページをリフレッシュします.ページの読み込み後、プロファイラの記録を停止するには、この同じショートカットを押す必要があります.

ここからネットワークパフォーマンス、アニメーション、機能時間などを掘ることができます.これらの関数のいくつかを確認するには、図のオレンジ色のバーをクリックし、下のセクションでタブを選択します.あなたが合計時間でそれらをソートする場合は、完了するにはあまりにも多くの時間を取っているあなたのコードの一部を見つけることができるかもしれません.

結論

これらは私のお気に入りのヒントやトリックのほんの一部であり、これは間違いなくクロムdevtoolsのすべての機能の完全なリストではありません.あなたは便利な機能の多くを見つけるかもしれないChrome DevTools Guides それはあなたのワークフローに合います.また、私は維持し、目を見てWhat's new section あなたのブラウザにより便利なツールをもたらす最新の更新プログラム.
任意の特定の機能が不足している場合、それは価値がチェックDevTools extensions on Chrome Webstore として余分なツールの両方のGoogleとユーザーコミュニティによって構築されます.そして、あなたの特定の問題のためのツール/拡張子を見つけることができない場合は、おそらく自分で何かを構築することを検討Extending DevTools チュートリアル.😉