alert调试
阻碍后面的代码执行，点击确定后继续执行后面的代码
console调试
console.log
最常用的打印函数
console.error
打印一条错误信息，和throw不一样，不阻碍后面代码的运行
console.warn
打印一条警告信息
console.dir
打印指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。
在实际操作中，比如要打印一个dom，并查看dom的具体属性，可以使用该方法。
- console.log和console.dir区别：
console.table
将数据以表格的形式显示。
console.count
输出 count() 被调用的次数。
console.trace
输出一个堆栈跟踪。
console.time，console.timeEnd
启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用console.timeEnd()时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
Debugger
在代码中执行debugger后，代码运行到这里时，会进入断点，效果和在控制台的Sources中打断点的效果一样，详情看后文
二分注释代码法
亲测好用，无数的bug定位都靠他。虽然是一个听起来没有技术含量的方法，但是能帮助我们找到问题的方法就是好方法。
chrome控制台详解
chrome浏览器是开发人员使用最广泛的浏览器，在进入控制台后，便可以开始调试页面的各个场景。
Elements
Elements中有当前页面渲染的所有dom-tree和对应的css信息。
锁定State
如果要查看某个元素在hover，focus状态下的样式，可以在该元素下右键选择Force state，然后就可以选择要进入的状态
在右边样式菜单的Styles栏右上角也可以打开关闭这个状态选择
如上图，:hov可以锁定当前元素的状态，.cls可以快速给当前元素增加className
DOM断点
断点经常出现在js调试中，其实dom中也可以打断点，右键某元素后，选择Break on
有三种模式，自上而下分别是 子节点变化时触发，自身属性变化时触发，节点删除时触发。
当设置了响应断点后，当dom发生与之匹配的变化后，回调到引起dom变化的位置：
Console
打印出js中的输出值，以及配合Sources的断点来进行实时打印属性
Source
Source有必要详细说明一下。毕竟这是调试js打断点最常用的一个工具。
搜索代码位置
由于静态资源打包后分在不同的worker或者服务器内，比如：
要找到我们要调试的js就是第一步。可以在top上邮件，选择Search in all files，然后粘贴一行代码，便可以在全文件中检索：
单击后可以进入该文件的详情，并定位到搜索的代码这一行，这时候便可以开始断点调试了
断点调试
- 单行断点
- 在要打断点的那一行左侧点击行号，便可以将该行打断点
- 在断点调试界面可以看到这几个按钮，来看下这几个按钮的用法
- 运行到下一个断点处
该按钮将直接跳过中间的所有代码，直接运行到下一个断点处
- step over next function call
该按钮将逐行调试，意味按顺序执行下一行代码
但是要注意一点，这个按钮不会进入函数内部，也就是说假如下一行是调用了一个function，将直接返回该function的调用结果，而function内部的代码将不会逐步断点进行
- step into next function call
进入下个函数体内，逐行调试
- step out of current function
在函数体内已经调试了我们想要调试的部分，这个时候我们要跳出该函数，则可以使用该按钮
- step
真丶逐行调试，按照程序运行的顺序，逐行调试
- deactivate breakpoints
所有断点暂时失效，不再执行任何断点调试，再次点击后激活所有断点
- pause on exception
点开该开关后，浏览器捕获到异常后，会自动暂停，并定位到该行
- 条件断点
在代码中，可能我们要在满足某些条件下，再执行断点调试，比如在一个for循环中，需要在某次循环进行调试，可以通过设置条件断点来满足
在某一行的行号右键，选择Add conditional breakpoint，然后输入我们的条件，回车后便可以生效
- xhr/fetch断点
在项目中，如果要看一个请求是何时发起的。可以使用该断点
输入筛选条件，比如url包含query，那么满足所有条件的请求在发起的时候，都会进入断点调试状态
- Call Stack调用栈
当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列，Scope Variables列表可以查看此时局部变量和全局变量的值。
如果想从新从某个调用方法出执行，可以右键Restart Frame， 断点就会跳到此处开头重新执行，Scope 中的变量值也会依据代码从新更改，这样就可以回退来从新调试，错过的调试也可以回过头来反复查看，而不用刷新页面重新执行
- 设置三方资源黑名单
调试时，如果想忽略某些脚本，例如可信的第三方库脚本，确定问题与其无关时，可以为其设置黑名单，在逐步执行代码时，就不会执行到该脚本的函数。
设置脚本黑名单的三种方式：
- 在编辑面板打开文件，右击，选择“add script to ignore list”
- 在调用栈面板，右击脚本中的函数，选择“add script to ignore list”
- 打开“Setting”，选择“Igonre List”Tab，点击“Add pattern”，输入脚本名或一个正则，这种方式支持为多个脚本设置黑名单
- watch
调试时，如果要监听某个参数的变化过程，可以点击watch中的加号按钮，设置你要监控的参数名，然后可以看到它从初始化一直到当前断点时的变化过程
Performance
使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。本文将详细介绍如何使用performance面板解决性能瓶颈
录制屏幕
点击下方这个录制按钮开始录制屏幕。接下来的一系列操作都将被浏览器捕获并分析，点击停止按钮后，显示录制结果。
录制按钮旁边的是刷新页面并记录页面加载时的一系列活动所占用的时间
分析结果
- FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
- CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型
- NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。
- 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）
- 使用鼠标滚轮可以放大显示一部分记录，以便简化分析。
查看文档解析
浏览器开始按照 HTML 标准对 index.html 进行解析，在主线程中将接收到的文本字符串解析为 DOM 。我们可以注意到，HTML 的解析过程并不是一气呵成，这是因为 HTML 通常还包括了其他外部资源，如图片、CSS、JS 等。这些文件需要通过网络请求或缓存来获取。其中，当 HTML 解析器解析到
定位代码
在下方main区域，可以看到上方fps红块的具体原因，下方黄色的方框代表着每个具体的task，要格外注意右上角有红色箭头的任务，这代表着该任务耗时过大，已经严重影响了性能。在黄色外框下方的是具体的function，点击后能定位到具体哪个fuction，哪一行需要做优化
React
如果调试react项目，强烈推荐安装react developer tool 插件，可以在控制台看到所有的组件，以及组件内的props和state的情况
