কীভাবে ভিএসকোড দিয়ে অ্যাংুলার ডিবাগ করবেন?

Question

আমার ব্রেকপয়েন্টগুলি যাতে কাজ করে আমি কীভাবে কৌনিক এবং ভিএসকোড কনফিগার করব?

Comments

আপনি কি বোঝাতে চেয়েছেন? তারা কিভাবে কাজ করে না?

— টাইলার এইচ

@ টাইলার এইচ, এটি কীভাবে কাজ করে তা গাইড হওয়া উচিত। এটি পরিবর্তিত লঞ্চ.জসন ছাড়া কাজ করে না।

— এসেসিক্স

Answer 1

কৌনিক 5 / সিএলআই 1.5.5 সঙ্গে পরীক্ষিত

1. Chrome ডিবাগার এক্সটেনশনটি ইনস্টল করুন
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
        }
      }
    ]
  }

কৌণিক 2.4.8 সঙ্গে পরীক্ষিত

1. Chrome ডিবাগার এক্সটেনশনটি ইনস্টল করুন
2. তৈরি করুন launch.json
3. আমার ব্যবহার করুন launch.json(নীচে দেখুন)
4. এনজি লাইভ বিকাশ সার্ভার শুরু করুন ( 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/*"
      }
    }
  ]
}

Comments

আপনি কি জানেন যে কীভাবে শুরু করতে NG Live Development Serverএবং তারপরে Chromeমাত্র একটি F5ক্লিকে চালু করা যায় ?

— মেরদান গোকমুরাদভ

দুঃখিত যে এটি সম্ভব নয় কারণ "এনজি সার্ভিস" টাস্কটি প্রি-লঞ্চটাস্কে শুরু করতে হবে। "এনজি সার্ভ" অবশ্যই স্থায়ীভাবে চলমান থাকবে এবং সুতরাং "প্রি-লঞ্চটাস্ক" সম্পন্ন হয়নি যার অর্থ বনাম কোডটি ডিবাগ প্রক্রিয়া শুরু করে না। তবে আমি একটি নতুন কনফিগারেশন যুক্ত করেছি যা কাজটি আরও দ্রুত করা উচিত ;-)

— এসেসিক্স

পরিষ্কার এবং সংক্ষিপ্ত উত্তর। এটা ভাল হবে যদি আপনার সম্পর্কে সংক্ষেপে ব্যাখ্যা হতে পারে হবে launch.jsonএবং tasks.jsonএখানে আছে। যেমনটি আমি বুঝতে পেরেছি launch.jsonনোড সার্ভারটি চালু করা এবং পোর্ট 8080 শোনার জন্য এবং অ্যাপ্লিকেশনটি চালানোর জন্য কমান্ডটি tasks.jsonব্যবহার npmও সম্পাদন করার নির্দেশ ng serveদেয়।

— শাইজুত

@ জাচস্কস আপনি কোন কৌনিক সংস্করণ ব্যবহার করেছেন?

— এসেসিক্স

আমার একই সমস্যা ছিল, ব্রেকপয়েন্টগুলি সেট করা হচ্ছে না, অবশেষে আমি বুঝতে পারি যে আমার ওয়েবরুটটি ভুল। আমার কাছে ওয়েবরুট ("ওয়েবরুট": "$ {ওয়ার্কস্পেসফোল্ডার}") এর জন্য default {ওয়ার্কস্পেসফোল্ডার} / আমার-অ্যাপ-ফোল্ডারটির পরিবর্তে ডিফল্ট মান ছিল

— জোসেফ সিম্পসন

Answer 2

দেখে মনে হচ্ছে ভিএস কোড টিম এখন ডিবাগিং রেসিপিগুলি সংরক্ষণ করছে।

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

Answer 3

এটি করার দুটি ভিন্ন উপায় আছে। আপনি একটি নতুন প্রক্রিয়া চালু করতে বা বিদ্যমান একটিতে সংযুক্ত করতে পারেন।

উভয় প্রক্রিয়ার মূল বিষয় হ'ল ওয়েবপ্যাক ডেভ সার্ভার এবং ভিএসকোড ডিবাগার একই সাথে চলমান ।

একটি প্রক্রিয়া চালু করুন

1. আপনার launch.jsonফাইলটিতে নিম্নলিখিত কনফিগারেশন যুক্ত করুন:

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

2. এক্সিকিউট করে অ্যাংুলার সিএলআই থেকে ওয়েবপ্যাক ডেভ সার্ভার চালান npm start

3. ভিএসকোড ডিবাগারে যান এবং "কৌণিক ডিবাগিং সেশন" কনফিগারেশন চালান। ফলস্বরূপ, আপনার অ্যাপ্লিকেশন সহ নতুন ব্রাউজার উইন্ডোটি খোলা হবে।

একটি বিদ্যমান প্রক্রিয়া সংযুক্ত করুন

1. তার জন্য আপনাকে খোলা পোর্ট দিয়ে ডিবাগার মোডে ক্রোম চালানো দরকার (আমার ক্ষেত্রে এটি হবে 9222):

   ম্যাক:

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

   উইন্ডোজ:

   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. এক্সিকিউট করে অ্যাংুলার সিএলআই থেকে ওয়েবপ্যাক ডেভ সার্ভার চালান npm start
4. "ক্রোম সংযুক্তি" কনফিগারেশন নির্বাচন করুন এবং এটি চালান।

এই ক্ষেত্রে, একটি নতুন উইন্ডো চালু করার পরিবর্তে বিদ্যমান ক্রোম প্রক্রিয়াটির সাথে সংযুক্ত ডিবাগার।

আমি আমার নিজস্ব নিবন্ধ লিখেছিলাম, যেখানে আমি চিত্রের সাথে এই পদ্ধতির বর্ণনা করেছি।

ভিএসকোডে অ্যাঙ্গুলারের জন্য ডিবাগারটি কীভাবে কনফিগার করতে হয় তার সহজ নির্দেশ

Comments

আপনাকে ধন্যবাদ, প্রতিবার ক্রোম শুরু করার সাথে সাথে আমাকে এই কমান্ডটি চালাতে chrome.exe --remote-debugging-port=9222হবে

— oneএইখানে ওয়ানটাইম

আপনার শংসাপত্রগুলির উপর নির্ভর করে আপনি উইন্ডোজ স্টার্ট মেনুতে ক্রোমে ডান ক্লিক করতে, বৈশিষ্ট্যগুলি হিট করতে এবং সেখানে পতাকা যুক্ত করতে সক্ষম হতে পারেন। এটি আমার কাজের কম্পিউটারে আমার পক্ষে কাজ করে না, তাই আমি উইন্ডোজের জন্য গিট ব্যাশে কমান্ডটি অ্যালিজ করে দিয়েছি।

— ভিটেল 232

Answer 4

ভিজ্যুয়াল স্টুডিও কোড সাইটে এটি বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে: https://code.visualstudio.com/docs/nodejs/angular- টিউটোরিয়াল

Comments

আপনি কি কোড.ভিসুয়ালস্টুডিও / ডকস / নোডজস/ … বলতে চাইছেন ? আপনি নিজের উত্তরটি সম্পাদনা করতে চাইলে · # _ডাবগিং-কৌণিক পয়েন্টগুলি আকর্ষণীয় বিন্দুতে সরাসরি ...

— পাইপো

@ পিপো নো, আমি নোডেজ বোঝাতে চাইনি, আমি সার্ভারের পাশে নোডেজ ব্যবহার করি না, তাই আমি জানি না।

— ভিক্টর আইনেস্কু

Answer 5

এই কনফিগারটি ব্যবহার করতে পারেন:

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

Answer 6

এখানে কিছুটা হালকা সমাধান দেওয়া হয়েছে, কৌনিক 2+ এর সাথে কাজ করে (আমি কৌনিক 4 ব্যবহার করছি)

এছাড়াও আপনি MEAN স্ট্যাক চালালে এক্সপ্রেস সার্ভারের জন্য সেটিংস যুক্ত করেছে।

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

Comments

আপনি কি এই কনফিগারেশনের সাথে কৌনিক হিসাবে একই সাথে আপনার সার্ভারের সাইড কোডটি ডিবাগ / ব্রেকপয়েন্ট করতে পারেন?

— মিকা 571

দুর্ভাগ্যবশত ... মিকা ৫71১১ না, আমি এখনই এটি চেষ্টা করেছি। আমি একই সাথে সার্ভার এবং ক্লায়েন্টের দিকও ডিবাগ করতে চাই।

— লেনিয়েল ম্যাককাফেরি

Answer 7

@ অ্যাসিজিক্সের উত্তরটি খুব পুঙ্খানুপুঙ্খ, তবে কেউ কেউ উল্লেখ করেছেন যে, ক্রোমে অ্যাংুলার ng serveঅ্যাপ্লিকেশন শুরু করতে এবং তারপরে লঞ্চ করার জন্য একাধিক ইন্টারঅ্যাকশন প্রয়োজন । আমি নিম্নলিখিত কনফিগারেশন ব্যবহার করে একটি একক ক্লিক দিয়ে এই কাজ পেয়েছি। @ 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"
        }
    ]
}

Answer 8

আমার ক্ষেত্রে আমি মূল কৌণিক প্রকল্প ফোল্ডার ট্রিটি ব্যবহার করতাম না এবং আমি জানতাম webRoot/ {workspaceFolder}বিটের সাথে কিছু সমস্যা হয়েছে তবে আমার সমস্ত পরীক্ষার ফলাফল পাওয়া যায়নি। অন্য এসও উত্তর থেকে একটি টিপ পেয়েছি যা আমি যদি আবার খুঁজে পাই তবে আমি লিঙ্ক করব।

{workspaceFolder}রানটাইমের সময় ভেরিয়েবলের বিষয়বস্তু সন্ধান করা এবং তারপরে আমার "এসসিআর" ফোল্ডারের যে স্থানে আপনি "অ্যাপ্লিকেশন / *" রেখেছেন সেটিতে এটির সংশোধন আমাকে কী সাহায্য করেছিল । এটি সন্ধান করার জন্য, আমি preLaunchTaskআমার লঞ্চ.জসন ফাইলটিতে একটি এবং যুক্ত করে একটি মূল্য যুক্ত করেছিলাম {workspaceFolder}।

লঞ্চ.জসন , যা ক্রোম ডিবাগার ইনস্টল করার পরে উপস্থিত হয়

{
  "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 টিপুন এবং আমি মনে করি এটি 'অন্যান্য কমান্ডের জন্য তৈরি টাস্ক' বা এরকম কিছু বলে। Tasks.json তৈরি হওয়ার পরে এটি দেখতে পাবে না। আপনি কেবল প্রবর্তন.জসন হিসাবে একই স্থানে ফাইলটি তৈরি করতে পারেন

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

একবার আমি যখন {{ওয়ার্কস্পেসফোল্ডার of এর মান জানতাম, তখন আমি এটি আমার নতুন প্রকল্প ট্রিতে আমার এসআরসি ফোল্ডারে দেখানোর জন্য স্থির করেছিলাম এবং এটি সব কাজ করে। ডিবাগিংয়ের জন্য ng serveপ্রিল্ল্যাঞ্চ টাস্ক বা বিল্ডের অংশ হিসাবে (উপরের উদাহরণগুলি) বা কমান্ড প্রম্পটে চালানো দরকার।

আপনি যে সমস্ত ভেরিয়েবল ব্যবহার করতে পারেন তার লিঙ্ক এখানে দেওয়া হয়েছে :