应用场景
我们平常写代码的时候,难免会因为的自己的疏忽,或者由于自己知识的不足而出现错误,那么出了错误呢,我们首先要进行的就是根据idea 进行的提示来找到错误点在哪,然后根据错误点在附近进行查找以及分析

打断点  是因为当代码量很多的时候,我们一时难以判断是哪里出了问题,此时就要利用断点来缩小范围,然后来进行准确的查找,断点的作用就是碰到了断点就会停下来

我认为打断点分为两种情况

第一种 : 错误在断点位置以前

这一种情况  ,我认为是最好的,因为直接就定位到了错误的位置,接下来进行调试分析就行了 !



第二种 : 错误在断点以后

这一种情况还要自己在利用往下执行来查找断点位置,然后才能进行调试分析



这时候我们就要利用到下图中的安按钮往下执行按钮来继续查找断点位置 .



平常我们的实际开发中 ,肯定不会只涉及到一个类 ,那是不知道多少个类 之间来回互相调用 例如我们书写的下面的内容



首先这是第一个工具类 ,我故意书写了几个相同重复的作用但是方法名不同的方法 ,其中SwaptwoInt1我故意写了一个错
 /**
 * @Author Zhang Shuai
 * @Date 2020/6/20 14:20
 * @Version 1.0
 */
public class Test01 {

        int a=10;
        int b=5;


        public  void SwaptwoInt(int a, int b){
        int temp= this.a;
        this.a = this.b;
        this.b =temp;
       // int c=1/0;
        //System.out.println(this.a);
        //System.out.println(this.b);
        }
        public  void SwaptwoInt1(int a, int b){
                int temp= this.a;
                this.a = this.b;
                this.b =temp;
                int c=1/0;
                //System.out.println(this.a);
                //System.out.println(this.b);
        }

        public  void SwaptwoInt2(int a, int b){
                int temp= this.a;
                this.a = this.b;
                this.b =temp;
                // int c=1/0;
                //System.out.println(this.a);
                //System.out.println(this.b);
        }
        public  void SwaptwoInt3(int a, int b){
                int temp= this.a;
                this.a = this.b;
                this.b =temp;
                // int c=1/0;
                //System.out.println(this.a);
                //System.out.println(this.b);
        }
    }

然后这是第二个类 , 对上面的那个类进行调用 , 我故意调用SwaptwoInt1 就是为了显示出来错误
/**
 * @Author Zhang Shuai
 * @Date 2020/6/20 14:26
 * @Version 1.0
 */


public class Test02 {
    public static void main(String[] args) {
        int a=100;
        int b=9999999;
        Test01 test01 = new Test01();
        test01.SwaptwoInt1(a,b);
        System.out.println(a);
        System.out.println(b);
    }
}

结果毫无疑问出错了, 我们可以看到有两行蓝色的带有下划线的东西, 上面描述的是Test01的位置 ,下面描述的Test02的位置 , 意思就是执行到Test02这个位置的时候报错 ,但一定就是Test02中的原因 ,因为调用了Test01 , 很有可能是test01标记的那个位置的错 ,


重中之重的事情
你如果只在test02里打断点 ,他只会在02中一步一步运行 , 他是不会跳到01中去的 , 所以你还要在01中SwaptwoInt1也打一个断点 ,
这里一定不要迷 , 心想01里边这么多方法我们我该在哪里打断点 ,你调用那个方法就在哪里打断点 ,其余写成屎你都不要问 , 因为你走的路线就是 02到01 到SwaptwoInt1  其余的方法千万不要问, 用到了再说
这样就能看到02调用01, 然后01中运行的情况了 , 别看01这么多方法 , 因为只调用了SwaptwoInt1这一个方法 , 所以其余方法中就是有天大的错误也不影响你 , 因为只要实现目前这一个功能就行

VSCode打断点
1、安装插件 `Debugger for Chrome`
2、运行→启动调试 （或 F5 快捷键）
3、选择环境 `Chrome`
4、此时会出现 `launch.json` 配置文件
5、鼠标单击行数左侧打断点
6、全局安装 `http-server`
7、运行`http-server`
8、再次 运行→启动调试 （或 F5 快捷键）即可拦截断点处


以 VSCode IDE 、js代码、谷歌浏览器 为例。

官方教程

1、安装插件 Debugger for Chrome


2、运行→启动调试 （或 F5 快捷键）


3、选择环境 Chrome
示意图1：



或示意图2：



4、此时会出现 launch.json 配置文件


配置文件的内容如下：
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}


5、鼠标单击行数左侧打断点


6、全局安装 http-server
安装命令：
npm i http-server -g



7、运行http-server


8、再次 运行→启动调试 （或 F5 快捷键）即可拦截断点处

Charles打断点
打断点要做什么
请求到接口数据并打断点
设置断点
修改返回值并展示
取消断点

打断点要做什么
对于测试来说，Charles的作用就是查看我们调用接口的时候接口给我们返回的数据，以此我们来判断bug是出在前端还是后台，一个好的测试，要学会用数据说话，拿出有力的证据来证明这是一个bug，同时也帮助开发人员定位问题所在。还有另外一个重要的常用功能就是打断点（Breakpoints），拦截接口返回数据，修改，并展示。这种场景常用在一些边界值或者现实并不好模拟的情况，比如说超大数据，或者一些内部权限问题不能展示的信息。
那我们进入正题。
请求到接口数据并打断点
先请求到接口数据，在左侧请求的url右击打断点


此时这个url已经被记录下来啦
设置断点
点击Charles工具中Proxy—>Breakpoints Settings,就会弹出断点设置窗口


双击你要修改的url返回弹出设置框，一般情况下你要修改的是response信息，所以只勾选上response，把Query填成*，然后 一路OK


修改返回值并展示
刷新页面（重新调用该接口），就会自动跳转到断点修改页面啦

在这里修改你需要的字段，改好以后点击  Execute ，你修改的数据马上就展示在页面上啦
取消断点
点击Charles工具中Proxy—>Breakpoints Settings,弹出断点设置窗口，在该窗口选中你要取消的断点，remove就好啦！

如何打断点
1.	打开要进行调试的程序，找到想要程序运行到此处停下调试的地方。

2.	设置断点
方法一：可以在想要调试停住的那一行最左侧的单击鼠标右键 -> Toggle Breakpoint，断点就打好了





方法二：双击行左侧即可，与方法一同样的效果
3.	取消断点
方法一：与打断点方法一相同，在想要调试停住的那一行最左侧的单击鼠标右键 -> Toggle Breakpoint，可以看到成功取消了断点




方法二:与打断点方法二相同，双击行左侧即可