Javascript Chromeコンソールでのデバッグ

Question

以下のコードがあります。

<div id="start_3333" onclick="doCalc(3333, this)"></div> 

function doCalc(this) 
{ 
    var id = $(this).attr(id); 
Console.log(id); 
} 

このdivは、データテーブルのすべての行に挿入されます。 doCalc（3333）とタイプして、定義されていないエラーが発生したら、Chromeのコンソールウィンドウでこの関数doCalcをテストしたいと思います。どのように私はデバッグし、どの値が関数内の "id"変数に転送されているかを確認できるように、Chromeのコンソールウィンドウに "this"オブジェクトを渡します。

Answer 1

私は別の実装をお勧めします：

<div id="start_3333"></div> 

$("#start_3333").click(function(event) { 
    console.log($(event.target).attr("id")); 
}); 

Answer 2

1. は、あなたのdivへの参照を取得します：私はコメントとして doCalc($myRef);

そしてもちろん： var $myRef = $('start_3333');

は、あなたの関数を実行しますJavaScriptでは大文字と小文字が区別されるので、 'console'の 'c'を小文字にしてください。

Answer 3

一般的な質問に答えるには

デバッガのElementsタブに移動して、使用する要素を探します。あなたがそれをクリックすると、要素の隣に== $ 0と表示されます。つまり、コンソール内の変数$0を使用してその要素を参照することができます。また、あなたがクリックした前の項目は$1となり、前の項目は$2となります。したがって、その要素を引数として実行するには、

doCalc(3333, $0) 

をコンソールに入力することができます。

これは2つの引数を取ると宣言されていないため、この関数では機能しません。あなたの関数は次のようなものでなければなりません：

function doCalc(num, element) { 
    var id = element.id; 
    console.log(id); 
}