首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React本机chrome调试器不显示console.log和默认日志

React本机Chrome调试器不显示console.log和默认日志的原因可能是开发者工具的设置问题。首先,确保以下步骤已经完成:

  1. 确认是否有其他地方禁用了console.log输出,如代码中使用了条件语句来控制console.log输出。
  2. 检查Chrome开发者工具的控制台面板是否处于打开状态。可以通过按下键盘上的F12键或右键点击页面并选择“检查”来打开开发者工具。
  3. 在开发者工具的控制台面板上方的面包屑导航栏中,确保选择了正确的iframe或页面,以便能够正确显示输出。

如果上述步骤都已经完成,但仍然无法显示console.log输出和默认日志,那可能是由于React的一些特性导致的。React通常会在开发模式下禁用一些默认日志,以提高性能和减少无用的输出。可以尝试以下方法解决问题:

  1. 确保你的应用程序是在开发模式下运行的。可以在项目根目录的.env文件中设置NODE_ENVdevelopment,或者在启动应用程序的命令中添加--mode=development参数。
  2. 如果你使用了自定义的日志记录库,如redux-logger,请确保已经正确地配置和启用了该库。
  3. 可以尝试在代码中使用console.error来替代console.log,以确保错误信息能够被正确地显示。

总结起来,如果React本机Chrome调试器不显示console.log和默认日志,首先检查代码中是否有条件语句控制了console.log的输出,然后确保开发者工具的控制台面板处于打开状态,并且选择了正确的iframe或页面。如果问题仍然存在,可以尝试在开发模式下运行应用程序,检查是否启用了自定义的日志记录库,并尝试使用console.error来替代console.log

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

方便快捷的调试 Node.js 程序

日志记录 当然,没有哪一个开发工具箱是不提供日志的。我们倾向于在本地开发中的整个代码中放置 console.log 语句,但这并不是生产中真正可扩展的策略。...使用 Node Inspect Chrome DevTools 日志记录只能使我们了解程序为何无法按预期运行。对于复杂的调试,我们将希望使用断点来检查代码在执行时的行为。...NDB 另一种选择是安装 ndb[9],它是 Node.js 的独立调试器浏览器中的 DevTools 类似,就像一个隔离的本地调试器一样。它还有一些在 DevTools 中不可用的额外功能。...这些可能很少见,但确实会发生,特别是如果你的应用程序依赖于本机代码。 要调查这类问题,可以使用 llnode[10]。...trace 通过提供有关被调用的异步方法的更多详细信息来扩展你的异步栈跟踪,这是 Node.js 默认不提供的路线图。

1.6K10

React Native调试方法

应用内的错误与警告提示(红屏黄屏) 错误警告会在开发构建时显示在你的app中。 错误(Errors) app中的错误会在你的app中用红色背景的全屏显示。这个屏幕也叫RedBox。...RedBoxYellowBox在发布构建中都是自动关闭的 访问控制台日志 app运行时你可以通过在终端使用下面的命令为iOSAndroid app显示控制台日志react-native...现在还不可能在Chrome开发者工具中使用“React”tab来检查app小部件。你可以使用Nuclide的“React Native Inspector”作为工作区。...如果运行到任何问题,可能是你的某个Chrome扩展程序不小心干扰了调试器。尝试禁用所有的扩展器然后重新一个个地打开它们直到你找到有问题的扩展程序。...使用自定义的JS调试器 设置 REACT_DEBUGGER 环境变量为启动你的自定义调试器的命令来使用自定义的JS调试器来代替Chrome开发者工具。

