firebug的一个有趣现象介绍-前端开发

下面是“firebug的一个有趣现象介绍”的完整攻略。

下面是“firebug的一个有趣现象介绍”的完整攻略。

什么是Firebug？

Firebug是一个开源的浏览器插件，可以用来在浏览网页时进行调试、编辑和监控HTML、CSS、Javascript等网页内容。下面以Chrome浏览器中的F12开发者工具演示说明。

Firebug的一个有趣现象介绍

在使用Firebug调试网页时，我们经常会遇到一个有趣的现象：在Console窗口中输入一个变量的名称，并按下回车后，会显示该变量的值。

var num = 123;
console.log(num); // 输出 123

但如果我们在代码运行时，将该变量删除或修改了，再在Console窗口中输入该变量的名称，按下回车后，Firebug却仍然会输出该变量原来的值。具体说明见下面两个示例：

示例1

<body>
  <p id="demo">Hello World!</p>

  <script>
    var myElement = document.getElementById("demo");
    console.log(myElement.innerHTML); // 输出 "Hello World!"
  </script>

  <button onclick="change()">Change Text</button>

  <script>
    function change() {
      myElement.innerHTML = "Hello Firebug!";
    }
  </script>
</body>

在上述代码中，我们先声明并初始化了一个名为myElement的变量，并在Console窗口中输出了该变量的值。此时网页上显示的文本是"Hello World!"。但是当我们点击"Change Text"按钮，将文本改为"Hello Firebug!"后，在Console窗口中再次输入myElement，按下回车，Firebug仍然会输出"Hello World!"。

示例2

<body>
  <p id="demo">Hello World!</p>

  <script>
    var myElement = document.getElementById("demo");
    console.log(myElement.innerHTML); // 输出 "Hello World!"
  </script>

  <button onclick="remove()">Remove Element</button>

  <script>
    function remove() {
      myElement.parentNode.removeChild(myElement);
    }
  </script>
</body>

在上述代码中，我们同样初始化了一个名为myElement的变量，并在Console窗口中输出了该变量的值。此时网页上显示的文本仍然是"Hello World!"。但是当我们点击"Remove Element"按钮，将该元素从网页中删除后，在Console窗口中再次输入myElement，按下回车，Firebug仍然会输出该元素的HTML内容-"Hello World!"。