Chrome debugger调试技巧

最新推荐文章于 2024-06-21 14:18:12 发布

半夏_2021

最新推荐文章于 2024-06-21 14:18:12 发布

阅读量7.2k

点赞数 6

分类专栏：浏览器文章标签： debugger Chrome调试技巧

本文链接：https://blog.csdn.net/fd2025/article/details/124409268

版权

浏览器专栏收录该内容

3 篇文章 0 订阅

订阅专栏

可以在代码里面写一句debugger，一旦运行到debugger就会自动卡在那里进入调试模式，使用这个有两个好处，一个是不用手动去展开文件找到对应的位置，因

为现在很多人都用第三方的打包工具，导致运行的代码和本地的代码行数不能保持一致，所以需要去搜索相应的代码，比较麻烦。另外一个好处是：当代码是一个

很大的循环的时候，并且在特定的情况下代码会出错，由于要循环好多次，所以有时候不可能在循环里面打个断点，然后不断地跳到下一个断点直到出现问题。所

以这时候怎么办呢？可以用条件结合debugger。

先看下面例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JS时间</title>
    <style></style>
  </head>

  <body>
    <div id="time"></div>
    <script type="text/javascript">
      function time() {
        var vWeek, vWeek_s, vDay;
        vWeek = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var date = new Date();
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        hours = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();
        vWeek_s = date.getDay();
        debugger;
        ('');
        document.getElementById('time').innerHTML =
          year +
          '年' +
          month +
          '月' +
          day +
          '日' +
          '\t' +
          hours +
          ':' +
          minutes +
          ':' +
          seconds +
          '\t' +
          vWeek[vWeek_s];
      }
      setInterval('time()', 1000);
    </script>
  </body>
</html>

执行后：可以看到整个界面进入调试

在这里插入图片描述

下面我们介绍一下 Souce 面板

在这里插入图片描述

1.中间代码展示面板详解

(1) 添加断点

代码行号所在的位置叫做行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个类似肩章的五边形图标(蓝色的)。

在这里插入图片描述

（2）添加条件断点

点击某一行，右键菜单，选择添加条件断点。

在这里插入图片描述

打断点的注意事项：

首先在浏览器页面按F12打开开发工具，点击Sources选项，默认显示的是Page标签。然后找到需要调试的源码文件。
如果是正常html页面，那么源码一般是在对应域名下面。如果是webpack处理的页面，并且开启了源码映射，源码就是在webpack://下面。可通过快捷键ctrl+ o打开搜索框输入文件名搜索源码。

只要找到源码，在脚本代码显示区域左边的数字上添加断点即可，之后只要代码运行到断点处，开发工具就会进入调试状态。
还有一种情况是:添加某一行断点，会跳转到另一个页面并命中某一行,这个页面的背景色是黄色且文件名是VM开头。上述情况，大部分都是因为浏览器显示的源码版本，跟真正的源码文件不一致，只需要刷新一下页面，保证显示的源码是最新的即可

2. 右侧断点调试按钮组详解

首先我们先介绍右侧功能按钮组的各个作用
在这里插入图片描述

半夏_2021

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
Chrome debugger调试技巧

可以在代码里面写一句debugger，一旦运行到debugger就会自动卡在那里进入调试模式，使用这个有两个好处，一个是不用手动去展开文件找到对应的位置，因为现在很多人都用第三方的打包工具，导致运行的代码和本地的代码行数不能保持一致，所以需要去搜索相应的代码，比较麻烦。另外一个好处是：当代码是一个很大的循环的时候，并且在特定的情况下代码会出错，由于要循环好多次，所以有时候不可能在循环里面打个断点，然后不断地跳到下一个断点直到出现问题。所以这时候怎么办呢？可以用条件结合debugger。
复制链接

扫一扫