序文：
Chromeの開発者ツールは非常に強力で、Web開発者にとっても優れたツールと言えます。私としては、個人的には頻繁に使用します。誰もが非常に一般的だと思いますが、クリックだけに止めるべきではありませんスタイルのレベルで要素を見て、そのより強力な機能を使用します。たとえば、この問題で言及されているdevtoolsデバッグツールは、強力な症状の1つです。
私は、vue開発を使用したフロントエンドの大物がvue-devtoolsデバッグツールを使用していると思います。これは、エラーが発生した段階でデータストリームをすばやくロックするのに役立ちます。以下にインポート方法と使用方法を説明します。
最初の一歩
まず、公式のdevtoolsファイルをダウンロードします。公式ファイルアドレスただし、公式devtoolsファイルをダウンロードするには、依存関係をダウンロードしてコンパイルする必要があるため、多くの操作が必要です。処理したファイルをダウンロードするために数ポイントを直接費やし、ファイルアドレスを
直接インストールして直接インポートできます。一部の友人はcsdnポイントを持っていない可能性があります。私のgithubに直接アクセスしてダウンロードできます。ポイントのないインストールファイルアドレス（このアドレスからダウンロードする友人は少し✨励ましを与えます）
第二段階
ダウンロードが2番目または3番目の場合、2番目のファイルがダウンロードされたと見なされます。ファイルをダウンロードしたら、ブラウザを開いて左上をクリックします。図に示すように、
ブラウザの左上隅にある3つのドットをクリックして、ツールを探し、拡張機能をクリックします。拡張機能を
クリックして、次のように表示します（そのようなものが存在しない場合は、右側の開発者モードがオンになっているかどうかを確認します）
次に[ロード]をクリックして解凍しますクリックして、解凍された拡張機能をロードします。
ダウンロードしたファイルを見つけ、クリックしてChromeファイルを選択し、クリックして選択します（これはMacのインターフェイスです。Winの場合は、少し異なりますが、通常は同じです）。
次に、devtoolsデバッグツールがインストールされていることがわかります。
次に、ブラウザーを再起動し、F12デバッグモードを開きます。ブラウザーに次のものが含まれていることがわかります（ローカルVueプロジェクトが実行されている場合、オンラインプロジェクトは利用できません）
。このとき、左側に、ページに書き込んだコンポーネントがあります、および右側では、さまざまな操作の変更後のコンポーネントの状態のデータを確認できます。これにより、データフローの所在とダイナミクスを把握できます。特に、不可解なデータの損失や異常なバグの発見に適しています。
この記事では、純粋にdevtoolsデバッグツールのリソースを共有します。小さな星をクリックしてサポートできることを願っています。後で、より多くのドライグッズを共有します。