【VSCode debugger】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

用 VSCode 调试 React 代码

用 VSCode debugger 来调试，效率又高、体验又爽。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、VSCode debugger ?

示例：可以用来调试js代码，比如react的代码。

二、使用步骤

1.我用 create-react-app 创建了一个 my-project项目

代码如下（示例）：

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

2.启动开发服务器

如下（示例）：

PS D:\react\my-project> npm run start

Compiled successfully!

You can now view my-project in the browser.      

  Local:            http://localhost:3000
  On Your Network:  http://172.28.1.97:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

URL：http://localhost:3000

---

3.浏览器显示的界面

4.如何用 VSCode 调试它呢?

在根目录下添加一个 .vscode/launch.json 的配置文件

{
    "configurations": [
        {
        "name":"Launch Chrome",
        "request":"launch",
        "type":"chrome",
        "url":"http://localhost:3000",
        "webRoot":"${workspaceFolder}"
        }
    ]
}

创建了一个调试配置，类型是 chrome，并指定调试的 url 是开发服务器的地址

5.打上断点

6.运行debug

7.查看调试的程序

断点起效，调用栈、当前环境的变量等都有

释放断点，继续往下走。点击的时候也能拿到对应的事件对象。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了VSCode debugger的使用，用 VSCode 来调试React 代码之后，调试业务代码或者看源码的体验都变的很爽。