VisualStudioCode + gulp + browserify でブレークポイントが効かなかった問題（解決）

2912 ワード
gulp browserify VisualStudioCode browserify テキストリンク

なかなか今更な環境ですが、ブレークポイントが効かなくて苦労してしたのでメモメモ。

環境

Windows 10
Visual Studio Code 1.19.1
gulp + browserify
Google Chrome

やりたいこと

以下のようなフォルダ構成にしたい。
デバッグ時にブレークポイントを設置したい。

+ .vscode
+ src
| + aaa.js
| + bbb.js
+ www
  + index.html
  + script
    + main.js
    + main.js.map

答え

browserify 時に Source Map に sourceRoot を追加すればうまく行きました。

gulpfile.js

// build
gulp.task( 'build', function() {
  var browserify = require( 'browserify' );
  var source = require( 'vinyl-source-stream' );
  var buffer = require( 'vinyl-buffer' );
  var sourcemaps = require( 'gulp-sourcemaps' );

  browserify( folder.src + 'main.js', { debug: true } )
      .bundle()
      .pipe( source( 'main.js' ) )
      .pipe( buffer() )
      .pipe( sourcemaps.init( { loadMaps: true } ) )
      .pipe( sourcemaps.write( './', { includeContent: false, sourceRoot: '../../' } ) )   // <===== ★ここ
      .pipe( gulp.dest( folder.build ));
} );

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/www/index.html",
            "sourceMaps": true,
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--remote-debugging-port=9222",
                "--user-data-dir=${workspaceRoot}/chrometmp"
            ]
        }
    ]
}

関係なかったこと

VisualStudioCode + TypeScript でブレークポイントが効かなかった問題（解決）

これ関連だろうと当てをつけて探していたのですが関係ありませんでした。
最終的に outFiles は必要ありませんでした。

気づいた経緯

launch.json に以下を追加してログを出力しました。

{
    "version": "0.2.0",
    "configurations": [
        {
...
            "trace": "sm",
...
        }
    ]
}

%TMP% フォルダに vscode-chrome-debug.txt が出力されたので中身とにらめっこしました。

SourceMap: sourceRoot: undefined

こんな行がありました。

以前きちんと動いていた、TypeScript を使った環境の main.js.map を覗いてみると
sourceRoot: "../../" が指定されていました。
今回の main.js.map には指定されてませんでした。

sourcemap sourceroot で検索すると、正解が見つかりました。

01バックパックの問題(ダイナミックプランニング)
C++11マルチスレッド(九):promise用法詳細