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

在Chrome控制台中输入的值下面显示了哪些字符?

在Chrome控制台中输入的值下面显示了以下字符:

  1. 结果值:输入的值的计算结果或返回值将显示在控制台中。
  2. 对象:如果输入的值是一个对象,控制台将显示该对象的属性和方法。
  3. 数组:如果输入的值是一个数组,控制台将显示数组的元素。
  4. 字符串:如果输入的值是一个字符串,控制台将显示该字符串。
  5. 布尔值:如果输入的值是一个布尔值,控制台将显示该布尔值。
  6. 数字:如果输入的值是一个数字,控制台将显示该数字。
  7. 函数:如果输入的值是一个函数,控制台将显示该函数的定义。
  8. 错误信息:如果输入的值包含错误,控制台将显示错误信息。
  9. 其他类型:如果输入的值是其他类型的数据,控制台将根据该类型显示相应的信息。

需要注意的是,控制台中显示的字符可能因输入的值的类型和内容而有所不同。

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

相关·内容

前端调试必备:CHROME CONSOLE控制使用:诊断并记录

在你JavaScript中执行这行代码(注意在console下面写这段代码时候,换行是shift+Enter) 那么,控制台就会输出以下信息: 自动完成命令 当您键入控制台时,控制台会自动显示一个与您输入文本相匹配相关方法自动完成下拉菜单...console.group()命令使用一个字符串参数来设置组名称。 JavaScript中调用它之后,控制台将开始将所有后续输出组合在一起。...一个简单Assertions和它如何显示 只有当属于list元素子节点数大于500时,以下代码才会在控制台中导致错误消息。...如何在控制台中显示断言失败: 字符串替换和格式 传递给任何日志记录方法第一个参数可能包含一个或多个格式说明符。格式说明符由一个%符号和一个字母组成,该字母指示适用于该格式。...代码: 输出如下: 使用CSS设计控制台输出 CSS格式说明符允许您自定义控制台中显示。用说明符%c开始字符串,并给出你希望应用样式作为第二个参数,就是说第二个样式为CSS样式。

2.4K100

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

控制台中引用上一次执行结果 我们常常需要在控制台中调试代码。比如你想知道如何在 JavaScript 中反转字符串,然后你在网络上搜索相关信息并找到以下代可行代码。...实际上,控制台中,我们可以使用魔术变量$_引用上一次操作结果。 ? $_是一个特殊变量,它始终等于控制台中上一次操作执行结果。它可以让你更加优雅地调试代码。 ? 3.... Chrome 开发者工具中,我们可以使用“网络”面板下Capture Screenshots功能来捕获页面加载时屏幕截图。 ? 单击每个屏幕截图可以显示相应的当前时间网络请求状态。...这样数组控制台中不容易查看阅读。如果数组更长,元素内容很复杂,那么该数据将变得更加难以理解。 幸运是,Chrome 提供表格展示功能,可以将数组对象进行列表展示,方便理解。 ?...控制台中引用当前选定 DOM 元素 $0是另一个魔术变量,它会引用“元素”面板中当前选定 DOM 元素。 ? 10.

2.2K60

如何优雅使用 JavaScript 控制

1Console 对象 console对象赋予你访问浏览器控制权限。它允许输出字符串,数组和对象,这对调试代码很有帮助。...有四种不同方式可用于控制台中输出信息: log info warn error 这四种工作方式是一样。你所要做只是选定方法上传递一个或多个参数。...不过, Chrome 中warn有一个黄色背景。 这些视觉上区别能让你快速区分控制台上错误信息或者警告信息。你要确保它们准生产环境中会被移除,除非你想警告那些在你代码下出错开发者。...只有断言是假,第二个参数才会在控制台中输出。正如刚才所提到,它输出一个错误级别的日志,给出了红色错误信息和堆栈跟踪。 Dir() dir方法显示一个所传对象可交互列表。...console.table(['Javascript', 'PHP', 'Perl', 'C++']); 输出一个数组 数组索引或者对象属性名显示左侧一列,对应显示右侧一列。

1.1K20

分享一些Chrome开发工具用法

控制台中直接访问页面元素 元素面板选择一个元素,然后控制输入$0,就会在控制台中得到刚才选中元素。如果页面中已经包含了 jQuery,你也可以使用$($0)来进行选择。...清空控制台历史记录 可以通过下面的方式清空控制台历史: 控制台右键,或者按下 Ctrl 并单击鼠标,选择 Clear Console。 脚本窗口输入 clear()执行。...截图 我们经常需要截图,Chrome DevTools 提供 4 种截图方式,基本覆盖了我们需求场景,快捷键 ctrl+shift+p ,打开 Command Menu,输入 screenshot,...重写 Overrides Chrome DevTools 上调试 css 或 JavaScript 时,修改属性重新刷新页面时,所有的修改都会被重置。...实时表达式 Live Expression 从 chrome70 起,我们可以控制台上方可以放一个动态表达式,用于实时监控它。Live Expression 执行频率是 250 毫秒。

