Могут ли инструменты VS Code Webview Developer работать с исходными картами? - PullRequest
Новая
       25

Могут ли инструменты VS Code Webview Developer работать с исходными картами?

0 голосов
/ 11 января 2019

Я разрабатываю расширение VSCode с веб-представлением. Внутри этого веб-просмотра я запускаю скрипт bundle.js, который исходит из нескольких источников TypeScript, связанных с веб-пакетом. Скрипт загружается через URI vscode-ресурса. Соответствующий исходный файл карты bundle.js.map находится прямо рядом с ним в файловой системе.

Теперь, когда я запускаю свое расширение из кода VS хоста в режиме отладки и использую «Developer: Open Webview Developer Tools», я вижу только bundle.js, с подсказкой, что существуют исходные карты. Но соответствующие источники TS не отображаются в навигаторе и не могут быть загружены с помощью CMD-P. Добавление карты-источника вручную (щелчок правой кнопкой мыши> Добавить карту-источник ...) не имеет никакого эффекта ни для URI vscode-ресурса, ни для URI файла.

Когда я использую HTML-код веб-просмотра как файл в Chrome напрямую, но с относительным URL-адресом для загрузки того же самого скрипта, я хорошо вижу все источники в Chrome Debugger.

Как я могу убедить Web Tools Dev Tools использовать исходные карты скриптов, которые он запускает?

1 Ответ

0 голосов
/ 21 февраля 2019

Благодарю eamodio от https://vscode -dev-community.slack.com за ответ:

Убедитесь, что eval-source-map - это devtool в конфигурации веб-пакета.

Например, моя конфигурация веб-пакета: 

module.exports = {
  entry: "./src/main.js",
  output: {
      filename: "./bundle.js",
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "eval-source-map",

  resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },

  module: {

      rules: [

          { test: /\.tsx?$/, enforce: "pre", loader: "awesome-typescript-loader" },
          // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          { test: /\.js$/, enforce: "pre", loader: "source-map-loader" }
      ]
  },

  // Other options...
};
...