PROSAGA码农传奇-vscode-如何使用VSCode调试Angular？

0# 哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    这是一个更轻松的解决方案，适用于Angular 2+（我正在使用Angular 4）
  </p>
  <P>
    如果运行MEAN堆栈，还会添加Express Server的设置。
  </p>
   <pre>
    <code>
      {
  // 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": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

</code>
  </pre>
</DIV>

1# 冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <H2>
    使用Angular 5 / CLI 1.5.5进行测试
  </H2>
  <OL>
    <LI>
      安装
      <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" rel="noreferrer">
        Chrome调试器扩展程序
      </A>
    </LI>
    <LI>
      创建
      <a href="https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations" rel="noreferrer">
         <code>
          launch.json
        </code>
      </A>
       （内部.vscode文件夹）
    </LI>
    <LI>
      用我的
       <code>
        launch.json
      </code>
       （见下文）
    </LI>
    <LI>
      创建
      <a href="https://code.visualstudio.com/docs/editor/tasks#_custom-tasks" rel="noreferrer">
         <code>
          tasks.json
        </code>
      </A>
       （内部.vscode文件夹）
    </LI>
    <LI>
      用我的
       <code>
        tasks.json
      </code>
       （见下文）
    </LI>
    <LI>
      按
      <KBD>
        CTRL
      </KBD>
      +
      <KBD>
        转移
      </KBD>
      +
      <KBD>
        乙
      </KBD>
    </LI>
    <LI>
      按
      <KBD>
        F5
      </KBD>
    </LI>
  </醇>
  <P>
     <code>
      launch.json for angular/cli >= 1.3
    </code>
  </p>
   <pre>
    <code>
      {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

</code>
  </pre>
  <P>
     <code>
      tasks.json for angular/cli >= 1.3
    </code>
  </p>
   <pre>
    <code>
      {
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

</code>
  </pre>
  <H2>
    用Angular 2.4.8测试
  </H2>
  <OL>
    <LI>
      安装
      <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" rel="noreferrer">
        Chrome调试器扩展程序
      </A>
    </LI>
    <LI>
      创建
      <a href="https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations" rel="noreferrer">
         <code>
          launch.json
        </code>
      </A>
    </LI>
    <LI>
      用我的
       <code>
        launch.json
      </code>
       （见下文）
    </LI>
    <LI>
      启动NG Live Development Server（
       <code>
        ng serve
      </code>
      ）
    </LI>
    <LI>
      按
      <KBD>
        F5
      </KBD>
    </LI>
  </醇>
  <P>
     <code>
      launch.json for angular/cli >= 1.0.0-beta.32
    </code>
  </p>
   <pre>
    <code>
      {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

</code>
  </pre>
  <P>
     <code>
      launch.json for angular/cli < 1.0.0-beta.32
    </code>
  </p>
   <pre>
    <code>
      {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

</code>
  </pre>
</DIV>

2# 一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    这有两种不同的方式。您可以
    <EM>
      发射
    </EM>
     一个新的过程或
    <EM>
      连接
    </EM>
     到现有的。
  </p>
  <P>
    这两个过程的关键点是
    <EM>
      webpack dev服务器和VSCode调试器同时运行
    </EM>
    。
  </p>
  <H2>
    启动流程
  </H2>
  <OL>
    <LI>
      <P>
        在你的
         <code>
          launch.json
        </code>
         文件添加以下配置：
      </p>
       <pre>
        <code>
          {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

</code>
      </pre>
    </LI>
    <LI>
      <P>
        通过执行从Angular CLI运行Webpack dev服务器
         <code>
          npm start
        </code>
      </p>
    </LI>
    <LI>
      转到VSCode调试器并运行“Angular debugging session”配置。因此，将打开包含您的应用程序的新浏览器窗口。
    </LI>
  </醇>
  <H2>
    附加到现有流程
  </H2>
  <OL>
    <LI>
      <P>
        为此，您需要在调试器模式下使用已打开的端口运行Chrome（在我的情况下，它将是
         <code>
          9222
        </code>
        ）：
      </p>
      <P>
        苹果电脑：
      </p>
       <pre>
        <code>
          /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

</code>
      </pre>
      <P>
        视窗：
      </p>
       <pre>
        <code>
          chrome.exe --remote-debugging-port=9222

</code>
      </pre>
    </LI>
    <LI>
      <P>
         <code>
          launch.json
        </code>
         文件将以下列方式查找：
      </p>
       <pre>
        <code>
          {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}

</code>
      </pre>
    </LI>
    <LI>
      通过执行从Angular CLI运行Webpack dev服务器
       <code>
        npm start
      </code>
    </LI>
    <LI>
      选择“Chrome Attach”配置并运行它。
    </LI>
  </醇>
  <P>
    在这种情况下，调试程序附加到现有的Chrome进程，而不是启动新窗口。
  </p>
  <P>
    我写了自己的文章，在那里我用插图描述了这种方法。
  </p>
  <P>
    <a href="https://sergeome.com/blog/2018/07/01/configure-debugger-for-angular-in-vscode/" rel="nofollow noreferrer">
      简单说明如何在VSCode中为Angular配置调试器
    </A>
  </p>
</DIV>

3# 至此 | 2019-08-31 10-32