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

为什么Chrome devtool会以不同的方式显示对象属性和对象本身?

Chrome devtool会以不同的方式显示对象属性和对象本身是因为它根据对象的类型和结构来决定如何展示。具体来说,当我们在devtool中查看一个对象时,它会根据对象的类型选择合适的显示方式。

对于基本数据类型(如字符串、数字、布尔值等),devtool会直接显示其值。

对于复杂对象(如数组、对象字面量等),devtool会以树状结构展示对象的属性和值。我们可以展开或折叠这些属性,以便查看对象的结构。

对于函数,devtool会显示函数的源代码。

对于DOM元素,devtool会以HTML标签的形式展示。

此外,devtool还提供了其他一些功能,如在控制台中打印对象时,会以可交互的方式展示对象的属性和值;在Network面板中,可以查看请求和响应的详细信息。

总之,Chrome devtool以不同的方式显示对象属性和对象本身,是为了方便开发者查看和调试代码,提高开发效率。

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

相关·内容

前端开发:这10个Chrome扩展你不得不知

这个工具在识别显示元素CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上查看它所有CSS属性。您可以通过快捷键在CSSViewer窗体中轻松复制您选定元素样式。...也许您感到奇怪,Chrome本身开发者工具不是已经足够了吗,为什么我还要用它? 其实这个插件比我们浏览器中开发者工具显示信息更多也更先进。...您可以检查React组件属性状态,随意更改属性状态,并查看所作变化在组件树中传递过程。 4. JSONView ? 浏览器通常不太擅长显示JSON数据。...数据通常以纯黑白方式密集显示,这使得理解它非常困难,特别是您试图定位一个深度嵌套属性时。 JSONView格式化和美化JSON数据。...它以丰富着色树状视图显示它们,使得标识属性值变得更加容易。 5. Library Sniffer 我通常很想知道网页是基于什么框架构建,或这个站点引用了什么库。

2.4K10

「不容错过」Chrome DevTools 七大新功能

下面我们就一起来个看看每个功能细节吧。 正文 1. 支援css-in-js框架样式编辑 看到这个功能时候, 你可能会好奇, Chrome Devtool 不是早就可以编辑css了吗?...没错,但是原本支持是「 普通css 」, 不是 「css-in-js」. ? 现在,“样式”窗格对编辑使用CSS对象模型(CSSOM)API创建样式提供了更好支持 。...模拟时区功能 Chrome Devtool 能帮你模拟时区, 有了这个功能, 你就能很方便测试国际化相关一些功能。 比如: 在马来西亚时间显示为: ?...打开devtool, 刷新网页,如果有警告信息的话, 显示一条View issues 链接, 如图: ?...你甚至可以下载视频,更方便去排查问题: ? 6. 一件修复文字色彩对比 devtool 根据你背景与字体颜色,自动提供文字色彩对比建议, 比如: ?

93310

【10月精彩回顾】Github 支持脚注,Chrome插件开发全攻略

requestIdleCallback 不同, 它是检测用户是否空闲,即是否有交互动作,比如鼠标,键盘等。而 requestIdleCallback 是检测浏览器本身是否空闲。...这篇文章对这些常见扩展开发问题进行了讲述,并有大量代码图片,使得内容通俗易懂。 比如如果在 devtool 新建一个 panel?...代码演示: // 创建自定义面板,同一个插件可以创建多个自定义面板 // 几个参数依次为:panel标题、图标(其实设置了也没地方显示)、要加载页面、加载成功后回调 chrome.devtools.panels.create...; // 直接设置显示某个对象 }); 图片演示: 文章很长,有几万字,大家可以根据自己需要挑重点看。...我其实刚刚在用新语言时候脑子也潜意识有这种疑问,今天介绍网站就整理了「很多常见操作不同语言对比实现」 仍然 C++ reverse 为例: 你可以点击上面的编程语言查看其他语言 reverse

56540

Node.js内存泄漏原因竟然是……?

