前端代码调试的两种方式

当然是用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

1. 正常启动的你的项目，比如npm start （别走神，这一步是必要的）

2. 在代码里来个断点

image

好的，高潮就来了，请轻轻的触碰一下开始按钮

image

vscode 会新起一个chrome，并且你的断点已经开始生效了

image

git code: https://github.com/piscium2010/debugucode.git

无耻硬广

designare-table: 企业级react table组件, IE11 下性能完胜 Ant Design

迅速搭建React源码测试环境

Form 表单联级校验 适配任意UI库：Antd，Office UI fabric， Material ui...

React Proptypes 转 React Typescript 工具

React 轻量级前端控件实例 - 打造你自己的前端控件