{"id":764,"date":"2024-05-05T19:09:27","date_gmt":"2024-05-05T18:09:27","guid":{"rendered":"https:\/\/codetopology.com\/?p=764"},"modified":"2024-05-05T19:09:29","modified_gmt":"2024-05-05T18:09:29","slug":"debugging-in-javascript-beginner-guide","status":"publish","type":"post","link":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/","title":{"rendered":"Debugging in JavaScript | Beginner Guide"},"content":{"rendered":"\n
\"debugging<\/figure>\n\n\n\n

Image by 15548337<\/a> from Pixabay<\/a><\/p>\n\n\n\n

Debugging is the process of finding bugs and\/or errors in the program. Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out the exact cause of the bug. Let’s see how to do debugging in javascript.<\/p>\n\n\n\n\n\n

Using Sources tab<\/h2>\n\n\n\n

Every modern web browser has developer tool option which can be accessed using F12<\/strong> key. In the developer tool, you can see sources <\/em>tab similar to this:<\/p>\n\n\n\n

\n
\"developer<\/figure>\n<\/figure>\n\n\n\n

The sources tab has 3 major panels, <\/p>\n\n\n\n

    \n
  1. Code Navigator on the very left side which is use to select the file that we want to debug.<\/li>\n\n\n\n
  2. Code editor that will show contents of the selected file from the navigator.<\/li>\n\n\n\n
  3. Some Important tools like Breakpoints<\/em>, Watch<\/em> etc (In 3rd section).<\/li>\n<\/ol>\n\n\n\n

    Let’s see these tools in details:<\/p>\n\n\n\n

    Breakpoints<\/h3>\n\n\n\n

    Breakpoints is a specific point in code that will pause the execution of code so that we can examine current state of the variables, code and execute commands in console to debug. We can simply set a breakpoint by clicking on a line number shown in code editor panel(As shown in above image).<\/p>\n\n\n\n

    You can see list of Breakpoints <\/em>created under the Breakpoints<\/em> menu, enable or disable it, or remove it by selecting “Remove Breakpoint” menu after right clicking on breakpoint name.<\/p>\n\n\n\n

    Watch<\/h3>\n\n\n\n

    Watch<\/em> feature allows you to monitor the value of specific variables or expression in real-time while the code is in execution. Watching a variable does not stop the execution like breakpoints. To set a watch on variable, you have 2 options:<\/p>\n\n\n\n

      \n
    1. By selecting and right clicking on a variable or expression in code editor panel and then selecting “Add Selected Text to Watches” as shown in below image <\/li>\n<\/ol>\n\n\n\n
      \"adding<\/figure>\n\n\n\n

      2. By clicking on ‘+’<\/strong> sign and selecting a variable name or expression in text area.<\/p>\n\n\n\n

      Using a ‘debugger’ command<\/h2>\n\n\n\n

      debugger<\/em> is a command that we can place inside our code to stop the execution and debug a code. When javascript interpreter encounters a debugger<\/em> command, it opens a developer tool and allows us to observe the state of the flow. If the developer tool is not open, browser will simply ignore this command. <\/p>\n\n\n\n

      let a = 4+4;\r\ndebugger;\r\nconsole.log(a);<\/code><\/pre>\n\n\n\n
      Using console.log() method<\/h2>\n\n\n\n
      We can put our own logs in the console to debug a code in javascript. This method allows to print variables, messages, expression etc. User will not see these logs unless they have developer tool open.<\/p>\n\n\n\n
      let a = 4+4;\r\nconsole.log(\"before printing value\");\r\nconsole.log(a);<\/code><\/pre>\n\n\n\n
      Output of the above code will be:<\/p>\n\n\n\n
      \"console.log<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      Popular IDEs like Visual Studio Code, WebStorm, and Atom also offer a comprehensive debugging tools and features for JavaScript development. Choosing the right IDE with help you in  debugging and solving the issue quickly.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Image by 15548337 from Pixabay Debugging is the process of finding bugs and\/or errors in the program. Debugging in JavaScript can sometimes feel like solving…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,6],"tags":[15,11],"class_list":["post-764","post","type-post","status-publish","format-standard","hentry","category-javascript-tutorials","category-scripts","tag-javascript","tag-scripts"],"yoast_head":"\nDebugging in JavaScript | Beginner Guide - < Code Topology \/><\/title>\n<meta name=\"description\" content=\"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Debugging in JavaScript | Beginner Guide\" \/>\n<meta property=\"og:description\" content=\"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"< Code Topology \/>\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-05T18:09:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-05T18:09:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"author\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Debugging in JavaScript | Beginner Guide\" \/>\n<meta name=\"twitter:description\" content=\"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"author\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\"},\"author\":{\"name\":\"author\",\"@id\":\"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1\"},\"headline\":\"Debugging in JavaScript | Beginner Guide\",\"datePublished\":\"2024-05-05T18:09:27+00:00\",\"dateModified\":\"2024-05-05T18:09:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\"},\"wordCount\":450,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1\"},\"image\":{\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280-1024x768.jpg\",\"keywords\":[\"javascript\",\"scripts\"],\"articleSection\":[\"JavaScript\",\"Scripts\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\",\"url\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\",\"name\":\"Debugging in JavaScript | Beginner Guide - < Code Topology \/>\",\"isPartOf\":{\"@id\":\"https:\/\/codetopology.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280-1024x768.jpg\",\"datePublished\":\"2024-05-05T18:09:27+00:00\",\"dateModified\":\"2024-05-05T18:09:29+00:00\",\"description\":\"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out\",\"breadcrumb\":{\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage\",\"url\":\"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg\",\"contentUrl\":\"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg\",\"width\":1280,\"height\":960,\"caption\":\"debugging in javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codetopology.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scripts\",\"item\":\"https:\/\/codetopology.com\/category\/scripts\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\/\/codetopology.com\/category\/scripts\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Debugging in JavaScript | Beginner Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codetopology.com\/#website\",\"url\":\"https:\/\/codetopology.com\/\",\"name\":\"< Code Topology \/>\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codetopology.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1\",\"name\":\"author\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/codetopology.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5bdbb3965858c4dc88faa09e5c57c06449c56405cb5f640ab09c6a8e30ecbb42?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5bdbb3965858c4dc88faa09e5c57c06449c56405cb5f640ab09c6a8e30ecbb42?s=96&d=mm&r=g\",\"caption\":\"author\"},\"logo\":{\"@id\":\"https:\/\/codetopology.com\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Debugging in JavaScript | Beginner Guide - < Code Topology \/>","description":"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out","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:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/","og_locale":"en_GB","og_type":"article","og_title":"Debugging in JavaScript | Beginner Guide","og_description":"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out","og_url":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/","og_site_name":"< Code Topology \/>","article_published_time":"2024-05-05T18:09:27+00:00","article_modified_time":"2024-05-05T18:09:29+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg","type":"image\/jpeg"}],"author":"author","twitter_card":"summary_large_image","twitter_title":"Debugging in JavaScript | Beginner Guide","twitter_description":"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out","twitter_image":"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg","twitter_misc":{"Written by":"author","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#article","isPartOf":{"@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/"},"author":{"name":"author","@id":"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1"},"headline":"Debugging in JavaScript | Beginner Guide","datePublished":"2024-05-05T18:09:27+00:00","dateModified":"2024-05-05T18:09:29+00:00","mainEntityOfPage":{"@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/"},"wordCount":450,"commentCount":0,"publisher":{"@id":"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1"},"image":{"@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280-1024x768.jpg","keywords":["javascript","scripts"],"articleSection":["JavaScript","Scripts"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/","url":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/","name":"Debugging in JavaScript | Beginner Guide - < Code Topology \/>","isPartOf":{"@id":"https:\/\/codetopology.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage"},"image":{"@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280-1024x768.jpg","datePublished":"2024-05-05T18:09:27+00:00","dateModified":"2024-05-05T18:09:29+00:00","description":"Debugging in JavaScript can sometimes feel like solving a puzzle, but with the right tools and techniques, you can track and find out","breadcrumb":{"@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#primaryimage","url":"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg","contentUrl":"https:\/\/codetopology.com\/wp-content\/uploads\/2024\/05\/code-4918185_1280.jpg","width":1280,"height":960,"caption":"debugging in javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/codetopology.com\/scripts\/javascript-tutorials\/debugging-in-javascript-beginner-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codetopology.com\/"},{"@type":"ListItem","position":2,"name":"Scripts","item":"https:\/\/codetopology.com\/category\/scripts\/"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/codetopology.com\/category\/scripts\/javascript-tutorials\/"},{"@type":"ListItem","position":4,"name":"Debugging in JavaScript | Beginner Guide"}]},{"@type":"WebSite","@id":"https:\/\/codetopology.com\/#website","url":"https:\/\/codetopology.com\/","name":"< Code Topology \/>","description":"","publisher":{"@id":"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codetopology.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/codetopology.com\/#\/schema\/person\/e82a9125be2d13e62c9409c44fadedf1","name":"author","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/codetopology.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5bdbb3965858c4dc88faa09e5c57c06449c56405cb5f640ab09c6a8e30ecbb42?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5bdbb3965858c4dc88faa09e5c57c06449c56405cb5f640ab09c6a8e30ecbb42?s=96&d=mm&r=g","caption":"author"},"logo":{"@id":"https:\/\/codetopology.com\/#\/schema\/person\/image\/"}}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/posts\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":4,"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/posts\/764\/revisions"}],"predecessor-version":[{"id":772,"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/posts\/764\/revisions\/772"}],"wp:attachment":[{"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/categories?post=764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetopology.com\/wp-json\/wp\/v2\/tags?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}