使用浏览器诊断 JavaScript 错误

0 次阅读

如果您在交互功能方面遇到问题,这可能是由于 JavaScript 错误或冲突所致。例如,您的弹出菜单可能已损坏,您的元框无法拖动,或者您的添加媒体按钮不起作用。为了制定您的支持请求,它可以帮助团队了解 JavaScript 错误是什么。

本指南将向您展示如何在不同的浏览器中诊断 JavaScript 问题。

第 1 步:尝试其他浏览器

为确保这是 JavaScript 错误,而不是浏览器错误,首先尝试在另一个浏览器中打开您的网站。

  • 如果该站点在新浏览器中没有相同的问题,您就知道该错误是特定于浏览器的
  • 如果站点出现相同的错误,则不是特定于一个浏览器的错误

记下您遇到错误的任何浏览器。您可以在提出支持请求时使用此信息。

第 2 步:启用 SCRIPT_DEBUG

您需要打开脚本调试。打开 wp-config.php 并在“That’s all, stop editing! Happy blogging”之前添加以下内容。

define('SCRIPT_DEBUG', true);

检查您是否仍有问题。

  • 问题已解决 – 关闭脚本调试并在支持论坛上报告问题,告诉志愿者您打开了脚本调试并解决了问题。
  • 问题仍然存在 – 继续第 3 步。

第 3 步:诊断

现在您知道您在哪些浏览器中遇到问题,您可以开始诊断问题。

Chrome 浏览器

1. 打开开发者工具

按 Command+Option+J (Mac 系统) 或 Ctrl+Shift+J (Windows, Linux, Chrome OS 系统) 直接跳转到 Chrome 开发者工具的控制台面板。

或者,导航到更多工具 > Chrome 菜单中的开发人员工具,然后单击控制台选项卡。

2.识别错误

错误控制台将打开。如果您没有看到任何错误,请尝试重新加载页面。页面加载时可能会产生错误。

控制台将为您提供错误类型、错误位置和行号

火狐

1. 打开网络控制台

按 Command+Option+K (Mac 系统) 或 Ctrl+Shift+K (Windows 系统) 直接跳转到火狐网络控制台的控制台面板。

或者,导航到 Web 开发 > Firefox 菜单中的 Web 控制台,然后单击控制台选项卡。

2.识别错误

错误控制台将打开。 如果您没有看到任何错误,请尝试重新加载页面。该错误可能是在页面加载时生成的。

控制台将为您提供错误类型、错误位置和行号

Edge 浏览器

请参阅上面的 Chrome 部分。

IE 浏览器

请记住,当涉及到 JS 错误时,IE 的行为与其他浏览器大不相同,并且以不同的方式报告它们。在 IE 中遇到问题时首先要检查的是问题是否存在于 IE 中。另请注意,某些 IE 版本中内置的调试工具是有限的,可能不可用。

NOTE: LitePress officially dropped support for Internet Explorer 11 in LitePress 5.8. If you are currently using IE11, it is strongly recommended that you switch to a more modern browser, such as Google Chrome, Mozilla Firefox, Safari, or Microsoft Edge. More information can be found on the Making LitePress Blog.

1. 打开控制台

转到您遇到错误的屏幕。在 IE 中,导航到 设置 > F12 开发者工具。或点击 F12

单击控制台选项卡。

ie_console1

2.识别错误

错误控制台将打开。 如果您没有看到任何错误,请尝试重新加载页面。该错误可能是在页面加载时生成的。

控制台将为您提供错误类型、错误位置和行号

ie_console2

上图显示了 jquery.js 第 2 行的错误。

Safari

1. 启用开发者工具

导航到 Safari >首选项 >高级并选中在菜单栏中显示开发菜单

debug_safari

2. 打开控制台

转到您遇到错误的页面。在 Safari 中,导航到 开发 >显示错误控制台

3. 识别错误

错误控制台将打开。 如果您没有看到任何错误,请尝试重新加载页面。

控制台会显示错误、错误位置和行号:

debug_safari4

上图显示了 jquery.js 第 2 行的错误。

注意:如果您看不到错误,请单击控制台中的返回按钮

debug_safari3

Opera

1. 打开控制台

转到您遇到错误的页面。在 Chrome 中,导航到 工具 >高级 >错误控制台

2.识别错误

错误控制台将打开。从两个下拉菜单中选择 JavaScript错误。要查找错误位置,请展开其中一个错误。您将看到错误和位置。

opera_console

上图显示了第 2 行 jquery.js 中的错误,但请记住复制整个堆栈信息!只是说哪一行比显示上下文更有帮助。

第 4 步:报告

现在您已经诊断出您的错误,您应该提出您的支持论坛请求。转到疑难解答论坛

如果您的问题与特定主题或插件有关,您可以通过访问 https://wordpress.org/support/plugin/PLUGINNAME 或 https://wordpress.org/support/theme/THEMENAME 访问他们的专用支持论坛

请包括以下信息:

  • 您遇到问题的浏览器
  • SCRIPT_DEBUG 是否修复了错误
  • JavaScript 错误
  • 错误的位置——文件名和行号
  • 错误的上下文——包括整个错误堆栈将帮助开发人员