97720

如何使用谷歌浏览器 Chrome 更好地调试

monitor(function) - 监控一个函数 Chrome 中提供一些控制台实用程序 API,它们为常见调试任务提供方便功能。...想象一下,你正试图在你 chrome 控制台中预览或读取此返回数据,以找出在你应用程序中不起作用内容。该console.log()函数通常将其显示为难以阅读或分类文本输出。...Chrome 允许你直接从控制台执行此操作,而无需使用 debug() 函数访问你源代码。只需控制台中调用它并将函数名称传递给它,它就会自动将调试器注入到函数中,让你可以单步调试代码。...代码片段 调试时,你可能经常需要一遍又一遍地执行同一行代码,直到你完成故障排除。但是,这会导致你进行大量重复输入或不断地从你最喜欢代码编辑器复制并粘贴到你 Chrome 浏览器控制台。...尽管如此,这只是 Google Chrome DevTools 中提供众多功能一小部分。你还使用哪些其他工具和技巧?可以在下面的评论区告诉我。

3.5K30

分享一些实用Chrome DevTools技巧

Chrome 开发工具提供一套非常出色工具来帮助我们 Web 平台上开发。...控制台中引用当前选定元素 “Elements”面板中选择一个节点,然后控制输入 $0 就可以引用它。 ?...提示:如果您使用jQuery,则可以输入$($0)以访问此元素上jQuery API。 使用控制台中操作最后一个 使用 $_ 引用在控制台执行前一操作返回 ?...您可以在其中键入任何字符串以匹配源代码,或者也可以使用 CSS 选择器让 Chrome 为您生成一个图像: ?...清除控制台 您可以使用控制台左上角清除按钮或按 ctrl+l 或清除控制台 cmd+k 。 “来源”面板中: cmd+o(Windows中是 ctrl+o)显示页面加载所有文件。

1.4K00

Chrome控制台console基本用法

