コンソールをJSデバッグにもっとプロフェッショナルに使うための10のヒント

クズども · 掲載地 2018/08/07 13:29:40

まず最初に、このプラットフォームを使って開発環境の骨組み(アウトライン)を整理するつもりです。時には、私が行う「魔法」(ある人は「コーディング」と呼ぶ)が、同僚たちが見せてくれる素晴らしい結果ほど完璧ではないこともあります。はい、私は時々「デバッグ」と呼ばれる昔ながらの試行錯誤法を使うと言いました:)

過去10年間で情熱を注いでいたことの一つはフロントエンド開発(特にJavascrip{filtering}t)です。「職人」として、市場にある新しい道具を学ぶのが好きです。この話では、「古い」コンソールの使い方について、よりプロフェッショナルで優れたコツをお伝えします。

はい、私たちは皆その基本的な使い方を知っています:

console.log(「こんにちは世界!」); メッセージやオブジェクトをコンソールにログする

console.info(「何かが起こった...」); コンソールログと同じです

console.warn(「何か奇妙なことが起きた...」); コンソールログと同じですが、警告が表示されます

console.error('Something great bhappened...'); コンソールログと同じですがエラーが出ます

そこで、今まで知らなかったコツをお伝えできればと思いますし、そのプレイ方法がよりプロフェッショナルなデバッガーになれると思います。

ヒント #1 console.trace()

ログ情報のヒント場所を得たい場合は、console.trace()を使ってログデータ付きのスタックトレースを作成できます。

ヒント #2 console.time() & console.timeEnd()

もっと厄介なパフォーマンスの問題を探しているなら、console.time() で時間を計算し始め、その後 console.timeEnd() で印刷してください。

ヒント #3 console.memory

もしパフォーマンスの問題がより厄介で隠れたメモリリークを探しているなら、console.memory(プロパティであって関数ではない)を使ってヒープサイズの状態を確認するのも良いでしょう。

ヒント #4 console.profile('profileName') & console.profileEnd('profileName')

これは標準的なアプローチではありませんが、広く支持されています。 console.profile('profileName')とconsole.profileEnd('profileName')を使ってブラウザのパフォーマンスツールを開始・終了できます。コードの「performance profile」です。これにより、何を正確に望んでいるかを分析でき、プログラムの実行時間によってはマウスをクリックしずに済みます。

ヒント #5 console.count("STUFF I COUNT")

繰り返し動作する関数やコードの場合は、console.count('?')コードが何回読まれたかを数えるために。

ヒント#6 console.assert(false、「ログを取れ!」)

はい、条件付きログはif-elseでログをラップしません:)

条件がfalseな場合はconsole.assert(condition, msg)を使ってログを取ることができます。

免責事項:Node.jsでは、主張エラーとなります!

ヒント #7 console.group('group') & console.groupEnd('group')

たくさんのログを書いた後は、整理したくなるかもしれません。小さくて便利なツールとしては、console.group()とconsole.groupEnd()があります。コンソールグループを使ってコンソールログをまとめ、各グループが階層の別のレベルを作り出します。 groupEnd()を呼び出して1レベル下げ(前のレベルに戻す)ことをします。

ヒント#8 文字列の置換

ログを取る際には、マージ変数を文字列で置き換えることができます。これらの参照は(%s = 文字列、%i = 整数、%o = オブジェクト、%f = float)です。

ヒント #9 console.clear()

これだけ多くのログを書き終えたので、そろそろコンソールの整理を始める時です。

ヒント #10 console.table()

私の意見では、これは本当に「宝石」です! console.table()を使ってとても美しいテーブルを印刷できます!

[JavaScript] コンソールをJSデバッグにもっとプロフェッショナルに使うための10のヒント

関連記事

閲覧したセクション