[chrome devtools]Sources面板

Source面板左侧部分内容：

下面解释每一项：

• Page：显示当前页面所有已加载的资源
  
• Filesystem：将本地代码拖进来，作为一个workspace，可以直接在这里面编辑代码，然后页面就可以直接看到效果，就不用去IDE编辑了，他会直接修改源文件
  
  
• Snippets：可以自己通过这个创建js文件，编写js直接运行
• override：简单来说就是将一个js或者html保存在本地，然后你可以修改这个文件，刷新页面时，会用你本地的这个文件，而不在去请求原始的文件了。下面详细介绍下：
  
  
  

Sources面板右侧跟断点相关内容：

官网中讲述，devtools将断点分为以下几种：

下面就介绍在devtools的Sources面板中如何使用这几种断点

• Line-of-code breakpoints
  就是普通的断点，如下两种都可以理解为是这种断点，设置后运行到这就会暂停
  
• Conditional line-of-code breakpoints
  条件断点，就是只有满足设定的条件后，才会在断电上停住。条件断点一般是黄色箭头如下
  
  如何设置这种断点？如下：
  
• Log line-of-code breakpoints
  日志断点，就是在不暂停执行并且不使用console.log的情况下，在某个位置打印一个自定义的log，这种断点一般是玫瑰色箭头如下
  
  如何设置这种断点？
  
• DOM change breakpoints
  在dom也就是html元素上打断点，当这个元素改变时，断点就会停在改动这个元素的代码上
  
  例子：通过add按钮向ul中添加li，我想知道是哪句代码实现向ul中插入li的，所以我就需要在li上层的某个元素上打断点。
  
  
  
• XHR/fetch breakpoints
  
  当通过XHR方式发送一个请求时，这个请求的url包含了 你在XHR/fetch断点上设置的值，那么断点就会停在这个请求的发送send方法上
  
  下面以百度为例，来看一下如何设置这种断点:
  
  
• Event listener breakpoints
  选择一个事件，事件触发时，断点就会停在到触发这个事件对应的代码处
  
• Exception breakpoints
  想看是哪里发生了异常时，就可以设置一个这种断点，当发生异常时断点就会进入到发生问题的代码处
  
  如何设置？
  
  
• Function breakpoints
  当想要方法被调用时，断点停在被调用方法的开始处时，就可以使用这种断点
  
  如何设置？