浏览器调试基础
以下调试说明基于Chrome浏览器
开发者控制台
通过option+command+c启动调试控制台控制台。（Windows F12）
浏览器控制台选项
从左到右依次是：
- 审查元素
- 手机模式
- 页面DOM信息查看
一般用来看页面DOM和调样式 - 输出控制台
查看输出和向页面输入简单的JS命令 - 源码文件
用来检索源码和进行断点调试 - 网络请求
查看页面资源加载和网络数据请求，控制页面缓存 - 页面显示帧分析
分析页面首屏加载 - 内存分析
- 浏览器存储相关
查看localStorage、cookie等浏览器存储
...
界面调试
浏览器的界面调试一般是审查元素，然后在Elements里查看相关的信息。
Styles，查看页面元素的样式，并且可以实时修改查看样式效果。
Computed，查看当前元素有效的样式，并查找到是那里赋予的样式。
JS代码调试
打印调试
所有的console都可以从Console Tab里看到，Console Tab也会显示页面的警告以及错误信息。
断点调试
打开Sources，在第二行第一个选项Page里可以找到你们当前页面的文件，也可以通过Command+P查找源码文件，在相应的行点击会进行断点。
断点控制器
第一排前两个按钮分别为：恢复断点和步进。
第一排以下分别为：
- Watch 变量监控（可以添加和刷新变量）
- Call Stack（调用栈查看）
- Scope（变量查看）
- Breakpoints（断点控制）
也可以修改文件代码进行调试，但是不会保存到文件中
测试代码编写
可以在Sources的选项卡Snippets新建一个JS文件，右下角可以点击运行，在Console中可以查看脚本输出
传送门
前端chrome浏览器调试总结
Chrome调试
火焰图--阮一峰
React调试
浏览器调试的方式都可以用到React调试上，但是因为React是编译过的，所以在Elements里面看到的Dom结构会比较乱一些，facebook做了一个chrome插件React Develop Tools用作React调试，提供了额外的一些调试能力。
在Chrome Store下载React Develop Tools或者使用离线的ctr之后，会在浏览器右侧有一个React调试插件检测当前页面是否为React编写的页面，并且在开发者调试上提供了额外的React Tab，如下
React Develop Tools
在上面这个界面中，可以在Elements里搜索写好的对应组件，右侧可以查看Props和State，以及该组件的style。也可以通过右侧的设置，开启更新高亮和搜索高亮。
Setting
