テンは、Chromeデベロッパーツールを習得する必要があります

いくつかのデバッグは、トラブルシューティングのフォルトコードは非常に有用であるとき、Chromeは提供しています。Googleのブラウザのデバッグツールがあまりにも多く提供するため、実際には、多くのあなたが探索するのを待っている、隠れていました。

免責事項：この記事では、著者となっているフェレンツAlmasiの翻訳承認。

著者|フェレンツAlmasi

翻訳|明らか月、Zebian |郭ルイ

ヘッドフィギュア|からCSDNダウンロード東IC

出品 | CSDN（ID：CSDNnews）

以下は翻訳です。

クロームデベロッパーツール（開発ツール）チーム（月額https://developers.google.com/web/updates/capabilitiesが）彼らのウェブサイトの更新時に掲載されます、することもでき、その上の公式Twitterアカウント（HTTPS：// twitter.com/chromedevtools）にいくつかの大きなヒントを見つけること。あなたはクロームが提供するツールの詳細をご希望の場合、私は非常にこれら2つの情報源を見てお勧めします。

この記事では、私が頻繁に使用する10を収集し、他は機能を知らないかもしれません。彼らはあなたがより短時間で成し遂げることができ、私はワークフローを簡素化。

ログの保持

ここでは、コンソールでログを保つことについて話し始めます。そこに、あなたがコンソールにログインしようとする前に、またはページをリロードに移動し、問題が発生しましたが、すべてがクリアされたと仮定すると。解決策は単純ですが、私は長い時間前に知りません。

コンソールでログを維持

イベントリスナーのブレークポイント

ユーザーとの対話が発生した場合、通常、問題が発生します。非常に有用な相互作用に位置し、コンテンツの実行を確認するために、これらのイベントをキャプチャします。幸いなことに、私たちは、Ctrlキー+ Pでのjsソース]タブにアクセスしてファイルを開き、中に関連したイベントを調べることができます。

ブレークポイントのイベントリスナーを追加します。

DOMブレークポイントの操作

DOM操作のためにもブレークポイントを追加することができます。ブレークポイントは、一般に、特定のクラスの追加などのプロパティの変更を、受信ノードであってもよいです。大規模なコードでは、関連するコードは実際には、あなたは、単にデベロッパーツールプロセスに、その後、残りの要素のブレークポイントを追加することができ、多くの時間を過ごすことになりますリポジトリ検索。

ブレークポイントの動作DOMノードを追加します。

コードカバレッジ

時々、私たちは、コードのパフォーマンスを最適化、コードは役に立たないの多くにつながるが、速やかに削除されません。カバレッジ・ツールの助けを借りて、あなたはリソースを分析し、実行されないラインを見ることができます。あなたの懸念は、すべての相互作用でない場合は、あなたの懸念のアクションを使用すると、正確なカバレッジを得ることができます唯一の対話を行いました。あなたはツールパネルを開くには、Ctrl + Shiftキー+ P]をクリックして、録画を開始するには、リロードのアイコンをクリックすることができ、すべてのコンテンツは、それが実行されません赤で表示されます。

使用デベロッパーツールビューのコードカバレッジ

再塗装ショー

不要な再描画は、パフォーマンス上の問題につながることができます。ページ上のカウントダウンがあるとし、それぞれの更新は、ページ全体を再描画が発生します。あなたはこれらの問題を解決し、これらの問題をトリガどの要素を参照するためにレンダリングタブで「点滅ペイント」を有効にすることができます。

同様に、Ctrlキー+ Shiftキー+ Pポップアップしますツールバーを。

レンダリングタブの再描画を有効にします

映画レビュー

今レンダリング上述のことなので、どのようにデバッグにCSSアニメーションでの見てみましょう。、[ツール]メニューを開き、それはあなたのために開きます「アニメーション」アニメーションのタグを入力するにはCtrl + Shiftキー+ Pで、それはすべてのアニメーションがサイト上で起こる記録します。あなたは時間や期間に応じてそれらを再生し、その緩いの範囲を参照して、調整することができます。

デベロッパーツールのデバッグアニメーションで

スクリーンショット

私たちはしばしば、検証の変化に他の人と共有スクリーンショットに必要です。あなたが複数のステップを繰り返す持っている場合、この作業は時間がかかることがあります。

サードパーティのアプリケーションを開きます。
選択したトリム部品
絵とセンド保存

これは、社内のデベロッパーツールを行うことができます。単一のノード（選択されたノード）からのページ全体の画像ビューを作成したりすることができます。

スクリーンショットのデベロッパーツールを作成します。

ブラックボックス

あなたが問題をデバッグしている、とあなたはコード内の2つのブレークポイントがあるとします。あなたが進行中のスタックトレースを、あなたはコアフレームワークの文書からの情報スタックのほとんどを見つけることができます、などはとして反応やjQueryの。デバッガでこれらのコアファイルを含めないようにするためには、あなたは彼らと手段のデベロッパーツールを使用して、独自のコードに集中できるように、これらのファイルをスキップしますブラックボックスを、対処することができます。

ブラックボックスでデベロッパーツールスクリプト

現地報道

地元の報道は、私のお気に入りの一つである私は自分自身が頻繁に、より多くのそれを使用して見つけます。これは、生産ファイルのローカルコピーをロードし、バンドルのコピーを置き換えるためにそれらを使用することができます強力なツールです。問題は、特定の状況で発生することができない場合、これは現在のローカル多重に特に有用です。

あなたは「ソース」タブで（書き換え）「オーバーライド」を有効にすることができます。あなたはオーバーライドのリンクが表示されない場合は、ページ右側のギザギザのアイコンをクリックしてください。あなたはあなたの美しいプリントローカルファイルにファイルをコピーし、それを拡張することができます。リライトによって維持ページをリロードします。

デベロッパーツール内のファイルを上書き

灯台

パフォーマンス、PWA、アクセス、または検索エンジン最適化：私は自分自身指標のさまざまなサイトを監査することです灯台のパネルを、使用している見つけます。また、それを向上させることができるものとあなたのためのリファレンスを改善する方法を提供し、異なるデバイスおよびアナログネットワーク接続を監査するように選択することができます。あなたはラベルが表示されない場合は、「監査」タブで「灯台」を入力してちょうど隠されたギザギザのラベルを表示するには、シンボルをクリックすることができます。

レポートが生成されたら、後の比較のためのJSONファイルのインポートなどの結果を保存することができます。