当然是用chrome啦，其他的 不会！！
1. Debugger 关键字
简单粗暴，见效快。相比传统的console.log，debugger可以产生断点的效果，非常方便
get title() {
const s = ''
debugger
return s
}
render() {
return (
<div>
{this.title}
</div>
)
}
在代码里加上debugger之后，正常启动你的项目就好了。Chrome浏览器会自动解析并产生断点的效果
Screen Shot 2019-06-14 at 1.48.20 PM.png
2. vs code - debugger for chrome
集成式的调试体验，多了一丢丢的小步骤。这里只讲vs code，其他的IDE 不会！！
安装debugger for chrome 插件
image
找到小虫子图标
image
添加配置
image
.vscode 文件夹会被创建，里面有一个launch.json。 配置如下
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
type：写chrome，如果报错，检查一下插件是否成功安装了
request：选lanuch，别的 不会！！
Url：根据实际情况修改端口（正常跑项目时的端口）
webRoot：根据实际情况修改， 一般跟你的package.json所在的目录相同
配置完成！
按以下步骤，开始你的debug
正常启动的你的项目，比如npm start （别走神，这一步是必要的）
在代码里来个断点
image
好的，高潮就来了，请轻轻的触碰一下开始按钮
image
vscode 会新起一个chrome，并且你的断点已经开始生效了
image
git code: https://github.com/piscium2010/debugucode.git
无耻硬广
designare-table: 企业级react table组件, IE11 下性能完胜 Ant Design
Form 表单联级校验 适配任意UI库：Antd，Office UI fabric， Material ui...
