この記事の最終更新日: 2022年12月30日
あなたのJavaScriptのデバッグは最適化されていますか？
JavaScriptでは、console.info(),console.log()などを利用して、
開発者ツールのコンソールに、コメントや変数の中身などを表示することができます。
代表的なこの二つ以外にも、開発を支援するためにconsoleAPIは幅広く準備されています。
この記事では、有用なデバッグができるように、さまざまなconsoleAPIを紹介していきます。
1. 一般的なコンソールへの出力法
$ console.log()
デバッグするのによく使われる、代表的なconsoleAPIです。
文字列や変数の中身をコンソールに出力します。
$ console.log( "hello my friends")
C 言語の printf() 関数のように、文字列の中に変数を埋め込むことができます。
$ console.log('Hello I am a %s string', )
console.log("hello my %s", "friends")
「コンソールに出力される文字が小さすぎる、、、」という人は
console.log('%c some text...', )
‘%c’ で css を使用して最初の引数のスタイルを設定できます。
具体的な例)
console.log("%chello my friends", "font-size:50px")
console.logの派生系
また、console.logの派生系といってもいい、コンソール出力方法に以下の3つがあります。
// 情報レベル インフォメーションマークをつけて表示
$ console.info()// 警告レベルで黄色く表示
$ console.warn()// エラーレベルで赤く表示
$ console.error()2. 条件式が正しいかどうかを知りたいときの出力
$ console.assert(引数1, 引数2)
テストで使いやすいコンソールです。
第一引数がfalseの場合、第二引数がコンソールに出力されます。
console.assert(2===2,"wrong")
console.assert(2===3,"wrong")
3. DOM要素（プロパティやメソッドの）の出力法
$ const p = document.getElementById("result")
$ console.log(p)
$ console.dir(p)console.log()で、属性とコンテンツをともにコンソールに出力することができます。
console.dir()で、プロパティとメソッドのドロップダウンリストを出力することができます。
4. テーブル形式のオブジェクト出力法
$ console.table()
オブジェクトのプロパティと値の表を出力します。
const sampleObj = [
{id: 1001, name: “Tanaka”, age: 24},
{id: 1002, name: “Sato”, age: 21},
{id: 1003, name: “Nakamura”, age: 33},
];
console.table(sampleObj);
5. 大量のConsole.logをまとめてしまう方法
$ console.group()
// ここにまとめたいconsole.logを書いていく。
$ console.groupEnd()
// まとめた処理の出力
$ console.groupCollapsed()一連の console.log をまとめてグループ化するドロップダウンを出力します。
ドロップダウンリストの開始と終了の引数の文字列は、同じである必要があります。
デフォルトでは、ドロップダウンは折りたたまれていない状態で出力されます。
$ console.group("wow");
$ console.log("start");
$ console.log("middle");
$ console.log("finish");
$ console.groupEnd("wow");
$ console.groupCollapsed("wow");
$ console.log("start");
$ console.log("middle");
$ console.log("finish");
$ console.groupEnd("wow");
6. 出力回数の表示法
$ console.count()引数が同じものの、出力された回数ををカウントします。
何回ループ処理に入ったかなどを確認するのに便利です。
console.count("niza");
console.count("anna");
console.count("niza");
console.count("anna");
7. 特定の処理の区間で、どれだけ時間が経過したかを出力する方法
$ console.time()
$ console.timeEnd()time と timeEnd の間に経過した時間を出力します。
引数の値は同じ出なければなりません。
console.time("test");
fetch('https://catfact.ninja/fact')
.then((response) => response.json()
.then((data) => console.log(data));
console.timeEnd("test");
8. 特定タイミングでのコンソールのリセット法
console.clear();これでコンソールをクリアすることができます。。
大阪のエンジニアが書いているブログ。
コメント