当前位置:

首页 > 编程开发 > ubuntu下如何调试js代码

ubuntu下如何调试js代码

在Ubuntu下调试JavaScript,后端通过Node.js的`--inspect`标志配合ChromeDevTools或VSCode内置调试器进行断点;前端使用浏览器DevTools或HeadlessChrome远程调试;并利用日志工具与系统命令(如journalctl)排查环境问题。

在 Ubuntu 环境下调试 Ja vaScript,其实方法比想象中要丰富,关键看你是在后端、浏览器,还是日志层面解决问题。这次我们一次性把常用的调试手段过一遍。

ubuntu下如何调试js代码

一、Node.js 后端调试

开发后端应用,最核心的工具就是 Node.js 自带的调试协议。配合 Chrome DevTools 或 VS Code,完全可以像调试前端一样,断点、单步、观察表达式,一个都不少。具体怎么操作?

快速上手步骤

1. 启动调试会话

  • 普通启动:node --inspect app.js
  • 首行暂停:node --inspect-brk app.js(如果想让程序一启动就停在入口,用这个参数更直接)

2. 用 Chrome DevTools 查看

  • 打开 chrome://inspect,在 Remote Target 下找到你的 Node 进程,点击 inspect 即可进入 DevTools。
  • 如果想直接在源码上打断点,可以把项目目录添加为 Workspace——这样 DevTools 就能理解你的文件结构了。

另外,直接在代码里写一句 debugger;,运行到那里就会自动中断,非常方便。

3. 用 VS Code

  • 在“运行与调试”面板创建 launch.json,选 Node.js 环境。一个简单的配置示例:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229
    }
  ]
}

一些实用补充

  • 调试已运行的进程:先用 node --inspect 启动,然后在 VS Code 选择 Attach to Process,连接到 9229 端口即可。
  • 无界面环境:可以用 Headless Chrome 远程调试。比如启动 google-chrome --headless --remote-debugging-port=9222,然后访问 http://127.0.0.1:9222,就能看到可以检查的页面列表了。

二、前端浏览器调试

浏览器调试是最直观的。在本机或服务器上直接用 Chrome/Chromium,按下 F12 或右键“检查”,就能打开 DevTools。操作其实就三板斧:在 Console 里看报错,在 Sources 里设断点,在 Network 里检查请求和响应。

那如果是无界面服务器或远程环境呢?启动 Headless Chrome 并开启远程调试端口(比如 9222),在本地 DevTools 中通过 http://127.0.0.1:9222 来检查页面。另一种思路是用 Qt WebEngine 集成调试接口。

三、日志与系统层面的辅助排查

很多时候,真正的问题并不在代码逻辑里,而是在运行环境上。这时候日志和系统信息就派上用场了。

  • 应用日志:除了常见的 console.log 和 console.error,还可以用 winston、pino 等日志库输出结构化日志。实时查看日志可以用 tail -f /path/to.log。
  • 系统与服务日志:如果 Node.js 作为服务运行,用 journalctl -u your-service-name -f 跟踪服务日志。同时检查 /var/log/ 或应用目录下的日志文件。
  • 运行环境:用 top 或 htop 看 CPU/内存,用 df -h 或 du -sh 检查磁盘空间,再确认依赖与环境变量是否正确配置。

四、常见问题与快速排查

实际调试中总会碰到一些“卡住”的情况,这里列几个最常见的:

  • 看不到 Node 进程:确认是以 --inspect 启动,且端口 9229 未被占用。必要时用 --inspect-brk 确保首行即暂停。
  • 断点不生效:在 VS Code 里确认项目根目录已添加为 Workspace,且 Sources 面板中的文件与磁盘文件建立了映射关系。
  • 远程/容器场景:确保调试端口(如 9229)已开放并正确映射。Headless 场景下使用 --remote-debugging-port=9222,并在 http://127.0.0.1:9222 检查页面。
  • 无界面服务器:优先使用 Headless Chrome 远程调试。如果是持续集成,建议结合日志采集与错误追踪系统(比如 Sentry),完善可观测性。
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
作者最新文章
编程开发 Ubuntu
相关文章 更多
Ubuntu命令行入门:打开终端并验证文件目录操作
Ubuntu命令行入门:打开终端并验证文件目录操作

本教程指导Ubuntu新手打开终端,通过pwd、ls、cd、mkdir和touch命令完成基础文件目录操作。适用于桌面版、虚拟机及WSL环境,提供从查看路径到创建测试文件的完整验证步骤,帮助读者建立命令行操作的安全意识与正确习惯。

在VMware中安装Ubuntu并验证启动的完整步骤
在VMware中安装Ubuntu并验证启动的完整步骤

本文提供在VMware中安装Ubuntu并验证启动的完整流程。适用于首次练习Linux或搭建开发环境的用户。按步骤完成虚拟机创建、ISO挂载、硬件分配与安装后,可通过终端命令确认版本、内核与网络状态,确保系统可正常使用。

