コンソールを使用してデバッグする方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

コンソールを使用してデバッグする方法

php中世界最好的语言

May 08, 2018 pm 03:42 PM

console debug どうやって

今回は、コンソールを使用してデバッグする方法と、コンソールを使用してデバッグする際の注意事項について説明します。以下は実際のケースです。

はじめに

過去 10 年間、私の最大の情熱の 1 つはフロントエンド開発 (特に

JavaScript) でした。私は「職人」として、さまざまな道具に特化するのが好きです。この記事では、昔ながらのコンソールを使用したデバッグ手法をいくつか紹介します。

はい、私たちは皆、以下の基本的なスキルを知っています:

console.log(‘Hello World!');
console.info(‘Something happened…'); 
console.warn(‘Something strange happened…'); 
console.error(‘Something horrible happened…');

これから、あなたが知らないスキルをいくつか教えて、あなたを経験豊富なドライバーに育てます!

1. console.trace()

メッセージが出力される場所を知りたい場合は、console.trace() を使用して、出力されるデータのスタックトレースを取得します。

console.trace()来获取要打印的数据的stacktrace。

2. console.time() && console.timeEnd()

如果你想分析函数的性能，可以使用console.time()来计时，console.timeEnd()来结束计时，控制台会打印出两次之间的时间差。

3. console.memory

如果你发现性能问题很难分析，可能还要考虑是否有内存泄露，你可以使用console.memory（注意memory是console的属性，不是函数），来查看当前的堆的使用情况。

4. console.profile(‘profileName') & console.profileEnd(‘profileName')

虽然不是一个标准的做法，不过被广泛接受使用。你可以使用这两个命令来启动和停止profiling。这样有助你你在代码中做精准的profiling。而不依赖于手动的鼠标点击。你可以在浏览器控制台Javacript Profiler中找到刚刚的profile。

5. console.count(“STUFF I COUNT”)

有时候为了记录一个函数或则一段代码重复执行了多少次，可以使用console.count('?')来记录。每一次执行到该代码，就会自动加1。

6. console.assert(false, “Log me!”)

你可以使用console.assert来在某些为假的条件下输出消息，而不是用if-else。

注意：在Node.js下会报错(Assertion Error)。

7. console.group(‘group') & console.groupEnd(‘group')

如果你想对打印的log做一个格式化的整理，可以使用console.group()和console.groupEnd() 。使用console.group

2. console.time() && console.timeEnd()

関数のパフォーマンスを分析したい場合は、 console.time() を使用して時間を計測し、 console.timeEnd() を使用できます。 > 時間を終了するには、コンソールは 2 つの時間間の時間差を出力します。

3. コンソール.メモリ🎜🎜 🎜🎜 パフォーマンスの問題の分析が難しい場合は、メモリリークがあるかどうかも考慮する必要がある場合があります。console.memory を使用できます (メモリはコンソールの属性であることに注意してください)。、関数ではありません）現在のヒープ使用量を表示します。 🎜🎜

🎜🎜🎜🎜4. profileName') & console.profileEnd('profileName')🎜🎜🎜🎜これは標準的なアプローチではありませんが、広く受け入れられ、使用されています。これら 2 つのコマンドを使用して、プロファイリングを開始および停止できます。これは、コード内で正確なプロファイリングを行うのに役立ちます。手動のマウスクリックに頼るのではなく。ブラウザコンソールの JavaScript プロファイラでプロファイルを見つけることができます。 🎜🎜

🎜 🎜🎜🎜5. console.count("STUFF I COUNT")🎜🎜🎜🎜関数またはコードの一部が繰り返し実行された回数を記録するために、

console.count(' ?') code> を記録します。このコードが実行されるたびに、自動的に 1 ずつ増加します。 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/47eb6677def69d982c24f630e5b062e5-4.png" class="lazy" alt="">🎜🎜🎜🎜6. 、「ログに記録してください!」)🎜🎜🎜🎜if-else を使用する代わりに、<code>console.assert

を使用して、特定の false 条件下でメッセージを出力できます。 🎜🎜🎜注: 🎜🎜 は Node.js にあります🎜 次にアサーションエラーが報告されます。 🎜🎜

🎜🎜🎜🎜7. group') & console.groupEnd('group')🎜🎜🎜🎜 出力されるログをフォーマットしたい場合は、console.group() と console.groupEnd() 。 <code>console.group を使用して、ログをグループに集約し、ネストされた階層を形成します。 🎜🎜例を参照: 🎜🎜🎜🎜🎜🎜🎜8. 🎜文字列🎜の置換🎜🎜🎜

console.log を使用して、変数 (%s = string, %i = <a href="//m.sbmmt.com/wiki/54.html" target="_blank">整数<code>console.log打印变量(%s = string, %i = <a href="//m.sbmmt.com/wiki/54.html" target="_blank">integer</a>, %o = <a href="//m.sbmmt.com/wiki/60.html" target="_blank">object</a>, %f = float)。

9. console.clear()

我们已经在控制台输出了很多记录，来使用console.clear()清空一下。

10. console.table()

最后一个压轴的！你可以使用console.table()、%o = オブジェクト

、%f = float ）。

9. console.clear()

コンソールに大量のレコードを出力しました。console.clear() を使用してそれらをクリアしましょう。

10. console.table()

最後です！ console.table() を使用すると、オブジェクトを表形式で出力できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜bass.scss を Vue にグローバルに導入する手順の詳細な説明🎜🎜🎜🎜🎜node カスタムコマンドラインツール🎜🎜🎜

以上がコンソールを使用してデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

ArtGPT

Stock Market GPT

AIを活用した投資調査により賢明な意思決定を実現

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

PHP チュートリアル

1679

276

NYTの接続はヒントと回答です

332

836

Related knowledge

コンソールってどういう意味ですか？ Sep 05, 2023 pm 02:43 PM

コンソールとは、コンソールを意味します。コンピュータシステムと対話するデバイスまたはソフトウェアです。通常は、情報を入力および出力するためのキーボードと画面を備えたデバイスです。コンソールは、もともと大型コンピュータシステムに使用され、後に個人用にも適用されました。ユーザーがコンピュータシステムを管理および保守したり、オペレーティングシステムやアプリケーションをインストールしたり、プログラムをデバッグしたりするのに役立ちます。

新しいNintendo Switch Liteのリフレッシュの予約注文が開始されました Jun 29, 2024 am 06:49 AM

任天堂は、最新バージョンのSwitch Lite（Amazonで現在189.99ドル）の予約注文を開始した。ただし、このデバイスはまだ世界中で注文できません。要約すると、同社はほぼ 2 週間前に Switch Lite Hyrule Edition を発表しました。

C# の Console.Clear 関数を使用してコンソール出力をクリアする Nov 18, 2023 am 11:00 AM

C# で Console.Clear 関数を使用して、コンソール出力をクリアします。C# コンソールアプリケーションでは、新しいコンテンツを表示したり、より良いユーザーエクスペリエンスを提供したりするために、コンソールの出力情報をクリアする必要があることがよくあります。 C# には、この関数を実装するための Console.Clear 関数が用意されています。これにより、コンソールの出力をクリアしてインターフェイスを再び空白にすることができます。 Console.Clear 関数の呼び出し形式は次のとおりです: Console.Clear(); この関数は入力を必要としません。

MagicX XU Mini M: 分解により、宣伝されていた RK3562 ではなく RK3326 CPU が明らかに、MagicX はサードパーティ開発者との関係を断つ Sep 01, 2024 am 06:30 AM

最近 MagicX XU Mini M を購入した方は、このニュースは驚くかもしれません。新しくリリースされたハンドヘルドコンソールのハードウェアとソフトウェアの分解により、宣伝されている RK3562 CPU が実際にはスペックの低い古い RK3326 プロセッサであることが明らかになりました。

SpringBoot プロジェクトにブレークポイントを設定するときに無効なデバッグが発生する問題を解決する方法 May 11, 2023 am 10:49 AM

Springboot プロジェクトは初めてです (1) ブレークポイントのデバッグが効果がないことがわかり、非常に落ち込んで、オンラインで解決策を探しました。私が目にしたのは、リモートデバッグであると言われているいくつかの非常に複雑なソリューションだけでしたが、追加の冒頭のスローガンも必要でした。これは従来のプロジェクトとは異なるので、必要ないと思います。そこでいろいろ調べてみたところ、もっと簡単な方法があることが分かりました手順は以下の通りです: pom ファイルのプラグイン部分に設定を追加します: false でOKです; (2) SpringBoot プロジェクトのエラーについて従来の Web プロジェクトには web.xml ファイルが必要ですが、SpringBoot プロジェクトには web.xml ファイルが必要ないため、web.xml ファイルがありません。

コンソールとはどういう意味ですか Aug 09, 2023 pm 04:21 PM

コンソールは、コンピュータープログラムでテキストやコマンドを入出力するために使用される対話型インターフェイスです。オペレーティングシステムや開発環境が異なると、コンソールの外観や機能も異なります。通常、コマンドラインインターフェイスまたはコマンドラインプロンプトを提供するテキストインターフェイスで、ユーザーがキーボードからコマンドを入力し、プログラムの出力を表示できるようにします。