CYOKODOG

JS DEVELOPER BLOG

VSCodeで便利にdebugする方法

  • 2017-02-01

最近使ってるエディタ（特にこだわりはない）

  • VSCode ... コード書く時（70%）
  • Sublime Text ... 文章書く時、重い時（25%）
  • vi ... ちょっといじる時（5%）

VSCodeのデバッグ機能

  • ソースマップ対応
  • エディタ上でブレークポイント設定してデバッグできる
  • ブラウザで動くjs だけでなく、node や gulp で書いたやつもデバッグできる

node の場合

って選ぶと

設定ファイル

  • .vscode/launch.json ってのが作られるのでエントリポイントを指定
  • gulpの場合は node_modules/gulp/bin/gulp.js を指定する
{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "プログラムの起動",

      // エントリポイントを指定
      "program": "${workspaceRoot}/entry.js", 

      "cwd": "${workspaceRoot}"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "プロセスに添付",
      "port": 5858
    }
  ]
}

エディタからデバッグできる

  • エディタ上の再生ボタンをクリック

ブラウザの場合

  • Debugger for Chrome をVSCode 内でインストール
  • もしくはVisual Studio Marketplaceにて

設定ファイル

  • .vscode/launch.json 生成時、chromeを指定
  • 開発用webサーバのurlを指定
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",

      // 開発用webサーバのurlを指定
      "url": "http://localhost:8080",

      "sourceMaps": true,
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Attach to Chrome, with sourcemaps",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}"
    }
  ]
}

モジュールを読み込むコード

var $ = require('jquery');
var Color = require('./color');
$('.colorChangeBtn').click(function(){
  var color = Color.random();
  $('body').css('background', color);
});

ソースマップをインラインでバンドルする

webpack.config.js

module.exports = {
  devtool: "source-map",
  entry: __dirname + "/scr/script.js",
  output: {
    path: __dirname + '/dist',
    filename: 'script.js'
  }
};

webpack -d
  • -d でソースマップもバンドル
  • もしくは webpack.config.js の devtool を inline-source-map や eval-cheap-module-source-map にする

エディタからデバッグできる

注意点

  • 事前に chrome が立ち上がった状態だとうまく動作しない
  • VSCode から起動された chrome はデバッグモードを抜けると閉じてしまう
  • chrome の起動を以下のようにしておくと良さそう
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 &
All Posts