勉強したことのメモ

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でメール送信を行える「EmailJS」の利用方法
JavaScriptでメール送信を行える「EmailJS」の利用方法

お問い合わせフォーム等の記入内容をメールで送信する際、通常はPHP等サーバサイド ...

Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法
Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法

Leafletにて表示されている地図に全画面表示ボタンが設置されているサイトがあ ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法
Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

JavaScriptの「Flatpickr」ライブラリで時分のみ表示する方法
JavaScriptの「Flatpickr」ライブラリで時分のみ表示する方法

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリでカ ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法

先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...