勉強したことのメモ

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

  関連記事

jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法

jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法

Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...