Ubuntu 26.04 将显著提升英伟达图形显卡在 Wayland 环境下的性能
Ubuntu 26.04 将显著提升英伟达图形显卡在 Wayland 环境下的性能

Ubuntu26.04LTS针对英伟达显卡在Wayland+GNOME环境进行性能调优,通过修改gbm_surface_lock_front_buffer函数,将帧渲染等待时间从毫秒级降至微秒级,显著提升UI响应和画面流畅度。该补丁已作为发行版专属补丁集成,确保LTS用户无需等待上游整合即可获得优化体验。

Ubuntu Touch 24.04-2.0 Beta 发布:适配索尼 Xperia X 等手机 提升上网体验
Ubuntu Touch 24.04-2.0 Beta 发布:适配索尼 Xperia X 等手机 提升上网体验

UbuntuTouch24.04-2.0Beta发布,底层升级至Ubuntu24.04,浏览器引擎从Chromium87跃升至134,网页兼容性显著提升;新增屏幕刘海区域自动适配、截图编辑器、网络指示器改进、移动数据可靠性增强、数据加密稳定,并新增NothingPhone(1)等设备支持。

Ubuntu如何查看系统防火墙规则
Ubuntu如何查看系统防火墙规则

ufw status仅显示高层策略和显式添加的规则(如“80 ALLOW Anywhere”),不反映默认策略绕过、IPv6独立规则、Docker等直写nftables的bypass规则,也无法体现本地回环流量不受管控等底层细节。Ubuntu 默认用 ufw 管理防火墙,但规则实际由 nftable

Ubuntu如何更换锁屏背景图片
Ubuntu如何更换锁屏背景图片

锁屏背景和桌面壁纸之所以不同,是因为GNOME默认会复制桌面壁纸,然后强制叠加高斯模糊和亮度调整效果,这个效果是由lockDialogGroup的CSS来控制的。要是想去除模糊,建议使用Control Blur Effect On Lock Screen扩展,把Adjust Sigma设置为0就行。

UbuntuSwapper在服务器上应用效果如何
UbuntuSwapper在服务器上应用效果如何

Ubuntu Swapper(一般就是指Ubuntu的交换分区或者交换文件)在服务器上的应用成效,是由多个因素共同决定的,像服务器的硬件配置情况、工作负载的类型以及交换空间的大小和具体配置等。下面为大家带来一些有关Ubuntu Swapper在服务器上应用效果的一般性评价:正面效果内存管理:交换空间

Ubuntu如何配置命令行模式下的中文支持
Ubuntu如何配置命令行模式下的中文支持

根本原因是纯命令行tty默认不支持UTF-8及中文字体渲染,locale设置仅影响字符解析逻辑,不解决字体绘制问题;图形终端自带UTF-8渲染,而tty需借助fbterm等工具实现中文显示。为什么终端里中文显示为问号或方块 纯命令行(tty,例如通过Ctrl+Alt+F3进入的界面)默认不会加载UT

如何通过Tomcat日志提升Ubuntu服务器性能
如何通过Tomcat日志提升Ubuntu服务器性能

通过分析Tomcat日志来提升Ubuntu服务器性能是一个很好的方法。以下是一些步骤和建议,帮助你通过Tomcat日志来优化服务器性能:1. 收集日志首先,得保证你的Tomcat服务器有详细的日志记录配置。在conf/logging.properties文件里,你可以对日志级别和输出格式进行调整。o

Ubuntu如何设置具体的命令行配色
Ubuntu如何设置具体的命令行配色

直接修改PS1是最为可控且轻量的方法。因为GNOME Terminal主题难以区分提示符、命令输入与输出,而PS1搭配ANSI转义码能够精准地为各个字段上色,并且需要用[ ]进行包裹,以防止光标出现错位的情况。直接改 PS1 是最可控、最轻量的方式,不需要装框架或改终端全局配色。 为什么不用改 GN

查看更多
精品专题 更多
装机必备
装机必备

正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

Windows
Windows

正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程
PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

Mac软件 更多
Postman macOS版
Postman macOS版
Mac

Postman是一套面向API全生命周期的开发与测试平台,可在Mac上发送和调试多种协议请求,管理集合、环境及认证信息,并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用,提供个人免费方案。

Docker Desktop macOS版
Docker Desktop macOS版
Mac

Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境,集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。

Android Studio macOS版
Android Studio macOS版
Mac

Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境,基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。

WINDOWS 更多
PixPix 网页版
PixPix 网页版
Windows

PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台,提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。

Postman Windows版
Postman Windows版
Windows

Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求,并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等

Docker Desktop Windows版
Docker Desktop Windows版
Windows

Docker Desktop 为 Windows 开发者提供集成式容器环境,内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件,可在本机完成镜像构建、容器运行、日志查看和资源管理。