勉強したことのメモ

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でリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法

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

jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...

JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...