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

コアポイント

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

快適なゾーンから脫出

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

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

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

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

高度なコンソールスキル

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

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

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

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

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

フォーマットlog

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

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

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

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

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

console.log('%ix %s developer', 10, 'console');
// 10x console developer

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

console.log('%i', 12.34455241234324234); // 12

グループログ

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

<code>console.group()

console.log('%cPay attention to me','color:firebrick;font-size:40px')

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

<code>console.groupCollapsed()

const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);

logフィルタリング

、

、および

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

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

および

メソッドは、メソッド呼び出しまたは関數(shù)の実行回?cái)?shù)をカウントできます：

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

メソッドは、スクリプト実行時(shí)間を測(cè)定できます：

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>console.time()

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

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

ノードのXML表現(xiàn)を表示し、

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

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

たとえば、

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

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

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

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

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

• <code>$_：最後のコマンドの結(jié)果を保存します。
• <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)
：ノードでイベントを監(jiān)視および記録します。
• <code>monitor(method)
：メソッドを呼び出すときにログアイテムを作成します。

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

Developer Toolsコマンドメニュー

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

code snippet

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

カバレッジ

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

ワークスペース：シンクロナス開(kāi)発とデバッグタスク

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

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

次のステップ

ブレークポイントのデバッグを使用することを?qū)Wぶことをお?jiǎng)幛幛筏蓼?。これは、より効果的なデバッグ方法です?

javaScriptデバッグスキルfaq

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

以上がConsole.log（）を超えて、デバッグスキルをレベルアップしますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。