asp.net core and react debugging

Question

Is there anyway to debug React components ( developed with ES6 and babel ) which are rendered on server side with the help of asp.net core and Microsoft.AspNetCore.SpaServices ?

Here is my server boot file

import * as React from 'react';
import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import createMemoryHistory from 'history/lib/createMemoryHistory';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import Footer from "./components/Footer"
import store from "./redux/store"

export default createServerRenderer(params => {
    return new Promise((resolve, reject) => {
        // Build an instance of the application
        const app = (
            <Provider store={store}>
                <Footer />
            </Provider>
        );

        // Perform an initial render that will cause any async tasks (e.g., data access) to begin
        renderToString(app);

        // Once the tasks are done, we can perform the final render
        // We also send the redux store state, so the client can continue execution where the server left off
        params.domainTasks.then(() => {
            resolve({
                html: renderToString(app),
                globals: { initialReduxState: store.getState() }
            });
        }, reject); // Also propagate any errors back into the host application
    });
});

And here is my footer.js file

import React from "react"
import { GetFooter } from "../redux/actions/footerActions"
import { connect } from "react-redux"
import { bindActionCreators } from 'redux'

class Footer extends React.Component {
    constructor() {
        super();
    }

    render() {
        if (this.props === null || this.props.footer === undefined || Object.keys(this.props.footer).length === 0)
            return (<div>Loading</div>)
        else
            return (
                <div id="G5" className="row-fluid fh-Footer">
                    <div id="G5C1" className="span12 ">
                        <div dangerouslySetInnerHTML={{ __html: this.props.footer }} />
                    </div>
                </div>)
    }
}

const mapStateToProps = (state) => {
    console.log("footer mapState", state);
    return {
        footer: state.footer.footer
    }
}


export default connect(mapStateToProps, GetFooter)(Footer)

I want to debug my Footer component but the breakpoints never get hit.

P.S: The render function from footer gets called as it is rendering properly.