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

Chrome开发者工具中的奇怪的console.log行为

是指在使用console.log()方法打印日志时,有时会出现一些奇怪的行为或现象。

这种奇怪的行为可能包括以下几个方面:

  1. 异步输出:在某些情况下,console.log()方法的输出可能会在预期之外地异步发生。这意味着在代码中按顺序调用console.log()方法时,输出的顺序可能与调用顺序不一致。这是因为console.log()方法的底层实现可能会将日志消息放入一个队列中,然后在适当的时机才将其输出到控制台。
  2. 对象引用:当使用console.log()方法打印对象时,控制台中显示的对象内容可能会随着时间的推移而改变。这是因为console.log()方法在打印对象时,实际上打印的是对象的引用,而不是对象的快照。如果在控制台中展开对象时,对象的属性值已经发生了变化,那么控制台中显示的内容也会相应地更新。
  3. 对象引用循环:如果打印的对象存在循环引用,即对象A引用了对象B,而对象B又引用了对象A,那么console.log()方法可能会陷入无限循环中,导致控制台卡死或崩溃。为了避免这种情况,开发者可以使用console.dir()方法代替console.log()方法来打印对象,console.dir()方法会以树状结构展示对象的属性,而不会陷入循环。
  4. 控制台样式:console.log()方法支持在输出文本中应用CSS样式,以便开发者可以更好地区分不同类型的日志消息。然而,某些浏览器可能对console.log()方法中的CSS样式支持不完整,导致样式无法正确应用或显示。

总结起来,Chrome开发者工具中的console.log行为可能会出现异步输出、对象引用、对象引用循环和控制台样式方面的奇怪行为。开发者在使用console.log()方法时,需要注意这些行为,并根据具体情况选择适当的方法来打印日志。

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

相关·内容

delete奇怪行为

delete奇怪行为分为2部分: // 1.delete用defineProperty定义属性报错 // Uncaught TypeError: Cannot delete property 'value...但规则是这样,所以奇怪行为1是合理 占位初始值 猜测如果属性已经存在了,defineProperty()会收敛一些,考虑一下原descriptor感受: var obj = {}; obj.value...(_des); console.log(des); 结果如下: // _des { configurable: true, enumerable: true, value: null,...注意:变量对象和活动对象都是抽象内部机制,用来维护变量作用域,隔离环境等等,无法直接访问,即便Global环境变量对象看起来好像就是global,这个global也不全是内部变量对象(只是属性访问上有交集...) P.S.变量对象与活动对象这种“玄幻”东西没必要太较真,各是什么有什么关系都不重要,理解其作用就好 eval环境特殊性 eval执行环境声明属性和函数将作为调用环境(也就是上一层执行环境)变量对象属性存在

2.3K30

CHROME开发者工具小技巧

Chrome开发者工具是个很强大东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充交流...1.代码格式化 有很多css/js代码都会被 minify 掉,你可以点击代码窗口左下角那个 { } 标签,chrome会帮你给格式化掉。 ?...下面这个抓屏还演示了一个如何清空console示例。你可以输入 clear() 或是 按 Ctrl+L(Windows下),CMD + K (Mac下) ?...5.网络限速 你可以设置你网络访问速度来模拟一个网络很慢情况。 ?...给XHR和Event Lisener设置断点 在 Sources 面页,你可以看到右边那堆break points,除了上面我们说给DOM设置断点,你还可以给XHR和Event Listener

921100

Chrome开发者工具小技巧

Chrome开发者工具是个很强大东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充交流...动画   现在网页上都会有一些动画效果。在Chrome开发者工具,通过右上角菜单 More Tools => Animations 呼出相关选项卡。...关于Console技巧 DOM操作 chrome会帮你buffer 5个你查看过DOM对象,你可以直接在Console中用 $0, $1, $2, $3, $4来访问。...另外一个鲜为人知功能是,console.log,你还可以对输出文本加上css样式,如下所示: console.log("%c左耳朵", "font-size:90px;color:#888")...关于console.log格式化,你可以参看如下表格: 指示符 输出 %s 格式化输出一个字符串变量。 %i or %d 格式化输出一个整型变量值。 %f 格式化输出一个浮点数变量值。

97940

Chrome 开发者工具小技巧

来源:陈皓 - 酷壳 CoolShell ;链接:https://coolshell.cn/articles/17634.html Chrome开发者工具是个很强大东西,相信程序员们都不会陌生...强制DOM状态 动画 现在网页上都会有一些动画效果。在Chrome开发者工具,通过右上角菜单 More Tools => Animations 呼出相关选项卡。...给XHR和Event Lisener设置断点 关于Console技巧 DOM操作 chrome会帮你buffer 5个你查看过DOM对象,你可以直接在Console中用 ? 1, ?...另外一个鲜为人知功能是,console.log,你还可以对输出文本加上css样式,如下所示: console.log("%c左耳朵", "font-size:90px;color:#888");...log函数 关于console.log格式化,你可以参看如下表格: 指示符 输出 %s 格式化输出一个字符串变量 %i or %d 格式化输出一个整型变量值 %f 格式化输出一个浮点数变量值 %

