我该如何调试WordPress插件?

40

最近我继承了一个WordPress插件,但它有一些bug。我的问题是我对WordPress不熟悉,不知道如何记录调试信息以便找出问题所在。

我只需要一种创建弹窗或记录到控制台的方法。


1
刚刚想到了一个简单的技巧来显示 JavaScript 警告消息。添加:echo "<script> alert('Hello World!'); </script>"; 这应该能让我继续前进,但我真的很想知道社区标准,以便其他人不会迷失在我的代码中。而且,我讨厌在我的代码中放置像这样的消息 - 必须删除 - 更愿意使用一个可以在一个地方打开和关闭调试消息的系统! - spinlock
问题在于你询问有关 WordPress 调试,而 WordPress 是 PHP、JavaScript、HTML 和 CSS 的混合体。因此,你应该通过像你描述的 alert('Hello World!'); 这样的方式来扩展你的调试思路,这是我们都做过的事情。学习如何观察 PHP 日志,并基本上学会细致入微。因为 WordPress 很棒,但它是建立在其他具有成熟调试方法的工具之上的。祝你好运! - Giacomo1968
6个回答

31

在 WordPress Stack Exchange 上,有很多知识渊博的人解释他们的调试技巧,非常棒:你如何调试插件?

Javascript 领域,你基本上需要使用 <script>console.log('the value is' + variable);</script>。并使用Google Chrome检查器和/或Firebug

PHP中,它取决于事情发生的地方或您想要输出的位置。


WordPress中的调试

Codex中的官方文档。

用于调试的wp-config.php示例

// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );

将信息打印到日志文件

以下内容使用的是OSX/Unix/Linux系统路径,请根据需要调整为Windows系统路径。

/* Log to File
 * Description: Log into system php error log, usefull for Ajax and stuff that FirePHP doesn't catch
 */
function my_log_file( $msg, $name = '' )
{
    // Print the name of the calling function if $name is left empty
    $trace=debug_backtrace();
    $name = ( '' == $name ) ? $trace[1]['function'] : $name;

    $error_dir = '/Applications/MAMP/logs/php_error.log';
    $msg = print_r( $msg, true );
    $log = $name . "  |  " . $msg . "\n";
    error_log( $log, 3, $error_dir );
}

然后,在您的代码中调用函数my_log_file($post, 'The post contents are:');


直接在渲染的HTML中打印

/* Echo variable
 * Description: Uses <pre> and print_r to display a variable in formated fashion
 */
function echo_log( $what )
{
    echo '<pre>'.print_r( $what, true ).'</pre>';
}

在需要的地方使用它,例如:echo_log( $post );


FirePHP

这个扩展可以直接将信息记录在浏览器控制台中。请参考WordPress Answers上的以下问答:如何使用WP-FirePHP扩展?


Query Monitor

这是调试工具箱中必备的插件之一,该插件有许多功能,其中之一是其日志选项卡,只需将其放置在您的代码中,并在您的页面中在插件接口中列出:

do_action( 'qm/debug', 'This happened!' );
do_action( 'qm/debug', $your_var );
do_action( 'qm/debug', [$var1, $var2] );


5

3

一般的PHP调试策略是使用 print_r( $var ) 语句并刷新页面。简单易行。如果你想深入代码,可以安装 Xdebug


他似乎也在处理JavaScript。但是我同意你的一般调试策略思维。 - Giacomo1968

1
根据您的评论,您更愿意使用一种可以在一个地方打开或关闭调试消息的系统:
在WordPress中可以实现。有一个常量叫做WP_DEBUG,您可以从WordPress文件夹中的wp-config.php文件中将其设置为truefalse(即添加数据库参数的文件)。
因此,您可以使用:
if( WP_DEBUG ){
echo "<script> alert('Hello World!'); </script>"; 
}

只有当你将WP_DEBUG设置为true时(例如在网站的开发版本上,如在本地主机上),警报才会显示,而它不会在生产版本的网站上显示(你只需要在那里将WP_DEBUG设置为false)。


1
在大多数情况下,即使启用调试模式,WordPress 插件也可能不显示任何内容,只会默默地失败。 - DustWolf
你应该检查你的PHP设置和服务器日志。 - RRikesh

0

我知道我的回答是在原问题几年之后,但是由于我最近遇到了完全相同的问题,而且仍然找不到令人满意的解决方案,所以我编写了一个插件来解决这个问题。

它专门解决了OP的需求:

我只需要一种创建弹出窗口或记录到控制台的方法。

希望它能帮助所有正在寻找快速简便的方式来调试他们的代码的插件/主题开发者https://wordpress.org/plugins/bugfu-console-debugger

只需安装它并从您的PHP代码中调用日志记录方法即可直接记录到浏览器JavaScript控制台。

BugFu::log($your_string-array-object);

2022年8月编辑

在调用上述方法时记录日志的技术:

  1. PHP(后端)将日志写入数据库
  2. JavaScript(前端)发起AJAX调用以读取数据库日志
  3. PHP(后端)读取数据库日志并返回其内容
  4. JavaScript(前端)将返回的内容打印到浏览器控制台中

安装BugFu可以创建一个PHP和JavaScript之间的桥梁,使得从WordPress代码(主题或插件)中的任何位置快速轻松地记录到浏览器控制台,甚至可以从仅作为AJAX回调运行的PHP代码中进行记录。

无需担心开启或关闭WordPress调试日志,无需访问托管服务器以读取通常的PHP日志,也无需安装特殊的浏览器扩展或IDE工具。


1
感谢@brasofilo的澄清 :) 我猜想那些踩票是因为此事。我会按照你的建议去做,并尽力解释我所使用的技术。即使每次从头开始编码并不是很实用(因此需要插件),但有人可能会觉得它很有趣。 - fedeandri
1
很酷 :) 噢,回答旧问题没有问题。多年以后,它们可能仍然会被访问,并为一些迷失的编程灵魂提供帮助,哈哈 - brasofilo
@fedeandri 感谢您出色的插件。它真的很有用,挽救了我的一天。真高兴我找到了您的插件。继续保持好工作,您应该得到更多的赞成票。 - Dushan
我很高兴能帮到你,@Dushan。我并不在意点赞,我只关心解决有趣的问题,并可能帮助他人。 - fedeandri
1
@brasofilo 经过「仅仅」四年,我终于记得遵循你的建议了(这里适合放一个「冷汗微笑」表情)。 - fedeandri
显示剩余2条评论

-1
通过使用Visual Studio和一个dev工具php调试器扩展,您实际上可以逐步调试它,而不是记录它们并在运行时尝试找出变量值。可能还有其他替代方案。
PS:它不是免费的 :(

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接