首页
学习
活动
专区
工具
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开发者工具Elements(元素)断点用途

SAP Engagement Center UI这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间。 需求:需要找到哪行JavaScript代码不断刷新按钮文字。...利用Chrome开发者工具Elements标签页功能,找到该按钮HTML源代码对应标签。 [1240] 2....从代码478我们得知,UI上按钮文字能够刷新,是因为其dom元素innerHTML属性被修改缘故。...[1240] 从调用栈也能迅速找到setTimeout调用位置和调用间隔(1秒) [1240] [1240] 更多JerryChrome开发者工具使用心得,请参考Jerry公众号文章:Jerry和您聊聊...Chrome开发者工具 要获取更多Jerry原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码: [1240] [1240]

1.1K40

Chrome开发者工具Elements(元素)断点用途

https://jerry.blog.csdn.net/article/details/80070748 SAP Engagement Center UI这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间...需求:需要找到哪行JavaScript代码不断刷新按钮文字。 ? 按照经验判断,这个文字肯定是一个JavaScript function通过setTimeout每隔一秒执行。...如何快速找到这个function以及setTimeout调用位置呢? 1. 利用Chrome开发者工具Elements标签页功能,找到该按钮HTML源代码对应标签。 ? 2....一秒钟之后,断点会自动触发,停留在该元素innerHTML发生变化代码位置。从代码478我们得知,UI上按钮文字能够刷新,是因为其dom元素innerHTML属性被修改缘故。 ?...从调用栈也能迅速找到setTimeout调用位置和调用间隔(1秒) ? ? 更多JerryChrome开发者工具使用心得,请参考Jerry公众号文章:Jerry和您聊聊Chrome开发者工具

47760

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

900100

Chrome 开发者工具 workspace 概念

工作区使您能够将在 DevTools 中所做更改保存到存储在计算机上源代码。 Overview 工作区使您能够将在 Devtools 中所做更改保存到计算机上同一文件本地副本。...(3) 您已经在 Google Chrome 打开了 localhost:8080,并且您正在使用 DevTools 来更改站点 CSS。...启用工作区后,您在 DevTools 中所做 CSS 更改将保存到桌面上源代码。...只有当前被加载到 Chrome 开发者工具 web 应用对应文件夹颜色改变了: 直接在 Chrome 开发者工具里修改 index.html: 加上 from Jerry 字符串:...刷新之后,这个更改也被持久化了: 注意,如果直接在开发者工具 elements 标签页里修改 DOM,则修改不会持久化到 HTML 文件里。

1.2K10

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 格式化输出一个浮点数变量值。

96440

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 格式化输出一个浮点数变量值 %

48120

Chrome 开发者工具各种骚技巧

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

31310

关于 Chrome 开发者工具 Lighthouse 面板

Lighthouse 是一个由 Google 开发开源工具,可以帮助开发者检查网站性能、可访问性、最佳实践和搜索引擎优化等方面的问题。...在 Chrome 开发者工具,Lighthouse 面板提供了一个简单易用界面来运行 Lighthouse 检测,并且可以生成一个详细报告,指导开发者改进网站质量和性能。...使用 Chrome 开发者工具 Lighthouse 面板,您可以选择要检查指标,并运行测试。...您可以通过单击特定检测项,查看更多关于该项检测详细信息和建议。 总的来说,Lighthouse 面板是一个非常有用工具,可以帮助开发者识别和解决网站性能和质量问题,并提高用户体验。...获得更多 organic traffic 对于一个网站非常重要,因为这些流量是高质量、自然流量,能够带来更高转化率和更好用户体验。

37610

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

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

66920

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

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

32820

Chrome 开发者工具 performance 标签页用法

隐身模式可确保 Chrome 以干净状态运行。 例如,如果您安装了很多扩展,这些扩展可能会在您性能测量中产生干扰。 在您隐身窗口中加载以下页面。 这是您要分析演示。...两个版本都应该在相同时间内将每个方格移动相同空间。 在性能面板中进行录制,了解如何检测未优化版本性能瓶颈。...快捷键:Control+Shift+P 选择 show rendering: 在渲染选项卡,启用 FPS Meter。即下图这个 checkbox: 视口右上角会出现一个新叠加层。...单击它会将您跳转到源代码相关行。...引起回流: 这段代码问题在于,在每个动画帧,它会更改每个方块样式,然后查询每个方块在页面上位置。

1.4K40

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 该如何选择

55640

Chrome 开发者工具 Performances 面板里参数解读

CPU 图表颜色对应于“性能”面板底部“摘要”选项卡颜色。 如果 CPU 图表充满各种颜色,意味着 CPU 在录制过程已达到极限。...这称为 scrubbing,它对于手动分析动画进程很有用。 展开 Main 三角符号。 DevTools 向我们显示主线程上活动随时间变化火焰图。 x 轴表示随时间推移记录。...这段代码问题在于,在每个动画帧,它会更改每个方块样式,然后查询每个方块在页面上位置。 因为样式改变了,浏览器不知道每个方块位置是否改变了,所以它必须重新布局方块来计算它位置。...什么是 Web 应用开发 forced reflows?...在 Web 应用开发,Forced Reflow 是指由于对文档元素进行了计算尺寸、布局或渲染等操作,导致浏览器强制重新计算文档布局和渲染流程过程。

65530
领券