{"id":2020,"date":"2022-07-15T00:50:47","date_gmt":"2022-07-14T22:50:47","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2020"},"modified":"2022-07-15T00:54:28","modified_gmt":"2022-07-14T22:54:28","slug":"__trashed","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/07\/15\/__trashed\/","title":{"rendered":"How to debug Angular In VS Code"},"content":{"rendered":"\n<p>Angular is usually edited in&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">Visual Studio Code<\/a>&nbsp;editor. Their powers combined let you not only develop Angular app code but also debug it through the editor! let us introduce the Angular debugging in VS code in this article with an example.<\/p>\n\n\n\n<ul><li>Step 1: Create an Angular application;<\/li><li>Step 2: Install Debugger for Chrome (you could install other debuggers you like)<\/li><li>Step 3: Configure Debug Environment;<\/li><li>Step 4: Start Debugging;<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 1 &#8211; Create an Angular application<\/strong><br>We use the Angular CLI to create projects,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g @angular\/cli            \/\/ Install the Angular CLI  \nng new my-app                          \/\/ Creat a new Angular app  \ncd my-app                              \/\/ change to the app directory  \ncode .                                 \/\/ Open VS Code for the current directory <\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 2 &#8211; Install Debugger for Chrome&nbsp;<\/strong>(you could install other debuggers you like, such as Firefox Debugger)<\/p>\n\n\n\n<p>In VS Code environment:&nbsp; Right Click Manage (Left Bottom Corner) &gt; Extensions (or&nbsp;Ctrl+Shift+X)&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image.png\" alt=\"\" class=\"wp-image-2023\" width=\"295\" height=\"334\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image.png 512w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-265x300.png 265w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/figure><\/div>\n\n\n\n<p>Open the Extensions view.&nbsp; Then type &#8216;chrome&#8217; in the search box. You&#8217;ll see the extensions: Debugger for Chrome.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-1.png\" alt=\"\" class=\"wp-image-2024\" width=\"331\" height=\"386\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-1.png 595w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-1-257x300.png 257w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/figure><\/div>\n\n\n\n<p>Press the Install button for Debugger for Chrome&nbsp;&nbsp;<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 3 &#8211; Configure Debug Environment<br><\/strong>&nbsp;In VS Code environment: Click Run Button on the left side (or&nbsp;Ctrl+Shift+D)&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-2.png\" alt=\"\" class=\"wp-image-2025\" width=\"240\" height=\"300\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-2.png 368w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-2-240x300.png 240w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/figure><\/div>\n\n\n\n<p>If running and debugging is not yet configured (no&nbsp;<code>launch.json<\/code>&nbsp;has been created), VS Code shows the Run start view,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-3.png\" alt=\"\" class=\"wp-image-2026\" width=\"432\" height=\"208\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-3.png 657w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-3-300x144.png 300w\" sizes=\"(max-width: 432px) 100vw, 432px\" \/><\/figure><\/div>\n\n\n\n<p><br>You can configure the environment by creating&nbsp;<code>launch.json<\/code>&nbsp;file yourself manually, but you can do that automatically by Clicking the Run and Debug button to open the Select Environment dialog box,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-4.png\" alt=\"\" class=\"wp-image-2027\" width=\"422\" height=\"194\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-4.png 646w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-4-300x138.png 300w\" sizes=\"(max-width: 422px) 100vw, 422px\" \/><\/figure><\/div>\n\n\n\n<p>Select Chrome, then VS Code will create an&nbsp;<code>launch.json<\/code><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-5.png\" alt=\"\" class=\"wp-image-2028\" width=\"624\" height=\"265\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-5.png 783w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-5-300x127.png 300w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-5-768x326.png 768w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure><\/div>\n\n\n\n<p>You might need to change the port to what your app running on, say, 4200.&nbsp;<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 4 &#8211; Start Debugging<br><\/strong>&nbsp;Now, in VS Code, if you Click Run Button on the left side (or&nbsp;Ctrl+Shift+D), you will have a debugging environment like this,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-6.png\" alt=\"\" class=\"wp-image-2029\" width=\"753\" height=\"463\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-6.png 836w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-6-300x184.png 300w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-6-768x472.png 768w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/figure><\/div>\n\n\n\n<p>Run the app from the Angular CLI (very important, otherwise the debugging will not work) by command,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng server -o <\/code><\/pre>\n\n\n\n<p>You will see the app running,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-7.png\" alt=\"\" class=\"wp-image-2030\" width=\"412\" height=\"276\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-7.png 722w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-7-300x201.png 300w\" sizes=\"(max-width: 412px) 100vw, 412px\" \/><\/figure><\/div>\n\n\n\n<p>Now, set your breakpoint, and run debug,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"274\" height=\"60\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-8.png\" alt=\"\" class=\"wp-image-2031\"\/><\/figure><\/div>\n\n\n\n<p>Once a debug session starts, the Debug toolbar will appear on the top of the editor.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"379\" height=\"63\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-9.png\" alt=\"\" class=\"wp-image-2032\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-9.png 379w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-9-300x50.png 300w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><\/figure><\/div>\n\n\n\n<ul><li>Continue \/ Pause&nbsp;F5<\/li><li>Step Over&nbsp;F10<\/li><li>Step Into&nbsp;F11<\/li><li>Step Out&nbsp;Shift+F11<\/li><li>Restart&nbsp;Ctrl+Shift+F5<\/li><li>Stop&nbsp;Shift+F5<\/li><\/ul>\n\n\n\n<p>The debug session is on like this,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-10.png\" alt=\"\" class=\"wp-image-2033\" width=\"494\" height=\"209\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-10.png 777w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-10-300x127.png 300w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/07\/image-10-768x325.png 768w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-cyan-blue-color\">PS:<\/span><\/strong> <em>We can also debug Angular applications without using any breakpoints and without using&nbsp;<strong>console.log<\/strong>. Instead, we will look at debugging features introduced with Angular 9 under the&nbsp;<strong>ng&nbsp;<\/strong>namespace variable, which is automatically available in development mode but not exposed when the application is running in production mode.<\/em> ( read the article here : <a href=\"https:\/\/blog.angulartraining.com\/how-to-debug-angular-applications-5fcc98900c52\">https:\/\/blog.angulartraining.com\/how-to-debug-angular-applications-5fcc98900c52<\/a> )<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular is usually edited in&nbsp;Visual Studio Code&nbsp;editor. Their powers combined let you not only develop Angular app code but also debug it through the editor! let us introduce the Angular debugging in VS code in this article with an example. Step 1: Create an Angular application; Step 2: Install Debugger for Chrome (you could install [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2037,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[310,573,574,571,572],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2020"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2020"}],"version-history":[{"count":5,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2020\/revisions"}],"predecessor-version":[{"id":2039,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2020\/revisions\/2039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2037"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}