使用 Typescript、React 和 webpack 时如何设置 vscode 进行调试？
Sea*_*ene 5 javascript typescript reactjs webpack visual-studio-code
我按照从打字稿网站的官方教程，并成功设立的工作Typescript+ React+webpack应用程序。但是我设置的断点在使用vscode调试时不起作用。这是我的代码的结构。
.
??? dist
??? index.html
??? node_modules
??? package.json
??? src
? ??? components
? ? ??? Hello.tsx
? ??? index.tsx
??? tsconfig.json
??? webpack.config.js
webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
配置文件
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
包.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Searene <mycityofsky@gmail.com> (https://searene.github.io)",
"license": "ISC",
"dependencies": {
"@types/react": "^15.0.31",
"@types/react-dom": "^15.5.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"awesome-typescript-loader": "^3.1.3",
"source-map-loader": "^0.2.1",
"typescript": "^2.3.4"
}
}
你好.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
索引.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
console.log("the breakpoint is put here");
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
vscode中使用的launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}",
"runtimeExecutable": "/usr/bin/google-chrome-stable"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
我安装了扩展程序：VS Code - Debugger for Chrome。然后运行以下命令。
webpack
目录下生成两个文件dist。
dist
??? bundle.js
??? bundle.js.map
是的，我有一个map文件。然后我在根目录中设置了一个服务器，它监听http://localhost:3000. 我可以看到我的应用程序运行正常，没有任何错误或警告。
然后我在启用调试的情况下启动了 chrome
google-chrome-stable --remote-debugging-port=9222
然后在 vscode 中，我在index.tsx.
console.log("the breakpoint is put here");
并按下F5开始调试。
可以看到日志打印成功了DEBUG CONSOLE，但是没有停在断点处，一直在运行。
我该怎么做才能使断点在 vscode 中工作？
| 归档时间： |
|
| 查看次数： |
1526 次 |
| 最近记录： |