{"id":2764,"date":"2019-06-10T13:49:20","date_gmt":"2019-06-10T18:49:20","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2764"},"modified":"2019-06-10T13:49:22","modified_gmt":"2019-06-10T18:49:22","slug":"how-to-test-production-code-with-chrome-developer-tools-overrides-feature","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2019\/06\/10\/how-to-test-production-code-with-chrome-developer-tools-overrides-feature\/","title":{"rendered":"How to test production code with Chrome Developer Tools &#8220;overrides&#8221; feature"},"content":{"rendered":"\n<p>Let&#8217;s say you are tracking down a bug where a page on the live site behaves differently than the same page in the local environment. There is a way to run tests of the live code via Chrome Developer Tools that does not require pushing test code to production. It is called &#8220;overrides&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-22-29.png\" alt=\"\" class=\"wp-image-2767\" width=\"432\" height=\"268\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-22-29.png 494w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-22-29-300x186.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"HowtotestproductioncodewithChromeDeveloperTools&quot;overrides&quot;feature-Step1:OpenDeveloperToolsinaseparatewindow\">Step 1: Open Developer Tools in a separate window<\/h4>\n\n\n\n<p>Right click and Inspect something on the live page you are troubleshooting. Then choose the below docking option to open dev tools in a separate window:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"250\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-25-13.png\" alt=\"\" class=\"wp-image-2769\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"HowtotestproductioncodewithChromeDeveloperTools&quot;overrides&quot;feature-Step2:SelectOverrides\">Step 2: Select Overrides<\/h4>\n\n\n\n<p>Go to the Sources tab and on the left side of the screen you will see Filesystem. Click the double arrows &gt;&gt; and choose &#8216;Overrides&#8217;:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"139\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-29-24.png\" alt=\"\" class=\"wp-image-2770\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-29-24.png 436w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-29-24-300x96.png 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"HowtotestproductioncodewithChromeDeveloperTools&quot;overrides&quot;feature-Step3:SetOverrideslocation\">Step 3: Set Overrides location<\/h4>\n\n\n\n<p>After selecting Overrides and checking the &#8220;Enable Local Overrides&#8221; box, type command + P in order to select a file location for your overrides.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"245\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-35-33.png\" alt=\"\" class=\"wp-image-2771\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-35-33.png 468w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-35-33-300x157.png 300w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/figure>\n\n\n\n<p>If you want to create a file called &#8220;overrides&#8221;, type it into the dialog box. You should now see the overrides location appear on the left:<\/p>\n\n\n\n<p>This is where the changes you make and save to the source code will live.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"162\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-38-46.png\" alt=\"\" class=\"wp-image-2772\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-38-46.png 356w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/2019-02-12_15-38-46-300x137.png 300w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"HowtotestproductioncodewithChromeDeveloperTools&quot;overrides&quot;feature-Step4:Editandtestchangestothelivesite!\">Step 4: Edit and test changes to the live site!<\/h4>\n\n\n\n<p>Now in the Sources tab, you can make changes to the production source code and save the changes with CTRL + S. The saved changes are stored in the overrides folder. Refresh the original production page that you wanted to test to bring in the changes. Then you can switch to the Console tab to see the results of any console.log statements you added.&nbsp;<\/p>\n\n\n\n<p><strong>Note:\u00a0When testing is complete and code changes have been copied to the actual repository, you may want to delete the saved changes in the overrides folder or disable Overrides via the checkbox. Otherwise, Chrome will use the Overrides by default whenever you visit that page.\u00a0<\/strong><\/p>\n\n\n\n<p>For more about Google Chrome overrides, see:<br><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/01\/devtools#overrides\">https:\/\/developers.google.com\/web\/updates\/2018\/01\/devtools#overrides<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say you are tracking down a bug where a page on the live site behaves differently than the same page in the local environment. There is a way to run tests of the live code via Chrome Developer Tools that does not require pushing test code to production. It is called &#8220;overrides&#8221;: Step 1: &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2019\/06\/10\/how-to-test-production-code-with-chrome-developer-tools-overrides-feature\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to test production code with Chrome Developer Tools &#8220;overrides&#8221; feature<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78],"tags":[],"class_list":["post-2764","post","type-post","status-publish","format-standard","hentry","category-technologies-and-tools"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2764"}],"version-history":[{"count":5,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2764\/revisions"}],"predecessor-version":[{"id":2775,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2764\/revisions\/2775"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}