もろもログ

ちょっとした技術メモを忘れないうちに書いていく

JavaScript ログ出力(console API)

2023-01-16

あなたはalert派？console派？

ログ出力の種類

ログ出力というかJavaScript、TypeScriptの変数の内容を確認する方法

console API

ブラウザのコンソール、nodejsの実行ターミナルに変数の値を表示でき、表示内容に合わせていろいろメソッドがある(log、errorがメインな気がする)。 InternetExplorer11でも使用可能。

JavaScriptDebug_1.png

alert

ブラウザでメッセージ表示の代わりに変数を表示する。オブジェクトなどの中は表示できない。意図的にプログラムを止めることができるので簡易的なブレークポイントとして使える？(ブラウザのデベロッパーツールのほうがいろいろできる)

console API

テキスト、変数の出力メソッド（log、info、warn、error、debug）

引数に渡した文字列、変数などは出力する。

console.log('ログ出力');
console.info('インフォメーション出力');
console.warn('ワーニング出力');
console.error('エラー出力');

JavaScriptDebug_2.png

出力方法いろいろ

複数の引数、型を渡すことができる。

console.log('文字列','を','複数渡す');
console.log(['配列を','複数'],[1,2,3]);
console.log({obj:'オブジェクト'},{obj:'複数'});
console.log('文字列とオブジェクト',{obj:'複数',obj2:'渡す',});

JavaScriptDebug_3.png

文字列に置換文字を使用。

  • %o、%O：オブジェクト(配列も)
  • %d、%i：整数
  • %s：文字列
  • %c：スタイル設定
console.log('オブジェクト： %O',{obj:'複数',obj2:'渡す'});
let arr = ['配列',22];
console.log('配列：要素数 %d： %O',arr.length,['配列',22]);
console.log("スタイル: %c青文字 %cいろいろ", "color: blue", "border: dashed red; background:#aaaaaa;padding: 10px 50px 20px;");

JavaScriptDebug_4.png

オブジェクトがうまく出力されないとき

オブジェクト(配列)はメソッド実行時の値ではなく、ライブビューやコンソールを後で開くと値が変わってしまうので注意。

画面表示時にログ出力し、ボタン押下時に内容を変えるコード

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="btn()" value="内容変更"/>
    <script>
        // 画面表示時に出力
        let test = {test:'test'};
        let arr = ['初期値'];
        console.log(test,arr);

        const btn = () => {
            // ボタン押下時、内容のみ変更
            test.test = 'プロパティの変更';
            arr[0] = '変わったよ';
        }
    </script>
</body>
</html>

画面表示ログ出力→ボタン押下した後、ログの詳細を開くと内容が更新されてしまう。 ※詳細を開いてからボタン押下だと初期値のまま。

JavaScriptDebug_5.png

メソッド実行時の値を出力したい場合は、新しいオブジェクトとして出力する。

console.log(JSON.parse(JSON.stringify(test)),JSON.parse(JSON.stringify(arr)));

debug

debugメソッドはブラウザのデフォルト設定では表示されない。 コンソールの出力レベルのVerbose（または詳細）にチェックを入れると表示される。

JavaScriptDebug_6.png

実行場所への経路を表示（trace）

traceメソッドを実行までの経路を表示。

const method1 = () => {
	nest_method();
}
const nest_method = () => {
	console.trace();
}
method1();

JavaScriptDebug_7.png

実行回数をカウント（count、countReset）

引数に指定したラベルごとに実行回数を表示する。countResetでリセットする。 ※引数省略時は「default」。

const con = (label) => {
    console.count(label);
}
const reset = (label) => {
    console.countReset(label);
}

con('test');
con('test');

con('テスト');
con('テスト');
// testをリセット
reset('test');
con('test');
con('テスト');

リセット後、「test」は1からカウント、「テスト」はそのままカウント。 JavaScriptDebug_8.png

出力内容をグルーピング（group、groupCollapsed、groupEnd）

grouメソッド実行のログ出力は階層が深くなる、groupEndメソッド実行すると階層が戻る。
groupCollapsedも同様の挙動だがログが折りたたまれて状態で表示される。

console.log("一番上の階層");
console.group();
console.log("第二階層");
console.group();
console.log("第三階層");
console.warn("第三階層です");
console.groupEnd();
console.groupCollapsed();
console.log("第三階層その2");
console.error("エラー-");
console.groupEnd();
console.log("第二階層の終わり");
console.groupEnd();
console.log("一番上の階層に返ってきました。");

JavaScriptDebug_9.png

処理時間の計測（time、timeLog、timeEnd）

timeメソッド実行から、timeEndメソッド実行までの経過ミリ秒を出力する。
途中でtimeLogメソッドを実行すると途中の経過ミリ秒が出力される。
引数に指定したラベルごとに計測が可能（引数省略時は「default」）。

// 渡されたvalue秒後に実行
function sleep(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, value);
    })
}

// timeテスト用
// sleepメソッド終了までまって時間を出力する
async function sample() {

    console.time('経過ミリ秒');

    await sleep(2000);
    console.timeLog('経過ミリ秒');

    await sleep(7000);
    console.timeLog('経過ミリ秒');

    await sleep(3000);
    console.timeEnd('経過ミリ秒');

}

// 関数実行
console.time('全体');
sample().then(()=>{
    console.timeEnd('全体');

});

大体、2秒後、7秒後、3秒後に出力され。最後に「全体」時間が出力される。

JavaScriptDebug_10.png

目次