使用 Chrome 调试 React TypeScript .tsx 文件 - Webpack
Posted
技术标签:
【中文标题】使用 Chrome 调试 React TypeScript .tsx 文件 - Webpack【英文标题】：Using Chrome to debug React TypeScript .tsx file - Webpack 【发布时间】：2017-09-23 10:42:27 【问题描述】：我使用 webpack 来捆绑我的 js 文件，所以通常我只会在 Chrome 的源代码下看到一个大的捆绑文件。但是，如果我将debugger; 添加到我的.tsx 文件中，我可以看到一个文件就好了。我的问题是我是否可以让 webpack 在 Chrome 源中输出我的所有文件，以便我可以在那里浏览它们，如果我不想让调试器停止，只需单击一行？
在下面的屏幕截图中，我想要Scripts/src 的文件夹，然后是我的所有文件。
示例代码：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>App</title>
</head>
<body>
<div id="app"></div>
<script src="/Scripts/dist/bundle.js"></script>
</body>
</html>
index.tsx：
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import * as ReactBootstrap from "react-bootstrap";
import Test from "./components/test";
ReactDOM.render(
<div>
<Test text="Well!" />
<Container />
</div>,
document.getElementById("app")
);
test.tsx：
import * as React from "react";
export interface ITestProps
text: string
export class Test extends React.Component<ITestProps, >
render()
debugger;
return <div className="well">this.props.text</div>;
webpack.config.json：
var webpack = require('webpack');
var path = require("path");
var proxy = 'localhost:61299';
module.exports =
entry: [
// activate HMR for React
'react-hot-loader/patch',
// the entry point of our app
'./Scripts/src/index.tsx',
],
output:
filename: "./Scripts/dist/bundle.js",
,
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve:
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
,
module:
loaders: [
test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader']
]
,
plugins: [
// enable HMR globally
new webpack.HotModuleReplacementPlugin(),
// prints more readable module names in the browser console on HMR updates
new webpack.NamedModulesPlugin(),
],
devServer:
proxy:
'*':
target: 'http://' + proxy,
,
port: 8080,
host: '0.0.0.0',
hot: true,
,
【问题讨论】：
【参考方案1】：由于您已经使用 webpack (devtool: "source-map") 生成源映射，这应该已经可以工作了 ;)
不要在“localhost”中查看源代码，而是在 chrome 调试器中使用 webpack:// 项。这是屏幕截图中的最后一项。
如果源地图的生成工作正常，你应该在那里有你的源文件夹结构。它可能包含在名为. 的文件夹中。
例如：
不过，我必须警告你。有时源映射无法正常工作，您的断点最终会出现在其他地方：-x
【讨论】：
以上是关于使用 Chrome 调试 React TypeScript .tsx 文件 - Webpack的主要内容，如果未能解决你的问题，请参考以下文章
使用 Chrome Devtools 调试 Babel 转译的 React 时，“this”的值不正确
Lerna，React-Redux Web应用程序使用可视代码编辑器调试器调试Chrome插件
带有 iOS 模拟器的 React Native 的“在 Chrome 中调试”菜单选项在哪里？