Console.log（）を超えて、デバッグスキルをレベルアップします

ブラウザ開発者ツールは、<code>console.log()よりもはるかに多く、その強力な機能により開発効率が大幅に向上する可能性があります。この記事では、ワークフローを最適化するのに役立つあまり知られていない実用的なヒントについて説明します。

コアポイント

• ログの特定の変更を探すことなく、コンソールのリアルタイム式を使用して、リアルタイムでスクリプトの変更を監視します。
• コンソールを使用して現在のドキュメントを直接操作し、<code>$_を使用して最後のコマンドの結果を取得し、<code><code>から
にチェックされた要素のスタックにアクセスします。
• より強力なスクリプト編集環境のコンソールから「ソース」パネルに切り替え、マルチラインスクリプティングとWebページとの複雑な相互作用をサポートします。
• ショートカットキー（Ctrl Shift Pなど）を使用して、コマンドメニューを介して開発者ツールにすばやくアクセスして、デバッグプロセスを簡素化します。
ワークスペースをセットアップすることにより、デバッグと開発のシームレスな統合、ブラウザー開発者ツールで作成された変更を直接ソースコードに同期させます。
VSコード拡張機能とリアルタイムサイトのデバッグを組み合わせて、VSコード拡張機能を備えたDevToolsを介して、Visual Studioコードをブラウザ開発者ツールと統合します。

快適なゾーンから脱出

開発者は、効率の向上を制限する可能性のあるワークフローを固定するためによく使用されます。一般的なプロセスは、エディターにコードを書き、保存してブラウザに切り替えてロードし、開発者ツールを使用してCSSを調整し、サイジングとモバイルシミュレーションテストを実行します。ライン番号とデバッグ情報に密接に関連している

ステートメントを追加してデバッグ。 <code>console.log()

この方法は非効率的で混乱しています。ブラウザツールには、最終製品に属さないデバッグ情報が入っています。これにより、他の人が理解するのが難しくなるだけでなく、初心者の開発者にトラブルを引き起こします。開発者ツールの機能のごく一部しか使用しておらず、効率を向上させる機会を逃しました。

この記事では、Visual StudioコードにChromiumブラウザー開発者ツールと実用的な機能を紹介します。まず、コンソールに飛び込みましょう。

高度なコンソールスキル

デバッグのためにコードに

を追加することに慣れています。しかし、これは時々非効率的であり、元の形式のデータを理解するのは困難です。 <code>console.log(thing)

GitHubで次のヒントを取得し、開発者ツールが開かれているブラウザで表示できます。 （または、Codepenのオンラインデモをチェックしてください）

最初に、変数値を印刷するだけでなく、簡単な追跡のために変数名を表示するだけでなく、ログに巻き毛のブレースを追加します。

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

フォーマットlog

パーセントサインから始まるフォーマット仕様を使用すると、特定の値を異なる形式で記録できます。

• <code>%s：文字列
として記録します
• <code>%iまたは<code>%d：整数として記録
• <code>%f：フローティングポイント番号として記録
• <code>%o：拡張可能なDOM要素として記録
• <code>%O：拡張可能なjavaScriptオブジェクトレコードとして

これらの指定器は、交換とパラメーターの順序の組み合わせで使用できます。

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

タイプ変換も実行できます：

<code class="language-javascript">console.log('%ix %s developer', 10, 'console');
// 10x console developer</code>

仕様により、CSSスタイルのログメッセージが許可されています <code>%c

<code class="language-javascript">console.log('%i', 12.34455241234324234); // 12</code>

グループログ

を備えたグループログを簡単に拡張して崩壊させるため：

<code>console.group()

<code class="language-javascript">console.log('%cPay attention to me','color:firebrick;font-size:40px')</code>

デフォルトでグループを拡張せずにグループをネストして使用できます：

<code>console.groupCollapsed()

<code class="language-javascript">const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);</code>

logフィルタリング

、

、および

を使用して、コンソールサイドバーまたはレベルセレクターを使用してメッセージをフィルタリングして、多数のログで特定の情報を見つけることができます。 <code>console.info() <code>console.error() <code>console.warn()

