JavaScript基础知识-使用Firefox进行代码的调试(Debug)-阿里云开发者社区

JavaScript基础知识-使用Firefox进行代码的调试(Debug)

2024-09-03 119 发布于北京

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 关于如何使用Firefox浏览器进行JavaScript代码调试的基础知识介绍。

作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.JavaScript源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Debug</title>

    <SCRIPT type="text/javascript">

        alert("name = "+ my_name + ", age = " +age);

        var my_name = "Jason Yin";
        var age = 18;

        address = "北京";

        function sayHello(name,age){
            alert("I'm %s, and I'm %d years old.",name,age);
        }

        alert("name = "+ my_name + ", age = " +age);

    </SCRIPT>
</head>
<body>

</body>
</html>

        
          
        
        
        
          
          AI 代码解读

二.Firefox浏览器中添加断点

1>.为代码添加断点的方式

　　断点的作用:
　　　　顾名思义，断点指的是代码执行过程中可以断开的点，意思是代码执行过程中，当代码要执行到指定断点时会停止执行，而是将后续的执行过程交由程序员来控制。  
　　　　断点的作用主要是程序员用来做代码调试的一种手段。  
　　Firefox浏览器添加断点的三种方式:  
　　　　(1)直接在行号前单机鼠标(左键)即可完成断点的添加(我推荐使用这种方式，因为它操作起来是最简单的);  
　　　　(2)直接在行号前右击鼠标，如下图所示，选择"添加断点"即可;  
　　　　(3)使用快捷键的方式添加断点，这无需鼠标移动到指定的行号，我们可以单击鼠标在代码位置，这样光标就会移动到具体的位置，使用"Ctrl + B"可以在光标所在的行前添加断点;

        
          
        
        
        
          
          AI 代码解读

2>.按照上面的方式为调试的代码添加多个断点，如下图所示

三.添加监视器表达式

1>.添加"监视器表达式"方法

　　监视器表达式的作用:  
　　　　主要帮助程序员用来监视指定的标识符。当然，我们不用监视器表达式也可以实现对指定标识符的监控，这一切都是为了方便。  

　　添加监视器表达式的方法:  
　　　　(1)鼠标左键双击选择指定的标识符;  
　　　　(2)选择指定标识符后，右击鼠标，选择"添加监视器表达式"，如下图所示

        
          
        
        
        
          
          AI 代码解读

2>.我们可以添加多个监视器表达式，如下图所示

3>.移除已添加的"监视器表达式"

四.重新刷新页面开始调试

1>.观察浏览器的"范围"

　　如下图所示，由于变量"my_name"和"age"使用了var关键字进行定义的，说明该标识符会被生命提前，当然使用function关键字定义的函数这里也得到了声明提前。

　　关于变量和函数的声明提前，在我以前的笔记已经分享过啦，这里就不再赘述了，感兴趣的小伙伴可以参考我以前的笔记。

　　博主推荐阅读:
　　　　https://www.cnblogs.com/yinzhengjie/p/14022267.html

        
          
        
        
        
          
          AI 代码解读