如何调试WordPress Gutenberg编辑器？实现类似React开发模式的调试

1. 加载Gutenberg的开发构建版本 #

直接用压缩后的分发文件调试效率极低，建议本地构建未压缩的开发版：

• 克隆Gutenberg仓库到本地，执行npm install安装依赖
• 运行npm run start启动开发服务器，实时编译未混淆的源码
• 在WordPress后台启用本地开发的Gutenberg插件（替换线上压缩版），此时前端加载的是完整可读的React组件代码，断点调试更直观

2. 开启WordPress调试模式 #

修改WordPress根目录的wp-config.php文件，启用调试相关配置：

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_SCRIPT', true ); // 加载未压缩的核心脚本
define( 'WP_DEBUG_LOG', true ); // 将调试日志写入wp-content/debug.log

开启后，WordPress会优先加载未压缩的Gutenberg相关脚本，避免代码压缩带来的调试障碍。

3. 利用浏览器Source Map映射源码 #

即使偶尔使用压缩文件，只要开启Source Map支持，就能还原原始代码：

• 打开浏览器DevTools，进入Settings面板，勾选"Enable JavaScript source maps"
• 在Sources面板中，可直接找到Gutenberg的原始React组件文件，设置断点、查看变量的体验和调试普通React项目完全一致

4. 使用React DevTools分析组件树 #

Gutenberg基于React开发，React DevTools可完全适配：

• 安装浏览器的React DevTools扩展（Chrome/Firefox均提供）
• 在编辑页面打开DevTools的"Components"面板，能查看Gutenberg的组件层级、props和state，还能实时修改组件状态，快速验证逻辑

5. 自定义日志与状态追踪 #

结合Gutenberg内置工具追踪数据变化：

• 使用wp.data.subscribe监听核心store的状态变更，打印关键数据：

  wp.data.subscribe( () => {
    const editorState = wp.data.select( 'core/editor' ).getCurrentPost();
    console.log( '当前文章状态:', editorState );
  } );
  

• 启用Gutenberg的调试日志，通过wp.debug.enable( 'core/*' )开启指定模块的调试输出，帮助排查数据流向问题

内容的提问来源于stack exchange，提问作者Byeongin Yoon