3.9K10
  • 【Hybrid开发高级系列】ReactNative(二) —— React Native调试专题

    ▪ 你修改了原生代码(iOS上的Objective-C/Swift或者Android中的Java/C++). 1.4 应用内的错误与警告提示(红屏黄屏)         错误警告会在开发构建时显示在你的.... 1.5 访问控制台日志         app运行时你可以通过在终端使用下面的命令为iOSAndroid app显示控制台日志react−nativelog−ios react-native...现在还不可能在Chrome开发者工具中使用“React”tab来检查app小部件。你可以使用Nuclide的“React NativeInspector”作为工作区。...如果运行到任何问题,可能是你的某个Chrome扩展程序不小心干扰了调试器。尝试禁用所有的扩展器然后重新一个个地打开它们直到你找到有问题的扩展程序。...1.6.2 使用自定义的JS调试器         设置REACT_DEBUGGER环境变量为启动你的自定义调试器的命令来使用自定义的JS调试器来代替Chrome开发者工具。

    37320

    小白看React Native

    大家可以看下面的例子,调用 say() 方法时忘了传参 数,传统的做法就是加上这一句 type = type || ‘1’ 来指定默认值。...绝对布局相对布局 React Native中的绝对布局相对布局,就有点像我们传统终端开发中的布局方式,区别是一个是相对路径,一个是绝对路径。...模块中添加了各种依赖导包的操作。...Chrome Debug React Native的调试神器就是Chrome,安装Chrome插件。模拟器选择command + R 真机选择摇一摇,就可以唤出Debug Menu。...选择debug in chrome,就可以唤出chrome调试器chrome调试器非常强大,像普通的单步断点调试,条件调试,堆栈信息等。 Log Log的信息无论是开发环境还是生产环境都是很重要的。

    2.1K80

    【Hybrid开发高级系列】ReactNative(四) —— 基础开发技巧

    1.5 高度与宽度         组件的高度宽度决定了其在屏幕上显示的尺寸。 1.5.1 指定宽高         最简单的给组件设定尺寸的方式就是在样式中指定固定的widthheight。...红屏报警类似,你可以使用console.warn()来手动触发黄屏警告。 在默认情况下,开发模式中启用了黄屏警告。...1.11.2 访问控制台日志         在运行RN应用时,可以在终端中运行如下命令来查看控制台的日志: $react-native log-ios $react-native log-android...1.11.3.2 使用自定义的JavaScript调试器来调试#         如果想用其他的JavaScript调试器来代替Chrome,可以设置一个名为REACT_DEBUGGER的环境变量,其值为启动自定义调试器的命令...在React Native里,我们都是自动对这些元素进行舍入。         在进行舍入时,我们必须相当的小心。你永远希望在同一时间使用正常值四舍五入的值,那就好像你正在不断的积累舍入误差。

    40720

    现代 Web 应用 Devtools 调试技巧

    img 调用堆栈也不会显示这些代码的位置,所以我们看到的堆栈跟踪将会非常准确且直接。这在控制台调试器界面本身都会是这样的。...img Chrome DevTools 会默认排除第三方脚本,我们也可以手动设置这个忽略列表,或者如果大家幸运的话,我们使用的框架已经为我们做好了需要做的事情并告诉 Chrome DevTools 要忽略哪些文件夹...img 要查看 Chrome DevTools 是否正确加载了Source Map,有一个很好的名为 Developer Resources 的 Tab 可以显示任何错误。...日志console.log 以及它的兄弟姐妹 console.trace console.debug 都非常有用,它们可以让我们理解应用程序中正在发生的事情。...img 日志点是一种非侵入性的替代方法,它拥有 console.log 的大部分好处,但是不需要更改代码重新部署。我们可以通过 Sources 面板中的断点部分右键单击来添加。

    31010

    关于 Node.js 调试,你需要了解的一切

    VS Code 等优秀代码编辑器能帮助大家在实际运行代码之前,预先检查各种常见的 Node.js 问题: 将有效无效语句标记为彩色形式; 自动补全函数变量名称; 高亮显示匹配的括号; 自动缩进代码块...打开 Chrome 网络浏览器(或者其他基于 Chromium 内核的浏览器),并在地址栏中输入 chrome://inspect: 几秒后,您的 Node.js 应用就会显示为 Remote Target...单击任何行号以设置断点(显示为蓝色标记): 这里的 breakpoint 断点,负责指定调试器应在何处暂停处理。我们可以借此检查程序状态,包括局部全局变量。...在 Chrome 中设置日志日志点为 console.log(),涉及任何代码!执行此代码时会输出一条表达式,但与断点不同的是,处理过程不会暂停。...stop:停止应用程序调试器Chrome DevTools 类似,我们可以右键单击任意行来添加: 标准断点 在指定条件下停止程序的条件断点,例如 x>3 计算花括号中表达式的日志点,例如 URL

    43320

    12种 console 相关的方法,帮你快速提高调试效率!(建议收藏)

    3.过滤日志消息 浏览器以适当的颜色显示日志信息,但也可以进行过滤,以显示特定的类型。点击控制台窗格左上方的图标,就可以打开Chrome的侧边栏。...组日志消息 打印日志时,可以在开头使用console.group( label ) 结尾使用 console.groupEnd() 将日志消息分成命名组。...按名称调试监控函数 DevTools Sources 面板(或 Firefox 中的调试器)允许打开一个文件,并通过单击行号设置断点。...基于chrome的浏览器也允许你通过在控制台中输入debug(functionName)来设置断点,例如: debug( doSomething ); 该函数必须在全局命名空间中可用,并且浏览器将在调用它时立即启动调试器...或者,“在调试器中打开”图标将在“调试器”窗格中定位处理程序,以便可以设置断点 Chrome的实现没有那么好,但可以通过getEventListeners()函数传递一个DOM节点来查看所有事件监听器

    1K21

    Node.js 项目调试指南

    如果幸运的话,你的代码可能会崩溃并显示一条明显的错误消息。如果你走运,你的应用程序还是能运行的,但是最后的结果就不尽人意了。 什么是调试? 调试是修复软件 Bug 的艺术。...但我还是认为控制台打印日志记录是一种更快速实用的选择,查找修复错误比你使用的查找方法更重要。...单击任意行号来设置断点(显示为蓝色标记): 断点指定调试器可以暂停处理的位置,这允许我们可以检查程序的状态,包括局部全局变量。...在 Chrome 中设置日志日志点就像 console.log(),没有代码! 当代码执行一行时输出表达式,但与断点不同的是,处理不会暂停。...停止应用程序调试器 Chrome DevTools 一样,你可以右击任何一行来添加: 一个标准的断点。

    68120

    VS Code 调试完全攻略(6):调试由 TypeScript 开发的 React

    本文) 获取代码 如果你已经有了 React、TypeScript Parcel 项目,则可以跳过本节。...配置调试器 我们希望在调试时能够在 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表后续的远程请求。 为了使它尽可能简单和好用,我们将利用 launch.json 文件的优势。...launch.json 让我们打开 .vscode/launch.json 并关注 React + TS Parcel 部分: { "type": "chrome", "request...type request 参数告诉 VS Code 在新的 Chrome 窗口中开始调试。 第一次运行后,启动器的 name 将显示在调试工具栏 IDE 的状态栏中: ?...使用 React + TypeScript 调试器 确保 dev 服务器正在运行,然后启动调试浏览器: ?

    4.8K20

    提高 DevTools 控制台调试 console 的 12 种方法

    换句话说,只要地方 { and } 括号一个变量来显示其名称值: console.log({ variableX }); /* output: { variableX: 42 } */ 2....过滤日志消息 浏览器以适当的颜色显示日志消息,但也可以对其进行过滤以显示特定类型。...组日志消息 可以 console.group( label ) 在开头 console.groupEnd() 结尾使用来将日志消息分为命名组。...基于 Chrome 的浏览器还允许您通过 debug( functionName ) 在控制台中输入来设置断点,例如 debug( doSomething ); 该函数必须在全局名称空间中可用,并且浏览器将在调用调试器后立即启动它...另外,“在调试器中打开” 图标可在 “调试器” 窗格中找到处理程序,因此你可以设置断点: Chrome 的实现并不理想,但是您可以通过将 DOM 节点传递给 getEventListeners() 函数来查看所有事件侦听器

    71310

    玩转 Chrome DevTools,定制自己的调试工具

    之前讲过,Chrome DevTools Chrome 是分离的架构,两者之间通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,简称 CDP: 其实这不准确...那我们对接一下这个协议,返回相应格式的数据,能在 Chrome DevTools 里做显示么? 我们试一下。...我下载了 vivo 的快应用开发工具,它有编辑器、调试器、模拟器这几部分: 模拟器渲染的内容能够在调试器里调试,这也是通过 WebSocket 通信的么?...当然可以,不过这样就没必要用 CDP 了,自己创建一套协议香么? 其实 Vue DevTools React DevTools 就是自己定制的一套协议。...vue devtools 就是这样实现的: 你可以看到它的代码分包: backend 就是注入到页面的 js,frontend 部分就是 devtools page 的显示交互的实现。

    3.7K30

    用于调试分析的 5 大 Node.js 工具

    让我们看一下用于调试分析的前 5 个Node.js工具。1. Node.js内置调试器Node.js 内置调试器是Node.js本身附带的简单有效的工具。你可以使用它来检查代码、设置断点监视变量。...此时应该看到 console.log 语句的输出当前行已更新为 throw 语句。debug> nHello, world!...节点检查器Node Inspector 是一个独立的调试器,提供与 Chrome DevTools 类似的体验。...如果尚未配置运行调试(尚未创建 launch.json),Visual Studio Code 将显示“运行”启动视图。...步骤05Visual Studio Code 调试器在调试后在 .vscode 文件夹中创建 CPU 配置文件。该文件显示了应用程序的 CPU 使用情况的火焰图,以及功能及其时间。

    42910

    VS Code 调试完全攻略(5):基于浏览器的 React 应用

    这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。你将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。...它超级强大,同时又很容易,所以在调试 CRA React 程序时没有理由这样做。 ? VS Code 调试完全攻略系列目录 ?...基础知识(点击直达) 步进逐行调试(点击直达) 编辑变量并重新执行函数(点击直达) launch.json 调试控制台(点击直达) 基于浏览器的 React 应用(?...type:把调试器类型设置为 chrome,这意味着我们将在此配置中使用 Chrome 浏览器。...最后,当你停止调试会话时,VS Code 会负责关闭 Chrome。 name:你喜欢的任何名称,它将显示在调试工具栏中: ?

    2.5K20

    VsCode 各场景高级调试技巧,有用!

    步骤如下: 添加日志断点的步骤 image.png 输入要日志断点的信息,点击回车添加完成 可以使用{}使用变量,比如在此处添加日志断点,b的值为${b} image.png 日志断点添加成功后会有是一个菱形图标...为了支持调试 Ts 与正在执行的 Js 代码相结合,VS Code 依赖于调试器的source map在 Ts 源代码正在运行的 Js 之间进行映射,所以需要需要开启sourceMap选项。...借助vscode插件Debugger for Firfox在Firefox中调试 Debugger for Chrome基本一样,区别在于安装Debugger for Firfox插件,并在launch.json...补充:更进一步 VS调试React app文档[5] VS调试Next.js文档[6] 更多...[7] 其他技巧 技巧一:代码片段(snippets) 从扩展商店中安装snippets @category...在键盘输入log时效果如下 image.png 指定光标处的默认值并选中 "body": [ "console.log('${1:abc}');" ], 复制代码 image.png 指定光标处的默认值有多个

    1.2K20

    分享 10 多条超有用的 VsCode 各场景高级调试技巧

    步骤如下: 添加日志断点的步骤 image.png 输入要日志断点的信息,点击回车添加完成 可以使用{}使用变量,比如在此处添加日志断点,b的值为${b} image.png 日志断点添加成功后会有是一个菱形图标...为了支持调试 Ts 与正在执行的 Js 代码相结合,VS Code 依赖于调试器的source map在 Ts 源代码正在运行的 Js 之间进行映射,所以需要需要开启sourceMap选项。...借助vscode插件Debugger for Firfox在Firefox中调试 Debugger for Chrome基本一样,区别在于安装Debugger for Firfox插件,并在launch.json...补充:更进一步 VS调试React app文档[5] VS调试Next.js文档[6] 更多...[7] 其他技巧 技巧一:代码片段(snippets) 从扩展商店中安装snippets @category...在键盘输入log时效果如下 image.png 指定光标处的默认值并选中 "body": [ "console.log('${1:abc}');" ], 复制代码 image.png 指定光标处的默认值有多个

    1.8K40

    简化的 eggjs debug

    多年之前(大概Node.js@6.3版本之前)我们的调试方式,几乎如下三点: console.log debugger node-inspector 虽然有时console.log也会用,但是我可能会使用一些更好的日志工具...,以前的log4,现在的eggjs提供的logger,良好的日志分级,有助于提高查询问题的效率,如今,就直接使用eggjs提供的内置logger对象了。...调试几乎是每一个程序员必备的技能,而选择合适的调试就能极大的提高工作效率,由于Node.js@6.3版本之后已经内置了调试器,因此也可以Chrome DevTools结合起来使用,于是node-inspector...node --inspect app.js node --inspect-brk app.js 现在使用Chrome DevTools来调试Node.js,其实就跟之前移动端(H5)调试一样,非常简单方便...目前,Chrome市场中有一些辅助工具,能帮你捕获Node.js启动的调试进程,来快速打开Chrome DevTools,你不妨在市场中找一找,说不定会有意外的收获。

    96820

    Node.js命令介绍

    Node.js是一个基于Chrome的V8引擎的JavaScript运行环境,它允许开发者在服务器端运行JavaScript代码。...```npx create-react-app my-app```# 四:npm run命令在package.json文件中,我们可以定义一些脚本命令,然后通过npm run来执行这些命令。...同时,也可以使用第三方调试工具,如Chrome DevTools,通过特定的端口连接到Node.js进程进行调试。...使用内置调试器启动Node.js应用并等待调试器连接:```$ node --inspect-brk app.js```# 八:访问全局变量函数示例在Node.js命令行中访问__filename_..._dirname全局变量:```$ node -e "console.log(__filename); console.log(__dirname);"```这个命令将打印出当前执行脚本的文件路径所在目录的路径

    7110
    领券