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以外のメソッドを使ったソースコードってあんまり見たことない気がする。せっかく知れたので今後は適宜使用していきたいところ。
関連記事
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...
-
-
JavaScriptで配列やオブジェクトの値を検索する方法
JavaScriptにて配列やオブジェクトの値を検索する際、今までだとループを回 ...