讲师中心 微信公众号
AI工具推荐 视频效率加速

怎么用VSCode开发Redwood.js全栈_VSCode Redwood单元格与服务调试

云涛君_4222

云涛君_4222

发布时间:2026-05-29 13:37:47

|

440人浏览过

|

来源于php中文网

原创

Redwood项目在VSCode中启动dev server失败,主因是端口冲突(如8910被占)或redwood.toml端口配置硬编码,应优先用--forward-api-port换端口并重启终端;GraphQL断点需设在graphql.ts handler处且launch.json配置outFiles指向.redwood/functions/。

怎么用vscode开发redwood.js全栈_vscode redwood单元格与服务调试

Redwood项目在VSCode里启动不了dev server?先检查redwood.toml和端口冲突

Redwood默认用yarn redwood dev同时拉起Web和API服务,但VSCode终端常因环境变量缺失或端口被占而静默失败。常见现象是终端卡在“Starting API and Web servers…”不动,或者报Port 8910 is already in use。

实操建议:

  • 先手动运行yarn redwood dev --forward-api-port=8911,把API服务换到未占用端口,避免和本地其他Node服务(比如Next.js)撞车
  • 确认redwood.toml里api.port和web.port没被硬编码成已占端口;改完记得重启VSCode终端,因为Redwood CLI会缓存配置
  • 如果用WSL2,需在redwood.toml加host = "0.0.0.0",否则VSCode的Remote-WSL插件连不上localhost

怎么在VSCode里给Redwood的GraphQL服务打断点?别直接在services目录下设断点

Redwood的GraphQL resolver实际运行在.redwood/functions/graphql打包后的文件里,源码里的api/src/services/**/*.ts只是开发时的入口,VSCode默认无法映射调试。

实操建议:

  • 在VSCode的.vscode/launch.json中添加Node.js调试配置,关键字段必须设为:"outFiles": ["./.redwood/functions/**/*"],否则断点不命中
  • 启动调试前,先执行yarn redwood build api生成sourcemap(开发时yarn redwood dev也会做,但有时缓存失效)
  • 断点优先打在api/src/functions/graphql.ts的handler函数开头,这里能捕获所有请求;再往下进resolver,要确保api/src/services下的文件有debugger语句且sourcemap可用

单元测试跑不起来,报Cannot find module '@redwoodjs/testing'?检查jest.config.js路径解析

Redwood的测试依赖通过Babel或TS预处理器注入全局工具函数(如mockCurrentUser),但VSCode的Jest Test Explorer插件常因工作区根路径不对而找不到这些模块。

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

实操建议:

  • 在VSCode设置里搜jest.pathToJest,设为"yarn jest"(不是yarn run jest),避免Shell解析差异
  • 确认jest.config.js导出的对象里有roots: ['<rootdir>/web', '<rootdir>/api']</rootdir></rootdir>,否则api/src/services/__tests__里的测试文件会被忽略
  • 如果用TypeScript,确保ts-jest版本与Redwood锁定的typescript版本兼容(v5.x Redwood对应TS 4.9,装ts-jest@29.1会报错)

修改cells组件后UI不更新?不是热更新失效,是Cell缓存策略在作怪

Redwood Cell默认启用useStrictDataAccess和自动refetch,但VSCode保存文件后,浏览器可能仍显示旧数据——这不是HMR问题,而是Cell内部的QUERY结果被React Query缓存了。

实操建议:

  • 在Cell组件顶部加export const QUERY = gql`...` // eslint-disable-line no-unused-vars,防止ESLint删掉未显式使用的QUERY,否则Cell会跳过数据获取
  • 调试时临时在Cell的Success组件里加console.log(props),确认props是否真的没变;如果变了但UI没刷新,大概率是useQuery的staleTime设得过大(默认1000ms)
  • 想强制重载,可在浏览器控制台执行window.__REDWOOD__APOLLO_CLIENT__.resetStore(),这比关掉再开dev server快得多

Redwood的调试链路比普通React项目多一层构建抽象,最易被忽略的是.redwood/functions/这个中间产物目录——它既是调试断点的实际落点,也是错误堆栈里路径混乱的源头。

热门AI工具

更多
PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

5727

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2468

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4296

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1335

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1718

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9863

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

960

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2664

2023.09.04

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

20

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn