{"id":252,"date":"2020-08-17T19:57:30","date_gmt":"2020-08-17T19:57:30","guid":{"rendered":"https:\/\/localwp.com\/?post_type=help&#038;p=252"},"modified":"2023-06-15T20:31:58","modified_gmt":"2023-06-15T20:31:58","slug":"instant-reload","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/local-features\/instant-reload\/","title":{"rendered":"Instant Reload"},"content":{"rendered":"\n<div id=\"what-is-instant-reload\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Local&#8217;s Instant Reload Add-on saves you time by eliminating the need to click &#8220;refresh&#8221; in your browser while updating your site. Local&#8217;s Instant Reload Add-on allows you to see the changes in real-time! <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group help-doc-toc\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Table of Contents:<\/p>\n\n\n<nav aria-label=\"Table of Contents\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#instant-reload-benefits\">Instant Reload Benefits<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#get-instant-reload\">Get Instant Reload<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#using-instant-reload\">Using Instant Reload<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#instant-reload-not-detecting-changes\">Instant Reload not detecting changes<\/a><\/li><\/ol><\/nav>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<section id=\"where-to-get\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-color\" id=\"instant-reload-benefits\" style=\"color:#000000\"><strong>Instant Reload Benefits<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Instant reload is helpful for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Work with code and browser side-by-side:<\/strong> Maintain a flow-state and streamline previewing your CSS changes.<\/li>\n\n\n\n<li><strong>Debug file changes<\/strong>: Local displays a log stream of your latest changes which helps make sure new changes are detected and displayed.&nbsp;<\/li>\n\n\n\n<li><strong>Make edits in real-time:<\/strong> Changes are displayed immediately, so you\u2019ll never have to clear your cache again.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-dark-gray-03-color has-text-color\" id=\"get-instant-reload\"><strong>Get Instant Reload<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><meta charset=\"utf-8\"><\/meta>To get the Instant Reload Add-on you can install it from the Add-ons tab within Local.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-style-drop-shadow\"><img decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/06\/add-ons-library-instant-reload-1024x666.png\" alt=\"Screenshot of the Local Add-ons library which includes the Instant Reload add-on.\" class=\"wp-image-874\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/06\/add-ons-library-instant-reload-1024x666.png 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/06\/add-ons-library-instant-reload-300x195.png 300w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/06\/add-ons-library-instant-reload-768x499.png 768w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/06\/add-ons-library-instant-reload-1536x998.png 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/06\/add-ons-library-instant-reload.png 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/section>\n\n\n\n<section id=\"how-to-use\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-color\" id=\"using-instant-reload\" style=\"color:#000000\"><strong>Using Instant Reload<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">All of the Instant Reload functionality can be found within the &#8220;Instant Reload&#8221; section of the &#8220;Tools&#8221; tab in Local.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The general flow of using this tool looks like this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enable Instant Reload for the site.<\/li>\n\n\n\n<li>Open the site within a browser. You&#8217;ll know that Instant Reload is working correctly if you see the &#8220;Instant Reload Enabled&#8221; message in the upper-right corner of the browser.<\/li>\n\n\n\n<li>Edit a CSS file in your editor of choice. Once that file is saved, Instant Reload will automatically refresh those styles in the browser!<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Local keeps a session log when a CSS file has changed. To view that log, navigate to the &#8220;Instant Reload&#8221; section of the &#8220;Tools&#8221; tab.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1578\" style=\"aspect-ratio: 2868 \/ 1578;\" width=\"2868\" controls src=\"https:\/\/localwp.com\/wp-content\/uploads\/2020\/12\/using-instant-reload.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/section>\n\n\n<div id=\"help-step-block_06c1d6bb673375a94f8ecb2b1bbbbd80\" class=\"help-note-container help-type-note\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p>Instant Reload is enabled on a per-site basis. Once you&#8217;ve enabled Instant Reload, it will automatically start up when using Local in the future.<\/p>\n<p>Instant Reload only watches <code>wp-content\/plugins<\/code> and <code>wp-content\/themes<\/code> for changes to .css files.<\/p>\n<p>Changes that are made using page builders or other WordPress plugins which do not persist their changes to the filesystem will not be refreshed.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-color\" id=\"instant-reload-not-detecting-changes\" style=\"color:#000000\"><strong>Instant Reload not detecting changes<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There could be a number of reasons for this. Here are some common things to check:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ensure that you are editing a CSS file within either the <code>plugins<\/code> or the <code>themes<\/code> folder of the site. <\/li>\n\n\n\n<li>Make sure the styles are specific enough. Using the browser&#8217;s developer tools, inspect the styles for the element you are working on and ensure the style that&#8217;s being written is specific enough.<\/li>\n\n\n\n<li>Disable any caching plugins on the Local site.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Still not working? Simplify the networking setup and try switching to <a href=\"https:\/\/localwp.com\/help-docs\/router-mode\/\"><strong><span style=\"text-decoration: underline;\">localhost routing mode<\/span><\/strong><\/a>.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/community.localwp.com\/c\/support\/5\" target=\"_blank\" rel=\"noreferrer noopener\">Get Community Support<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Local&#8217;s Instant Reload Add-on saves you time by eliminating the need to click &#8220;refresh&#8221; in your browser while updating your site. Local&#8217;s Instant Reload Add-on allows you to see the changes in real-time! Table of Contents: Instant Reload Benefits Instant reload is helpful for: Get Instant Reload To get the Instant Reload Add-on you can&#8230;<\/p>\n","protected":false},"author":49,"parent":800,"menu_order":0,"template":"","tags":[28,41],"helpcategories":[],"class_list":["post-252","help","type-help","status-publish","hentry","tag-add-ons","tag-features"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc"}],"about":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/types\/help"}],"author":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/users\/49"}],"version-history":[{"count":0,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/252\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/800"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=252"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}