如何使用自定义Webpack构建器调试Angular CLI应用程序? [英] How to debug an Angular CLI app with the custom webpack builder?

问题描述

我建立了一个仓库来暴露我的问题:

VS Code抱怨无法命中断点，并暗示源映射可能存在问题.我可以看到原始资源虽然已加载到浏览器中.发生了什么事?

解决方案

此指南适用于您的仓库，最新的vscode和chrome调试器.
请查看结果并执行以下步骤:

• 安装 Chrome调试器
• 使用以下内容创建.vscode/launch.json

  {"version":"0.2.0"，配置":[{"type":"chrome"，"request":启动"，"name":针对本地主机启动Chrome"，"url":"http://localhost:4200"，"webRoot":"$ {workspaceFolder}"}]} 

• 在Home或其他组件中设置断点
• 按F5键启动调试器

I built a repo to expose my issue: https://github.com/franklin626/custom_webpack_undebuggable

This Angular CLI app has a custom webpack setup (webpack.config.js). It also has a .vscode/launch.json configuration to debug from VS Code upon either ng test (unit tests) or ng serve. I can place breakpoints for my unit tests, but not when running ng serve:

In my debug tab in VS Code, I run my "launch Chrome" routine followed by "attach localhost". I place a breakpoint on other.component.ts:14, and browse to localhost:4200/othermodule to fire up my lazy loaded module OtherModule containing OtherComponent.

I can't place a breakpoint on home.component.ts:13 either, even though it is in the default module.

VS Code complains the breakpoint can't be hit and suggests a possible problem with source maps. I can see the original sources are loaded in the browser though. What is going on ?

解决方案

This guide works for me with your repo, latest vscode and debugger for chrome.
Please see the results and follow these steps:

• Install debugger for Chrome
• Create .vscode/launch.json with the following content

{
 "version": "0.2.0",
 "configurations": [
   {
     "type": "chrome",
     "request": "launch",
     "name": "Launch Chrome against localhost",
     "url": "http://localhost:4200",
     "webRoot": "${workspaceFolder}"
   }
 ]
}

• Set a breakpoint in Home or Other component
• Press F5 to start the debugger

这篇关于如何使用自定义Webpack构建器调试Angular CLI应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！