console.logを使用してデバッグすることを知っているだけでなく、これらの効率的なデバッグ方法を試してみてください。
フロントエンド開発者は、開発とデバッグにconsole.logを使用する必要があります。もちろん問題はありませんが、console.log以外に、ブラウザのConsoleオブジェクトに非常に便利なメソッドが多数含まれていることをご存じないかもしれません。 、一緒に味わいましょう。
console.log
は、
コンソールに情報を出力するために使用される、最も頻繁に使用されるconsole.logメソッドを紹介します。その機能は依然として非常に強力であり、数値、文字列、配列、オブジェクト、関数などのさまざまなデータ型を印刷でき、エラーの場所は後で表示されます。
例
let num = 123
let str = '123'
let arr = [1, 2, 3]
let obj = {
a: 1,
b: 2,
c: 3,
}
function func() {
// 我是全掘金最帅的
}
console.log(num)
console.log(str)
console.log(arr)
console.log(obj)
console.log(func)
Chromeコンソールの効果は次のとおりです。
console.info
は
、console.infoとconsole.logの役割をほぼ同じに記述しており、コンソールに出力されますが、印刷時のスタイルがconsole.logと若干異なる場合があります。
ここで、コンソールオブジェクトはjavascriptの組み込みオブジェクトではなく、ブラウザの組み込みオブジェクトであるため、コンソールの出力スタイルは各ブラウザに関連していることに注意してください。
例
console.log('this is console.log')
console.info('this is console.info')
Chromeブラウザーのコンソールでの効果は次のとおりであり、2つは同じように見えます
。Firefoxブラウザーのコンソール効果は次のとおりです。console.infoによって出力されるコンテンツの前に！記号：
console.errorが付きます。
導入
にconsole.logの役割はほぼ同じであるが、印刷されたコンテンツは、前に×と赤色で強調表示されるようにconsole.errorは同じです。
以下に示すように、開発およびデバッグ中にconsole.logを使用して大量のコンテンツを印刷するが、印刷された情報をすばやく見つけたい場合、console.errorには「黒い茂みの中の小さな赤」の効果があります。簡単に見つけられます。
例
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.error('牛牛牛牛牛牛牛牛牛午牛牛牛牛牛牛') // 这里面有个 '午' 字
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
ヒント
もちろん、プログラムロジックの実行でエラーが発生した場合、コンソールのエラーメッセージもconsole.errorを介して出力されるため、実際にconsole.errorをデバッグに使用する場合は、コンテンツを出力しないでください。コードロジックのエラーです。
私は長年開発に携わってきた古いウェブフロントエンドプログラマーです。少し前に、学習に最適なウェブフロントエンド学習ドライ製品を整理するのに1か月を費やしました。さまざまなフレームワークが編成されて送信されます。すべてのフロントエンドの小規模パートナーに、入手したい場合は、次のQQグループを追加して無料で入手できます。
console.warnは、上記と同じ理由でconsole.warnを
導入し
、印刷された情報を強調するために黄色の感嘆符を使用します。
例
console.log('this is console.log')
console.warn('this is console.warn')
コンソール出力は、次の通りれる：
console.timeとconsole.timeEndの
導入
二つの方法のconsole.timeとconsole.timeEndを組み合わせて使用されているこれら2つの式の途中で同じパラメータと出力コードの実行時間を受け入れます。 。
例
console.time('计时器1');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {
}
}
console.timeEnd('计时器1');
Chromeコンソールの印刷情報は次のとおりです。
ヒント
console.timeとconsole.timeEndは、文字列だけでなく、任意のタイプ、変数、または2つの「同じように見える」このタイプの参照を受け取るパラメーターも可能です。 。彼は、最終的な印刷名として、受信オブジェクトに対してtoString（）メソッドを実行します。たとえば、console.timeとconsole.timeEndの値[1、2、3]を渡しますが、2つの[1、2 、3]アドレスは異なりますが、toStringメソッドが実行されると、すべて1、2、3になります。これも、ルールに準拠しています。
console.timeとconsole.timeEndの複数のグループを同時に定義できます。また、次の使用方法など、各グループが受け取るパラメーターが一貫している限り、これらを交換して使用できます。
console.time('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {
}
}
console.timeEnd('计时器1');
for (var i = 0; i < 10000; i++) {
for (var j = 0; j < 10000; j++) {
}
}
console.timeEnd('计时器2');
実行結果は以下のとおりです。
使用
console.timeとconsole.timeEndすることで、便利な開発プロセス中にロジックの各セグメントの実行時間をデバッグし、さまざまな方法で消費される時間を比較することができます。これらの2つのメソッドを理解する前に、私は通常、2つのDate.now（）を減算して特定のロジックの実行時間を計算します。このグループのメソッドを使用すると、デバッグがより便利になります。
console.count
は、
console.countが現在の印刷コンテンツを印刷し、その後にコンテンツが印刷された回数を示します。
例
console.count('content1');
console.count('content1');
console.count('content1');
console.count('content2');
console.count('content2');
for (let i = 0; i < 5; i++) {
console.count('content3')
}
次のようにコンソール印刷結果である
console.table
導入
console.tableがあろう印刷テーブルの形でコンソールで複合データ型（オブジェクト、配列など）を、あなたはネストすることができ、あるいはオブジェクト配列を組み合わせ、そして彼はすべてそれを表形式に解析することができます。
例
let obj= {
a: 1,
b: 2,
c: 3
};
console.table(obj);
let arr = [1, 2, 3]
console.table(arr);
let data1 = [
{
num: 1 },
{
num: 2 },
{
num: 3 },
]
console.table(data1);
let data = [
{
a: 1 },
{
b: 2 },
{
c: 3 },
]
console.table(data);
コンソールの出力は次のとおりです。
console.group / console.groupCollapsedとconsole.groupEnd
は、console.groupとconsole.groupEndの
組み合わせを導入し、印刷された情報をグループ化するために使用され、情報を折りたたんだり展開したりできます。
例
console.group('第一层');
console.group('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd();
Chromeブラウザの印刷結果は次のとおりです。
onsole.groupCollapsedとconsole.groupEndの組み合わせは、上記と同じ効果があります。唯一の違いは、console.groupによって印刷されたコンテンツが初めて展開され、console.groupCollapsedによって印刷されたコンテンツが最初に収集されることです。時間。
console.traceの
導入
console.traceは、デバッグプロセスで非常に有用な方法である、それはあなたのロジックの実行過程をトレースすることができます。
例
function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
let a = b('123');
コントローラの出力は次のとおりです。
ロジックがleta = b（ '123'）ステートメントまで実行されると、b関数はc関数を呼び出し、c関数はd関数を呼び出し、d関数はconsole.trace（）を呼び出し、次にconsoleを呼び出します。 .trace（）will実行プロセス全体が下から上に出力されます。
console.assert
は、
console.assertメソッドが2つのパラメーターを受け取ることを説明しています。最初のパラメーターは式で、2番目の引数は文字列です。最初のパラメーターがfalseの場合にのみ、2番目のパラメーターが出力されます（エラープロンプトの形式で出力されます）。
例
当逻辑执行到let a = b('123') 语句时，b函数会调用c函数，c函数再调用d函数，d函数中调用了console.trace()，这时console.trace()会将整个执行过程自底向上追溯打印出来。
console.assert
介绍
console.assert 方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数（并且以error提示的形式输出）。
示例
コンソールの結果は次のとおりです。
最初のconsole.assertのパラメーター1はfalseであるため出力され、最初のconsole.assertはtrueであるため出力されません。
console.clear
の
概要console.clearメソッドは、コンソールのすべての印刷コンテンツをクリアし、カーソルを最初の行に戻すので、これ以上は言いません。
コンソールのコンテンツのスタイルを設定し
ます。さまざまなWebサイトにアクセスしたときに、コンソールの印刷情報を見に行くと、興味深いコンテンツが見つかる場合があります。例：Tmallのコンソール：
はじめにコンソール
のログ情報にスタイルを追加することもできます。この方法は非常に単純です。cssスタイルを2番目のパラメーターとしてconsole.log印刷コンテンツに渡し、最初のパラメーターに％cを追加するだけで、2番目のパラメーターのコンテンツが％cに置き換わります。
例
const style = 'color: red; background: skyblue; font-size: 24px; padding: 10px; font-weight: bold;'
console.log('%c都看到这里了，还不点个赞？', style)
コンソールの印刷情報は次のとおりです。
まとめ
コンソールオブジェクトには、多くのメソッドと強力な機能があります。さまざまなコンソールメソッドの使用法を学ぶことで、開発とデバッグの半分の労力でより多くのことができるようになります。さまざまな興味深いコンソールを体験してください。