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以外のメソッドを使ったソースコードってあんまり見たことない気がする。せっかく知れたので今後は適宜使用していきたいところ。
関連記事
-
-
Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法
CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...
-
-
Ajaxを使用する際の注意
Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...
-
-
JavaScriptで特定の範囲内から数値が被らずにランダムに取り出す方法
1位から20位のランキング内でJavaScriptを用いてランダムに表示させたか ...
-
-
バニラJavaScriptでTOPへ戻る機能(ボタン)の作成方法
ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ、複 ...
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...