可以在 php 文件中调试 Javascript 吗？答案

【问题标题】：Debugging Javascript inside php file possible?可以在 php 文件中调试 Javascript 吗？
【发布时间】：2018-10-21 00:33:01
【问题描述】：

我正在尝试找到在 php 文件中调试 javascript 代码的方法。我在 php 文件中嵌入了很多 javascript 代码。

我可以在 XDebug 的帮助下使用 netbeans 调试 php 代码。我还可以使用 chrome 或 firefox 等浏览器在 html 或 js 文件中单独调试 javascript。

如果可能的话，我想要的是调试 php 文件中的 javascript 代码。我相信很多人会使用嵌入 php 文件的 javascript。我个人不喜欢它，但我必须努力。我知道我可以在js文件中单独编写代码，然后可以使用浏览器进行调试，但是代码很多，需要时间进行分离。

如果可能的话，这里有人可以建议我一个方法吗？

【问题讨论】：

你的浏览器调试工具怎么样？
这项工作的最佳工具，使用浏览器工具，因为浏览器是解释 JS 的工具。仍在从 18 年前我们不得不做的 IE 与 netscape 的事情中恢复过来……呃。
@Pointy 你能给我推荐一些可以完成这项工作的工具吗？

标签： javascript php debugging

【解决方案1】：

恕我直言，我什至不看它，我认为它（也不应该）是可行的。

原因如下：
您的 PHP 在服务器端得到处理，这就是 XDebug 启动并让您能够断点所有 PHP 代码的时候。然后服务器输出到达客户端，这就是实际 JS 在解析后的 HTML 中内联处理的时候。这意味着您必须以某种方式拦截 HTML，解析它，检测最终的内联 JS 脚本......并在那时设置断点（每次运行都是），然后输出到解析 HTML 的客户端再次渲染它并处理最终的断点。我想这将是一个乏味的过程，而且上班更乏味，这就是为什么没有人尝试为此进行扩展的原因。
据我所知，内联 JS 也更难调试，而且我从未见过允许直接从 IDE 对静态 HTML 文档中的嵌入标签进行断点的实际设置，这比断点 JS 更容易实现在 PHP 中...

我想你最好的办法是将你的 JS 外部化在单独的文件中，并且只在你的 PHP 模板中硬编码<script src="path/to/your/app.js"></script>，从长远来看，这确实会更舒服。

然后你就可以断点app.js 中的所有东西，加上真正的前端架构，语法高亮，打动你的老板，让你的生活更轻松，世界变得更美好等等。

另外，供参考：How to debug JavaScript code with Netbeans? (answer #45515159)
继续阅读：https://netbeans.org/kb/docs/webclient/html5-js-support.html

编辑： 似乎在静态 HTML 标记中设置 JS 断点在 Visual Code 中是可行的 -> https://github.com/Microsoft/vscode-chrome-debug/issues/122

【讨论】：

嗨@decksterr，非常感谢您的回答，但不幸的是我不能这样做，我必须和我的经理谈谈，这是很多文件，我个人不喜欢它我已经提到过。顺便谢谢

【解决方案2】：

我不知道我是否迟到了，但是，我偶然发现了以下网站，并且能够为 Javascript 和 PHP 设置调试器，它支持在 PHP 脚本中调试嵌入式 JavaScript。

来源：https://abcmemo.com/2017/04/20/debug-php-and-javascript-in-visual-studio-code/

该网站使用 PHP.exe 作为 Web 服务。

也可以使用 IIS、Apache 或其他。

要求：

IDE：Visual Studio 代码
扩展：PHP 调试
扩展：（Chrome、Firefox 或 Edge）的调试器
在 php.ini 中设置 Xdebug
浏览器中的扩展（可选）：如果您想在触发器上进行调试，请使用 PHP xdebug。

您需要同时运行两个调试器，一个用于 PHP，一个用于 JavaScrpit。

PHP sample

JavaScript sample

【讨论】：

这里有点晚了，但是我用 2.0.0 任务管理器试了一下，并启动了 XDebug 的监听，并且前端在 PHP 代码中同时运行并且只有断点被击中，而不是 javascript :/ 中的那些。无论如何，来源来自 2017 年 4 月 20 日，而且这个问题老了，所以没关系。也可用于处理开发服务器并在需要时避免使用 xampp :)

【解决方案3】：

我使用了很多 wordpress 模板，我不得不在我的 php 文件中处理一些 js。假设您可以在服务器上运行代码，您可以轻松地在 chrome 的开发工具中调试输出（如果使用 chrome）。 Chrome 还允许设置断点，因此您可以逐行进行，并且由于您的浏览器最终运行的是 js，因此您无需处理 php.ini 即可监控代码行为。这是我处理这个问题的主要方式。

我还建议将尽可能多的 js 分离到资产文件夹中的单独文件中。根据您的项目，您很少需要内联代码，在我看来，在您的 php 中包含大量 JS 会很麻烦，除非您使用 onclick="" 或 onchange="" 属性（也可以使用事件侦听器来处理。

除此之外，console.log() 一切都是废话。

【讨论】：

嗨@Vladimir，如果你说console.log()，那么alert 也很有帮助，我知道如何使用浏览器进行调试，但只有在单独文件中的js 才有可能，你能拜托吗告诉我如何使用您提到的浏览器调试嵌入式 js？那太好了
js在做什么或负责什么？我需要更多上下文
我确实通过分离它们来解决我关于 js 的问题，如果我可以在不分离的情况下调试它们，我不想这样做，我的问题是主要上下文。谢谢

【解决方案4】：

如果可以帮助其他任何人，我会通过以下步骤帮助我自己

注意：- 如果您呈现的代码是特定于 java-script 的内联代码，那么很难像这样进行调试。

使用 chrome、edge 等浏览器运行应用程序所需的页面
按f12或(Ctrl+Shift+I)打开检查页面，或者你可以在页面上右击看到检查选项并点击。
转到源并双击源文件（这可能是您的 php 文件）。
如果代码未加载，然后按 f5 或 Ctrl+R 重新加载页面，您将看到您的 java-script 代码在渲染后嵌入了 html，然后您可以将断点放在您想要的任何位置并进行调试通过浏览器工具（您可以在那里看到一些按钮来指导您进行调试，如单步执行、单步执行等）。
您还会在此处看到有关 java-script 的错误，

【讨论】：

如何从调试器打开一个php文件？