{"id":4490,"date":"2018-04-27T19:39:39","date_gmt":"2018-04-27T19:39:39","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2018\/04\/27\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/"},"modified":"2019-08-30T10:12:06","modified_gmt":"2019-08-30T15:12:06","slug":"how-to-troubleshoot-javascript-using-google-chrome-developer-tools","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/","title":{"rendered":"How to Troubleshoot JavaScript Using Google Chrome Developer Tools"},"content":{"rendered":"<div class=\"in_this_tutorial\">\n<h2>In This Tutorial:<\/h2>\n<p><a class=\"btn btn-primary\" href=\"#access-dev-tools\" type=\"button\">Access Dev Tools<\/a> <a class=\"btn btn-primary\" href=\"#troubleshoot-js\" type=\"button\">Troubleshoot JavaScript<\/a><\/p>\n<\/div>\n<p><!--The <em>Google Chrome<\/em> web browser includes a variety of <strong>Developer Tools<\/strong> that can help you while maintaining various components of your website. For instance, you can use the <strong>Chrome Dev Tools<\/strong> to <a href=\"\" target=\"_blank\" title=\"Click here to navigate to our guide and learn how to use Google Chrome Dev Tools to edit CSS and preview those changes live.\"  rel=\"noopener noreferrer\">edit CSS<\/a> and preview live changes.\n\n--><\/p>\n<p>The <em>Google Chrome<\/em> web browser includes a variety of <strong>Developer Tools<\/strong> that can help you while maintaining various components of your website. For instance, you can use the <strong>Chrome Dev Tools<\/strong> to edit CSS and preview live changes.<\/p>\n<p>Because of the versatility of Google Chrome\u2019s Developer Tools you can also pinpoint errors in your code and edit the script(s) live. In this guide, you can learn how to <strong>use Google Chrome Developer Tools<\/strong> to <strong>troubleshoot JavaScript<\/strong> live on your website, without affecting the experience for your users.<\/p>\n<p><a name=\"access-dev-tools\"><\/a><\/p>\n<h2>Access Dev Tools<\/h2>\n<p>There are multiple ways to access the <strong>Developer Tools in Google Chrome<\/strong>. You can follow any of the steps from the list below.<\/p>\n<ul>\n<li>With your web browser open, simultaneously press the <b>Ctrl<\/b> + <b>Shift<\/b> + <b>i<\/b> (for MacOS: <b>command<\/b> + <b>option<\/b> + <b>i<\/b>) keys on your keyboard.<\/li>\n<li>Click on the <i>three (3) dot<\/i> menu icon. Hover your mouse of <b>More tools<\/b><br>\nThen, select <strong>Developer tools<\/strong>.<\/li>\n<li>Right-click anywhere on a web page. Select <b>Inspect<\/b> from the menu list.<\/li>\n<li>Press the <b>F12<\/b> key while on a web page\u2013only on Windows\/Linux.<\/li>\n<\/ul>\n<div class=\"alert alert-info\" role=\"alert\">\n<p><b>NOTE:<\/b> Any of the steps above will open the <strong>Developer Tools pane<\/strong>. To follow along with the example, it may be easier to open <em>Dev Tools<\/em> as a separate window. To do this simply click on the three (3) dot menu icon <u>inside of the Dev Tools pane<\/u>, then click to select the first icon in the <b>Dock side<\/b> setting to \u201c<i>Undock into separate window<\/i>\u201c. If you are using Windows\/Linux, you can also press <b>Ctrl<\/b> + <b>Shift<\/b> + <b>d<\/b> to toggle between views.<\/p>\n<p>In a separate, maximized window the <b>File Navigator pane<\/b> appears in the first column (from the left), the <b>Code Editor pane<\/b> is displayed in the middle column, and the <strong>JavaScript pane<\/strong> appears in the third column (from the left). If the <em>Dev Tools pane<\/em> width does not allow for all three columns, then the <strong>JavaScript pane<\/strong> will be displayed below the <b>File Navigator<\/b> and <b>Code Editor panes<\/b> The <b>Console pane<\/b> appears below the other panes, regardless of the view choosen. If the <b>Console pane<\/b> is not displayed, simply press the <b>Esc<\/b> key and it should appear. See figure(s) below:<\/p>\n<table class=\"article_table\">\n<tbody>\n<tr>\n<th>Full Width<\/th>\n<th>Partial Width<\/th>\n<\/tr>\n<tr>\n<td><a href=\"\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"1024\" height=\"966\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled-1024x966.png\" class=\"optimized-lcp-image\" alt=\"Google Chrome Developer Tools pane opened in full width and panes labeled.\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled-1024x966.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled-300x283.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled-768x724.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png 1071w\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<\/td>\n<td><a href=\"\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-partial-width-labeled.png\" rel=\"lightbox-0\"><img decoding=\"async\" align=\"right\" alt=\"Google Chrome Developer Tools pane opened as partial width and panes labeled.\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-partial-width-labeled.png\" title=\"Click to enlarge this screenshot image.\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a name=\"troubleshoot-js\"><\/a><\/p>\n<h2>Troubleshoot JavaScript<\/h2>\n<p>After opening the <em>Dev Tools pane<\/em>, several tabs will be displayed for you to choose from. The instructions in this section will guide you through an example that you can learn how to <strong>troubleshoot JavaScript with the Developer Tools available in Chrome<\/strong>.<\/p>\n<ol class=\"article_list\">\n<li>Using <b>Incognito Mode<\/b>, navigate to <a href=\"https:\/\/googlechrome.github.io\/devtools-samples\/debug-js\/get-started\" target=\"_blank\" title=\"Click here to navigate to the Google Developers website.\" rel=\"noopener noreferrer\">https:\/\/googlechrome.github.io\/devtools-samples\/debug-js\/get-started<\/a> in your Google Chrome Browser.<\/li>\n<li><a href=\"#access-dev-tools\" target=\"_blank\" title=\"Click here to scroll up to the instructions above to access Dev Tools.\" rel=\"noopener noreferrer\">Open the <strong>Developer Tools pane<\/strong><\/a>.<\/li>\n<li>Click on the <b>Sources<\/b> tab.\n<div class=\"alert alert-success\" role=\"alert\">\n<p><b>NOTICE:<\/b> The <i>File Navigator pane<\/i> opens. Here, the <i>Network tab<\/i> displays the files and scripts used to load the (currently displayed) website. The <i>Code Editor pane<\/i> will display the code for the script(s) and allow you to make modifications to preview live results (without affecting your user\u2019s experience with your website). The <strong>JavaScript Debugging pane<\/strong> is where you will find more advanced tools to help you <em>debug your website\u2019s script(s)<\/em>.<\/p>\n<\/div>\n<\/li>\n<li>In the <i>File Navigator pane<\/i>, under the <i>Network tab<\/i>, click on the <b>get-started.js<\/b> file and its code will be displayed in the <i>Code Editor pane<\/i>.<\/li>\n<li>Insert a <i>line-of-code breakpoint<\/i> to tell <strong>Dev Tools<\/strong> to pause the script execution, to help you determine bugs\/fixes for the code you are troubleshooting \u2013at the particular line you choose. To do this, simply click on the number (to the left of the line of code) in the <b>Code Editor pane<\/b>.\n<div class=\"alert alert-info\" role=\"alert\">\n<p><b>NOTE:<\/b> For the example, click on <b>line 32<\/b> of the <i>get-started.js<\/i> file.<\/p>\n<\/div>\n<\/li>\n<li>Enter a value into the <b>Number 1<\/b> and <b>Number 2<\/b> fields on the actual page, then click on the <b>Add Number 1 and Number 2<\/b> button.\n<div class=\"alert alert-success\" role=\"alert\">\n<p><b>NOTICE:<\/b> For the example, enter the values <b>5<\/b> and <b>1<\/b>. Also, the script pauses at the line of code selected (line 32) in the previous step.<\/p>\n<\/div>\n<\/li>\n<li>In the <strong>JavaScript Debugger pane<\/strong>, click on the arrow next to <b>Scope<\/b> to expand the view to display the <i>Local<\/i> and <i>Global<\/i> variable options. Then, click on the arrow next to <b>Local<\/b> to expand the view to include the current values of the variables.\n<div class=\"alert alert-success\" role=\"alert\">\n<p><b>NOTICE:<\/b> The variables <i>addend1<\/i> and <i>addend2<\/i> are correct, however, the <i>sum<\/i> variable is appending <i>addend2<\/i> to <i>addend1<\/i> rather than adding the values together.<\/p>\n<\/div>\n<\/li>\n<li>Now, enter the following line of code into the <b>Console<\/b>:\n<pre class=\"code_block\">parseInt(addend1) + parseInt(addend2)<\/pre>\n<p>Then, hit the <b>Enter<\/b> (for MacOS: <b>return<\/b>) key.<\/p>\n<div class=\"alert alert-success\" role=\"alert\">\n<p><b>NOTICE:<\/b> The value of the expression is the result of properly adding the integer values, rather than appending the string values.<\/p>\n<\/div>\n<\/li>\n<li>Replace the code at line 31 with the following code:\n<pre class=\"code_block\">var sum = parseInt(addend1) + parseInt(addend2);<\/pre>\n<p>Then, press <b>Ctrl<\/b> + <b>s<\/b> (for MacOS: <b>command<\/b> + <b>s<\/b>) to save the script (locally in your browsing session).<\/p><\/li>\n<li>Click on the <b>Deactivate breakpoints<\/b> icon, from the <em>JavaScript Debugger pane<\/em> and then click on the <b>Add Number 1 and Number 2<\/b> button to recalculate.\n<div class=\"alert alert-success\" role=\"alert\">\n<p><b>NOTICE:<\/b> The values should be added accordingly and results should be correctly displayed.<\/p>\n<\/div>\n<div class=\"alert alert-warning\" role=\"alert\">\n<p><b>IMPORTANT:<\/b> The changes saved are <u>NOT<\/u> uploaded to the server. Therefore, you must make changes to the actual file(s) on your server to correct the JavaScript for your visitors.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n<p><b>Congratulations!<\/b> You now know how to <strong>troubleshoot JavaScript using Google Chrome\u2019s Developer Tools<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In This Tutorial: Access Dev Tools Troubleshoot JavaScript The Google Chrome web browser includes a variety of Developer Tools that can help you while maintaining various components of your website. For instance, you can use the Chrome Dev Tools to edit CSS and preview live changes. Because of the versatility of Google Chrome\u2019s Developer Tools<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\"> Read More ><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4322],"tags":[],"class_list":["post-4490","post","type-post","status-publish","format-standard","hentry","category-google-tools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Troubleshoot JavaScript Using Google Chrome Developer Tools | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Troubleshoot JavaScript Using Google Chrome Developer Tools | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-27T19:39:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-30T15:12:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\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:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\"},\"headline\":\"How to Troubleshoot JavaScript Using Google Chrome Developer Tools\",\"datePublished\":\"2018-04-27T19:39:39+00:00\",\"dateModified\":\"2019-08-30T15:12:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\"},\"wordCount\":870,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png\",\"articleSection\":[\"Google Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\",\"name\":\"How to Troubleshoot JavaScript Using Google Chrome Developer Tools | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png\",\"datePublished\":\"2018-04-27T19:39:39+00:00\",\"dateModified\":\"2019-08-30T15:12:06+00:00\",\"description\":\"In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png\",\"width\":1071,\"height\":1010,\"caption\":\"Click to enlarge this screenshot image.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Troubleshoot JavaScript Using Google Chrome Developer Tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Troubleshoot JavaScript Using Google Chrome Developer Tools | InMotion Hosting","description":"In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.","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:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/","og_locale":"en_US","og_type":"article","og_title":"How to Troubleshoot JavaScript Using Google Chrome Developer Tools | InMotion Hosting","og_description":"In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2018-04-27T19:39:39+00:00","article_modified_time":"2019-08-30T15:12:06+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b"},"headline":"How to Troubleshoot JavaScript Using Google Chrome Developer Tools","datePublished":"2018-04-27T19:39:39+00:00","dateModified":"2019-08-30T15:12:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/"},"wordCount":870,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png","articleSection":["Google Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/","name":"How to Troubleshoot JavaScript Using Google Chrome Developer Tools | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png","datePublished":"2018-04-27T19:39:39+00:00","dateModified":"2019-08-30T15:12:06+00:00","description":"In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/04\/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png","width":1071,"height":1010,"caption":"Click to enlarge this screenshot image."},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/google-tools\/how-to-troubleshoot-javascript-using-google-chrome-developer-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Troubleshoot JavaScript Using Google Chrome Developer Tools"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=4490"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4490\/revisions"}],"predecessor-version":[{"id":46871,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4490\/revisions\/46871"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=4490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=4490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=4490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}