{"id":3656028,"date":"2023-08-25T08:00:00","date_gmt":"2023-08-25T12:00:00","guid":{"rendered":"https:\/\/spin.atomicobject.com\/?p=3656028"},"modified":"2023-08-24T15:25:58","modified_gmt":"2023-08-24T19:25:58","slug":"breakpoints-angular-applications","status":"publish","type":"post","link":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/","title":{"rendered":"Stop Using console.log in Your Angular Applications and Do This Instead"},"content":{"rendered":"

I often see developers trying to use console.log<\/code> to debug their Angular applications, and I’ve been guilty of this as well. But let’s explore a much better way by using breakpoints and debug mode in JetBrains Webstorm<\/a>.<\/p>\n

Adding Breakpoints<\/h2>\n

While I hope most developers are familiar with this concept, let’s briefly review adding breakpoints in Webstorm. To start, open the TypeScript file that we want to debug. On the left-hand side, in the line number gutter, click to add a breakpoint on the selected line. You can also right-click on your breakpoint for more advanced settings, like adding a condition to the breakpoint.<\/p>\n

Setting up Run Configurations<\/h2>\n

Generally, Webstorm will generate the required run configurations when you open the project for the first time. However, if you are missing these, let’s review the setup.<\/p>\n

First, we will need a configuration for launching the Angular Live Development server. You should see the run configuration menu in the upper right-hand corner of Webstorm. Click on the drop-down and select “Edit Configurations…”. In the Run\/Debug Configurations menu, click the “+” icon in the top left corner and select “npm”. We will name this configuration “Angular CLI Server”. By default, Webstorm should have detected your package.json<\/code> file, but if not, make sure the path is correct.<\/p>\n

For the command, choose “run,” and for the scripts, choose “start” (if you are using the standard Angular package.json settings, the “start” script should be ng serve<\/code>). You will also want to make sure the node interpreter and package manager are set to the version of node and npm you are using in your project (which Webstorm should do by default).<\/p>\n

\"breakpoints\"<\/a>
Click for larger image<\/figcaption><\/figure><\/p>\n

Next, we need a configuration for JavaScipt Debugging. In the Run\/Debug Configurations menu, click the “+” icon and select “JavaScript Debug”. We will name this configuration “Angular Application” and only need to set the URL. We will set this as https:\/\/localhost:4200<\/code>, which Angular applications use by default. If your application is configured differently, adjust the URL as appropriate.<\/p>\n

\"breakpoints\"<\/a>
Click for larger image.<\/figcaption><\/figure><\/p>\n

Running the Angular Application in Debug Mode<\/h2>\n

Next, we will want to run our Angular application in debug mode so that when our program execution hits our breakpoints, we suspend execution. Click on the drop-down for run configurations and select your Angular CLI Server configuration. Next, click the “Debug” icon (or option+D<\/code> if you’re on a Mac) to run the application in debug mode. The debug window will open. And, after the project has compiled successfully, you’ll get the familiar message that the Angular live development server is listening on localhost:4200 (or whichever port you have configured for your project).<\/p>\n

Now, choose the run configuration drop-down again, select your Angular Application Javascript Debug run configuration, and click the debug button. Chrome should now automatically open with https:\/\/localhost:4200<\/code>.<\/p>\n

Triggering the Breakpoint<\/h2>\n

Now, you will want to navigate to the area of the application that will trigger your brake point. For example, I set a breakpoint on an onClick function tied to a button. The chrome window will gray out when I click that button, and I see a small message “Paused in debugger.”<\/p>\n

\"breakpoints\"<\/a>
Click for a larger image.<\/figcaption><\/figure><\/p>\n

Over in Webstorm, you’ll notice a few things. First, the file with the breakpoint should have opened if it wasn’t open already, and you will see the breakpoint we added is now a green checkmark. You will also notice that the line we have suspended execution on is highlighted, and the current state of any of our variables should display their current values. The debug window will now also appear with all the tools you normally expect from a debugger.<\/p>\n

\"\"<\/p>\n

Now the full power of the Webstorm debugger is at your fingertips for your Angular application!<\/p>\n","protected":false},"excerpt":{"rendered":"

I often see developers trying to use console.log to debug their Angular applications, and I’ve been guilty of this as well. But let’s explore a much better way by using breakpoints and debug mode in JetBrains Webstorm. Adding Breakpoints While I hope most developers are familiar with this concept, let’s briefly review adding breakpoints in […]<\/p>\n","protected":false},"author":587,"featured_media":3650583,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23072],"tags":[19420,22935,23012],"series":[],"class_list":["post-3656028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-jetbrains","tag-debug","tag-angular"],"acf":[],"yoast_head":"\nUse Breakpoints, Not console.log in Your Angular Applications<\/title>\n<meta name=\"description\" content=\"Developers sometimes try `console.log` to debug their Angular applications. Let's use breakpoints and debug mode in JetBrains Webstorm.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use Breakpoints, Not console.log in Your Angular Applications\" \/>\n<meta property=\"og:description\" content=\"Developers sometimes try `console.log` to debug their Angular applications. Let's use breakpoints and debug mode in JetBrains Webstorm.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/\" \/>\n<meta property=\"og:site_name\" content=\"Atomic Spin\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/atomicobject\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-25T12:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rob Bell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@atomicobject\" \/>\n<meta name=\"twitter:site\" content=\"@atomicobject\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rob Bell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/\"},\"author\":{\"name\":\"Rob Bell\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/person\\\/b865cb05d180a29078eb03a6e521c196\"},\"headline\":\"Stop Using console.log in Your Angular Applications and Do This Instead\",\"datePublished\":\"2023-08-25T12:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/\"},\"wordCount\":657,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/atomicobject.com\\\/\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg\",\"keywords\":[\"jetbrains\",\"debug\",\"angular\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/\",\"name\":\"Use Breakpoints, Not console.log in Your Angular Applications\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg\",\"datePublished\":\"2023-08-25T12:00:00+00:00\",\"description\":\"Developers sometimes try `console.log` to debug their Angular applications. Let's use breakpoints and debug mode in JetBrains Webstorm.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/breakpoints-angular-applications\\\/#primaryimage\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg\",\"contentUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg\",\"width\":2560,\"height\":1707,\"caption\":\"Stop Using console.log in Your Angular Applications and Do This Instead\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#website\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/\",\"name\":\"Atomic Spin\",\"description\":\"Atomic Object\u2019s blog on everything we find fascinating.\",\"publisher\":{\"@id\":\"https:\\\/\\\/atomicobject.com\\\/\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/spin.atomicobject.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#organization\",\"name\":\"Atomic Object\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/AO-Logo-Emblem-Color.png\",\"contentUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/AO-Logo-Emblem-Color.png\",\"width\":258,\"height\":244,\"caption\":\"Atomic Object\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/atomicobject\",\"https:\\\/\\\/x.com\\\/atomicobject\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/person\\\/b865cb05d180a29078eb03a6e521c196\",\"name\":\"Rob Bell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/35089320c77f9fd03826358d960bcf3156cec6cf9ba12fe9f3b9448ba7afbc50?s=96&d=blank&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/35089320c77f9fd03826358d960bcf3156cec6cf9ba12fe9f3b9448ba7afbc50?s=96&d=blank&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/35089320c77f9fd03826358d960bcf3156cec6cf9ba12fe9f3b9448ba7afbc50?s=96&d=blank&r=pg\",\"caption\":\"Rob Bell\"},\"description\":\"Software Consultant & Developer at Atomic Object Ann Arbor\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/author\\\/rob-bell\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use Breakpoints, Not console.log in Your Angular Applications","description":"Developers sometimes try `console.log` to debug their Angular applications. Let's use breakpoints and debug mode in JetBrains Webstorm.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/","og_locale":"en_US","og_type":"article","og_title":"Use Breakpoints, Not console.log in Your Angular Applications","og_description":"Developers sometimes try `console.log` to debug their Angular applications. Let's use breakpoints and debug mode in JetBrains Webstorm.","og_url":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/","og_site_name":"Atomic Spin","article_publisher":"https:\/\/www.facebook.com\/atomicobject","article_published_time":"2023-08-25T12:00:00+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg","type":"image\/jpeg"}],"author":"Rob Bell","twitter_card":"summary_large_image","twitter_creator":"@atomicobject","twitter_site":"@atomicobject","twitter_misc":{"Written by":"Rob Bell","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/#article","isPartOf":{"@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/"},"author":{"name":"Rob Bell","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/person\/b865cb05d180a29078eb03a6e521c196"},"headline":"Stop Using console.log in Your Angular Applications and Do This Instead","datePublished":"2023-08-25T12:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/"},"wordCount":657,"commentCount":0,"publisher":{"@id":"https:\/\/atomicobject.com\/"},"image":{"@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/#primaryimage"},"thumbnailUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg","keywords":["jetbrains","debug","angular"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/","url":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/","name":"Use Breakpoints, Not console.log in Your Angular Applications","isPartOf":{"@id":"https:\/\/spin.atomicobject.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/#primaryimage"},"image":{"@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/#primaryimage"},"thumbnailUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg","datePublished":"2023-08-25T12:00:00+00:00","description":"Developers sometimes try `console.log` to debug their Angular applications. Let's use breakpoints and debug mode in JetBrains Webstorm.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spin.atomicobject.com\/breakpoints-angular-applications\/#primaryimage","url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg","contentUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JillDeVriesPhotography-AO2022-88-scaled-1.jpeg","width":2560,"height":1707,"caption":"Stop Using console.log in Your Angular Applications and Do This Instead"},{"@type":"WebSite","@id":"https:\/\/spin.atomicobject.com\/#website","url":"https:\/\/spin.atomicobject.com\/","name":"Atomic Spin","description":"Atomic Object\u2019s blog on everything we find fascinating.","publisher":{"@id":"https:\/\/atomicobject.com\/"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spin.atomicobject.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/spin.atomicobject.com\/#organization","name":"Atomic Object","url":"https:\/\/spin.atomicobject.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/logo\/image\/","url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/AO-Logo-Emblem-Color.png","contentUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/AO-Logo-Emblem-Color.png","width":258,"height":244,"caption":"Atomic Object"},"image":{"@id":"https:\/\/spin.atomicobject.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/atomicobject","https:\/\/x.com\/atomicobject"]},{"@type":"Person","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/person\/b865cb05d180a29078eb03a6e521c196","name":"Rob Bell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/35089320c77f9fd03826358d960bcf3156cec6cf9ba12fe9f3b9448ba7afbc50?s=96&d=blank&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/35089320c77f9fd03826358d960bcf3156cec6cf9ba12fe9f3b9448ba7afbc50?s=96&d=blank&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/35089320c77f9fd03826358d960bcf3156cec6cf9ba12fe9f3b9448ba7afbc50?s=96&d=blank&r=pg","caption":"Rob Bell"},"description":"Software Consultant & Developer at Atomic Object Ann Arbor","url":"https:\/\/spin.atomicobject.com\/author\/rob-bell\/"}]}},"_links":{"self":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts\/3656028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/users\/587"}],"replies":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/comments?post=3656028"}],"version-history":[{"count":0,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts\/3656028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/media\/3650583"}],"wp:attachment":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/media?parent=3656028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/categories?post=3656028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/tags?post=3656028"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/series?post=3656028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}