使用vscode调试ember.js

万俟旭
2023-12-01
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    //参考文章 https://dev.to/michalbryxi/debugging-emberjs-with-vscode-2p5g
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "EmberJS挂载浏览器调试",
            "port": 9222,
            "sourceMaps": true,
            // "url": "http://localhost:4200",
            // "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "emberTest/*": "${workspaceFolder}/app/*"
            },
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "EmberJS启动浏览器调试",
            "port": 9222,
            //Chrome启动参数
            "runtimeArgs": [
                "--enable-easy-off-store-extension-install",
                "--disable-web-security",
                "--user-data-dir=C:\\MyChromeDevUserData",
                "--remote-debugging-port=9222"
            ],
            //项目地址
            "url": "http://localhost:4200",
            /*
            浏览器使用源映射能够将缩小/编译的JS转换回人类可读的形式。
            但在复杂的设置中,就像我有源映射有错误的文件路径。 这个哈希将提供一种方法来纠正这些:
            左侧:这是ENV.modulePrefix您config/environment.js文件中变量的值。最后加斜线和星号以覆盖所有子目录。
            E:/emberTest
            ${workspaceFolder} - 工作区文件夹路径。
            app - 是您应用的实际源代码子目录
            */
            "sourceMapPathOverrides": {
                "emberTest/*": "${workspaceFolder}/app/*"
            },
        }
    ]
}

ember 启用sourceMap映射

// admin/ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    babel: {
      sourceMaps: 'inline'
    }
  });
};
 类似资料: