JavascriptChromeをデバッグする

| | | | | | | | | | | | | | | | | | | | | | |

専門家でさえ、コーディングは簡単ではありません。これがおそらく、開発者がコードのバグを探すのに多くの時間を費やす理由です。バグが明らかな場合があり、プログラム全体が一度にクラッシュします。また、バグが非常に微妙で、常に欠陥を含む見栄えの良い出力が生成される場合もあります。

直感に反するように聞こえるかもしれませんが、明らかなバグは見つけやすいため、より優れています。卑劣なバグは何年もの間日常のソフトウェアに潜んでいる可能性があります。

このように考えてください:毒ガスでゆっくりと満たされている建物にいる場合は、ガスを無臭にする必要があります、無味で無色、または明るい紫色で粉末のようなにおいがします。大砲?

デバッグは開発プロセスの重要なステップです、これを行うために利用できるツールはたくさんあります。今日は、ChromeでのJavaScriptのデバッグについて説明します。 Javascriptは、最も人気のある言語の1つであり、全体として、間違いなくWeb開発で最も人気のある言語です。同様に、Chromeは最も使用されているウェブブラウザの1つです。

間もなく需要の高いウェブ開発者になる
a>、ChromeでのJavaScriptのデバッグに慣れておくことをお勧めします。このエレガントなサンプルWebページ>に従うことをお勧めします。デバッグを練習するために特別に作成されました。

ソースパネルの使用

写真1453576109701Aef2d431a8a4
多くの取引にはコントロールパネルと同等のものがありますまた、Web開発者と同等の使用法を学ぶ必要があります。

Chromeには、開発者がHTMLを含むWebサイトのソースコードを検査できる強力なツールのセットが付属しています。 CSSとJavascript。

これは、お気に入りのWebサイトのコードを読んで、それらをデバッグする方法を学ぶのに最適な方法です。

ツアー

2019年および最新バージョンのChromeでは、画面の上部のブラウザメニューで[表示]->[開発者]->[ツール開発]に移動するのと同じくらい簡単に開発者ツールにアクセスできます。これにより、Chromeデベロッパーパネルが開き、多くの便利なタブが表示されます。

[要素]タブでは、Webページを構成するHTMLとJavaScriptを参照できます。 [コンソール]タブでは、JavaScriptをいじくり回すことができます。前のセクションでリンクされているサンプルページのコンソールを開き、console.log(`hello`)と入力します。このJavaScriptコマンドはブラウザで実行する必要があります。

[ソース]タブには、ページのソースファイルの実際のコンテンツが表示され、ブレークポイントを設定して呼び出しスタックを検査する方法が提供されます。

ブレークポイントとデバッガー;

ブレークポイントは、印刷手順とともに、開発者がデバッグに使用する基本的な手法の1つです。

Chromeコンソールでブレークポイントのシャットダウンを定義するのは簡単です-数字をクリックするだけです。éro興味のある行から来ました。ブレークポイントは、コードの実行が自動的に停止する場所です。これにより、各変数の現在の値や行われた変換など、これまでに発生したすべてを検査できます。

ブレークポイントは、進行状況を確認するための優れた方法です。何かがうまくいかないかどうかを確認するためのコード。

デバッガーを配置することで、同じ効果を手動で実現できます。デバッグプロセスを開始するコードで。

複数のブレークポイントを設定することで、コードが実行しているすべてのことをクローズアップして、エラーを簡単に見つけることができます。

デバッグの技術を習得するために必要なのはこれだけではありませんが、それは素晴らしいプラスです。最も正しいコード修正は、コードを何をしたいのかについて非常に辛抱強く、非常に明確に考え、実際に言ったコードと比較することです。 。 ;

上記の情報を使用して、ChromeでJavaScriptデバッグを実行する準備が整いました。