JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法
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やjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法
Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法
LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...
