Debug Points Not Being Hit - JS Debug - React - 2017.2.2

v2017.2.2

Build #: WS-172.3757.55

 

My debug setup:

Chrome

WebStorm Debug Pane



Example debug points not being hit in <App />:

12 comments

Could you please precise:

1) Do you compile your jsx files in js with webpack?

2) if yes, please provide webpack.config. Otherwise, tell us how you do it and provide your config file

0

 webpack.config.build

var webpack = require("webpack");
var path = require("path");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var FaviconsWebpackPlugin = require("favicons-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var merge = require("webpack-merge");
var Common = require("./webpack.config.common");
var helper = require("./helper");

var exposedProperties = ["window", "navigator", "document"];
var html = '';
global.document = jsdom(html);
global.documentFake = true;
global.window = document.defaultView;


Object.keys(document.defaultView).forEach((property) => {
if (typeof global[property] === "undefined") {
exposedProperties.push(property);
global[property] = document.defaultView[property];
}
});

global.navigator = {
userAgent: "node.js"
};

const buildPath = __dirname + "/../build";

let plugins = [
new CleanWebpackPlugin(buildPath, {
root: process.cwd()
}),
new webpack.DllReferencePlugin({
context: path.join(__dirname, "../"),
manifest: require("../static/dist/vendor-manifest.json")
}),
new FaviconsWebpackPlugin({
logo: "./static/images/logo.png",
prefix: "static/images/favicons/",
// Emit all stats of the generated icons
emitStats: false,
// The name of the json containing all favicon information
statsFilename: "iconstats.json",
icons: {
android: false,
appleIcon: false,
appleStartup: false,
coast: false,
favicons: true,
firefox: false,
opengraph: false,
twitter: false,
yandex: false,
windows: false
}
}),
new ExtractTextPlugin("style.css"),
new CopyWebpackPlugin([
{
from: "static",
to: "static"
},
{
from: "static/dist",
to: "static/dist"
},
{
from: "eafsdf.html",
to: "asfsf.html"
},
{
from: "apple-app-site-association",
to: ""
},
])
];

if (process.env.NODE_ENV === 'production') {
plugins.push(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
);
plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = merge(Common, {
cache: true,
output: {
path: buildPath,
filename: "bundle.js",
},
plugins
});
0

webpack.config.develop.js

const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Common = require("./webpack.config.common");

let plugins = [
new ExtractTextPlugin("style.css"),
new webpack.DllReferencePlugin({
context: path.join(__dirname, "../"),
manifest: require("../static/dist/vendor-manifest.json")
})
];

if (process.env.NODE_ENV === 'production') {
plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = merge(Common, {
devServer: {
disableHostCheck: true,
historyApiFallback: {
disableDotRule: true
},
contentBase: "./",
host: "0.0.0.0",
port: 8337,
},
plugins,
});
0

webpack.config.common

const webpack = require("webpack");
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const DefinePlugin = require('webpack/lib/DefinePlugin');
const path = require('path');
const postcssImport = require('postcss-import');
const helper = require('./helper');

const config = helper.getConfig();
const lang = helper.getLanguage();

module.exports = {
cache: true,
// target: 'node',
entry: ['babel-polyfill', './src/index.js'],
stats: { children: false },
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js',
/*
* You must compile to UMD or CommonJS
* so it can be required in a Node context:
*/
libraryTarget: 'umd'
},

module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [ //important for performance!
path.join(__dirname, "../", "index_template"),
path.join(__dirname, "../", "src"),
path.join(__dirname, "../", "node_modules", "@ddfff", "shared-react")
],
query: {
cacheDirectory: true, //important for performance
}
},
{
test: /\.css$/,
include: [ //important for performance!
path.join(__dirname, "../", "src"),
path.join(__dirname, "../", "node_modules", "@ddfff, "shared-react")
],
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]&minimize',
'postcss-loader'
]
}),
},
{
test: /\.css$/,
include: [ //important for performance!
path.join(__dirname, "../", "node_modules", "react-smartbanner", "dist")
],
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&importLoaders=1&localIdentName=[local]&minimize',
'postcss-loader'
]
}),
},
{
test: /\.json$/,
loader: 'json-loader',
},
]
},
plugins: [
new ProgressBarPlugin(),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
/**
* Plugin: DefinePlugin
* Description: Define free variables.
* Useful for having development builds with debug logging or adding global constants.
*
* Environment helpers
*
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
*/
// NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
new DefinePlugin({
ExternalConfig: JSON.stringify(config.remoteConfig),
TealiumEnv: JSON.stringify(config.tealiumEnv),
Language: JSON.stringify(lang),
SegmentKey: JSON.stringify(config.segmentKey),
NewRelicKey: JSON.stringify(config.newRelicKey),
AdobeAnalyticsRSID: JSON.stringify(config.adobeAnalyticsRSID),
Version: JSON.stringify(require("../package.json").version),
BuildNumber: JSON.stringify(config.buildNumber),
AccessEnablerUrl: JSON.stringify(config.accessEnablerUrl),
SportsFeatures: JSON.stringify(config.enableSportsFeatures),
}),
]
};
0

I've setup debug per this article https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ but not working, still looking at it.  I also changed the devtool entry to 

devtool: "source-map",

 

 

0

I just installed https://webpack.js.org/loaders/source-map-loader/ and also set the following in webpack.config.develop.js

devtool: "source-map",
0

Why are my replies being moderated?

0

can you delete the multiple posts, your forum is acting weird.  When I post something it's putting it toward the top so I never saw them!  Hence the dup posts.  And why do I not have the ability to delete the posts for x amount of time?

0

Just to clarify, now you're able to debug?

0

Please sign in to leave a comment.