学习笔记：关于前后端调试程序

DevTools是谷歌浏览器自带的开发者调试工具。打开方法有快捷键f12或Ctrl + Shift + I或在页面点右键选择检查。掌握网页的调试方法对于开发大有帮助。

如图Devtools共有9个面板

• Elements：在 Elements 面板中可以以 DOM 树的形式查看所有页面元素，同时也能对DOM和CSS进行所见即所得的编辑
• Console：一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell窗口来执行脚本以及与页面文档、DevTools等进行交互
• Sources：在Sources 面板中设置断点调试页面中的 JavaScript
• Network：在 Network 面板中可以查看请求和下载的资源文件以及耗时并优化加载性能
• Performance：在 Performance面板可以查看网页生命周期内发生的各种事件的详细信息。
• Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况
• Application：记录网页加载的所有资源，包括缓存，本地和会话存储，cookie ，应用程序缓存，图像，字体和样式表。
• Security：用于检测当面页面的安全性
• Audits：审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看 PageSpeed Insights来获得更多的页面加载建议。

debugger

前端

添加断点

在需要中断的程序前加上debugger语句

handleClick() {
  debugger;
 ...
}

然后在网页运行到断点前打开DevTools，进入Sources页面

Sources页面的左边是文件导航，中间是文件的具体内容，右边可以统称为调试面板。
中间的面板显示代码，代码左边的行号叫行号槽，点击行号槽也可以为相应行的代码打上断点，如下：

条件断点

右键一个没有添加断点的行号，选择 “Add conditional breakpoint”，输入你的条件，当条件满足时，断点才会生效。回车后，效果如下：

当我们在一个循环中打断点时，如果想看循环到某一次的信息，可以采用条件断点如下：

并且，条件断点也可以用console方法

黑盒脚本

右键行号槽的时候，有一个"Blackbox Script"的选项，即为黑盒脚本

黑盒脚本将一个脚本文件标记为 “Blackbox Script”，那么我们就永远不可能进入这个文件内部，不能访问内部的第三方库或框架的源码。

断点调试

功能按钮

从左到右功能依次为：

当程序中断在断点处时，点击去往下一个断点。
当程序中断在断点处时，长按上面的按钮出现，点击这个按钮可以在 0.5s 内忽略任何中断，当中断出现在循环内部时一般比较有用
执行下一条语句
当中断停留在一个函数调用处时，点击这个按钮会进入函数内部，而上面的按钮则会执行函数调用的下一句，不会进入函数内部
当中断停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句
在不取消断点标记的情况下，使得所有断点失效
当执行的脚本出现异常时会触发中断。

调试面板

Watch

当程序中断时，可以查看这个状态下的变量的值，但局限是只能一个一个查看，而 Watch 的好处是可以让我们同时查看多个变量。你可以通过 “+” 来添加变量，当添加的变量存在时会显示对应的值，不存在的话则会显示 “not availble”。需要注意的是，这里的变量不会随着代码的执行而发生改变，所以到了下一个状态时，你需要点击刷新按钮来获得关注的变量的新的值。

Breakpoints

这个面板会显示你所有的通过行号留下的断点。你可以右键管理某个或全部断点：

Event Listener Breakpoints

每个事件名称和事件类型前面都有个复选框，选中即指当页面中触发了所选的事件的话，就会触发中断。

Call Stack

显示了代码的执行路径。比如在 a() 中调用了 b()，b() 中调用了 c()，那么中断如果在 c() 内部的话，那么 Call Stack 面板会依次显示 c、b、a。

Scope

Scope 面板显示了你当前定义的所有属性的值，例子如上图。除了 Scope 面板，你还可以在左侧的代码区域，中断的旁边看到语句中包含的变量的值。除此以外，你还可以把鼠标放在变量上面，也显示对应变量的值。

console

显示信息

我们可以在代码中加入console语句来查看代码中属性的值，如

  for (let index = 0; index < 10; index++) {
    console.log(index)
  }

运行后在控制台打印出

或者直接在console面板输入表达式

提示可以分为四种：
console.log(‘hello’);
console.info(‘信息’);
console.error(‘错误’);
console.warn(‘警告’);

如果一次console.log的属性太多，可以嵌套一个大括号：

信息分组：

    console.group("第一组信息");
    console.log("第一组第一条");
    console.log("第一组第二条");
    console.groupEnd();
    console.group("第二组信息");
    console.log("第二组第一条");
    console.log("第二组第二条");
    console.groupEnd();

查看对象信息

可以用来查看DOM关联到的真实对象

console.dir();

优雅的打印对象信息

console.table({"one":1,"two":2,"three":3})

判断变量

let i=0;
console.assert(i);

显示函数的调用

function add(a,b){
    console.trace();
　　 return a+b;
}
　　var x = add3(1,1);
　　function add3(a,b){return add2(a,b);}
　　function add2(a,b){return add1(a,b);}
　　function add1(a,b){return add(a,b);}

记录时间

console.time("计时器一");
console.timeEnd("计时器一");

后端

• 运行程序时选择debug模式。

• 在行号后点击右键或双击添加断点。

• 可以直接在界面右上角的面板栏选择进入debug界面。

• 如果在java界面触发断点，会弹出以下提示，点击yes进入debug界面，点击no继续留在当前界面。

• 程序挂起时，Debug(调试)视图可以检查调用堆栈。
  
• 断点可以在标记栏中看到。也可以在 Breakpoints View（断点视图）中看到。可以Breakpoints中在选择断点是否可用。
  
• variables(变量)视图可以查看变量的值。
  

工具栏，从左到右功能依次为：

• 打开/屏蔽所有断点
• 继续执行至下一个断点，快捷键为F8。
• 暂停选定的线程。
• 打断整个进程。
• 终止与远程JVM的socket连接。
• 表示进入当前方法，快捷键为F5。
• 表示运行下一行代码，快捷键为F6。
• 表示退出当前方法，返回到调用层，快捷键为F7。
• 让程序回到当前方法的开头第一行重新开始执行。
• 在debug的时候想要忽略一些我们不关注的类时，可以开启Step Filters进行过滤。

使用workspace在线修复代码

在filesystem下选择文件目录或者直接拖拽，可以直接在DevTools中修改代码。DevTools 会将做出的修改同步到系统的文件中。对于快速修复文件很有帮助。

参考文章:https://blog.csdn.net/hello_sgw/article/details/79618080
https://www.cnblogs.com/zhubei/p/6699500.html
https://blog.csdn.net/u011781521/article/details/55000066
https://github.com/CompileYouth/front-end-study/blob/master/tool/devtools/Console.md