如何在Ajax通信时将PHP变量值输出到开发者控制台（WordPress场景）

嘿，这个场景我太熟悉了——折腾WP插件Ajax调试时，找不到对应JS回调简直是日常痛点，给你几个实用的解决办法：

一、查看PHP echo的Ajax响应结果（不用找JS代码） #

直接靠浏览器开发者工具就能搞定，步骤很直观：

• 打开开发者工具：按F12或Ctrl+Shift+I（Mac是Cmd+Opt+I），切换到Network面板。
• 触发你要调试的WPML操作（比如点翻译按钮、切换语言这类会触发Ajax的动作）。
• 在Network面板的筛选栏选XHR/Fetch，这样只会显示Ajax请求，过滤掉静态资源的干扰。
• 定位目标请求：WP的Ajax请求基本都指向/wp-admin/admin-ajax.php，看请求的action参数（要么在URL的查询串里，要么在POST payload里），找带wpml前缀的那个，就是你要找的WPML请求。
• 点击这个请求，切到Response标签——这里就是服务器返回的所有内容，包括你用echo或print_r输出的变量，不管前端JS有没有处理，都会原封不动显示在这里。
• 如果响应是JSON格式，Preview标签会自动格式化内容，找你输出的信息更轻松。

二、查看浏览器与服务器交换的POST/GET数据 #

还是用开发者工具的Network面板，分请求类型看：

GET请求 #

点击目标请求后，看Params标签下的Query String Parameters，这里列着所有GET传递的参数和对应值。

POST请求 #

• 如果是表单提交的POST，看Payload标签下的Form Data；
• 如果是JSON格式的POST，看Payload标签下的Request Payload；
• 所有请求的Headers标签里，还能看到请求方法（GET/POST）、请求头、响应头等完整信息。

额外调试小妙招 #

• 勾选Network面板的Preserve log，这样页面刷新或跳转后，之前的请求不会被清空，方便回溯查找；
• 请求太多时，用Network面板的搜索框输入关键词（比如wpml、ajax），快速定位目标；
• 不想纠结网络请求的话，用PHP的error_log()写日志更省心：

  error_log( print_r( $some_value, true ) );
  

  然后去wp-content/debug.log里看内容（需要先在wp-config.php里开启调试：define('WP_DEBUG', true); define('WP_DEBUG_LOG', true);），这个方法在Ajax响应被前端拦截或处理时特别好用。

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