Google Chrome は現在、Web 開発者が使用する最も人気のある Web ブラウザです。 6 週間のリリース サイクルと拡張し続ける強力な開発機能により、Chrome は必須のツールになりました。ほとんどの人は、コンソールやデバッガを使用して CSS をオンラインで編集するなど、Chrome の機能の多くをよく知っているでしょう。この記事では、ワークフローを改善できる素晴らしいヒントをいくつか紹介します。
コンソール パネルからページ要素と要素コンテンツを変更します。
Inspection() / copy() / value() およびCtrl + L
JS ファイルを開き、ファイル内でクイック ジャンプ
ソースパネルで Alt + を使用します - Alt + = を使用すると、前のマウス位置と次のマウス位置の間をジャンプできます
[要素] パネルで CMD + F を使用して検索ボックスを開きます。通常の文字列に加えて使用できます。 HTML 要素を選択するセレクター
を右クリックします。画像をプレビューし、画像をデータ URI としてコピーを選択して、画像を Base64 エンコードに変換します
CMD + クリックを使用すると、ファイル内に複数の編集ポイントを作成できます。最後の編集をキャンセルするには、CMD + U を使用しますpoint
Alt キーを押しながらファイルの内容を選択し、長方形の選択範囲を作成します
フィルター入力に Is:running コマンドを入力します[ネットワーク] パネルのボックスで、進行中のネットワーク リクエストを表示します
[要素] パネルの右側 [イベント リスナー] タブで、バインドされたイベントを右クリックして、対応する JS コードにジャンプします
匿名モードでリンクを開く必要がある場合、Chrome でリンクを開くことができます。匿名で開いた場合でも、同じツールバーの位置など、同じ開発者ツールのステータスが維持されます。サイズ、パネルレイアウト、設定情報など。
コンソールパネルで getEventListeners(node) を使用します。 この関数は、現在のノードにバインドされているイベントを取得し、配列を返すことができます
要素パネルで、インライン JS または CSS パスを右クリックし、開くを選択して、ファイル
数値調整を開きます。ショートカット キー
CMD + [ または ] を使用して循環する 開発者ツールのさまざまなパネルを切り替えます
JS コードに条件付きブレークポイントを設定します。条件が満たされた場合にのみトリガーされます。JS 内の
ファイル内のコードを選択し、Ctrl + Shift + E を使用して、コンソール パネルでこのコードを実行します。
ブラウザーから開発者ツールを切り離した後、CMD + Alt + i を使用します。別の開発者ツールが作成され、これを使用してスタイルを変更できます。最初の開発者ツール
コード実行中に console.trace() を使用してスタック情報をトレースします
では、いくつかのフレームが赤で強調表示されますこれは、これらのフレームは開発者の注目に値し、レンダリング時間が通常 18 ミリ秒を超えるためです。赤枠をクリックすると、該当する警告情報が表示されます。一般に、1 秒あたり 60 フレームをレンダリングするページはスムーズであると考えられており、そのためには各フレームのレンダリングが 16 ミリ秒を超えてはいけない必要があります。
開発者ツールの Canary バージョンでは、非表示のレイアウト エディターが提供されます
ソース パネルで CMD + Opt + を使用します F / Ctrl + Shift + F ですべてのファイルの情報を検索できます
CSS スタイル ルールをたどって選択するには、Tab キーを使用します。選択されたターゲットには、セレクター、属性、および属性値が含まれます。前のターゲットに戻りたい場合は、Shift + Tab を使用します。
上/下ショートカット キーを使用して、DOM 要素属性の値を変更します。
DOM 要素スタイルの調整
ハンドル フィルターなどの特定の情報をフィルターする一連のフィルターがコンソール パネルに提供されます。 Promise
の拒否ステータスを取得するために使用されます
console.time('sign string') と console.timeEnd('sign string') を使用して中間間隔時間を取得します
console.table(arr) を使用して出力します配列データ
Canary バージョンでは、マウスをセレクターの上に長時間置くと、左側の要素パネルで一致する DOM 要素領域が強調表示されます
リソースの取得が失敗した場合に URL の読み込みを手動でブロックし、ページの効果をテストします
新しい Constly Functions モジュールが Canary のタイムライン パネルに追加されましたのバージョン: ペイント / レンダリング / スクリプト / ネットワーク アクティビティの 4 つの側面でパフォーマンスを記録します
ドラッグして開発者ツール上のパネルの順序を並べ替えます
[要素] パネルには、マウスオーバー ターゲットに続いてさまざまな DOM 要素が表示されます
アニメーション インスペクターを使用して、実行中の CSS アニメーション プロパティを検査します
視覚化されたリソースの依存関係:緑色のリソースは初期化リソース、赤色のリソースは緑色のリソースから導入されます
フロントエンドパフォーマンスの最適化とモーション設計に重点を置いている開発者で、Github @pinggod、Weibo @ping4god、ブログ pinggod.com で活動しており、多くの代替者がいます。 Kairosoft と Three Quarter Noon Studios のゲームにハマっている人は、ぜひ私と友達になってください :)。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
