Sourcemaps missing in Chrome Dev tools

I’m not sure why debugging is so hard on Tizen TVs but this morning I had a mini break-through! Hi, I’m Cliff. you’re here because you want to debug the JavaScript running on your 2016+ model Samsung TV. I’m here because I think I just figured out how to do it.

Today’s tip is a quick one. It involves sourcemaps and webpack and Samsung TVs. Here’s the deal. You’re writing an app for your TV. You’ve created a fancy webpack config to bundle/package it up. You click build and go, or run or whatever to see it pop up on the TV. Then you jump into the source code only to find out it’s all minified! Debugging Javascript is hard enough, but debugging it when all of the code is on one line can be insurmountable. The trick is to use the “eval-source-map” devtool option in your webpack config.

When I initially posted this article I was misinformed thinking you needed to use BOTH the devtool option AND the SourceMapDevToolPlugin. It turns out you only need to use any one of the “eval” variant values in the devtool option. (I had ANOTHER issue in my project where I was not cleaning my output between launches so the TV was NOT seeing the latest changes each time I modified the devtool option, which lead to more confusion.)

Here’s an example of my config which I just got working:

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    devtool: "eval-source-map",
    plugins: [
        new CopyWebpackPlugin([
                {from: 'src/*', ignore: [ '*.js' ], flatten: true}