{"id":4313,"date":"2021-05-12T04:14:39","date_gmt":"2021-05-12T04:14:39","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4313"},"modified":"2021-05-12T05:49:12","modified_gmt":"2021-05-12T05:49:12","slug":"debugging-in-javascript","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/","title":{"rendered":"Debugging in JavaScript"},"content":{"rendered":"<p>Errors are common when we write the code and these errors can be logical or syntax. To identify these errors, we need Debuggers that can go through the entire code or program, identify the errors and also fix them. The process is known as debugging.<\/p>\n<ol>\n<li>\n<h2>Debugger<\/h2>\n<p>The debugger keyword is used in the code to forcefully stop the execution of the code at a breaking point and calls the debugging function. When debugging is required then the Debugger function is executed else no action is performed.<br \/>\n<code>&lt;h4>Debugging example using Debugger keyword&lt;\/h4><br \/>\nThe solution of 20 * 5 is:<br \/>\n&lt;p id=\"test\">&lt;\/p><br \/>\n&lt;p>If the debugger is turned on the code stops<br \/>\nexecution at the start of the debugger&lt;\/p><br \/>\nvar x = 20;<br \/>\nvar y = 5;<br \/>\nvar z = x * y;<br \/>\ndebugger; \/\/execution stops at this line<br \/>\ndocument.getElementById(\"test\").innerHTML = z;<br \/>\n<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/05\/javascript1.png\" alt=\"javascript1\" \/><\/p>\n<p> This all can be achieved through the \u201cConsole\u201d of the debugger menu.\n<\/li>\n<li>\n<h3>The use of console.log Method<\/h3>\n<p>There is another way in which the JavaScript values can be displayed in the debugger window.<br \/>\n<code>&lt;h3>New&lt;\/h3><br \/>\n&lt;h4>Example&lt;\/h4><br \/>\n&lt;p><br \/>\n1. To view the result activate debugging of your<br \/>\nbrowser(preferred the latest) by pressing F12 &lt;br><br \/>\n2. Select \"Console\" in the debugger menu.<br \/>\n&lt;\/p><br \/>\nx = \"Where do you work?\"<br \/>\ny = \"I work at GeeksforGeeks\"<br \/>\nconsole.log(x);<br \/>\nconsole.log(y);<br \/>\n<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/05\/javascript2.png\" alt=\"javascript2\"\/>\n<\/li>\n<li>\n<h3>Setting Breakpoints<\/h3>\n<p>The console.log() is a good way to find errors in the code but the breakpoint method is a faster, efficient, and better method. In this method, Breakpoints stops the execution of <a href=\"https:\/\/studysection.com\/blog\/tips-for-improving-php-code\/\">code<\/a> at that point where the breakpoint is set, so that the values of variables can be examined at that time.<br \/>\n<strong><em>Here are some pros of using the Breakpoints Method over console.log() method:<\/em><\/strong><br \/>\nIn the console.log() method the user has to understand the code and manually put console.log() at points in the code. But in the breakpoints method, we can set breakpoints through the Developers tool anywhere in code without even knowing it.<br \/>\nIn the console.log() method we have to manually print values of different variables but at a certain breakpoint, all the values of all variables are displayed automatically in the Developers tool.<br \/>\nEnter the Developers tool section by pressing the F12 key and go-to sources.<br \/>\nIn the source section, select a JavaScript file and set breakpoints by either selecting from the provided list like DOM breakpoints or Event listener breakpoints which stops the execution of code whenever an event occurs<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/05\/javascript3.png\" alt=\"javascript debugging\"\/><\/p>\n<p>OR set a breakpoint by simply clicking the line number shown in the code. In the below image, a breakpoint is set at line 23. (The code used is the same as the above example)<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/05\/javascript4.png\" alt=\"javascript debugging\" \/><\/p>\n<p>As shown in the image, the code stopped at line 23 and showed all the values of variables in the code at that point in time.<br \/>\nAs we can see the value of i was initially 1 and at the breakpoint, it is 5 now. Hence, GeeksForGeeks was printed 5-1=4 times.<\/p>\n<\/li>\n<\/ol>\n<p><small><em>StudySection provides a Windows 10 certification exam to help those with skills in Microsoft Windows 10 operating system. This exam is available for two different levels namely \u201cFoundation\u201d and \u201cAdvanced\u201d. This <a href=\"https:\/\/www.studysection.com\/windows-10-advanced\">Windows 10 Certification<\/a> can help you land in a good job position when attached to your resume.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Errors are common when we write the code and these errors can be logical or syntax. To identify these errors,<\/p>\n","protected":false},"author":1,"featured_media":4314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[84,199],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Debugging Errors in JavaScript - StudySection Blog<\/title>\n<meta name=\"description\" content=\"To perform debugging, we need Debuggers that can go through the entire code or program, identify the errors and also fix them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Debugging Errors in JavaScript - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"To perform debugging, we need Debuggers that can go through the entire code or program, identify the errors and also fix them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-12T04:14:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-12T05:49:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/05\/javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Debugging in JavaScript\",\"datePublished\":\"2021-05-12T04:14:39+00:00\",\"dateModified\":\"2021-05-12T05:49:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\"},\"wordCount\":440,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"debugging\",\"JavaScript\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\",\"url\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\",\"name\":\"Debugging Errors in JavaScript - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-05-12T04:14:39+00:00\",\"dateModified\":\"2021-05-12T05:49:12+00:00\",\"description\":\"To perform debugging, we need Debuggers that can go through the entire code or program, identify the errors and also fix them.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Debugging in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Debugging Errors in JavaScript - StudySection Blog","description":"To perform debugging, we need Debuggers that can go through the entire code or program, identify the errors and also fix them.","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:\/\/studysection.com\/blog\/debugging-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Debugging Errors in JavaScript - StudySection Blog","og_description":"To perform debugging, we need Debuggers that can go through the entire code or program, identify the errors and also fix them.","og_url":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-05-12T04:14:39+00:00","article_modified_time":"2021-05-12T05:49:12+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/05\/javascript.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Debugging in JavaScript","datePublished":"2021-05-12T04:14:39+00:00","dateModified":"2021-05-12T05:49:12+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/"},"wordCount":440,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["debugging","JavaScript"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/debugging-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/","url":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/","name":"Debugging Errors in JavaScript - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-05-12T04:14:39+00:00","dateModified":"2021-05-12T05:49:12+00:00","description":"To perform debugging, we need Debuggers that can go through the entire code or program, identify the errors and also fix them.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/debugging-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/debugging-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Debugging in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":153,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4313"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=4313"}],"version-history":[{"count":3,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4313\/revisions"}],"predecessor-version":[{"id":4321,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4313\/revisions\/4321"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/4314"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=4313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=4313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=4313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}