勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ

JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法

  JavaScript

JavaScriptでデバッグ時は基本的にconsole.logを使って配列やオブジェクトの中身を見てどうこうする、という対応を取っていたがconsoleオブジェクトにはlog以外にも便利なメソッドがあるらしい。以下に実運用上使えそうなメソッドと出力例をメモ。

 

リファレンス

https://developer.mozilla.org/ja/docs/Web/API/console

 

使えそうなメソッド

ソースコード

const log = 'log';
const obj = {
    name : '鈴木',
    age : 20
}

console.log(log);
console.info(log);
console.warn(log);
console.error(log);
console.table(obj);

console.time();
for( let i = 0; i < 1000000000; i++ ){

}
console.timeEnd();

出力例

上記ソースコードだと以下が出力される。

解説

「info / worn / error」はログレベル分けみたいなもの。

「table」は配列やオブジェクトをtableタグっぽく表示してくれる。

「time / timeEnd」は実行速度を測定できる。

 

所感

log以外のメソッドを使ったソースコードってあんまり見たことない気がする。せっかく知れたので今後は適宜使用していきたいところ。

 - JavaScript

  関連記事

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法
Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...

textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法
textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法

textareaのheight以上に文字を(複数行)入力しても当然heightの ...

Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法
Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法

以前にLeafletでマーカーをグループ化し、チェックボックスの状態により表示非 ...

Chart.jsで横スクロール可能なグラフを表示させる方法
Chart.jsで横スクロール可能なグラフを表示させる方法

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...