如何在浏览器中调试JS代码，debug

最新推荐文章于 2025-02-21 20:16:44 发布

萌新小宇

最新推荐文章于 2025-02-21 20:16:44 发布

阅读量7.8k

点赞数 10

文章标签： html javascript html5 debug

本文链接：https://blog.csdn.net/qq_45839155/article/details/120493992

版权

本文介绍了如何在浏览器中调试JavaScript代码，通过创建HTML文件并插入JS代码，使用谷歌浏览器F12开发者工具设置断点，观察变量值来理解代码执行过程。此外，还提到了使用`debugger`语句和`console.log()`辅助调试的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在浏览器中调试JS代码，debug

首先需要一段js代码，我将它放进html文件里面：
创建一个html文件，<script>标签里面放入需要调试的js代码，html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>try</title>
</head>
<body>
</body>
<script>
//以下为一个要调试的代码段，是力扣63. 不同路径 II 的答案，此为示例
    var obstacleGrid = [[0, 0, 0], [0, 1, 0], [0, 0, 0]];

    var uniquePathsWithObstacles = function (obstacleGrid) {
        var m = obstacleGrid.length;
        var n = obstacleGrid[0].length;
        //dp[i][j] = dp[i-1][j]+dp[i][j-1];
        var dp = new Array(m);
        for (var i = 0; i < m; i++) {
            dp[i] = new Array(n);
        }

        for (var i = 0; i < m; i++) {
            for (var j = 0; j < n; j++) {
                dp[i][j] = 0;
            }
        }


        for (var i = 0; i < m && obstacleGrid[i][0] === 0; i++) {
            dp[i][0] = 1;
        }
        for (var j = 0; j < n && obstacleGrid[0][j] === 0; j++) {
            dp[0][j] = 1;
        }


        for (var i = 1; i < m; i++) {
            for (var j = 1; j < n; j++) {
                if (obstacleGrid[i][j] === 1) {
                    dp[i][j] = 0;
                }
                else if (obstacleGrid[i][j] === 0) {
                    dp[i][j] = dp[i - 1][j] + dp[i][j - 1];

                }
            }
        }
        return dp[m - 1][n - 1];
    };
    uniquePathsWithObstacles(obstacleGrid);
</script>

</html>

我们在浏览器打开这个html文件，推荐谷歌浏览器，在浏览器页面中按下F12键，就能看见下图所示的窗口：
一个图
看见图中红色箭头指向的Sources,点它。

如图操作，点击open file，打开你写代码的那个文件，然后鼠标点击代码行前面的数字处就可以设置断点了（不知道断点是什么的请自行搜索）。
在这里插入图片描述

设置好断点之后就按下F5键，就能运行程序了，如图红色框框（中间和右面），可以看见各部分变量的值。
在这里插入图片描述
然后代码运行到第一个断点处停止，并在右面和界面里显示变量数值，想要继续运行，点击右上方的蓝色小箭头，如图：

然后就是自己看自己的代码啦。
另外除了这种方式也可以用js 的debugger、console.log（）来进行调试辅助，具体的可以自己去搜啦。
over~