如何在测试div中显示javascript变量的实际值？

Question

我有一个双人棋盘游戏，有很多(变化的)变量。出于测试目的，我想在testdiv中显示所有这些javascripts变量，例如：

<div id="testdiv" style="margin-top:800px;background-color:yellow">
/** here the listing of js vars and arrays */
</div> 

这款棋盘游戏使用一个后端文件来更新游戏，但是当我试图跟踪javascript变量到底发生了什么时，我就迷路了。我知道变量和数组的名称。在切换之后，我刷新了页面，但我想通过ajax (jQuery)更新页面。为了检查playersturn，我已经使用了jQuery和taconite插件表单http://www.malsup.com/jquery/taconite/这个插件返回xml，如下所示：

### Taconite output 
?><taconite> 
<?php 
echo $content_refresh; // refresh pagina indien nodig
echo $content_redirect;
echo $content_melding; // melding over verlaten tafel of afgewezen!
echo $content_inpartij; // tegenstander in partij??
echo $content_chataangevraagd; // chat door tegenstander aangevraagd?
echo $content_wachtopaanschuiven; // div leegmaken zodra 2e speler in partij is
echo $content_starttijd;
?>
</taconite>

例如，所有内容变量都是用xml生成的

## Taconite: refresh nodig??

if($refresh_needed == 'ja')
{
$content_refresh = '<eval><![CDATA[
                                 window.location="http://www.xxxxxxxx.nl/v45/partij.php?gameID='.$_GET['gameid'].'";
                    ]]> 
                    </eval>';
//$meta_refresh = '<replaceContent select="#refresh"><META HTTP-EQUIV="refresh"     CONTENT="0"></META></replaceContent>';
}

因此，我只想更新棋盘游戏，而不是刷新，只是没有一个al (已知)当前javascript值的概述。

提前感谢您的帮助！

Answer 1

我不熟悉你的插件，也没有列出你的服务器端技术(猜测php)，所以我想在http://php.net/manual/en/book.json.php上看看php的json序列化能力。

然后，您应该在客户端的javascript中执行一个ajax请求，但使用json编写服务器端代码，只发送表示必要更改或整个板子状态的数据。在客户端，JSON对象将被接收并作为直接javascript对象使用，然后您可以使用一个方法对其进行处理，以基于服务器发送的数据手动更新板子状态。

编辑：

对不起，忘记了这里的范围是获取调试信息，因为呈现电路板更新的方法也应该将所述调试信息呈现到屏幕上某个地方的单独div中。如果您还没有使用jquery for ajax，我将使用jquery，使用jquery，您可以使用选择器完成以下操作：

$("#debugDiv").text("Var a: " + boardState.VarA);
$("#debugDiv").append("Var b: " + boardState.VarB);

看一下：

http://api.jquery.com/append/

http://api.jquery.com/id-selector/

http://api.jquery.com/element-selector/

http://api.jquery.com/category/selectors/

Answer 2

在javascript中，声明为globally的变量通常附加到window object。因此，如果您的变量在global作用域中，您可以在DOM tab of firebug中检查它们，然后单击window。

问题是你还会看到很多其他的变量。

如果您的变量在某个其他作用域中，您可以只检查特定作用域中的内容。

如果您想在div中打印它们，您将需要一些方法来将您的变量与其他变量区分开来，然后与hasOwnProperty和typeof一起使用for in循环。

也就是说，最好的方法是重组你的应用程序，使其对你来说至少是透明的。