如何调试wordpress gutenberg编辑器？

Question

我正在开发一个 WordPress 页面构建器，并试图了解古腾堡是如何工作的。在调试时，我发现很难阅读代码，因为分布式文件被 Webpack 缩小了。如何更轻松地调试 Gutenberg，类似于在开发模式下调试 React 应用程序？

Answer 1

1.确保您的Webpack配置设置为开发模式。这将生成带有源映射的非缩小文件，从而更容易调试2。您可以通过在 Webpack 配置文件中将模式设置为开发来做到这一点。

2.源地图允许您查看原始源代码而不是缩小版本。确保您的 Webpack 配置包含源映射生成2。您可以在 Webpack 配置中使用 devtool 选项来启用源映射。

3.WordPress有一个内置的调试模式，可以帮助您记录错误和通知。您可以通过将以下行添加到 wp-config.php 文件来启用它：

php

define('WP_DEBUG', true);

define('WP_DEBUG_LOG', true);

define('WP_DEBUG_DISPLAY', false);

这会将错误记录到 wp-content 目录中名为 debug.log 的文件中。

4.使用浏览器中的开发人员工具（例如 Chrome DevTools）来检查元素、查看控制台日志和设置断点。这可以帮助您识别并修复代码中的问题4。

5.有几个 WordPress 插件可以帮助调试，例如查询监视器和调试栏。这些插件提供了额外的调试信息，可以帮助您更轻松地识别问题。

6.定期检查您的服务器和 WordPress 错误日志是否存在任何问题或警告，这些问题或警告可能会为您提供有关问题所在的线索。