如何调试WordPress React插件？修改TSX文件后变更未生效怎么办

问题原因及排查方案 #

你遇到的修改TSX文件不生效的问题，可从以下几个维度定位解决：

• 未执行TSX编译流程：TSX是React的类型语法扩展，无法直接被浏览器识别运行，必须经过编译工具转译为普通JS文件后才会被WordPress加载生效。如果你使用的是WordPress官方脚手架@wordpress/scripts，开发阶段需要持续运行npm start监听文件变更自动编译，修改完TSX后没有执行编译命令的话，浏览器加载的永远是旧的编译产物。
• 多级缓存未清理：
  • Chrome浏览器默认会缓存静态资源，你可以在调试面板的「网络」标签勾选「禁用缓存」，保持调试面板处于打开状态后刷新页面，确认资源是最新版本
  • 如果你本地WordPress安装了缓存类插件，需要先临时停用，同时检查MAMP的配置项，关闭服务端缓存功能
• 资源加载路径不匹配：
  先去WordPress后台的插件列表，确认当前激活的ticket-on-wordpress插件，就是你修改的wp-content/plugins目录下的版本；再核对插件中wp_enqueue_script资源入队的代码，确认加载的JS文件路径，就是你编译后输出的产物路径，避免加载了其他位置的旧版本文件。
• SourceMap未同步更新：如果你的构建工具配置了生成SourceMap，需要确认每次编译都会同步更新对应的.map文件，否则旧的SourceMap会和实际运行的JS代码不匹配，导致调试面板显示的代码和实际运行的代码不一致。

内容的提问来源于stack exchange，提问作者János