在VSCode中的jsx文件上添加断点 [英] Adding Breakpoints on jsx files in VSCode

问题描述

我已经设置了一个框架项目，用于与web-dev-server和热重新加载进行反应。我还创建了一个dev-server.js文件来运行所有这个配置与节点，以便我可以从VSCode启动一个调试会话像这样：
我有一些代码位于这个repo： Learn-React
当我运行命令时，一切都可以正常运行

 > node dev-server 
  

I也在vscode中创建了一个如下所示的发布：

  {
version：0.1.0 
 //配置列表添加新配置或编辑现有配置。 
配置：[
 {
name：启动server.js，
type：node，
program server.js，
cwd：。，
runtimeExecutable：null，
runtimeArgs：[--nolazy]，
env ：{
NODE_ENV：development
}，
sourceMaps：true，
outDir：public
} 
] 
} 
  

我想在一个jsx文件上的VSCode中添加断点，以便我可以调试VSCode。它在工作，当我从命令行添加一个调试器;代码中的表达式。它在chrome dev工具中的断点上停止

问题：我如何向jsx文件添加断点并在VSCode内调试

解决方案

目前无法从vscode内部调试webpack-dev-server捆绑的jsx。使用chrome调试器可能是可能的，但这并不适用于当前的调试器版本，因为webpack-dev-server将捆绑的js文件保留在内存中，而调试器正在寻找磁盘上的文件。

但好消息是webpack-dev-server将很快被vscode chrome调试器支持： https://github.com/Microsoft/vscode-chrome-debug/issues/40

---

将chrome调试器与webpack结合使用，您可以在tasks.json中创建webpack任务，并在launch.json中设置preLaunchTask属性

  {
version：0.2.0，
configured：[
 {
name：Debug，
type：chrome，
request：launch，
url：http：// localhost：3000，
webRoot：。 / src，
preLaunc hTask：webpack dev，
sourceMaps：true 
} 
] 
} 
  

tasks.json将如下所示：

  {
 ：0.1.0，
command：node，
isShellCommand：true，
echoCommand：true，
suppressTaskName 
tasks：[
 {
args：[
server.js
]，
taskName：webpack dev 
}，
 {
args：[
$ {workspaceRoot} \\\\
ode_modules\\webpack\\\\\webpack。 js，
--config，
$ {workspaceRoot} \\webpack.production.config.js，
--progress，
 --profile，
--colors
]，
taskName：webpack dist，
isBuildCommand ：true 
} 
] 
} 
  

---

更新2015-12-07

现在可以使用webpack-dev-服务器和vscode-chrome-debugger。 .jsx文件支持将在以后的版本 https://github.com/ Microsoft / vscode-chrome-debug / issues / 62

---

更新2015-12-09

可以在这里找到一个用于vscode的简单反应热样本： https://github.com/skolmer/react-hot-boilerplate-vscode

---

更新2016-04-25

更新样板工程到React Hot Loader 3.0

I have setup a skeleton project for react with web-dev-server and hot reload. I have also created a dev-server.js file to run all this config with node so that I am able to start a debug session from VSCode like so : I have some code located in this repo : Learn-React everything works fine when I run the command

>node dev-server

I also created a launch in vscode that looks like this:

 {
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.
    "configurations": [
        {
            "name": "Launch server.js",
            "type": "node",
            "program": "server.js",
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArgs": ["--nolazy"],
            "env": {
                "NODE_ENV": "development"
            },
            "sourceMaps": true,
            "outDir": "public"
        }
    ]
}

I would like to add a breakpoint in VSCode on a jsx file so that I could debug inside VSCode. it's working when I start from command line an add a "debugger;" expression in the code. it stops on breakpoint in chrome dev tool

Question : How could I add a breakpoint to jsx files and debug inside VSCode

解决方案

It is currently not possible to debug jsx that is bundled by webpack-dev-server from inside vscode. It could be possible with chrome debugger but this doesn't work with the current debugger version because webpack-dev-server is keeping the bundled js files in memory while the debugger is looking for the files on disk.

but the good news is webpack-dev-server will soon be supported by vscode chrome debugger: https://github.com/Microsoft/vscode-chrome-debug/issues/40

---

to use chrome debugger in combination with webpack you can create webpack tasks in tasks.json and set the preLaunchTask property in launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
                "name": "Debug",
                "type": "chrome",
                "request": "launch",
                "url": "http://localhost:3000",
                "webRoot": "./src",
                "preLaunchTask": "webpack dev",
                "sourceMaps": true
            }
    ]
}

tasks.json will look like this:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "echoCommand": true,
    "suppressTaskName": true,
    "tasks": [
        {
            "args": [
                "server.js" 
            ],
            "taskName": "webpack dev"
        },
        {
            "args": [
                "${workspaceRoot}\\node_modules\\webpack\\bin\\webpack.js",
                "--config",
                "${workspaceRoot}\\webpack.production.config.js",
                "--progress",
                "--profile",
                "--colors"
            ],
            "taskName": "webpack dist",
            "isBuildCommand": true
        }
    ]
}

---

UPDATE 2015-12-07

It is now possible to debug .js files with webpack-dev-server and vscode-chrome-debugger. .jsx file support will be added in a future release https://github.com/Microsoft/vscode-chrome-debug/issues/62

---

UPDATE 2015-12-09

A simple react hot boilerplate for vscode can be found here: https://github.com/skolmer/react-hot-boilerplate-vscode

---

UPDATE 2016-04-25

Updated boilerplate project to React Hot Loader 3.0

这篇关于在VSCode中的jsx文件上添加断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！