Google Chrome で JavaScript をデバッグするためのヒント_javascript ヒント

Google Chrome はインターネットサーフィンに使用できるだけでなく、開発者にとっては強力な開発支援のようなものです。

仕事をうまくやり遂げたいなら、まずツールを磨く必要があります。次に、著者が Chrome の使用方法をいくつか紹介します。

読者が Chrome に JavaScript ブレークポイントを追加する方法を知っている場合は、読み続けてください。そうでない場合は、ご自身で判断してください。

次のようなコードがあるとします。

コードをコピーします コードは次のとおりです:

var a = 1;

関数テスト(){
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 b c) の結果を知りたいと考えています。心配しないで、最初に式を選択してから、選択した領域にマウスを移動し、しばらくそのままにしておきます。

Chrome が答えを直接教えてくれます。もっと興味深いことはまだこれからです。

選択した領域で直接マウスの右ボタンをクリックすると、[ウォッチに追加] と [コンソールで評価] の 2 つのメニューが表示されます。対応する具体的なビューについては、画像を参照してください。

いわゆる監視は、一部の式の方が重要であり、デバッグ プロセス全体で式の値をリアルタイムで監視する必要がある場合に、監視を使用できます。

たとえば、「b = 9;」の行にブレークポイントを設定し、値 1 の watch: "a - b" を追加します。写真に示すように:

「次へ」をクリックして「b = 9;」を実行します。これは、b の値が変更されたことを意味します。この時点で、watch:「a - b」の値 (-7) を確認します。

これにより、リアルタイム監視の効果が得られ、デバッグがより便利かつ高速になります。

コンソールで何が起こっているのか見てみましょう。

コンソールはもちろんコンソールであり、式はコンソール内で直接評価できます。

たとえば、(a b c) の結果を知りたい場合は、それをコンソールに直接コピーして Enter を押すと、結果が表示されます。

待って、何かが間違っているようです。なぜコンソールは a、b、c の値を認識しているのでしょうか?

ブレークポイントを使用せずにコンソールで JavaScript コードを実行することはグローバルです。つまり、この時点でコンソール内に変数 x が定義されており、この x のスコープはグローバルです。

プログラムの中断中にコンソールを使用すると、コンソールのスコープは中断されたスコープの方向を向きます。言い換えれば、ブレークポイントが設定されている場所 (またはコードが実行されている場所) に、コンソールのスコープが存在します。

この例では、変数 a が値 1 でグローバル スコープに定義され、同時にローカル変数 a が値 2 で関数テスト スコープに定義されます。 「a = 2;」にブレークポイントを設定し、コンソールに「a」と入力して Enter キーを押し、「未定義」を出力します。

このとき関数テスト内でプログラムが中断されているため、プログラムは関数テスト内で実行され、コンソールのスコープも関数テスト内にあるため、入力 a はローカル変数 a にアクセスしますが、今回はローカル変数 a が代入されていないため、結果は未定義です。

今回はこれで終わりです。これからも素晴らしい人に出会ったらシェアしていきたいと思います。