Javascript Firebug在调试方面是否更有用？选择？_Javascript_Debugging_Firebug

Javascript Firebug在调试方面是否更有用？选择？

javascript debugging

Javascript Firebug在调试方面是否更有用？选择？,javascript,debugging,firebug,Javascript,Debugging,Firebug,我知道了如何让我的javascript工作，但花了非常非常非常长的时间。这足以让我希望继续避免使用javascript。我从一个复杂的页面开始，不断地缩小它，并一点一点地将其更改为一个简单的示例最终发现方括号必须用两个反斜杠转义。但并非总是如此——显然是在选择器中——但不是在.attr（'id'，'element['+newNum+']）上下文中，然后在那里转义是错误的我怎么能更快地理解这一点？我还没有写很多JavaScript或者使用Fixbug，因为我似乎浪费了很多时间，在C++错误中（

我知道了如何让我的javascript工作，但花了非常非常非常长的时间。这足以让我希望继续避免使用javascript。我从一个复杂的页面开始，不断地缩小它，并一点一点地将其更改为一个简单的示例

最终发现方括号必须用两个反斜杠转义。但并非总是如此——显然是在选择器中——但不是在.attr（'id'，'element['+newNum+']）上下文中，然后在那里转义是错误的

<>我怎么能更快地理解这一点？我还没有写很多JavaScript或者使用Fixbug，因为我似乎浪费了很多时间，在C++错误中（通常）更快地找到，我在JavaScript中感到恼火，避免使用它。运行与Firebug open不兼容的代码不会显示任何错误。我已经在“脚本和控制台”选项卡上进行了尝试

单击此按钮时，没有可见反应。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#btnAdd').click(function() {
          var num = $('.element').length-1;
          var newNum = new Number(num + 1);
          var newElem = $('#element[' + num + ']').clone().attr('id', 'element[' + newNum + ']');
          $('#element[' + num + ']').after(newElem);
        });
      });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('#btnAdd').click(function() {
            var num = $('.element').length-1;
            var newNum = new Number(num + 1);
            var newElem = $('#element\\[' + num + '\\]').clone().attr('id', 'element[' + newNum + ']');
            $('#element\\[' + num + '\\]').after(newElem);
          });
        });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>


$（文档）.ready（函数（）{
$（'#btnAdd'）。单击（函数（）{
var num=$（'.element'）。长度为1；
var newNum=新的数字（num+1）；
var newElem=$（'#element['+num+']'）.clone（）.attr（'id'，'element['+newNum+']）；
$（'#element['+num+']'）。在（newElem）之后；
});
});
描述

单击此按钮时，将按预期创建一个新的列表元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#btnAdd').click(function() {
          var num = $('.element').length-1;
          var newNum = new Number(num + 1);
          var newElem = $('#element[' + num + ']').clone().attr('id', 'element[' + newNum + ']');
          $('#element[' + num + ']').after(newElem);
        });
      });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('#btnAdd').click(function() {
            var num = $('.element').length-1;
            var newNum = new Number(num + 1);
            var newElem = $('#element\\[' + num + '\\]').clone().attr('id', 'element[' + newNum + ']');
            $('#element\\[' + num + '\\]').after(newElem);
          });
        });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>


$（文档）.ready（函数（）{
$（'#btnAdd'）。单击（函数（）{
var num=$（'.element'）。长度为1；
var newNum=新的数字（num+1）；
var newElem=$（'\\\['+num+'\\]'）.clone（）.attr（'id'，'element['+newNum+']）；
$（“#element\\['+num+'\\]'）。在（newElem）之后；
});
});
描述

在选择器中，

[]

具有特殊含义。它表示查找属性。例如，以下代码查找文件类型的输入：

var fileInputs = $('input[type=file]');

我不知道您为什么要使用

[]

作为id，您可以使用

elementN

其中

是一个数字

此外，尽管JS是一种OOP语言，但在创建本机对象时应避免使用

new

语法（但也有例外，如预定长度数组）。您的

newNum

可以这样创建：

var newNum = num + 1;

至于Firebug，它是最受欢迎的调试工具之一。如果它没有报告任何东西，那么要么是他们的bug，要么是你的代码工作得很好，但不是你期望的方式。

a）使用IDE:eclipse、WebMatrix非常好，或者其他一千种。b） Chrome开发工具击败firebug（事实）。c）偶尔使用JSLint之类的工具进行检查有利于长期最佳实践编码。有一个我喜欢的notepad++插件。d）耐心。从语言1到语言2的任何移动都体现了“我希望语言2更像语言1”的感觉。但是Javascript真的很棒，如果没有一点不同的话。我发现大部分时间阅读都非常有用：“要使用任何元字符（如

！”#$%&'（）*+，./：；？@[\]^`{124;}

）作为名称的文字部分，必须使用两个反斜杠进行转义：

。“在这种情况下，这是一个用户错误。没有工具可以知道您实际打算做什么，以及您打算按字面意思使用

[]

。这是经验带来的。您使用的语言/库越多，您对它就越熟悉。$（“#element['+num+']）找不到对象，因为它将num视为查找属性。我希望在调试器中，您至少会收到一条警告，表明您试图对一个不存在的对象调用.clone（）函数。我在考虑C++中的空指针，即Sebug。我可以看到不停止处决的愿望，但我希望看到一个警告。示例来自一个更复杂的页面，其中ID类似于aaa[#][bbb][#][ccc]来表示具有多个属性的对象数组。比aaa、bbb、ccc更喜欢这个。。。。我可以检查每个选择器的使用情况，看看它是否返回了空对象/空数组/不管正确的方式是什么，但我希望调试器至少会发出警告，如果不这样做，并尝试使用空对象来代替。。。。或者，为了不惹恼那些经常想使用空对象编写代码的人，至少在调试器中有一个选项可以警告这种情况。@user1902689空对象很有用，尤其是当您执行

length

测试以检查元素是否存在时。如果0

length

，则不匹配，则DOM中没有此类元素。。。或者选择错误，匹配错误的内容。