二、为什么内存泄露 (一)C语言中内存管理(手动管理) 在C语言中,我们如果需要使用一个变量来存储某些值,需要开发者先手动调用malloc函数,向系统申请一块内存,然后才能将相关信息保存到这块内存中...,其中对象引用关系,如图中所示(简化版,去掉了各种内置对象): 支配树中每个节点都有一个Retained Size属性,表示该节点所支配内存大小,节点自身Retained Size=所有子节点...虽然找到了可疑支配链,但是支配链下对象却是些业务代码无关内置对象。 看到这里时,已经有点怀疑是否是Node.js本身存在Bug。...9229端口启动一个websocket server,Chrome DevTool连接该端口后,可以对Node.js程序进行Debug。...Chrome DevTool功能齐全,缺点是线上机房网络与本地开发网络不通,使用不便,通常只在DevCloud开发机中使用。

1.7K20

如何排查网页在哪里发生了内存泄漏?

今天我们来学习用 devtool Performance Memory 工具来找出网页哪里发生了内存泄漏。...查看内存指标 看看内存使用情况。有这么几步: 选中要分析范围; 选中 Main(主线程)。只有选中的话,内存图表才能显示主线程对应信息; 查看内存图表指标。...将光标悬停在折线图上,可以看到对应值: 查看内存下限变化 内存增长是正常现象。比如我们调用函数,创建一些临时变量,导致内存升高。...说真的闭包是一个正常特性,没理由内存泄漏有关才是。 函数 B 被持有不销毁,自然它捕获函数 A 中变量就不能销毁,对象里有一些属性,这些属性不能销毁没啥区别。...排查方法很简单,去看 DevTool 控制台输出了什么内容,看看有没有大对象。 一些有助于 debug console 是有必要,但不要滥用。

3.8K22

前端工程化之概念介绍

为 CRA 创建自定义模板 作为一个最简化 CRA 模板,模板中包含如下必要文件 README.md:用于在 npm 仓库中显示「模板说明」 package.json:用于描述模板本身「元信息」,...有了完整映射表,就可以通过 Chrome 控制台中"Enable Javascript source map"来实现调试时显示与定位源代码功能。...❝一般我们会在「转换后代码中」通过「添加一行注释」方式来去「引入 Source Map 文件」 ❞ 对于同一个源文件,根据不同目标,可以生成不同效果 Source Map。...在开发环境中,要求构建速度快/质量高/便于提升开发效率,而不关注生成文件大小访问方式 在生产环境中,需要考虑是否需要提供线上Source Map/生成文件大小/访问方式是否会对页面性能造成影响,最后才考虑质量构建速度...,调试时只能定位到指定代码所在行而定位不到所在列 ---- 不同预设效果总结 分别从「质量」/「构建速度」/「包大小生成方式」三个角度来分析 质量 生成 source map 质量分为 「

74310

Chrome DevTools中这些骚操作,你都知道吗?

有点幻灯片感觉。 ? 单击每一帧截图,显示就是对应时刻发生网络请求。这种可视化展现形式让你更加清楚每一时刻发生网络请求情况。 动画检查 ?...默认情况下,DevTools “监听”动画。一旦触发,它们将被添加到列表中。你能看到这些动画块如何显示。...在动画本身上,DevTools 向我们展示哪些属性正在更改,例如 background-color 或 transform。 然后,我们可以通过使用鼠标拖动或调整时间轴来修改该动画。...,每次打开 Devtools 都能获取到这些代码片段,而不用再去google,正好Chrome Devtool 就提供了这种功能。...❝你可能会说Object.keys()Object.values()也可以实现啊,但这个不是更简单点吗 ? ❞ table ? Devtools提供用于将对象数组记录为表格API: ?

1.5K20

前端性能优化--性能分析工具

Lighthouse 会在一系列测试下运行网页,比如不同尺寸设备不同网络速度。...这里我们简单说一下使用步骤:在隐身模式下打开 Chrome。隐身模式可确保 Chrome 干净状态运行,例如浏览器扩展可能会在性能评估中产生影响。...启用 JS 分析器后,火焰图显示调用每个 JavaScript 函数,可用于分析具体函数查看 Buttom-up:此视图可以看到某些函数对性能影响最大,并能够检查这些函数调用路径具体要怎么定位某些性能瓶颈...我们使用 DevTools 时候,浏览器内核 Chromium 本身作为一个服务端,我们看到浏览器调试工具界面,通过 Websocket Chromium 进行通信。...Runtime域通过远程评估镜像对象暴露 JavaScript 运行时。

