开发人员工具

使用高级开发人员工具确定前端开发期间的编译模式、创建IP地址的允许列表并显示模板路径提示。 还有一些工具,可轻松地在店面和管理员界面中对文本进行特别更改。

操作模式

您可以部署您的Adobe Commerce或Magento Open Source实例,以在中运行 生产开发者模式. 只有在中运行存储时,才能访问专门为开发人员设计的工具和配置设置 开发者模式.

只有具有适当权限的用户才能从服务器的命令行更改操作模式。 请参阅 设置操作模式配置指南 以了解更多信息。

商家文档中的大多数主题适用于在生产模式下运行的Commerce实例。 但是,以下配置设置和工具只能在开发人员模式下运行安装时使用。

前端开发工作流

前端开发工作流类型确定在开发期间在客户端还是服务器端进行较少的编译。 较少的是CSS的扩展,它有附加功能和约定,并能生成简化的代码。 建议在主题开发中使用客户端较少的编译。 服务器端编译是默认模式。 开发工作流选项不适用于处于生产模式的存储。
请参阅 客户端LESS编译与服务器端Commerce开发人员文档中的{:target="_blank"}。

NOTE
前端开发工作流配置在中可用 开发人员模式 仅限。

高级配置 — 前端开发工作流 {width="600" modal="regular"}

  1. 管理员 侧栏,转到 Stores > Settings>Configuration.

  2. 在左侧面板中,展开 Advanced 并选择 Developer.

  3. 展开 扩展选择器 Front-end Development Workflow 部分。

  4. 设置 Workflow Type 更改为以下任一项:

    • Client side less compilation — 在浏览器中使用本机代码进行编译。 less.js 库。
    • Server side less compilation — 使用Less PHP库在服务器上进行编译。 这是默认的生产模式。
  5. 完成后,单击 Save Config.

静态文件签名

通过向静态文件的URL添加数字签名,浏览器可以检测文件的较新版本何时可用。 可使用数字签名跟踪的静态文件包括JavaScript、CSS、图像和字体。 签名将直接附加到基本URL后面的路径中。 如果文件的签名与浏览器缓存中存储的签名不同,则使用较新版本的文件。

请参阅 静态内容签名Commerce开发人员文档中的{:target="_blank"}。

NOTE
静态文件设置配置仅在中工作时可用 开发者模式.

高级配置 — 静态文件设置 {width="600" modal="regular"}

有关配置设置的详细列表,请参阅 静态文件设置配置引用.

要启用已签名的静态文件,请执行以下操作:

  1. 管理员 侧栏,转到 Stores > Settings>Configuration.

  2. 在左侧面板中,展开 Advanced 并选择 Developer.

  3. 展开 扩展选择器 Static Files Settings 部分。

  4. 设置 Sign Static FilesYes.

  5. 完成后,单击 Save Config.

资源文件优化

通过合并和捆绑文件以及最大限度地减少代码,可以减少加载资源文件所需的时间。

  • 合并会将相同类型的单独文件合并为单个文件。
  • 捆绑是一种对单独的文件进行分组的技术,用于减少加载页面所需的HTTP请求数。
  • 缩小会删除空格、换行符和注释,但不会影响代码的功能。 由于无法编辑最小化的文件,因此应仅在准备好进入生产阶段时应用该流程。

默认情况下,Adobe Commerce和Magento Open Source不会合并、捆绑或最小化文件,项目开发人员应确定应使用的文件优化方法。

请参阅 性能最佳实践 以了解更多信息。

NOTE
CSS和JavaScript文件可以在中进行优化 开发人员模式 仅限。
文件类型
支持的操作
CSS文件
MergeMinify
JavaScript文件
MergeBundleMinify
模板文件
Minify

要优化资源文件,请执行以下操作:

  1. 管理员 侧栏,转到 Stores > Settings>Configuration.

  2. 在左侧面板中,展开 Advanced 并选择 Developer.

  3. 要优化CSS文件,请展开 扩展选择器 CSS Settings 部分并执行以下操作:

    • 设置 Merge CSS FilesYes.
    • 设置 Minify CSS FilesYes.

    高级配置 — CSS设置 {width="600" modal="regular"}

CSS设置

  1. 要优化JavaScript文件,请展开 扩展选择器 JavaScript Settings 部分并执行以下操作:

    • 设置 Merge JavaScript FilesYes.
    • 设置 Minify JavaScript FilesYes.

    高级配置 — JavaScript设置 {width="600" modal="regular"}

  2. 要缩小PHTML模板文件,请展开 扩展选择器 Template Settings 分区和设置 Minify HtmlYes.

    高级配置 — 模板设置 {width="600" modal="regular"}

  3. 完成后,单击 Save Config.

客户端限制