49320

深入探索Chrome开发者工具开发者利器

前言作为一名测试,我们经常需要对web页面进行测试,很多时候我们都需要借助Chrome开发者工具Chrome DevTools)来进行测试,无论是前端开发还是调试问题,都是必不可少利器。...本文就来给大家介绍一下Chrome开发者使用。什么是Chrome开发者工具Chrome开发者工具(DevTools)是Google Chrome浏览器内置一套网页开发和调试工具。...它为开发者提供了强大功能,可以帮助你高效地进行网页开发和调试。DevTools包含了元素检查、网络请求分析、性能监控、JavaScript调试等多种功能。如何打开Chrome开发者工具?...菜单:点击Chrome浏览器右上角菜单按钮(三个竖点),选择“更多工具” -> “开发者工具”。右键菜单:在网页上右键点击,选择“检查”。...屏幕模拟(Device Mode)设备模式允许你模拟不同设备屏幕尺寸和分辨率,这对于响应式设计和移动端调试非常重要。总结Chrome开发者工具是每个网页开发者必备工具

8110

Chrome 开发者工具各种骚技巧

最近大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。这个网站是:umaar.com/dev-tips/,本文分享一些实用且聪明调试技巧。 1、曾经,在线调伪类样式困扰过你? ?...6、你是不是经常想不起来,在哪绑定事件? ? 7、你是不是打断点时还要去改代码? ? 8、看dom层级最直观方式? ? 9、查一些特定请求,过滤器用过吗? ?...11、想知道,某图片加载代码在哪?Initiator!! ? ? ? 12、不想加载某个文件了? ? ? 多就不列举了,可以看看开头网站。...看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。...开发者工具功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看: 中文版:https://www.html.cn/doc/chrome-devtools/

31810

分享几个 Chrome 开发者工具 小技巧

在《论语》,孔子提倡“学而不思则罔,思而不学则殆”学习方法。我们再往深层面挖掘,“思”究竟是在思考什么?个人理解是思考并总结出一些共性东西,即“套路”。有套路了,我们学习或工作会更加有效率。...在某个网站上,分析页面以及抓取数据,我用得最多工具Chrome 开发者工具。...Chrome 开发者工具是一套内置于 Google Chrome Web 开发和调试工具,可用来对网站进行迭代、调试和分析。...接下来,我们来看看 Chrome 开发者工具一些比较牛逼功能。...例如我想要抓取我知乎主页动态标题,在网页页面所在处上右击鼠标,选择“检查”,可进入 Chrome 开发者工具元素面板。 ?

68420

必须掌握 | chrome开发者工具骚技巧

文章编辑自:Java专栏 对于每个前端从业者来说,除了F5键之外,用最多另外一个键就是F12了。最近大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。...6、你是不是经常想不起来,在哪绑定事件? ? 7、你是不是打断点时还要去改代码? ? 8、看dom层级最直观方式? ? 9、查一些特定请求,过滤器用过吗? ?...11、想知道,某图片加载代码在哪?Initiator!! ? ? ? 12、不想加载某个文件了? ? ? 多就不列举了,可以看看开头网站。...看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。...开发者工具功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看: 中文版:https://www.html.cn/doc/chrome-devtools/

34420

chrome 开发者工具 11 个骚技巧

对于每个前端从业者来说,除了 F5 键之外,用最多另外一个键就是 F12 了。 这里介绍 11 个 chrome 开发者工具骚技巧。 助你快速定位问题,天天六点下班。...6.你是不是经常想不起来,在哪绑定事件? ? 7.你是不是打断点时还要去改代码? ? 8.看 dom 层级最直观方式? ? 9.查一些特定请求,过滤器用过吗? ?...Vue 相关文章输出计划 最近总有朋友问我 Vue 相关问题,因此接下来我会输出 10 篇 Vue 相关文章,希望对大家有一定帮助。我会保持在 7 到 10 天更新一篇。...Vuex 注入 Vue 生命周期过程(完成) 学习 Vue 源码必要知识储备(完成) 浅析 Vue 响应式原理(完成) 新老 VNode 进行 patch 过程 如何开发功能组件并上传 npm 从这几个方面优化你...Vue 项目 从 Vue-Router 设计讲前端路由发展 在项目中如何正确使用 Webpack Vue 服务端渲染 Axios 与 Fetch 该如何选择

56140

Chrome开发者工具小技巧,你应该了解

作者:酷 壳 – CoolShell 链接: https://coolshell.cn/articles/17634.html Chrome开发者工具是个很强大东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知...动画 现在网页上都会有一些动画效果。在Chrome开发者工具,通过右上角菜单 More Tools => Animations 呼出相关选项卡。...关于Console技巧 DOM操作 chrome会帮你buffer 5个你查看过DOM对象,你可以直接在Console中用 $0, $1, $2, $3, $4来访问。...另外一个鲜为人知功能是,console.log,你还可以对输出文本加上css样式,如下所示: console.log("%c左耳朵", "font-size:90px;color:#888")...关于console.log格式化,你可以参看如下表格: 指示符 输出 %s 格式化输出一个字符串变量。 %i or %d 格式化输出一个整型变量值。 %f 格式化输出一个浮点数变量值。

