วิธีแก้จุดบกพร่อง Angular ด้วย VSCode

ฉันจะกำหนดค่า Angular และ VSCode เพื่อให้เบรกพอยต์ทำงานได้อย่างไร

ทดสอบด้วย Angular 5 / CLI 1.5.5

1. ติดตั้งChrome Debugger Extension
2. สร้างlaunch.json(ภายในโฟลเดอร์. vscode)
3. ใช้ของฉันlaunch.json(ดูด้านล่าง)
4. สร้างtasks.json(ภายในโฟลเดอร์. vscode)
5. ใช้ของฉันtasks.json(ดูด้านล่าง)
6. กดCTRL+ SHIFT+B
7. กด F5

launch.json for angular/cli >= 1.3

{
  "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"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "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
        }
      }
    ]
  }

ทดสอบด้วย Angular 2.4.8

1. ติดตั้งChrome Debugger Extension
2. สร้างไฟล์ launch.json
3. ใช้ของฉันlaunch.json(ดูด้านล่าง)
4. เริ่มเซิร์ฟเวอร์ NG Live Development ( ng serve)
5. กด F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "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
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "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/*"
      }
    }
  ]
}

ดูเหมือนว่าทีม VS Code กำลังจัดเก็บสูตรการแก้จุดบกพร่อง

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

มีสองวิธีในการทำเช่นนั้น คุณสามารถเปิดกระบวนการใหม่หรือแนบไปกับกระบวนการที่มีอยู่

จุดสำคัญในกระบวนการทั้งสองคือการมีเซิร์ฟเวอร์ dev webpack และ VSCode ดีบักทำงานในเวลาเดียวกัน

เปิดตัวกระบวนการ

1. ในlaunch.jsonไฟล์ของคุณเพิ่มการกำหนดค่าต่อไปนี้:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Angular debugging session",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:4200",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

2. เรียกใช้เซิร์ฟเวอร์ Webpack dev จาก Angular CLI โดยดำเนินการ npm start

3. ไปที่ VSCode debugger และเรียกใช้การกำหนดค่า "Angular debugging session" ดังนั้นหน้าต่างเบราว์เซอร์ใหม่พร้อมแอปพลิเคชันของคุณจะเปิดขึ้น

แนบกับกระบวนการที่มีอยู่

1. สำหรับสิ่งนั้นคุณต้องเรียกใช้ Chrome ในโหมดดีบักเกอร์ด้วยพอร์ตที่เปิดอยู่ (ในกรณีของฉันจะเป็น9222):

   Mac:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

   ของ windows:

   chrome.exe --remote-debugging-port=9222
   

2. launch.json ไฟล์จะมีลักษณะดังต่อไปนี้:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Chrome Attach",
         "type": "chrome",
         "request": "attach",
         "port": 9222,
         "url": "http://localhost:4200/",
         "webRoot": "${workspaceFolder}"
       } 
     ]
   }
   

3. เรียกใช้เซิร์ฟเวอร์ Webpack dev จาก Angular CLI โดยดำเนินการ npm start
4. เลือกการกำหนดค่า "Chrome Attach" และเรียกใช้

ในกรณีนี้ดีบักเกอร์ที่แนบมากับกระบวนการ Chrome ที่มีอยู่แทนที่จะเปิดหน้าต่างใหม่

ฉันเขียนบทความของตัวเองโดยอธิบายแนวทางนี้พร้อมภาพประกอบ

คำแนะนำง่ายๆในการกำหนดค่าดีบักเกอร์สำหรับ Angular ใน VSCode

สิ่งนี้มีคำอธิบายโดยละเอียดในไซต์ Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

สามารถใช้ config นี้:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

นี่เป็นวิธีแก้ปัญหาที่เบากว่าเล็กน้อยใช้ได้กับ Angular 2+ (ฉันใช้ Angular 4)

เพิ่มการตั้งค่าสำหรับ Express Server ด้วยถ้าคุณเรียกใช้ MEAN stack

{
  // 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"
      ]
    }
  ]
}

คำตอบของ @Asesjix นั้นละเอียดมาก แต่อย่างที่บางคนชี้ให้เห็นว่ายังคงต้องมีการโต้ตอบหลายครั้งเพื่อเริ่มต้นng serveจากนั้นจึงเปิดแอป Angular ใน Chrome ฉันทำให้สิ่งนี้ทำงานได้ด้วยคลิกเดียวโดยใช้การกำหนดค่าต่อไปนี้ ความแตกต่างที่สำคัญจากคำตอบของ @ Asesjix คือประเภทงานในขณะนี้shellและการเรียกคำสั่งเพิ่มstartก่อนหน้านี้ng serveจึงng serveสามารถมีอยู่ในกระบวนการของตัวเองและไม่บล็อกตัวดีบักจากการเรียกใช้งาน:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

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

ในกรณีของฉันฉันไม่ได้ใช้แผนผังโฟลเดอร์โครงการ Angular ดั้งเดิมและฉันรู้ว่ามีบางอย่างผิดปกติกับwebRoot/ {workspaceFolder}บิต แต่การทดลองทั้งหมดของฉันไม่ได้ผลลัพธ์ มีเคล็ดลับจากคำตอบ SO อื่นซึ่งฉันจะเชื่อมโยงหากพบอีกครั้ง

สิ่งที่ช่วยฉันคือการค้นหาเนื้อหาของตัวแปร{workspaceFolder}ที่รันไทม์จากนั้นแก้ไขเป็นตำแหน่งของโฟลเดอร์ "src" ที่คุณมี "app / *" ในการค้นหาฉันเพิ่ม a ลงpreLaunchTaskในไฟล์ launch.json ของฉันและงานเพื่อส่งออกค่าของ{workspaceFolder}.

Launch.jsonซึ่งจะปรากฏขึ้นหลังจากติดตั้งโปรแกรมแก้ไขข้อบกพร่องของ Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.jsonไม่มีอยู่ตามค่าเริ่มต้น กด Ctrl + Shift + p และฉันคิดว่ามันเรียกว่า 'สร้างงานสำหรับคำสั่งอื่น' หรืออะไรที่คล้ายกัน ดูเหมือนจะมองไม่เห็นหลังจากที่สร้าง task.json แล้ว คุณสามารถสร้างไฟล์ในตำแหน่งเดียวกับlaunch.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

เมื่อฉันรู้ค่าของ $ {workspaceFolder} แล้วฉันก็แก้ไขให้ชี้ไปที่โฟลเดอร์ src ในแผนผังโครงการใหม่ของฉันและทุกอย่างก็ใช้ได้ การดีบักจำเป็นต้องng serveรันเป็นงานก่อนเปิดตัวหรือเป็นส่วนหนึ่งของการสร้าง (ตัวอย่างด้านบน) หรือในพรอมต์คำสั่ง

นี่คือลิงค์ไปยังตัวแปรทั้งหมดที่คุณสามารถใช้ได้: