JavaScriptコンソールを使用してワークフローを改善する方法

Web開発者は、コードをデバッグする必要があることをよく知っています。ログに外部ライブラリを使用したり、場合によってはログをフォーマットしたり表示したりすることがよくありますが、ブラウザのコンソールは私たちが思っているよりもはるかに強力です。

コンソールについて考えるとき、最初に頭に浮かぶのはconsole.log、そうですか?しかし、私たちが想像するよりもはるかに多くの方法があります。次に、コンソールの使用を最大限に活用する方法を説明し、これらのメソッドを読みやすくするためのヒントをいくつか紹介します。

コンソールとは何ですか?

JavaScriptコンソールは、最新のブラウザーに組み込まれている機能であり、シェルのようなインターフェースにすぐに使用できる開発ツールが付属しています。これにより、開発者は次のことが可能になります。

  • Webページで発生したエラーと警告のログを表示します。
  • JavaScriptコマンドを使用してWebページを操作します。
  • アプリケーションをデバッグし、ブラウザで直接DOMをトラバースします。
  • ネットワークアクティビティを検査および分析する

基本的に、ブラウザ内でJavaScriptを記述、管理、監視することができます。

Console.log、Console.error、Console.warn、Console.info

これらはおそらくすべての中で最も使用されている方法です。これらのメソッドに複数のパラメーターを渡すことができます。各パラメーターは、スペースで区切られた文字列で評価および連結されますが、オブジェクトまたは配列の場合は、それらのプロパティ間を移動できます。

Console.group

このメソッドを使用すると、折りたたむことができるグループの下に一連のconsole.logs(エラー情報なども)をグループ化できます。構文は非常に単純です。console.logグループ化するものをすべてaの前に入力するだけですconsole.group()(またはconsole.groupCollapsed()、デフォルトで閉じる場合)。次にconsole.groupEnd()、最後にを追加してグループを閉じます。

結果は次のようになります。

Console.table

私が発見しconsole.tableて以来、私の人生は変わりました。JSONまたは非常に大きなJSON配列をa内に表示することconsole.logは、恐ろしい経験です。を使用console.tableすると、列に名前を付けてパラメータとして渡すことができる美しいテーブル内でこれらの構造を視覚化できます。

結果は素晴らしく、デバッグに非常に役立ちます。

Console.count、Console.timeおよびConsole.timeEnd

これらの3つの方法は、デバッグが必要なすべての開発者向けのスイスアーミーナイフです。console.countカウント出力回数をcount()同じライン上と同じラベルで呼び出されました。console.time入力パラメータとして指定された名前のタイマーを開始し、特定のページに万個の同時タイマーまで実行することができます。開始されると、呼び出しを使用しconsole.timeEndてタイマーを停止し、経過時間をコンソールに出力します。

出力は次のようになります。

Console.traceおよびConsole.assert

これらのメソッドは、呼び出されたポイントからスタックトレースを出力するだけです。JSライブラリを作成していて、エラーが発生した場所をユーザーに通知したいとします。その場合、これらの方法は非常に便利です。console.assert以下のようなものですconsole.traceが、渡された状態が合格しなかった場合にのみ印刷されます。

ご覧のとおり、出力は、例外を生成したときにReact(または他のライブラリ)が表示するものとまったく同じです。

すべてのコンソールを削除しますか?

多くの場合、コンソールを使用すると、コンソールを削除せざるを得なくなります。あるいは、本番ビルドを忘れることもあります(そして、数日後、誤って気付くだけです)。もちろん、必要のない場所でコンソールを悪用することはお勧めしません(変更入力ハンドルのコンソールは、機能することを確認した後で削除できます)。デバッグに役立てるために、エラーログまたはトレースログを開発モードのままにしておく必要があります。私は仕事でも自分のプロジェクトでもWebpackをよく使用しています。このツールを使用すると、uglifyjs-webpack-pluginを使用して、本番ビルドから(タイプ別に)残したくないすべてのコンソールを削除できます。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

構成は本当に簡単で、作業が簡単になるので、コンソールを楽しんでください(ただし、乱用しないでください!)

あなたが記事が好きなら、拍手して私に従ってください:)

Thxとお楽しみに?

Facebookで私の最後のニュースとヒントに従ってください