Using Chrome to debug a React TypeScript.tsx file - Webpack
I am using webpack to bundle my js files, so usually I only see one big bundled file from sources in Chrome. However, if I add debugger;
to my .tsx
file, I can only see one file. My question is, can I get webpack to output all my files in Chrome Source so that I can view them there and just click the line if I'm not debugging the debugger?
In the screenshot below, I need a folder for Scripts/src
and then all my files.
Sample code:
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 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,
},
}
source to share
Since you are already generating source maps with webpack
( devtool: "source-map"
) this should already work;)
Instead of looking at the sources in "localhost", use an item webpack://
in the chrome debugger. This is the last item in the screenshot.
If the source map generation is working correctly, you should have a source folder structure. It can be contained in a folder named .
.
For example:
I must warn you. Sometimes the original maps don't work correctly and you lose points elsewhere: -x
source to share