html - Utilizarea Chrome pentru a depana fișier .tsx React TypeScript - Webpack

Folosesc webpack pentru a combina fișierele mele js, așa că în mod normal văd doar un fișier mare combinat în tab-ul Sources din Chrome. Totuși, dacă adaug un debugger; în fișierul meu .tsx, pot vedea un singur fișier fără probleme. Întrebarea mea este dacă pot face ca webpack să afișeze toate fișierele mele în Chrome Source astfel încât să le pot răsfoi acolo și să dau click pe un rând dacă vreau ca debugger-ul să se oprească?

În captura de ecran de mai jos mi-aș dori un folder pentru Scripts/src și apoi toate fișierele mele.

Exemplu de cod:

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,
    },
}

Răspuns #1

Deoarece deja generezi hărți sursă cu webpack (devtool: "source-map") acesta ar trebui să funcționeze deja ;)

În loc să vizualizați sursele în „localhost”, folosiți elementul webpack:// din debugger-ul Chrome. Acesta este ultimul element din captura dvs. de ecran.

Dacă generarea hărților sursă funcționează corect, ar trebui să aveți structura folderului sursă acolo. Aceasta poate fi conținută într-un folder numit ..

De exemplu:

Trebuie să te avertizez totuși. Uneori, hărțile sursă nu funcționează corect și punctele de întrerupere ajung în altă parte :-x