Use inline source maps in development (#6754)

There is currently a bug in chrome that prevents reading source maps
from a local file [0]. This was preventing Chrome DevTools from using
our JavaScript source maps, where were saved as `.map` files. To work
around this problem the source maps are now generated inline, which
seems to work fine.

The only other browser I tested this with was Firefox, which works both
before and after this change.

[0]: https://bugs.chromium.org/p/chromium/issues/detail?id=931675

1 files changed, 11 insertions, 4 deletions

diff --git a/gulpfile.js b/gulpfile.js
index ea35d5c5a..6ea02c52c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -347,7 +347,7 @@ function createTasksForBuildJsExtension ({ buildJsFiles, taskPrefix, devMode, te
   const destinations = browserPlatforms.map(platform => `./dist/${platform}`)
   bundleTaskOpts = Object.assign({
     buildSourceMaps: true,
-    sourceMapDir: devMode ? './' : '../sourcemaps',
+    sourceMapDir: '../sourcemaps',
     minifyBuild: !devMode,
     buildWithFullPaths: devMode,
     watch: devMode,
@@ -604,10 +604,17 @@ function bundleTask (opts) {
       }))
     }
 
-    // Finalize Source Maps (writes .map file)
+    // Finalize Source Maps
     if (opts.buildSourceMaps) {
-      buildStream = buildStream
-        .pipe(sourcemaps.write(opts.sourceMapDir))
+      if (opts.devMode) {
+        // Use inline source maps for development due to Chrome DevTools bug
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=931675
+        buildStream = buildStream
+          .pipe(sourcemaps.write())
+      } else {
+        buildStream = buildStream
+          .pipe(sourcemaps.write(opts.sourceMapDir))
+      }
     }
 
     // write completed bundles