Developer tools
Use the advanced developer tools to determine the compilation mode during frontend development, create an allowlist of IP addresses, and display template path hints. There is also tooling to easily make spot changes to text in the interface of the storefront and Admin.
Operation modes
Your Adobe Commerce or Magento Open Source instance can be deployed to run in either production or developer mode. The tools and configuration settings that are designed specifically for developers can be accessed only while the store is running in developer mode.
The operation mode can be changed only from the command line of the server by a user with appropriate permissions. See Set the operation mode in the Configuration Guide for more information.
Most topics in the merchant documentation apply to a Commerce instance that is running in production mode. However, the following configuration settings and tools can be used only when the installation is running in developer mode.
Frontend development workflow
The Frontend Development Workflow type determines if Less compilation takes place on the client- or server side during development. Less is an extension of CSS that has additional features and conventions, and that produces streamlined code. Client-side Less compilation is recommended for theme development. Server-side compilation is the default mode. The development workflow options are not available for stores in production mode.
See Client-side LESS compilation vs. server-side in the Commerce developer documentation.
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Advanced and choose Developer.
-
Expand
-
Set Workflow Type to one of the following:
Client side less compilation- Compilation takes place in the browser using the nativeless.jslibrary.Server side less compilation- Compilation takes place on the server using the Less PHP library. This is the default mode for production.
-
When complete, click Save Config.
Static file signatures
Adding a digital signature to the URL of static files makes it possible for browsers to detect when a newer version of the file is available. Static files that can be tracked with digital signatures include JavaScript, CSS, images, and fonts. The signature is appended to the path directly after the base URL. If a file’s signature differs from what is stored in the browser’s cache, then the newer version of the file is used.
See Static content signing in the Commerce developer documentation.
For a detailed list of the configuration settings, see Static File Settings in the Configuration Reference.
To enable signed static files:
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Advanced and choose Developer.
-
Expand
-
Set Sign Static Files to
Yes. -
When complete, click Save Config.
Resource file optimization
The time it takes to load resource files can be reduced by merging and bundling files, and by minimizing code.
- Merging combines separate files of the same type into a single file.
- Bundling is a technique that groups separate files in order to reduce the number of HTTP requests that are required to load a page.
- Minification removes spaces, line breaks, and comments, but does not affect the functionality of the code. Because minimized files cannot be edited, the process should be applied only when you are ready to go into production.
By default, Adobe Commerce and Magento Open Source do not merge, bundle, or minimize files, and the project developer should determine which file optimization methods should be used.
See Performance best practices for more information.
MergeMinifyMergeBundleMinifyMinifyTo optimize resource files:
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Advanced and choose Developer.
-
To optimize CSS files, expand
- Set Merge CSS Files to
Yes. - Set Minify CSS Files to
Yes.
- Set Merge CSS Files to
-
To optimize JavaScript files, expand
- Set Merge JavaScript Files to
Yes. - Set Minify JavaScript Files to
Yes.
- Set Merge JavaScript Files to
-
To minify PHTML template files, expand
Yes.
-
When complete, click Save Config.
Client restrictions
Before using a tool such as template path hints, make sure to add your IP address to the Developer Client Restrictions allowlist to avoid disrupting the shopping experience of customers in the store. If you don’t know your IP address, you can search for it online.
For technical information, see Custom VCL for allowing requests in the Commerce on Cloud Infrastructure Guide.
To add your IP address to the allowlist:
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Advanced and choose Developer.
-
Expand
-
For Allow IPs, enter your IP address.
If access is needed from multiple IP addresses, separate each with a comma.
-
When complete, click Save Config.
-
When prompted, refresh any invalid caches.
Template path hints
Template path hints are a diagnostic tool that adds notation with the path to each template that is used on the page. Template path hints can be enabled for either the storefront or the Admin.
See Locate templates, layouts, and styles in the Commerce developer documentation.
Step 1: Add your IP address to the allowlist
Before using template path hints, add your IP address to the allowlist to avoid interference with customers who are shopping in the store. When you are finished, make sure to clear the Commerce cache to remove all hints from the store.
Step 2: Enable template path hints
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Advanced and choose Developer.
-
Expand
-
To activate template path hints for the store, set Enabled Template Path Hints for Storefront to
Yes. -
To enable template path hints for the store only when the URL includes the
templatehintsparameter, set Enable Hints for Storefront with URL Parameter toYes. Then set value for the parameter if needed. The default value ismagento, but you can use a custom value. For example, if you change the value tolorem, you would usemymagento.com?templatehints=loremto display template hints. -
To activate template path hints for the Admin, set Enabled Template Path Hints for Admin to
Yes. -
To include the names of blocks, set Add Block Class Type to Hints to
Yes.
-
-
When complete, click Save Config.
Step 3: Clear the cache
-
On the Admin sidebar, go to System > Tools > Cache Management.
-
In the upper-right corner, click Flush Magento Cache.
Translate inline
You can use the Translate Inline tool in developer mode to touch up text in the interface to reflect your voice and brand. When the Translate Inline mode is activated, any text on the page that can be edited is outlined in red. It is easy to edit field labels, messages, and other text that appears throughout the storefront and Admin. For example, many themes use terminology such as My Account, My Wishlist, and My Dashboard, to help customers find their way around. However, you might prefer to simply use the words Account, Wishlist, and Dashboard.
See Translations overview in the Commerce developer documentation.
If your store is available in multiple languages, you can make fine adjustments to the translated text for the locale. On the server, interface text is maintained in a separate CSV file for each output block, and is organized by locale. As an alternate approach, rather than use the Translate Inline tool, you can also edit the CSV files directly on the server. Translation files are stored in app/code/Magento/<module_name>/i18n/<language_locale>.csv.
Step 1: Disable output caches
-
On the Admin sidebar, go to System > Tools > Cache Management.
-
Select the following checkboxes:
Blocks HTML outputPage CacheTranslations
-
Set the Actions control to
Disableand click Submit.
Step 2: Enable the Translate Inline tool
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
To work with a specific store view, set the Store View to be updated.
-
In the left panel, expand Advanced and choose Developer.
-
Expand
Clear the Use Website checkbox as needed to modify these settings.
The Enabled for Admin option is not available when editing a specific store view.
-
Set Enabled for Storefront to
Yes. -
When complete, click Save Config.
-
When prompted, refresh the invalid caches, but leave the disabled caches as they are for now.
Step 3: Update the Text
-
Open your storefront in a browser and go to the page that you want to edit.
If necessary, use the language chooser to change the store view. Each string of text that can be translated is outlined in red. When you hover over any text box, a book icon (
-
Click the book icon to open the Translate window and do the following:
-
If the change is for the specific store view, select the Store View Specific checkbox.
-
Enter the new Custom text.
-
-
When complete, click Submit.
-
To see your changes in the store, refresh the browser.
-
Repeat this process for any elements in the store to be changed.
Step 4: Restore the original settings
-
Return to the Admin of your store.
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
Set Store View to the specific view that was edited.
-
In the left panel, expand Advanced and choose Developer.
-
Expand
-
Set Enabled for Frontend to
No. -
When complete, click Save Config.
-
On the Admin sidebar, go to System > Tools > Cache Management.
-
Select the checkbox of the following output caches that were previously disabled:
Blocks HTML outputPage CacheTranslations
-
Set the Actions control to
Enableand click Submit. -
When prompted, refresh any invalid caches.
Step 5: Verify the changes in your store
Go to your storefront and examine each page that was updated to make sure that the changes are correct. In this example, Customer Login was changed to Customer Sign In. If changes were made to a specific view, use the Language Chooser to switch to the correct view.
