Google Chromeはインターネットのサーフィンに使用されるだけでなく、開発者にとっては強力な開発援助ツールのようなものです。
良い仕事をしたい場合は、まずツールを研ぎ澄まさなければなりません。次に、Chromeを使用する方法をいくつか共有します。
読者がJavaScriptブレークポイントをChromeに追加する方法を知っている場合は、読み続けてください。そうでなければ、自分でそれを補います。
そのようなコードがある場合:
コードコピーは次のとおりです。
var a = 1;
function test(){
var a、b、c、d、e;
a = 2;
b = a -1;
b = 9;
c = 3;
d = 4;
e =(a + b * c) *(a -d);
eを返す;
}
テスト();
コード自体は重要ではなく、重要なのはフォームです。
eが最終的に必要な結果であるが、結果が正しくないことを発見した場合、eに値を割り当てる行にブレークポイントを設定します。
ブレークポイントを設定した後、マウスを変数に移動してしばらく滞在すると、Chromeはこの時点で変数の値を促します。
しかし、表現は非常に複雑であり、単一の変数の値を見るだけでは役に立たない。それはすべて正常に見えますが、計算後は間違っています。
この時点で、(A + BC)部分の結果を知りたいと思う可能性があります。心配しないで、最初に式を選択してから、マウスを選択したエリアに移動してしばらくの間留まります。
Chromeは答えを直接教えてくれます。もっと興味深いのはまだ背後にあります。
選択した領域で直接右クリックすると、メニューがポップアップします。上位2つの項目は、[監視に追加]と[コンソールで評価]です。特定の対応するビューリファレンス画像。
いわゆる時計は監視として理解できます。いくつかの式がより重要であり、デバッグプロセス全体で式の値をリアルタイムで監視する必要がある場合があります。現時点では、時計を使用できます。
たとえば、ブレークポイントを「b = 9;」という行に設定しました。次に、写真を1の値で監視します。写真に示されているように:
[次のステップ]をクリックして、「B = 9;」を実行します。つまり、Bの値が変更されました。この時点で、時計の価値を見てください:「a -b」と-7です。
これにより、リアルタイムの監視の効果が実現され、デバッグがより便利かつ高速になります。
次に、コンソールで何が起こっているのか見てみましょう。
もちろん、コンソールはコンソールであり、式はコンソールで直接評価できます。
たとえば、(A + BC)の結果を知りたい場合は、コンソールに直接コピーしてEnterを押すと、結果が発生します。
待ってください、それは何かが間違っているようです、なぜコンソールはA、B、およびCの値を知っているのですか?
ブレークポイントなしでコンソールでJavaScriptコードを実行することはグローバルです。つまり、現時点では、変数xがコンソールで定義され、このxの範囲はグローバルです。
プログラムの中断の場合にコンソールが使用される場合、コンソールの範囲は中断時のスコープに向けられます。つまり、ブレークポイントが設定されている場合(またはコードが実行される場所)、コンソールの範囲はどこにあるかです。
この例では、変数Aはグローバルスコープで定義され、値は1です。ローカル変数Aは、値が2の関数テスト範囲で定義されています。「a = 2;」にブレークポイントを設定し、コンソールにAを入力し、入力し、未定義で印刷します。
この時点でプログラムは関数テスト内で中断され、プログラムは関数テストで実行されるため、コンソールの範囲も関数テストにあります。したがって、ローカル変数aへのアクセスアクセスとローカル変数Aは現時点では割り当てられていないため、結果は未定義です。
今回は最初にたくさん共有します。将来強力な人に出会ったとき、私はそれを共有し続けます。読者に役立つことを願っています。