56650

Chrome开发者工具11个高级使用技巧

作者 | bitfish 译者 | 王坤祥 策划 | 蔡芳芳 本文作者从开发者角度出发,介绍了几个关于 Chrome 开发者工具高级用法。熟练使用这些高级用法可以大大地提高你生产力。...图片来源 Morning BrewonUnsplash 好了,现在由于某种原因,你最终选择了 Chrome 浏览器作为开发及调试环境。接下来,打开开发者工具并开始调试代码。 ?...很多时候你可以打开“控制台”面板来检查程序输出,或者打开“元素”面板来检查 DOM 元素 CSS 代码。 ? 但是你真的了解 Chrome 开发者工具吗?...在 Chrome 开发者工具,我们可以使用“网络”面板下Capture Screenshots功能来捕获页面加载时屏幕截图。 ? 单击每个屏幕截图可以显示相应的当前时间网络请求状态。...以上就是我想要介绍 Chrome 开发者工具高级用法,希望可以帮助到你。 作者介绍 bitfish,Medium 平台社区编辑,爱好阅读、写作和编程。

2.2K60

如何使用Chrome开发者工具检查网页故障

假设你登录以下网址时遇到故障无法登录: https://demo.xswitch.cn/admin.html 用Chrome浏览器(微软Edge浏览器也类似)打开上述网址,按F12键,或右键点击网页,然后选择...【审查元素】菜单,将会出现类似下面的图,下面就是Chrome开发者工具区域。...我界面是英文,因此我尝试中英文都进行说明。 切换到【网络】(Network)选项卡,如果能看到很多网址,则最好点一下左起第二个图标(箭头指向)清除一下,这样看着比较清爽。...上图中403就是密码不对。...本文主要是以排查XSwitch登录问题为例讲解Chrome Devtools使用方法,步骤和思路适用于任何跟浏览器相关问题。

1.6K20

开发奇怪问题

不修改代码前好好,刚加了些代码运行就不可以了,然后注释重新编译还是不行。 你可能不小心改到其他东西了,建议使用ctrl + z恢复或回滚版本。...---- 程序以前还可以运行,代码也没修改,今天就运行不了,非常诡异。 程序可能有耦合与程序相关操作,比如网络连接,数据库,串口等设备。建议打断点调试看看卡在哪里运行不了。...---- debug版本可以运行,release版本不可以运行,这也太奇怪了吧。 大多是程序导致,可以尝试进行一下操作: 1. 尝试健壮代码,比如避免悬空指针,变量初始化,枚举给初始值等。...找适合依赖库,比如windows下debug版本第三方库可能与release版本第三方依赖库不一样。 3. 使用打印或调试找出不能运行地方。

1.4K10

Chrome开发者工具一些标签页功能

以下是Chrome开发者工具一些标签页功能,大家可以先粗略了解一下,尤其是Element标签我们会经常用到哦。...Device Mode 你可以用来检查网页是否是响应式,是否兼容其他不同分辨率手机 Element 标签页 用于查看和编辑当前页面 HTML 和 CSS 元素; Network 标签页 用于查看...HTTP 请求详细信息,如请求头、响应头及返回内容等 Source 标签页 用于查看和调试当前页面所加载脚本源文件 TimeLine 标签页 用于查看脚本执行时间、页面元素渲染时间等信息 Profiles...Console 标签页 用于显示脚本中所输出调试信息,或运行测试脚本等。...开发者工具基础:安装成功Chrome浏览器之后,使用Chrome打开一个网页,然后知道如何打开开发者工具;点击Chrome浏览器工具各个标签,粗略了解每个标签页作用。 ?

45020

taskscheduler java_java – taskScheduler池奇怪行为「建议收藏」

我有两个弹簧启动应用程序(1.4.3.RELEASE),它们位于同一台服务器上.应用程序A是一个单一应用程序,其中包含用于处理警报部分代码,而应用程序B是一个仅处理警报新专用应用程序.这里目标是打破小应用程序...threadPoolTaskScheduler.setWaitForTasksToCompleteOnShutdown(true); threadPoolTaskScheduler.setPoolSize(100); return threadPoolTaskScheduler; } } 昨天,我经历了一个奇怪行为...已检测到警报并将其发送到新应用B – >好 >应用程序B收到警报并开始根据taskScheduler处理它 – >好 >第一步已由应用程序B处理 – >好 >第二步已由应用程序A处理 – > NOK,奇怪行为...UPDATE 我有一个发出警报真实盒子.这些警报必须由新应用程序处理.但我还有旧盒子没有迁移到新系统.所以我在两个不同项目中有处理代码....我有一个新代码新框,它在新系统上创建了一个警报.此警报生成一个状态机,该状态机与任务调度程序异步处理.创建警报后,新应用程序开始处理状态机,并在处理过程唤醒旧应用程序并处理警报步骤.之后,新应用程序再次唤醒并正常关闭警报

1.7K10
领券