Chromeを使用してReact TypeScript .tsxファイルをデバッグする - Webpack

私はjsファイルをバンドルするためにwebpackを使用しています。通常、Chromeのソースの下に大きなバンドルファイルが1つしか表示されません。しかし、debugger;を私の.tsxファイルに追加すると、1つのファイルしか見えません。私の質問は、もし私がそれらを閲覧することができ、ちょうど私がデバッガを停止するwan't行をクリックすることができますように私はクロームソースのすべてのファイルを出力するwebpackを得ることができますか？Chromeを使用してReact TypeScript .tsxファイルをデバッグする - Webpack

以下のスクリーンショットでは、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, 
    }, 
}

出典

2017-04-26 Ogglas

すでにwebpack（devtool: "source-map"）でソースマップを生成するので、これはすでに動作するはずです;）でソースを表示するのではなく、

は、 "localhost" を、webpack://アイテムを使用しますクロムデバッガでこれはスクリーンショットの最後のアイテムです。

ソースマップの生成が正しく機能する場合は、そこにソースフォルダ構造が存在する必要があります。 .というフォルダに格納されている可能性があります。例えば

：

でも、私はあなたに警告しなければなりません。時には、ソースマップが正しく動作せず、エンドポイントが別の場所に壊れてしまうことがあります。-x

出典

2017-04-26 07:22:16

感謝のように働いた！ :) – Ogglas

Chromeを使用してReact TypeScript .tsxファイルをデバッグする - Webpack

答えて

関連する問題