webstorm 7/karma server looking for wrong sourcemap file when debugging coffeescript

Question

I am having a devil of a time trying to get the debugger to work with my coffeescript files when testing with the karma test runner.

Supposedly, all I need to do is tell the Webstorm file watcher to generate sourcemaps and the debugger will work with the karma test runner. Unfortunately, the debugger doesn't seem to recognize the map file output by the coffeescript compiler. It looks for file.coffee -> file.js.map. However, despite trying to get some other result the map file is always file.coffee -> file.map

my karma config file has the following (obviously not the whole thing, just the relevant parts):

module.exports = (config) ->
  config.set
    files: [
      '../app/scripts/**/*.coffee'
      'spec/*.coffee']
    preprocessors: {
      '../**/*.coffee': 'coffee'
    }

I have tried all kinds of configurations with the file watchers:

A single file watcher with the arguments:"--compile --bare --map $FileName$" with the Output paths to refresh as either: "$FileNameWithoutExtension$.js.map" or "$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map"

The first version produces an blank file.js.map, the second produces a blank file.js.map AND the standard file.map which is a good sourcemap file.

I've tried one file watcher that just has "--compile --bare" Output path: "$FileNameWithoutExtension$.js" and a second that just has "--map" Output path: "$FileNameWithoutExtension$.js.map". That outputs a blank file.js.map and no actual map.

I've tried one file watcher that just has "--compile --bare" Output path: "$FileNameWithoutExtension$.js" and a second that just has "--compile --map" Output path: "$FileNameWithoutExtension$.js.map". That outputs a blank file.js.map and no actual map.

Meanwhile, when I run the test in debug mode the Karma Server reports:

WARN [web-server]: 404: /base/spec/schedule-spec.js.map?time=1380945586331
WARN [web-server]: 404: /absolute/Users/Randolph/Documents/Sites/MTF-Minimal/app/scripts/app.js.map?time=1380945586083
etc...

Clearly the server is assuming the map will be called file.js.map, when in fact coffeescript outputs file.map without the "js". I can't seem to change what the output sourcemap file is called and I don't see where to tell the debugger what to look for.

Parenthetically, the debugger is also telling me that it can't find map files for non-coffeescript libraries loaded with my files like angular.js and jquery.js. Perhaps that is a clue to what is wrong.

I have submitted a ticket to JetBrains, and will share what they respond here as well. However, if anyone knows the solution please let me know.

Thanks!

Answer 1

The only way to make debugger use the .js and .map files generated by file watcher is to load these generated .js files in your karma configuration file instead of .coffee files. As you load .coffee files instead, karma is actually serving not the files produced by transpiler, but .js files generated by coffee preprocessor, and these files don't have source maps generated, so the debugger has no idea how to map them to your coffee files. You have 2 options here:

• load the .js files generated by file watcher instead of original .coffee files in your karma config, like:

(snippet)

files: [
'../app/scripts/**/*.js'
'spec/*.js'
]

• configure the coffeePreprocessor in karma to use source maps, like:

(snippet)

files: [
'../app/scripts/**/*.coffee'
'spec/*.cofee'
],
preprocessors: {
            '**/*.coffee': ['coffee']
        },
coffeePreprocessor: {
            options: {
                bare: true,
                sourceMap: true
            },
            // transforming the filenames
            transformPath: function ( path ) {
                return path.replace( /\.js$/, '.coffee' );
            }
        },
...

To be able to use the second option you need to make sure to use the most recent versions of karma and karma-coffee-preprocessor