Menu
I'm using webpack for bundling my js-files so normally I only see one big bundled file under sources in Chrome. However if I add a debugger; to my .tsx file I can see a single file just fine. My question is if I can get webpack to output all my files in Chrome Source so that I can browse them there and just click a row if I wan't the debugger to stop?
In the screenshot below I would like 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'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,
},
}
570
Since you already generate source maps with webpack (devtool: "source-map") this should already work ;)
Instead of viewing sources in "localhost", use the webpack:// item in the chrome debugger. This is the last item in your screenshot.
If the generation of the source maps works correctly you should have your source folder structure there. It may be contained in an folder called ..
For example:
I have to warn you though. Sometimes source maps don't work correctly and you break points end ups somewhere else :-x
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
