{"id":277,"date":"2023-01-05T09:00:00","date_gmt":"2023-01-05T17:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=277"},"modified":"2023-01-04T15:03:41","modified_gmt":"2023-01-04T23:03:41","slug":"the-debugger-keyword","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/the-debugger-keyword\/","title":{"rendered":"The debugger keyword"},"content":{"rendered":"\n<p>Yesterday, we covered how to use the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/debugging-with-the-json-pipe\/\" target=\"_blank\" rel=\"noopener\" title=\"\">JSON pipe with a &lt;pre&gt; tag<\/a> to debug JSON data on a web page.<\/p>\n\n\n\n<p>Today, I want to cover one more debugging technique that is another time saver: The <code>debugger<\/code> keyword.<\/p>\n\n\n\n<p>Whenever you want to add a breakpoint in your web application, add the Javascript instruction:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">debugger<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then open the dev tools in your browser and navigate to your application URL. Whenever Javascript hits that debugger statement, the runtime will stop on that breakpoint, allowing you to debug your code:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"399\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/01\/image-1.png\" alt=\"\" class=\"wp-image-279\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/01\/image-1.png 969w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/01\/image-1-300x124.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/01\/image-1-768x316.png 768w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/figure>\n\n\n\n<p>Once the browser is paused on that breakpoint, you can add other breakpoints by clicking on the line numbers in the browser dev tools, just like regular debuggers work.<\/p>\n\n\n\n<p>Two important things to note:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The breakpoint works only when the dev tools are open<\/li>\n\n\n\n<li>Don&#8217;t forget to remove the <code>debugger<\/code> statement once you&#8217;re done debugging. You probably don&#8217;t want to ship that one to production.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, we covered how to use the JSON pipe with a &lt;pre&gt; tag to debug JSON data on a web page. Today, I want to cover one more debugging technique that is another time saver: The debugger keyword. Whenever you want to add a breakpoint in your web application, add the Javascript instruction: Then open [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,15],"tags":[],"class_list":["post-277","post","type-post","status-publish","format-standard","hentry","category-debugging","category-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/277\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}