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でデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...
-
-
JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法
ページを開いた際に指定したテキストボックス(input type="text") ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...
