開発者ツールのための Chorme 35 のヒント_html/css_WEB-ITnose

Google Chrome は現在、Web 開発者が使用する最も人気のある Web ブラウザです。 6 週間のリリース サイクルと拡張し続ける強力な開発機能により、Chrome は必須のツールになりました。ほとんどの人は、コンソールやデバッガを使用して CSS をオンラインで編集するなど、Chrome の機能の多くをよく知っているでしょう。この記事では、ワークフローを改善できる素晴らしいヒントをいくつか紹介します。

コンソール パネルからページ要素と要素コンテンツを変更します。

• 要素ノードを取得
• 右クリックして [HTML として編集] を選択するか、テキストの編集
• 変更された内容はページと要素パネルにリアルタイムで反映されます

Inspection() / copy() / value() およびCtrl + L

• コンソール パネルで Inspection(elem) を使用して、要素パネルの指定された要素ノードにジャンプします
• コンソール パネルで copy(values) を使用して、クリップボードへのデータ
• コンソール パネルは、values(object) を使用してオブジェクトのすべての属性値を取得し、配列を返します
• Ctrl + L を使用して現在のコンソール パネルをクリアします

JS ファイルを開き、ファイル内でクイック ジャンプ

• ソース パネルで CMD + O ショートカット キーを使用して、検索ボックスを開きます
• 検索ボックスに現在のページに関連する JS ファイルを入力するよう求められます。ファイル名を入力して開くことができます。
• 「5:9」と入力すると、5 番目の 9 文字目にジャンプすることを意味します。ファイルの行

ソースパネルで Alt + を使用します - Alt + = を使用すると、前のマウス位置と次のマウス位置の間をジャンプできます

[要素] パネルで CMD + F を使用して検索ボックスを開きます。通常の文字列に加えて使用できます。 HTML 要素を選択するセレクター

を右クリックします。画像をプレビューし、画像をデータ URI としてコピーを選択して、画像を Base64 エンコードに変換します

CMD + クリックを使用すると、ファイル内に複数の編集ポイントを作成できます。最後の編集をキャンセルするには、CMD + U を使用しますpoint

Alt キーを押しながらファイルの内容を選択し、長方形の選択範囲を作成します

フィルター入力に Is:running コマンドを入力します[ネットワーク] パネルのボックスで、進行中のネットワーク リクエストを表示します

[要素] パネルの右側 [イベント リスナー] タブで、バインドされたイベントを右クリックして、対応する JS コードにジャンプします

匿名モードでリンクを開く必要がある場合、Chrome でリンクを開くことができます。匿名で開いた場合でも、同じツールバーの位置など、同じ開発者ツールのステータスが維持されます。サイズ、パネルレイアウト、設定情報など。

コンソールパネルで getEventListeners(node) を使用します。 この関数は、現在のノードにバインドされているイベントを取得し、配列を返すことができます

要素パネルで、インライン JS または CSS パスを右クリックし、開くを選択して、ファイル

数値調整を開きます。ショートカット キー

• 上 / 下、1 単位増加または減少
• Shift + 上 / 下、10 単位増加または減少
• Alt + 上 / 下、増加または 0.1 単位減少
• マウス ホイール

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 アニメーション プロパティを検査します

視覚化されたリソースの依存関係:緑色のリソースは初期化リソース、赤色のリソースは緑色のリソースから導入されます

参考資料

• Chrome デベロッパー ツールをより専門的に使用する方法
• 15 Chrome に関するいくつかのヒント知っておくべき開発ツール
• Google devtools
• 開発のヒント

North and South

フロントエンドパフォーマンスの最適化とモーション設計に重点を置いている開発者で、Github @pinggod、Weibo @ping4god、ブログ pinggod.com で活動しており、多くの代替者がいます。 Kairosoft と Three Quarter Noon Studios のゲームにハマっている人は、ぜひ私と友達になってください :)。