首页 > 代码库 > chrome断点调试

chrome断点调试

2024-08-25 07:08:17   233人阅读

chrome断点调试

　　　在编写JavaScript代码时，如果出现了bug，就要不断的去找错误，如果console控制台中提示还好说，可是没有提示恐怕就要费一番周折了。但是有了chrome这个浏览器，我们通过开发者工具就可以很好的实现调试了。

　　　实例代码如下：

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script>        for(var i=0;i<10;i++){            (function(){                console.log(i+5);                })();        }    </script></body></html>
View Code

 

　　　首先，我们先要认识其中的主要功能，如下图：

技术分享

我们看到浏览器页面共分为了四个模块：

  1. 第一个实际上是显示页面，这里因为我打了断点，所以显示为暗色。
  2. 右边三个模块便是console控制台中的了。第一个是sources资源，通过这个模块，我们可以找到任何我们需要的页面资源。
  3. 控制台中的第二个页面即为显示源码的页面，这里我们可以在代码的左边打断点，图中：蓝色代码所在行表示目前代码的执行阶段，即目前代码在第9句执行；深蓝色代表将要执行但还未执行的代码。而浅蓝色代表已经执行过了的代码。因此，目前执行的是var i;还没有复制为0；所以我们把鼠标停留在i=0中的i处，则会显示undefined。技术分享
  4. 最右边的模块便是调试的重点模块了。最上面的图片如图所示：技术分享
    1. 第一个图标是：resume script excution。会将断点执行过程重启（resume）。
    2. 第二个图表是：step over next function ，即如果遇到一个函数，它会直接执行完这个函数，而是直接执行跳过进入下一步，不显示细节。
    3. 第三个图表是：step into next function ，即如果遇到一个函数，它不会一下运行完这个函数，而是进入函数内部，一步一步地执行，这样，我们可以更清楚地观察执行过程。

　　　　　  4.第四个图表示：step out of current function,即如果利用 step into已经进入了函数内部，我们可以通过此功能来一下执行完函数内部剩下的代码。

　　

　　

一些技巧：

　　1.我们可以将鼠标放在函数上，可以看它的作用域链--非常好。

chrome断点调试


联系
我们