JS使用Chrome浏览器实现调试线上代码

2023年6月11日上午2:21 • JavaScript

开发者在线上部署的代码出现问题时，需要及时定位问题。然而，线上代码的环境不同于本地开发环境，部署过程中也可能出现各种问题，使线上代码难以调试。因此，如何使用调试工具，在线上环境快速定位问题，显得尤为重要。

由于Chrome浏览器功能齐全，且被广大开发者喜爱，因此在本文中，我们使用Chrome浏览器为例，来讲解如何利用其调试功能，实现对线上代码的调试。

如果线上代码使用了Node.js，我们还需要在服务器上安装和启动一个Node.js脚本来实现远程调试。

为了更好地编写JS代码，我们还需要使用一款高效、快捷、全能的编辑器VS Code。

node --inspect-brk=0.0.0.0:9229 app.js

其中，app.js为你要调试的Node.js应用入口文件。

打开Chrome浏览器，输入 chrome://inspect/#devices 来访问Chrome开发者工具列表页面。确保设备已连接，并点击 Configure 按钮。
在弹出对话框中，将 Discover network targets 的选项打开。
输入服务器的IP地址和端口，点击 Add 按钮。如果一切正常，你应该会在页面的下方看到你的Node.js应用程序。
点击应用程序下的 inspect 按钮，打开Chrome开发者工具。
在开发者工具里切换到 Sources 页面，找到要调试的Node.js文件并打开它。
在要调试的位置设置断点。
使用你的Web浏览器访问你的Node.js应用程序，并触发你设置的断点。此时，Chrome浏览器将会自动暂停运行，并将代码位置设置在断点处，你就可以在开发者工具里查看变量、控制程序的运行、甚至进行随意的修改。

针对前端代码的调试，我们也可以使用Chrome浏览器提供的开发者工具。以下是调试前端代码的详细流程。

下面列举两个示例，分别用于后端代码调试和前端代码调试。

假设我们的Node.js应用部署在服务器上，应用入口文件为 app.js。我们想要调试数据库查询语句。那么，我们可以按照下面的步骤进行调试。

node --inspect-brk=0.0.0.0:9229 app.js

chrome://inspect/#devices

假设我们要调试以下HTML页面，调试时需要检查Cookie的值，以确定登录状态。那么，我们可以按照下面的步骤进行调试。

<!DOCTYPE html>
<html>
<head>
  <title>Cookie调试示例</title>
</head>
<body>
  <p>请查看浏览器的Cookie信息</p>
</body>
</html>

通过Chrome浏览器提供的调试工具，我们可以在线上线下环境中快速定位和解决问题。前提是我们需要掌握调试工具的使用技巧，才能利用其实现快捷的调试扫描。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS使用Chrome浏览器实现调试线上代码 - Python技术站