来清空,当然也可以通过控制输入console.clear()来实现清空控制台信息。...下面我们用console.log来替换,感受一下它魅力。 看了上面这张图,是不是认识到log强大之处了,下面我们来看看console里面具体提供哪些方法可以供我们平时调试时使用。...比如用上键就相当于使用上次控制输入符号 2、$_命令返回最近一次表达式执行结果,功能跟按向上方向键再回车是一样 上面的$_需要领悟其奥义才能使用得当,而0 4则代表最近5个你选择过DOM...3、Chrome 控制台中原生支持类jQuery选择器,也就是说你可以用$加上熟悉css选择器来选择DOM节点 4、copy通过此命令可以将在控制台获取到内容复制到剪贴板 (哈哈 刚刚从控制台复制...console.log 改变输出文字样式 2、利用控制台输出图片 3、指定输出文字样式  最后说一下chrome控制台一个简单操作,如何查看页面元素,看下图就知道控制台简单操作一遍就知道

1.7K120

Chrome控制台console基本用法

下面我们用console.log来替换,感受一下它魅力。 ? 看了上面这张图,是不是认识到log强大之处了,下面我们来看看console里面具体提供哪些方法可以供我们平时调试时使用。...比如用上键就相当于使用上次控制输入符号 2、$_命令返回最近一次表达式执行结果,功能跟按向上方向键再回车是一样 ?...3、Chrome 控制台中原生支持类jQuery选择器,也就是说你可以用$加上熟悉css选择器来选择DOM节点 ? 4、copy通过此命令可以将在控制台获取到内容复制到剪贴板 ?...2、利用控制台输出图片 ? 3、指定输出文字样式 ?  最后说一下chrome控制台一个简单操作,如何查看页面元素,看下图就知道 ?...你控制台简单操作一遍就知道,是不是觉得很简单!

53950

0202年, Chrome DevTools 你还只会console.log吗 ?

控制台中直接访问页面元素 元素面板选择一个元素,然后控制输入 $0,就会在控制台中得到刚才选中元素。如果页面中已经包含了 jQuery,你也可以使用 $($0)来进行选择。...清空控制台历史记录 可以通过下面的方式清空控制台历史: 控制台右键,或者按下 Ctrl 并单击鼠标,选择 Clear Console。 脚本窗口输入 clear()执行。...截图 我们经常需要截图,Chrome DevTools 提供 4 种截图方式,基本覆盖了我们需求场景,快捷键 ctrl+shift+p ,打开 Command Menu,输入 screenshot,...重写 Overrides Chrome DevTools 上调试 css 或 JavaScript 时,修改属性重新刷新页面时,所有的修改都会被重置。...实时表达式 Live Expression 从 chrome70 起,我们可以控制台上方可以放一个动态表达式,用于实时监控它。Live Expression 执行频率是 250 毫秒。

1.2K20

掌握Chrome开发工具:新一代前端开发技术

有时控制台中查看一个复杂对象是一件很麻烦事,因为他们可能有很多键值或者一些很难手动解析。幸运是,Chrome可以让检查这类JavaScript对象变得很容易。...你只需控制台中右键点击对象后选择“存储为全局变量”,chrome就会将这个变量存储为一个名叫“temp1”变量,之后你可以通过Javascript对其进行操作。 动画工具 ?...启用此选项后,控制台中会出现一个新“导航”日志,它指向刷新或是导航到页面。 网络 + 日志过滤 ? 当调试具有大量网络请求或控制台日志应用程序时,过滤特定类型事件是很有用。...代码覆盖率可以在运行Web应用程序后针对每个JavaScript和CSS文件,查看哪些代码行运行了,哪些代码没有运行。这是很有用,因为处理复杂或长期项目时,很容易项目中累积无用代码。...当你使用结束后,Chrome将向你显示操作期间运行具体代码。 调试用户遇到问题 通常来说调试工具只有在你自己机器上才会生效。

1K20

14个你可能不知道JavaScript调试技巧

执行代码后,Chrome会在执行时自动停止。你甚至可以把它封装成条件,只需要时才运行。 2. 用表格显示对象 有时, 有一组复杂对象要查看。...Chrome提供所需一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! 4. 如何快速找到DOM元素 Elements面板中标记一个DOM元素,并在控制台中使用它。...控制台中输入,当调用时,将以调试模式停止: 9. 屏蔽不相关代码 现在,我们经常在应用中引入几个库或框架。其中大多数都经过良好测试且相对没有缺陷。 但是,调试器仍然会进入与调试任务无关文件。...调试JavaScript时,可以使用CSS并自定义控制台信息: 输出: 例如: 中, 可以用设置字符串,设置数字,设置自定义样式等等,还有很多更好使用方法。...你甚至可以监视它属性。Chrome控制台中,右击该元素,然后设置中选择中断:

1.7K90

国庆节前端技术栈充实计划(2):抽空打好JavaScript基础

只需将要在控制台中把你想显示变量传递进来就可以,举个例子: var foo = "bar"; console.log(foo); 这将输出以下内容到控制台: ?...让我们以下面的例子为例: alert('hello, world'); Chrome里,它会弹出一个像下面这样框框: ?...使用Chrome 46.0, window.alert()一个 里被阻止除非它沙盒属性为allow-modal。...如果用户点击OK按钮,将返回输入,否则这个方法就返回 null。 prompt返回总是一个字符串,除非用户点击取消,那就返回是 null。...现在,让我们以下面这个例子为例: result = window.confirm(message);` 这里,message是一个可选字符串,会被展示在对话框里,result是一个布尔,取决于用户点击确定按钮还是取消按钮

1.3K30

掌握Chrome开发工具,做新一代前端开发

有时控制台中查看一个复杂对象是一件很麻烦事,因为他们可能有很多键值或者一些很难手动解析。幸运是,Chrome可以让检查这类JavaScript对象变得很容易。...你只需控制台中右键点击对象后选择“存储为全局变量”,chrome就会将这个变量存储为一个名叫“temp1”变量,之后你可以通过Javascript对其进行操作。 动画工具 ?...启用此选项后,控制台中会出现一个新“导航”日志,它指向刷新或是导航到页面。 网络 + 日志过滤 ? 当调试具有大量网络请求或控制台日志应用程序时,过滤特定类型事件是很有用。...代码覆盖率可以在运行Web应用程序后针对每个JavaScript和CSS文件,查看哪些代码行运行了,哪些代码没有运行。这是很有用,因为处理复杂或长期项目时,很容易项目中累积无用代码。...当你使用结束后,Chrome将向你显示操作期间运行具体代码。 调试用户遇到问题 通常来说调试工具只有在你自己机器上才会生效。

1.2K50

14个你可能不知道JavaScript调试技巧

使用不同屏幕尺寸 桌面上安装不同移动设备模拟器非常棒,但现实确是不可行。如何调整窗口大小呢?Chrome提供所需一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! ? 4....{ this.funcY(); } this.funcY = function() { this.funcZ(); } } var car = new Car(); 控制台中输入...然后,可以控制台中快速浏览。但有时候,某些JavaScrip调试信息并不是你需要。现在,可以自己美化调试信息。...观察特定函数调用及参数 Chrome控制台中,可以观察特定函数。每次调用该函数,就会打印出传入参数。...但是,当您调试JavaScript时,Chrome可以DOM元素发生更改时暂停。你甚至可以监视它属性。Chrome控制台中,右击该元素,然后设置中选择中断: ?

1K30

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

❝请注意,这里说是全屏,并不只是页面可视区域,而是包含滚动条在内所有页面内容。 ❞ 对应截取全屏示例: ? 控制台中使用上次操作 ? 我是最近才发现这个技巧。...使用$_可以引用在控制台执行前一步操作返回。如果您正在控制台调试一些JavaScript代码,并且需要引用先前返回,那么这可能非常方便。 重新发起xhr请求 ?...编辑页面上任何文本 ✍ 控制输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页编辑。...你能看到这些动画块如何显示动画本身上,DevTools 会向我们展示哪些属性正在更改,例如 background-color 或 transform。...控制台中使用快捷键F1打开设置,切换到Experiments 选项 启用Allow custom UI themes ?

1.5K20

Firebug中console tab使用总结

除此之外,Console还提供通过命令行方式来调试Javascript方法。下面就来学习一下Console用法。 1、Firefox日志记录(Logging in Firefox)。...console.error():向控制台中写入错误信息,带错误图标显示和高亮代码链接;     console.info():向控制台中写入提示信息,带信息图标显示和高亮代码链接;     console.warn...():向控制台中写入警告信息,带警告图标显示和高亮代码链接;     consle打印字符串支持字符串替换,使用起来就像c里面的printf(“%s",a),支持类型包括:     %s        ...一种是代码中写入分析脚本,一种是单击profile标签,最后还可以命令行下输入命令来执行。     ...执行后,可以看到详细输出结果,下面对各项进行一些说明:     Function Column:显示调用函数名称;     Call Column:显示调用次数;     Percent Column

68520

14个你可能不知道JavaScript调试技巧

使用不同屏幕尺寸 桌面上安装不同移动设备模拟器非常棒,但现实确是不可行。如何调整窗口大小呢?Chrome提供所需一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! ? 4....this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); }}var car = new Car(); 控制台中输入...然后,可以控制台中快速浏览。但有时候,某些JavaScrip调试信息并不是你需要。现在,可以自己美化调试信息。...观察特定函数调用及参数 Chrome控制台中,可以观察特定函数。每次调用该函数,就会打印出传入参数。...但是,当您调试JavaScript时,Chrome可以DOM元素发生更改时暂停。你甚至可以监视它属性。Chrome控制台中,右击该元素,然后设置中选择中断: ?

1.1K60

javascript断点调试

一、方法1 1.断点文件位置 打开chrome,找到Sources,一堆文件夹里面找到你要调试js文件,打开它: 下面是html前端展示: 2.打断点 当你运行代码时候,例如:操作搜索按钮点击事件...点击你要调试代码行数,发现行数会被标记为蓝色(chrome),这说明已经成功打断点了,恭喜你成功第一步。...下面是调试状态时一些实时数据显示最右侧状态栏中,scope -> local,看到一些信息,otime是断点150行调试信息,这里显示是undefined对吧,这个是因为我们没有时间选择器上输入有效...下面接着调试,这次输入时间。这时再看,scope -> local 展示信息,是我们想要得到otime变量,而在 断点150行,也会看到有信息展示。...当然,我们可以用另外方法去看这个时候otime控制台中(console)输入你想要查看变量,回车,会看到你想要结果。

2.7K30

JavaScript调试和优化,深入研究谷歌Chrome浏览器开发工具(一)

使用浏览器控制台时,如果您想输入多行表达式,您需要使用Shift + enter,因为只要enter就会在此时执行输入行中内容。...控制台历史记录 可以有以下几种方式情况控制台历史记录 控制输入 clear() 控制台或JS代码上调用方法console.clear() 点击控制台左上角红色圆圈 组合键CTRL+L 控制台点击右键...控制台变量 Console Variables 控制台中创建变量将一直保存到进行页面刷新,所以声明变量时请注意使用诸如let或const之类关键字。...存储为全局变量功能 如果把代码将对象记录到控制台,您可能希望从控制台引用这些变量,以便检查它们。不需要搜索控制台,控制台有一些内置方法可以引用这些对象。...向控制台输出添加标志非常有用,因为控制台提供一种只显示带有指定标志消息方法。 ? 过滤控制台日志 使用前面的方法,您可以根据严重性级别筛选控制台输出。 ? 您还可以通过文本过滤输出。 ?

83650
领券