テスト用のjQuery変数の値を表示するにはどうすればよいですか？

Question

私はjQueryを使用するスライダに取り組んでいます。スライダの一部の要素が正しく動作していますが、一部のコードでトラブルシューティングを試みているという問題があります。テストするために、私はステートメント内の変数の値を表示できるようにしたいと思います。ここで

私が働いているコード・ブロックである：私は、私は、彼らが期待した結果が戻ってきていることを確認するために、変数の値を表示したい「試験」と呼ばれるdiv要素を追加

$('.marquee_nav a.marquee_nav_item').click(function(){ 
     $('.marquee_nav a.marquee_nav_item').removeClass('selected'); 
     $(this).addClass('selected'); 

     var navClicked = $(this).index(); 
     var marqueeWidth = $('.marquee_container').width(); 
     var distanceToMove = marqueeWidth * (-1); 
     var newPhotoPosition = (navClicked * distanceToMove) + 'px'; 
     var newCaption = $('.marquee_panel_caption').get(navClicked); 

     $(' .marquee_photos').animate({left: newPhotoPosition}, 1000); 
     }); 

：

例えば

<div class="test"><p>The value is: <span></span></p></div> 

、値をテストするために、私は、上記のステートメントにこれを挿入：

$('.test span').append(marqueeWidth); 

しかし、私は結果を得ることはありません。予想される結果が得られていることを確認するために、そのコードブロック内にテストを含める正しい方法は何ですか？

ありがとうございました。

Answer 1

JavaScript's console functionsを使用して、ブラウザのコンソールに変数を記録してください。

var myVar = 123; 
console.log(myVar, "Hello, world!"); 

あなたが見る、ブラウザ内のコンソールを開くことが方法がわからない場合：https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

Answer 2

appendは、HTML文字列、DOM要素、DOM要素の配列、またはjQuery要素のいずれかを追加するために使用されます。あなただけの数（marqueeWidth）を表示しようとしているので、おそらく代わりに、スパンのtextを設定したい：

また

$('.test span').text(marqueeWidth); 

、あなただけのコンソールを使用していない特別な理由があるのでしょうか？ウォークスルーDebugging JavaScriptを読む価値があります。

Answer 3

次を使用することができます。

$('.test span').html(marqueeWidth); 

しかし console.log(yourvariable);または alert(yourvariable);が優れていること。