一、Sources面板详解

sources源代码面板，有以下作用：

1.查看js、html、css代码

在这里可以查看当前页面所加载的html、js、css代码

2.程序执行断点

断点类型

普通断点

在sources面板中可以对js代码进行断点，例如在snippets代码片段栏新建以下代码：

function test1() {
    console.log('1');
    console.log('2');
}

function test2() {
    test1();
    console.log('3');
    console.log('4');
    console.log('5');
}

test2();

选择在第9行左侧打断点，并且点击右下角的执行，代码会执行到断点所在的上一行代码时暂停

可以看到在断点上一行的代码执行完成之后程序暂停在断点处。

条件断点

条件断点的作用就是在普通的断点上加上了条件判断，当满足条件时该断点才会生效，否则断点不生效，操作方法为：右键普通断点，选择edit breakpoint，之后可以添加条件判断，如图：

日志断点

日志断点用来记录某些变量的值到控制台，右键普通断点选择edit breakpoint，再选择logpoint

选择日志断点打印c的变量：

接着执行代码：
可以看到成功将c变量的值打印出来。

断点调试

当一段代码存在多个断点时，如图：

在执行时，点击右侧resume script exception图标会执行到断点处，再点击一次执行到下一个断点处，此时可以观察代码中的变量值，用来分析代码。

跳过下一个函数调用

在进行逐行调试时，有时会执行到函数，但是我们并不关心函数内部的执行逻辑，如果还是按照逐行调试，这时就会进入函数内部，所以跳过函数内部逻辑就需要使用step over next function call按钮实现。

如图上图当前已经执行到断点处，现在不想探究test1函数内部执行逻辑，点击两次跳过函数执行按钮，第一次执行到第10行，第二次直接执行到第11行，函数内部具体执行步骤跳过。

上图可以看到已经执行到第11行，跳过了函数内部具体逻辑。

进入下一个函数调用

与上面的跳过下一个函数相反，step into next function call按钮的作用是如果执行遇到函数，则会进入这个函数执行具体的代码逻辑。

跳出当前函数

作用是当我们调试时进入了一个函数的具体逻辑，此时想直接跳出当前函数，不想观察函数后续的执行步骤，可以使用step out of current function直接跳出当前函数。

单步调试

单步调试就是一步一步执行，遇到函数会进入函数。

3.调用堆栈（跟栈）

当运行一个函数时，如果想要知道哪里调用这个函数，就要使用到跟栈。

从调用堆栈中，我们可以知道这个断点或者函数是在哪里被调用，有详细的调用链。

4.代码注入

代码注入可以用来修改当前网站的页面逻辑，以百度首页控制台为例。

其中打印了这段文字，现在想要实现修改打印出来的这段文字，需要找到打印这段文字的js代码，再修改这段代码的逻辑。
详细步骤如下：

• 使用搜索栏搜索到打印这段文字的js代码

  • 

• 这里不能直接在文件中修改源代码，而是需要替换（overrides）覆盖当前文件中的代码。

  • 
  • 
  • 点击overrides选择一个文件来用来存放需要覆盖的js文件，并且点击允许同意访问权限。
  • 
  • 再勾选中允许本地覆盖
• 接着右键刚刚的代码区域，选择save for overrides（保存并覆盖），点击格式化按钮，并且定位到对应需要修改的位置修改文字，完成之后ctrl+s保存，再使用ctrl+f5进行刷新，启用本地文件。

• 观察最终效果：

  • 
  • 成功使用代码注入修改了代码逻辑。