{"id":2554,"date":"2019-05-30T19:24:42","date_gmt":"2019-05-31T02:24:42","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=2554"},"modified":"2020-12-29T12:49:05","modified_gmt":"2020-12-29T20:49:05","slug":"how-to-debug-javascript-in-chrome","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/","title":{"rendered":"How to Debug JavaScript in Chrome for Beginners"},"content":{"rendered":"\n<p>JavaScript is one of the most popular coding languages in the whole wide world. It\u2019s everywhere, too\u2014you\u2019ll find JavaScript hanging out in all your favorite websites and most treasured apps. You\u2019ll discover JavaScript all over Chrome, also, so if you want to write Chrome-friendly JavaScript programs, you\u2019ll need to know how to debug JavaScript in Chrome. Don\u2019t start tugging at your collar and panicking, though. First of all, you look ridiculous with your collar all pulled out like that. Secondly, we\u2019ve got your back.<br><\/p>\n\n\n\n<p>We\u2019ve put this guide together to help you set up a debug process for JavaScript in Chrome. We give you a step-by-step debug process that you can take and adapt to suit your specific circumstances, and we look at the most useful debugging techniques in Chrome. We also give you a rundown of the most valuable DevTools that Chrome provides for bug squashin\u2019. So, let\u2019s get started. Away we go!<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Get an Error Report Extension<\/strong><\/h2>\n\n\n\n<p>One of the nice things about Chrome is how easy it is to add and remove extensions that aid you in all sorts of ways. You can take advantage of this when you debug JavaScript in Chrome by installing an error report extension to identify and organize any issues within the page. An error reporting extension will remove much of the guesswork from your debugging process and save you valuable time and resources.<br><\/p>\n\n\n\n<p>You have your choice of many excellent error report extensions, including Raygun and JavaScript Errors Notifier (really original, guys). Install one of them to get a proper error reporting framework going. Once you\u2019ve installed your reporting extension, you\u2019ll be able to use it to track any errors and get a better idea of the issue. Best of all, many error reporting extensions are either free or cost very little.<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/artem-sapegin-199614-unsplash.jpg\" alt=\"\u201dTurned on MacBook Pro near brown ceramic mug\u201d\" class=\"wp-image-2556\" width=\"800\" height=\"534\"\/><figcaption>And now, for your enjoyment, a cup of java next to some script. You\u2019re welcome.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use Your DevTools<\/strong><\/h2>\n\n\n\n<p>Writing amazing code isn\u2019t worth anything if you don\u2019t have a good set of tools you can use to get under your browser\u2019s hood and tinker with it to resolve errors and optimize performance. Luckily, Chrome has a robust set of DevTools you can use to get to the bottom of any situation that pops up. Chrome\u2019s DevTools are a JavaScript coder\u2019s best friend and can get you where you need to be. The tools range in function, but proper use can isolate your issue and give you the best chance at finding a solution.<br><\/p>\n\n\n\n<p>You can access Chrome\u2019s DevToolkit in a variety of ways, depending on what you need to accomplish. Ctrl-Shift-I or right-clicking an element and selecting \u201cinspect\u201d will open your DevTools pane and give you access to an array of essential and powerful gadgets. You can use the console to examine events, and the elements tab will allow you to view the page script and highlight specific features for a more in-depth examination.<br><\/p>\n\n\n\n<p>And that\u2019s the skinny on debugging JavaScript in Chrome. It\u2019s never a fun time when you have to figure out where your code went wrong, but Chrome tries to make the experience as painless as possible. Chrome has a robust suite of debugging tools that you can use to isolate and remove any JavaScript errors, and with our assistance, you\u2019ll be able to take advantage of them all.<\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript is one of the most popular coding languages in the whole wide world. It\u2019s everywhere, too\u2014you\u2019ll find JavaScript hanging out in all your favorite websites and most treasured apps. You\u2019ll discover JavaScript all over Chrome, also, so if you want to write Chrome-friendly JavaScript programs, you\u2019ll need to know how to debug JavaScript in&hellip;","protected":false},"author":21,"featured_media":2555,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[12688],"class_list":{"0":"post-2554","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-coding-resources"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Debug JavaScript in Chrome for Beginners | Career Karma<\/title>\n<meta name=\"description\" content=\"Don\u2019t get stuck in a rut when you have to debug JavaScript in Chrome. Our guide will show you how to use Chrome\u2019s toolkit to squash your bugs fast!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Debug JavaScript in Chrome for Beginners\" \/>\n<meta property=\"og:description\" content=\"Don\u2019t get stuck in a rut when you have to debug JavaScript in Chrome. Our guide will show you how to use Chrome\u2019s toolkit to squash your bugs fast!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-31T02:24:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T20:49:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paul Larkin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul Larkin\" \/>\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:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\"},\"author\":{\"name\":\"Paul Larkin\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/1761df0013e0bbfeb16c0d4078e4685d\"},\"headline\":\"How to Debug JavaScript in Chrome for Beginners\",\"datePublished\":\"2019-05-31T02:24:42+00:00\",\"dateModified\":\"2020-12-29T20:49:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\"},\"wordCount\":582,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg\",\"keywords\":[\"coding resources\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\",\"name\":\"How to Debug JavaScript in Chrome for Beginners | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg\",\"datePublished\":\"2019-05-31T02:24:42+00:00\",\"dateModified\":\"2020-12-29T20:49:05+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/1761df0013e0bbfeb16c0d4078e4685d\"},\"description\":\"Don\u2019t get stuck in a rut when you have to debug JavaScript in Chrome. Our guide will show you how to use Chrome\u2019s toolkit to squash your bugs fast!\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg\",\"width\":1200,\"height\":800,\"caption\":\"Google home page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Debug JavaScript in Chrome for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/1761df0013e0bbfeb16c0d4078e4685d\",\"name\":\"Paul Larkin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/paul-larkin-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/paul-larkin-150x150.jpg\",\"caption\":\"Paul Larkin\"},\"description\":\"Paul Larkin has years of experience in the tech industry and writes about cybersecurity and future of work.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/paul-larkin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Debug JavaScript in Chrome for Beginners | Career Karma","description":"Don\u2019t get stuck in a rut when you have to debug JavaScript in Chrome. Our guide will show you how to use Chrome\u2019s toolkit to squash your bugs fast!","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:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/","og_locale":"en_US","og_type":"article","og_title":"How to Debug JavaScript in Chrome for Beginners","og_description":"Don\u2019t get stuck in a rut when you have to debug JavaScript in Chrome. Our guide will show you how to use Chrome\u2019s toolkit to squash your bugs fast!","og_url":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2019-05-31T02:24:42+00:00","article_modified_time":"2020-12-29T20:49:05+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg","type":"image\/jpeg"}],"author":"Paul Larkin","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Paul Larkin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/"},"author":{"name":"Paul Larkin","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/1761df0013e0bbfeb16c0d4078e4685d"},"headline":"How to Debug JavaScript in Chrome for Beginners","datePublished":"2019-05-31T02:24:42+00:00","dateModified":"2020-12-29T20:49:05+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/"},"wordCount":582,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg","keywords":["coding resources"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/","url":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/","name":"How to Debug JavaScript in Chrome for Beginners | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg","datePublished":"2019-05-31T02:24:42+00:00","dateModified":"2020-12-29T20:49:05+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/1761df0013e0bbfeb16c0d4078e4685d"},"description":"Don\u2019t get stuck in a rut when you have to debug JavaScript in Chrome. Our guide will show you how to use Chrome\u2019s toolkit to squash your bugs fast!","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/05\/christian-wiediger-1473971-unsplash.jpg","width":1200,"height":800,"caption":"Google home page"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-in-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Debug JavaScript in Chrome for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/1761df0013e0bbfeb16c0d4078e4685d","name":"Paul Larkin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/paul-larkin-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/paul-larkin-150x150.jpg","caption":"Paul Larkin"},"description":"Paul Larkin has years of experience in the tech industry and writes about cybersecurity and future of work.","url":"https:\/\/careerkarma.com\/blog\/author\/paul-larkin\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/2554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=2554"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/2554\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/2555"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=2554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=2554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=2554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}