前端的Debug调试

目录：
  1. alert、confirm；
  2. console
  3. element
  4. breakpoint
  5. network

  Debug，快速定位，，理顺逻辑，调试代码。看到后端使用Debug，总会露出羡慕的小眼神。于是手指轻跳，前端也有自己的 Debug。如 console.log，confirm，alert，Breakpoint 等，在此备忘。

  alert()，confirm()，虽然也可以起到调试的作用，但是它适合传达信息的场景就是有限的，因为它会使甚至关闭窗口这样的操作无效化。而且 alert 的样式也依赖于浏览器的默认样式，并且只能显示文本，不适合自定义。总的来说就是阻塞页面加载，降低网页的性能与质量。

  接下来的内容需要借助 Chrome，就先大致记录一下。浏览网页的时候，有以下两种方式打开菜单栏，打开之后如下图：
  1）Ctrl+shift+i ;
  2) F12;

 

 
  下面介绍一下常用的功能：Elements(要素)、Console(控制台)、Sources(起源)、Network(相互关系)；
Elements(要素)
  如下图，点击一下调试画面的箭头，再将鼠标放到需要查看浏览器页面标签位置，即可看到对应的标签详细信息，如 HTML、CSS 等，这个页面看到的信息也就是我们工具中写的代码信息；
 

 
Console（控制台）
  目前大多数前端都会使用 console.log 进行调试，如用console.log来进行输出一些变量的值，输出一段标记性提示。同时console还有其它的用处、技巧。首先console是可以分类输出的，效果如下图。为什么要分类输出呢，这样我们其实是可以通过chrome这个调试工具进行过滤等级，比如我们只想显示错误的输出信息，屏蔽掉其他的输出，我们可以选择Filter旁边的下拉框，来进行显示哪些调试级别的信息。
  console.log(‘文字信息’);
  console.info(‘提示信息’);
  console.warn(‘警告信息’);
  console.error(‘错误信息’);
 

 
sources（源码）（debug）
  先在 sources 画面打上断点（breakpoint），再点击页面查询按钮（这里在什么地方打断点，主要看我们是想调试什么部分，我们要先行预判，这里我们模拟查询报错，所以我们在查询的地方设置断点，点击画面的查询按钮），进入Debug模式：
下面这个画面就是前端debug中相对重要的部分：
1、
 -（三角形）debug执行键
 基本类似于后台debug的调试键；
 -（等号）
 暂停脚本执行。
2、
 -（半弧箭头）step 快捷键：F9
 单步执行 注意：遇到子函数会进去继续单步执行。
3、
 -（下箭头）step into 快捷键：F11
 单步执行，遇到子函数就进去继续单步执行；
 -（上箭头）step over 快捷键：F10
 单步执行，遇到子函数并不进去，将子函数执行完并将其作为一个单步；
 -（右箭头）step out 快捷键：Shift + F11
 直接跳出当前的函数，返回父级函数。
4、
 -（右粗箭头，点击一下多一个斜线，再次点击就取消了）
 禁用断点/启用断点
 -（圆形等号）
 暂停执行
5、
 Watch:
 在调试画面需要查询返回值或者参数详细信息的时候，可以选中相应的部分单击鼠标右键，再点击Add selected text to watches ,即可在这里看到我们选中部分的详细信息。
  我们前端应该经常用到这个调试技巧，它会让我们的前端水平极大的提升，可以直接调试一些框架代码。这样就能够研究透一些自己不理解的痛点。
 

 
Network（前后台交互）
  可以看到我们前后台交互信息是否正常，也就是我们前台的方法是否正常请求到后台，请求了后台的哪些方法，后台是否有做出响应。然后再判断后台对前台的请求处理结果是否正确，这里我们可以根据 Response，查看到后台响应过后的返回结果，并根据返回结果判断问题出现在前台还是后台。