Disable caches for JavaScript development

After setting up and installing Magento, it's essential to prepare the environment for JavaScript development. This process will include making a few tweaks to avoid constantly purging the cache when creating .phtml files, XML or JavaScript locally.

Disabling Caches

To begin, it's a good idea to disable some of the caches that will have a lot of changes during development. To check the status of the caches, navigate to the terminal and type bin/magento cache:status. This command will display a list of all the running caches that are available and enabled. A 1 means it's enabled, and 0 means it's disabled.

First, disable the full_page cache, which caches all of the contents of the page after it's been rendered by Magento. The other cache to disable is the block_html cache, responsible for caching anything output in a block of HTML, such as a .phtml template. Disable both of these caches at once by typing bin/magento cache:disable block_html full_page.

After disabling the caches, the cache status should toggle over to 0, indicating that they are disabled. Disabling these caches is helpful when doing any front-end development in Magento, as it makes the process much easier.

Browser Level Configuration

In addition to the cache settings, there's one other configuration to make on the browser level. First, open up the Inspector in your browser. You can do this by typing Command Option I or by navigating to View -> Developer -> Developer Tools.

Once the Developer Tools are open, head over to the Network tab and ensure that the "Disable Cache" button is checked. This setting is crucial because Chrome caches a lot, even single JavaScript files, which can cause frustration if not disabled.

Always keep the Chrome DevTools open during development, as this will ensure the "Disable Cache" setting remains toggled on. The DevTools console is also helpful for debugging, as any JavaScript errors will be outputted here.

With these configurations in place, you're now ready to begin JavaScript development in Magento.