1.6K33

【ChromeDevTool】Performace简单使用

说到Chrome DevTool,你是不是和我一样,经常在Element,Console,NetWrok...里梭哈 再梭哈 为什么要使用Performance Performance 作为Web性能监控工具...这也是Performance要做。 接下来,我们一个动画为例子,讲解为什么css3中加了transform等属性,能提升动画渲染性能。.../ 60fps),当浏览器对DOMCSS属性进行计算时,如果扫描到该DOM节点Style上包含transform等样式属性,会将这个DOM提出来,作为合成层。...( 所谓:合成层是指: 某些特殊渲染层会被认为是合成层(Compositing Layers),合成层拥有单独 GraphicsLayer,而其他不是合成层渲染层,则其第一个拥有 GraphicsLayer...与Chrome DevTool 相关文章: ChromeDevTool高级调式 https://www.jianshu.com/p/ed219471b393?

19920

Sourcemap入门

第1步:打包,webpack 打包构建时候将打包过程、压缩方式特定形式记录存储起来,并保存为 xxx.js.map 文件。...第3步:解析,当打开 chrome 控制台时候,如果发现 js 文件最后一行有上面这个 sourceMappingURL,chrome 浏览器 自动加载 此文件并自动解析。...整个 sourcemap 解析还原过程 chrome 都帮忙做了,我们需要做就一件事,就是在 js 文件最后一行 或者 手动添加方式加上 sourcemap 路径即可。...devtool 设置值有很25+种,不同明显影响到构建(build)重新构建(rebuild)速度。 当然,我们不用刻意去记忆,它命名是有规律,其具体规则顺序如下。...本身不建议部署到应用服务器上,因为这会让一些坏人更容易获取、解析调试到应用源码,造成未知风险 sourcemap 文件本地访问方法 可以配置比如 127.0.0.1:80 这一类本地请求地址,然后在本地启动一个静态服务

1.9K21

前端性能分析工具利器

这里我们简单说一下使用步骤: 在隐身模式下打开 Chrome。隐身模式可确保 Chrome 干净状态运行,例如浏览器扩展可能会在性能评估中产生影响。...启用 JS 分析器后,火焰图显示调用每个 JavaScript 函数,可用于分析具体函数 查看 Buttom-up:此视图可以看到某些函数对性能影响最大,并能够检查这些函数调用路径 具体要怎么定位某些性能瓶颈...我们使用 DevTools 时候,浏览器内核 Chromium 本身作为一个服务端,我们看到浏览器调试工具界面,通过 Websocket Chromium 进行通信。...Runtime域通过远程评估镜像对象暴露 JavaScript 运行时。...参考 你一定要知道 Chrome DevTool 新功能 前端性能分析利器-Chrome 性能分析&性能监视器 蚂蚁金服如何把前端性能监控做到极致chrome devtools protocol——Web

2.9K62

Webpack 模块化原理SourceMap

; devtool:'source-map' 第二步:在转换后代码,最后添加一个注释,它指向sourcemap; //# sourceMappingURL=common.bundle.js.map 浏览器根据我们注释...在Chrome中,我们可以按照如下方式打开source-map: √Enable JavaScript source maps √Enable CSS source maps 最初source-map...version:当前使用版本,也就是最新第三版; sources:从哪些文件转换过来source-map打包代码(最初始文件); names:转换前变量属性名称(因为目前使用是development...选择不同值,生成source-map稍微有差异,打包过程也会有性能差异,可以根据不同情况进行 选择; 下面几个值不会生成source-map false:不使用source-map,也就是没有任何...DataUrl形式添加到打包后JS文件后面(注释) cheap-source-map: 会生成source-map,但是更加高效一些(cheap低开销),因为它没有生成列映射(Column Mapping

51130

source map 你知道多少?-- 调试、原理、渗透、还原源码

压缩 css javascript 代码,是一种简单且见效明显提高 web 性能方式。但是,当需要调试这些压缩文件中代码时变成了“噩梦”。...source map 是解决该问题方式之一,其提供了一种将压缩文件中代码映射回源文件中原始位置方法。...Chrome Firefox 开发人员工具都附带了对 source map 内置支持,这意味着,即使在压缩后,也可以轻松地调试应用程序。...在常规选项卡开启 Enable JavaScript source maps Enable CSS source maps。 source map 是如何工作 为每个压缩文件指定不同源映射。...X-SourceMap: /path/to/script.js.map source map 格式 包含一个 JSON 对象,其中包含有关 source map 本身原始 JavaScript 文件信息

2.6K20

在新窗口中打开页面?小心有坑!

为什么呢?这个锅是一个叫opener全局对象锅。...如果父页面新开窗口中页面是不同域名,浏览器禁止新窗口访问opener中内容。...如果再搞得狠一些,父窗口中页面交互可以寸步难行。 为什么新窗口中页面会影响父页面的线程呢?chrome不是每个标签页一个单独进程?然后进程内包含若干线程吗?...确实,chrome不同标签页面使用不同进程线程,但是有个例外,通过a标签target="_blank"属性,或者window.open(url)在新窗口中打开页面, 会与父窗口共用进程线程。...这个算是chrome一个小缺陷(firefox也有,ie没有),不过chrome目前正在跟进优化这里,详情可参考这里。 4.

5.2K21

在新窗口中打开页面?小心有坑!

为什么呢?这个锅是一个叫opener全局对象锅。...如果父页面新开窗口中页面是不同域名,浏览器禁止新窗口访问opener中内容。...如果再搞得狠一些,父窗口中页面交互可以寸步难行。 为什么新窗口中页面会影响父页面的线程呢?chrome不是每个标签页一个单独进程?然后进程内包含若干线程吗?...确实,chrome不同标签页面使用不同进程线程,但是有个例外,通过a标签target="_blank"属性,或者window.open(url)在新窗口中打开页面, 会与父窗口共用进程线程。...这个算是chrome一个小缺陷(firefox也有,ie没有),不过chrome目前正在跟进优化这里,详情可参考这里。 4.

3.9K10

身为前端开发者,你不能不知道 Runtime Performance Debug 技巧

Chrome Devtool Performance Tab 基本介绍 有使用过 Chrome Devtool Performance Tab 读者可能曾经也和我一样被丰富图表与複杂资讯给吓到了...左上角会有两个按钮(红色框框区块),点选第一个即开始纪录,这时候你可以开始操作网页,Devtool 纪录操作网页时 CPU、记忆体、Frame Rate 等使用量与指标,这种方式适合监测页面上某些特定行为与功能...滑鼠在 FPS、CPU、NET 上 hover 都可以看到 profiling 过程完整 Screenshot,这种技术也叫做 scrubbing,可以让我们渐进式方式追踪页面动画。...Network 按照顺序显示抓取各个资源花费时间资源间依赖关係,如果点击任一资源可以在下方 summary tab 看到更详细资料,例如 URL、Duration、Priority、Mime...但我们应该有更好方式可以达成一样动画效果,于是我试著将 code 改成以下这样: 并且使用 will-change CSS 属性在 transform 上: 接著我们直接对新版网站进行 Performance

38610

前端学习资料整理

(2)、标准模式排版 JS运作模式都是以该浏览器支持最高标准运行。在兼容模式中,页面宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 HTML5 为什么只需要写 <!...不同类型 Box,参与不同 Formatting Context(决定如何渲染文档容器),因此Box内元素不同方式渲染,也就是说BFC内部元素外部元素不会互相影响。...文档中link对象一个数组,按照它们出现在文档中顺序排列(该属性本身也是一个对象)   location 当前显示文档URL。...属性    defaultStatus 缺省状态条消息   document 当前显示文档(该属性本身也是一个对象)   frame 窗口里一个框架((FRAME>)(该属性本身也是一个对象)   ...  location 窗口所显示文档完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档URL。

3.4K20
领券