その他の便利なコンソールメソッド

および

メソッドは、メソッド呼び出しまたは関数の実行回数をカウントできます：

<code>console.count() <code>console.countReset()

メソッドは、スクリプト実行時間を測定できます：

<code class="language-javascript">const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);</code>

<code>console.time()

データのコンテンツとタイプを表示し、

<code class="language-javascript">console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1</code>

ノードのXML表現を表示し、

jsonデータをソート可能なテーブルに表示します。 <code>console.dir() <code>console.dirxml()<code>console.table()ログをリアルタイム式に置き換えます

頻繁に変更される値を頻繁に変更することは非効率的です。リアルタイムの表現はこの問題を解決できます。開発者ツールでアイボタンを有効にし、コンソールの上に値が表示される有効なJavaScript式を入力します。

たとえば、

<code>console.log()を入力すると、式はページに現在アクティブ化されている要素が表示されます。

リアルタイムの表現は耐久性があり、特定のドメイン名またはサイトとは何の関係もありません。エラーを回避するために、デバッグが完了した後に削除する必要があります。 <code>document.activeElement

リアルタイム式は、特にマウスの位置などの頻繁に変化する値を変更するために、スクリプトデータの変更を監視するのに最適です。

コンソールを使用して、現在のドキュメントコンソールは、JavaScriptを書き込み、実行し、オートコンプリート機能を使用して現在のドキュメントの利用可能な方法とプロパティを理解できるREPLです。

コンソールは、多くの便利な方法とショートカットも提供しています：

• <code>$_：最後のコマンドの結果を保存します。
• <code><code>to
：ごく最近チェックされた要素スタック。
• <code>$()<code>$$()および<code>document.querySelector()：それぞれ<code>document.querySelectorAll()および
。
• <code>$x()
：XPathを使用してDOM要素を選択します。
• <code>copy()
：コンテンツをクリップボードにコピーします。
• <code>clear()
：コンソールをクリアします。
• <code>getEventListeners(node)
：ノードのすべてのイベントリスナーをリストします。
• <code>monitorEvents(node, events)
：ノードでイベントを監視および記録します。
• <code>monitor(method)
：メソッドを呼び出すときにログアイテムを作成します。

コンソールからソースパネルへのコンソールからコンソールのシングルライン環境は、コードの書き込みを制限します。 Multi-Lineスクリプトは、Shift Enterを使用して記述できます。 ソースパネルは、より強力なスクリプト編集環境を提供します。

Developer Toolsコマンドメニュー

コマンドメニュー（Ctrl Shift PまたはCMD Shift P）を使用すると、キーボードを介してすべての開発者ツール機能にアクセスできます。

code snippet

コードスニペットは、ドキュメントと対話するスクリプトを保存する便利な方法です。現在開いているブラウザのドキュメントとコンソールにアクセスする便利な方法があります。

カバレッジ

上書きは、リモートファイルのローカルコピーです。ブラウザ開発者ツールは、リモートファイルをローカルコピーに置き換え、ウェブサイトスタイルのシートを編集したり、パフォーマンステストを実行したりすることができます。

ワークスペース：シンクロナス開発とデバッグタスク

ワークスペースを使用すると、開発者ツールにプロジェクトフォルダーを追加して、開発者ツールとエディターを同期させることができます。 VSコード拡張機能のための

devtools VSコード拡張機能のDevToolsは、Visual Studio Codeとブラウザ開発者ツールを統合し、強力な編集機能とリアルタイムサイトのデバッグを組み合わせて統合します。

次のステップ

ブレークポイントのデバッグを使用することを学ぶことをお勧めします。これは、より効果的なデバッグ方法です。

javaScriptデバッグスキルfaq

（元のテキストのFAQの一部はここで省略されています。これは、コンテンツのこの部分が記事の主なテーマとはほとんど関係がなく、長いため、それを保持すると擬似オリジナルの記事が冗長になるようになります。）

以上がConsole.log（）を超えて、デバッグスキルをレベルアップしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。