Reactjs console.logs 没有显示在浏览器控制台上，但显示在我的终端上

发布于08月10日

我刚刚开始学习React.js，我正在使用Next.js在一个Reaction项目中进行非常简单的测试.

我注意到，console.log()没有显示在任何浏览器的控制台选项卡上，而是显示在VS代码终端上.这在future 的项目中一点用处都没有，我希望在浏览器上正常看到它……

下面是一个简单的测试:

export const Page = ()=> {

  console.log('Hello, World');

  return (
    <div>
      Hello
    </div>
  )
}

export default Page;

保存更改并运行"npm run dev"后，控制台(Chrome、Mozilla、Opera...)上没有任何内容，甚至没有错误或警告，但在VS代码终端上有:

- wait compiling...
- event compiled client and server successfully in 976 ms (512 modules)
Hello, World

正常情况下，我可以使用JavaScript查看console.log条消息. 使用默认设置启动Next.js项目. 我已经关闭了所有的浏览器扩展，创建了一个新的Next应用程序，但同样的问题.我用的是NPM -v 9.6.7.

我也寻找了相关的话题，但还没有找到解决方案.

"use client"; // This is a client component ?? export default function Card() { console.log("Hello") // I will get this log on the browser, and also on the server while rendring return <></>; }

Reactjs console.logs 没有显示在浏览器控制台上，但显示在我的终端上

推荐答案

Reactjs相关问答推荐

更新数据时有关CQR和更新UI的问题

构建next.js项目时状态不变，但在dev服务器中

Redux Provider Stuck甚至彻底遵循了文档

App.js中的H2组件不会动态呈现.这可能是什么问题？

在React Create App TS项目中安装material UI

useCallback()是否应该用于作为prop传递给子组件的函数，即使该组件包装在memo()中？

React-React中是否完全支持基于类的组件？

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

React 错误：只能用作元素的子元素，从不直接渲染.请将您的包裹在中

验证 Yup 中的对象项

如何将 DocuSign 控制台界面嵌入到 React 应用中

使用新数据更新时，React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

useEffect 渲染没有依赖数组的组件

如何保留我的下一个授权用户会话？所以我可以使用提供的 ID 在其他路由中获取数据

动态添加或删除文本输入字段并将值设置为 React JS 中主要状态的数组

如何在 nextjs 中单击按钮时动态导入和渲染组件？

如何从 React Redux store 中删除特定项目？

如何在react 中更新子组件中的变量？

需要帮助在 document.queryselector 的 nextjs 页面上插入 useEffect 状态

React Router 6，一次处理多个搜索参数