在使用工具(如 模板路径提示,请确保将您的IP地址添加到开发人员客户端限制允许列表,以避免中断商店客户的购物体验。 如果您不知道自己的IP地址,则可以在线搜索它。

NOTE
可以在中设置开发人员客户端限制 开发人员模式 仅限。

有关技术信息,请参阅 用于允许请求的自定义VCL云基础架构上的Commerce指南.

将您的IP地址添加到允许列表:

  1. 管理员 侧栏,转到 Stores > Settings>Configuration.

  2. 在左侧面板中,展开 Advanced 并选择 Developer.

  3. 展开 扩展选择器 Developer Client Restrictions 部分。

    高级配置 — 开发人员客户端限制 {width="600" modal="regular"}

  4. 对象 Allow IPs,输入您的IP地址。

    如果需要从多个IP地址访问,请使用逗号分隔每个IP地址。

  5. 完成后,单击 Save Config.

  6. 出现提示时,请刷新任何无效的缓存。

模板路径提示

模板路径提示是一种诊断工具,用于为页面上使用的每个模板添加带有路径的符号。 可以为店面或管理员启用模板路径提示。

NOTE
可以在中编辑模板路径提示 开发者模式 仅限。

请参阅 查找模板、版面和样式Commerce开发人员文档中的{:target="_blank"}。

示例店面 — 模板路径提示 {width="700" modal="regular"}

步骤1:将您的IP地址添加到允许列表

在使用模板路径提示之前,将您的IP地址添加到 允许列表 以免干扰在店里购物的顾客。 完成后,请确保清除Commerce缓存,以从存储中删除所有提示。

高级配置 — 开发人员客户端限制 {width="600" modal="regular"}

步骤2:启用模板路径提示

  1. 管理员 侧栏,转到 Stores > Settings>Configuration.

  2. 在左侧面板中,展开 Advanced 并选择 Developer.

  3. 展开 扩展选择器 该  Debug 部分并执行以下操作:

    高级配置 — 调试 {width="600" modal="regular"}

    • 要为存储激活模板路径提示,请设置 Enabled Template Path Hints for StorefrontYes.

    • 要仅在URL包含 templatehints 参数,设置 使用URL参数启用店面提示Yes. 然后根据需要设置参数的值。 默认值为 magento,但您可以使用自定义值。 例如,如果将值更改为 lorem,您可以使用 mymagento.com?templatehints=lorem 以显示模板提示。

    • 要为管理员激活模板路径提示,请设置 Enabled Template Path Hints for AdminYes.

    • 要包含块的名称,请设置 Add Block Class Type to HintsYes.

  4. 完成后,单击 Save Config.

步骤3:清除缓存

  1. 管理员 侧栏,转到 System > Tools>Cache Management.

  2. 在右上角,单击 Flush Magento Cache.

内嵌翻译

可以在以下位置使用翻译内联工具: 开发者模式 修饰界面中的文本以反映您的声音和品牌。 激活“翻译内联”模式后,页面上可编辑的任何文本都以红色列出。 可以轻松编辑显示在店面和管理员中的字段标签、消息和其他文本。 例如,许多主题都使用术语,例如 我的帐户我的愿望清单、和 我的信息板,帮助客户找到解决方法。 但是,您可能更愿意直接使用单词 帐户愿望清单、和 仪表板.

NOTE
“翻译内联”工具仅在以下情况下可用: 开发者模式.

请参阅 翻译概述 在Commerce开发人员文档中。

示例店面 — 可翻译文本 {width="700" modal="regular"}

如果您的商店以多种语言提供,则可以对区域设置的翻译文本进行细微调整。 在服务器上,界面文本将保存在每个输出块的独立CSV文件中,并按区域设置进行组织。 作为替代方法,而不是使用 翻译内联 工具,也可以直接在服务器上编辑CSV文件。 翻译文件存储在 app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
要使用翻译内联工具,您的浏览器必须允许弹出窗口。

步骤1:禁用输出缓存

  1. 管理员 侧栏,转到 System > Tools>Cache Management.

  2. 选中以下复选框:

    • Blocks HTML output
    • Page Cache
    • Translations
  3. 设置 Actions 控制对象 Disable 并单击 Submit.

步骤2:启用翻译内联工具

  1. 管理员 侧栏,转到 Stores > Settings>Configuration.

  2. 要使用特定的商店视图,请设置 Store View 待更新。

  3. 在左侧面板中,展开 Advanced 并选择 Developer.

  4. 展开 扩展选择器 Translate Inline 部分。

    清除 Use Website 复选框,以修改这些设置。

    Enabled for Admin ​选项在编辑特定商店视图时不可用。

    高级配置 — 内嵌翻译 {width="600" modal="regular"}

  5. 设置 Enabled for StorefrontYes.

  6. 完成后,单击 Save Config.

  7. 出现提示时,请刷新无效的缓存,但暂时保留已禁用的缓存。

步骤3:更新文本

  1. 在浏览器中打开您的店面,然后转到要编辑的页面。

    如有必要,请使用语言选择器更改商店视图。 每个可翻译的文本字符串都以红色列出。 将鼠标悬停在任意文本框上时,会显示一个书图标( “书籍”图标 )中显示。

  2. 单击书图标以打开 Translate 并执行以下操作:

    • 如果更改是针对特定商店视图的,请选择 Store View Specific 复选框。

    • 输入新的 Custom 文本。

  3. 完成后,单击 Submit.

    输入自定义文本 {width="700" modal="regular"}

  4. 要在应用商店中查看您所做的更改,请刷新浏览器。

  5. 对存储中要更改的任何元素重复此过程。

步骤4:恢复原始设置

  1. 返回到商店的管理员。

  2. 管理员 侧栏,转到 Stores > Settings>Configuration.

  3. 设置 Store View 到已编辑的特定视图。

  4. 在左侧面板中,展开 Advanced 并选择 Developer.

  5. 展开 扩展选择器 Translate Inline 部分。

  6. 设置 Enabled for FrontendNo.

  7. 完成后,单击 Save Config.

  8. 管理员 侧栏,转到 System > Tools>Cache Management.

  9. 选中以下先前已禁用的输出缓存的复选框:

    • Blocks HTML output
    • Page Cache
    • Translations
  10. 设置 Actions 控制对象 Enable 并单击 Submit.

  11. 出现提示时,请刷新任何无效的缓存。

步骤5:验证存储中的更改

转到店面并检查每个更新的页面,确保更改正确。 在此示例中, Customer Login 已更改为 Customer Sign In. 如果对特定视图进行了更改,请使用语言选择器切换到正确的视图。

示例店面 — 已翻译的客户登录 {width="700" modal="regular"}

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1