为什么chrome控制台不将"\n“显示为字符串，而将console.log输出显示为正常的换行符？

Chrome控制台不将"\n"显示为字符串，而将console.log输出显示为正常的换行符，是因为在控制台中，"\n"被解释为特殊字符，表示换行符。而console.log输出的内容会被控制台解析为普通的文本，并按照换行符进行换行显示。

这种设计是为了方便开发者在控制台中输出多行文本，使得输出更加清晰易读。当我们使用console.log输出时，可以直接使用"\n"来表示换行，而不需要将其转义为字符串。

例如，下面的代码会在控制台中输出两行文本：

console.log("第一行\n第二行");

在这个例子中，"\n"被解析为换行符，控制台会将其作为两行文本输出。

对于其他特殊字符，如制表符"\t"、回车符"\r"等，Chrome控制台也会进行相应的解析和显示。这样的设计使得开发者可以更方便地在控制台中输出格式化的文本，提高开发效率。

总结起来，Chrome控制台不将"\n"显示为字符串，而将console.log输出显示为正常的换行符，是为了方便开发者在控制台中输出多行文本，并提高开发效率。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
腾讯云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme

相关·内容

重学JS基础-词法和语法

(旧称) 是 U+FEFF，这是 ES5 新加入的空白符，是 Unicode 中的零宽非断行空格,即字符的length长度为0。 换行符 是 U+000A，就是最正常换行符，在字符串中的\n。...是 U+000D，这个字符真正意义上的“回车”，在字符串中是\r，在一部分 Windows 风格文本编辑器中，换行是两个字符\r\n。...如果你经常使用 Chrome 自带的调试工具，可以知道，输入一个表达式，在控制台可以得到结果，但是在前面加上 var，就变成了 undefined,因为语句从表达式语句变成了声明语句。...Chrome 控制台显示的正是语句的 Completion Record 的[[value]]。...所以左移 n 位相当于乘以 2 的 n 次方，右移 n 位相当于除以2取整次。普通移位会保持正负数。

1.2K1 0

用 console 画条龙?

场景1：输出普通的调试信息，如数字、字符串、对象、数组、函数等可以使用console.log或console.info，这两个方法基本是一样的： ?...image-20210603140257900.png 场景2：想输出不同等级的调试信息，如警告信息或报错信息调试级别的信息可以使用console.debug方法，控制台默认是不显示的，想要看到的话需要勾上控制台对应的选项...image-20210604135050309.png 相恋场景1：实现一下上述百度的效果 console要输出换行的字符需要使用\n： console.log('每一个星球都有一个驱动核心，\n每一种思想都有影响力的种子...复制代码输出红色的字可以使用占位符，占位符格式为：console.log('%x其他字符', 'xxx', [xxx, xxx...])...设置样式使用%c占位符，可以使用多个，为占位符后面的字符应用样式，替换完占位符还剩下的参数也会正常打印出来： console.log('%c百度2021校园招聘简历投递：', 'color:red',

7903 0

用console画条龙?

对象的方法都挂在对象自身，在 chrome控制台打印console可以看有如下方法或属性： console输出信息的方法都可以接收多个以逗号分隔的参数，打印的时候会在同一行进行显示，不会换行，想要换行的话请使用...场景1：输出普通的调试信息，如数字、字符串、对象、数组、函数等可以使用console.log或console.info，这两个方法基本是一样的：场景2：想输出不同等级的调试信息，如警告信息或报错信息...console.groupEnd() 相恋场景1：实现一下上述百度的效果 console要输出换行的字符需要使用\n： console.log('每一个星球都有一个驱动核心，\n每一种思想都有影响力的种子...输出红色的字可以使用占位符，占位符格式为：console.log('%x其他字符', 'xxx', [xxx, xxx...])...设置样式使用%c占位符，可以使用多个，为占位符后面的字符应用样式，替换完占位符还剩下的参数也会正常打印出来： console.log('%c百度2021校园招聘简历投递：', 'color:red',

5902 0

Node.js 全局对象（上）

2 console.info([data][, ...])该命令的作用是返回信息性消息，这个命令与console.log差别并不大，除了在chrome中只会输出文字外，其余的会显示一个蓝色的惊叹号。...3 console.error([data][, ...])输出错误消息的。控制台在出现错误时会显示是红色的叉子。 4 console.warn([data][, ...])输出警告消息。...控制台出现有黄色的惊叹号。 5 console.dir(obj[, options])用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。...只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。 console.log()：向标准输出流打印字符并以换行符结束。...console.log 接收若干个参数，如果只有一个参数，则输出这个参数的字符串形式。如果有多个参数，则以类似于C 语言 printf() 命令的格式输出。

1.7K3 0

Chrome 调试技巧

本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出想必大家都在用console.log在控制台输出点东西，其实console还有其它的方法： console.log...("打印字符串");//在控制台打印自定义字符串console.error("我是个错误");//在控制台打印自定义错误信息console.info("我是个信息");//在控制台打印自定义信息console.warn...格式化输出除此以外，console还支持自定义样式和类似c语言的printf形式 console.log("%s年",2016);//%s表示字符串console.log("%d年%d月",2016,11...注：Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。...chrome中的调试技巧 DOM元素的控制台书签 Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。

2.3K2 0

js调试console.log使用总结图解

一实例打印字符串和对象；可展开对象查看内部情况；看一下console对象本身的定义情况；输出对象情况； utag对象所在文件；输出对象；二 Console.log 总结 1...不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器搜狗浏览器等等，只要按 F12 就能打开控制台。...可以直接看到对象信息，而不会显示 [object Object] 令我们一头雾水。现在可以直接点击 Object 展开这个数组内的对象进行查看了，连循环输出都省了。...的使用情况进行记录,具体的语法是: console.log(“值为:”,fn); console.log()能够输出变量,函数,数组,对象等等 3 console.log 原先是 Firefox 的“专利...console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似，console.log()也可以接受换行符\n以及制表符\t。

1.9K2 0

如何优雅的使用 JavaScript 控制台

1Console 对象 console对象赋予了你访问浏览器控制台的权限。它允许输出字符串，数组和对象，这对调试代码很有帮助。...2 输出文本在控制台记录文本 console对象最常用的一个元素是console.log。很多场景下，你都需要使用它来完成工作。...也可以使用 %.nf来指定小数点后保留n位数字。...只有断言是假，第二个参数才会在控制台中输出。正如刚才所提到的，它输出一个错误级别的日志，给出了红色的错误信息和堆栈跟踪。 Dir() dir方法显示一个所传对象的可交互列表。...一个启动计时器的方法和一个停止它的方法。一旦计时器完成，将会以毫秒为单位输出总的执行时间。

1.1K2 0

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

chrome console控制台日志记录是检查您的页面或应用程序的功能的强大方法。我们从console.log（）开始，探索其他高级用法。...避免混乱使用assert（）显示条件错误消息写入控制台console 使用console.log（）方法进行任何基本的日志记录到控制台。...输出如下： Assertions console.assert（）方法仅在其第一个参数的计算结果为false时才有条件地显示错误字符串（第二个参数）。...代码：输出如下：使用CSS设计控制台输出 CSS格式说明符允许您自定义控制台中的显示。用说明符%c开始字符串，并给出你希望应用的样式作为第二个参数，就是说第二个样式为CSS的样式。...您可以使用％o字符串说明符来执行此操作（请参阅上文），或者使用console.dir来实现相同的操作：本文内容来自：chrome console控制台的使用：诊断并记录 – Break易站

2.4K10 0

Chrome Devtools 高级调试指南（新）

变量打印：%s、%o、%d、和%c const text = "文本1" console.log(`打印${text}`) 除了标准的ES6语法，实际上还支持四种字符串输出。...分别是： console.log("打印 %s", text) %s：字符串 %o：对象 %d：数字或小数还有比较特殊的%c，可用于改写输出样式。...打印DOM 对象节点：console.dir() 打印出该对象的所有属性和属性值. console.dir()和console.log()的作用区别并不明显。若用于打印字符串，则输出一摸一样。...console.log（"Why，hello!"）； console.dir（"Why，hello!"）; ? 在输出对象时也仅是显示不同（log识别为字符串输出，dir直接打印对象。）。 ?...在Chrome地址栏输入：Chrome://inspect ? 正常的话在App中打开WebView时，chrome中会监听到并显示你的页面。

2.7K2 0

这5个 console.log() 技巧帮你提高工作效率

以下是可用说明符的列表：说明符作用 %s 元素转换为字符串 %d 或 %i 元素转换为整数 %f 元素转换为浮点数 %o 元素以最有效的格式显示 %O 元素以最有效的格式显示 %c 应用提供的CSS...交互展示日志样式化依赖于主机的控制台实现。像Chrome和Firefox这样的浏览器提供对象和数组的交互展示，而 Node 控制台输出为文本。...在Chrome控制台中，myObject的打印如下所示： ?...4.3 DOM 树结构我们可以直接与控制台中显示的DOM元素进行交互。...在 Node 控制台中打印大对象 Node中的log以纯文本形式输出。但是，Node 中的console.log()不会显示具有深层嵌套的对象：第3级的对象显示为[Object]。

1.2K6 0

【程序猿硬核科普】Chrome控制台的基本操作 | 谷歌浏览器控制台格式错乱解决方法

【重点：表达式为False的时候才触发】 message: 输出语句，可以是任意类型。...该函数会在 expression 为 false 的时候，在控制台输出一段语句，输出的内容就是传入的第二个参数 message 的内容。...三、console.log()的高级用法 %s 格式化成字符串输出 %d or %i 格式化成整数输出 %f 格式化成浮点数输出 %o 转化成展开的DOM元素输出 %O 转化成JavaScript...对象输出 %c 字符串增加样式输出也不用详细讲解了，直接看代码，撸一遍就懂了，例子如下： console.log('%d + %d = %d',1.11,2.22,3.33); //%o%O打印...关于console控制台的彩蛋假如你在你的网页代码中加上console.log，是不会显示到页面中去的，除非你打开控制台。让我们打开百度，然后F12打开控制台： ?

6.7K1 1

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码，因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。...曾经，alert是大家非常常用的debug工具。不过，使用alert局限性太大，它只能显示字符串。 // 显示所有的h2标签内容 alert($('h2')); 然而，并不会显示出来： ?...当使用C, C++, Java开发的时候，我们可以使用终端(terminal)来debug，控制台拥有和终端相似的功能。错误 控制台显示JavaScript错误。 ?...// 当前的this this; console.log console.log在控制台打印信息。 console.log("I am logging to the console."); ?...(i); } alert只能显示字符串，console.log就强大多了： // 可以输出DOM元素 console.log($('h2')); // 可以显示对象 console.log({ book

1.2K9 0

JS调试工具，万能的Console，你知道还能这样玩吗？

为什么不直接使用 alert 或自己写的 log? 使用 alert 不是一样可以显示信息，调试程序吗？alert 弹出窗口会中断程序，如果要在循环中显示信息，手点击关闭窗口都累死。...而且 alert 显示对象永远显示为[object ]。自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好，看完后面 console 的介绍就知道了。...Console使用大全 console.log console.log 是最简单输出信息到 console 窗口的方法，支持多个参数，该方法会把这些参数组合在一起显示。...log 方法第一个参数支持类似 C 语言 printf 字符串替换模式，Log 支持下面几种替换模式： %s 代替字符串 %d 代替整数 %f 代替浮点值 %o 代替 Object console.log...，Chrome 和 FireBug 支持 console.clear 该方法会清空 console 控制台中的所有信息 console.dirxml 显示网页的某个节点（node）所包含的html/xml

1.6K2 0

console.log详解

大家好，又见面了，我是你们的朋友全栈君。 console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。...，添加换行符。..., 'color: red; background: yellow; font-size: 24px;' ) 上面代码运行后，输出的内容将显示为黄底红字。...console.log(' %s + %s ', 1, 1, '= 2') // 1 + 1 = 2 如果参数是一个对象，console.log会显示该对象的值。...} 上面代码输出Date对象的值，结果为一个构造函数。

1.4K2 0

nodejs cheerio模块提取html页面内容

通过chrome的devtool(或者firefox的firebug）看出，所有的目标元素为：hr元素的所有兄弟结点。...以上结果有多余的空格、换行符，输出文本看起来很散乱，但至少内容是获取正确了。再在task2-5的html文件验证一下，也获取到了正确的内容，证明方法可行。接下来我们可以集中精力解决格式散乱的问题。...1.2 美化文本输出最主要的问题是有多余的空格、换行符。想到的一个办法是：将所有结点的内容（包括文本结果）trim，即去年前后的所有空白字符，并对于br元素，加入一个换行符。...如果子元素数目为0，表示这个元素是叶结点，则首先判断如果是br元素，则在结果中加入一个换行符，否则，调用text函数获取这个元素的文本内容。如果子元素大于0，则递归地处理所有子元素。...如果当前元素为p或tr元素，则在结果中加入一个换行。其中RST为一个全局变量，用于保存结果文本。在调用函数前需要设置为空字符串。

3.2K6 0

Javascript调试命令——你只会Console.log() ?

它被浏览器定义为 Window.Console，也可被简单的 Console 调用。最常用的方法就是Console.log()，就是在控制台输出内容。...注意：因为Console 对象提供对浏览器控制台的接入所以在不同浏览器中的支持及表现形式可能不太一样，但是调试内容只有我们开发者会看，所以保证开发环境能用这些方法就可以了，下面演示全部都为Chrome...查看对象使用Console.dir()显示一个对象的所有属性和方法在Chrome中Console.dir()和Console.log()效果相同 var CodeDeer = {...查看节点使用Console.dirxml()显示一个对象的所有属性和方法在Chrome中Console.dirxml()和Console.log()效果相同百度首页logo的节点信息 ?...二、格式化输出占位符含义 %s 字符串输出 %d or %i 整数输出 %f 浮点数输出 %o 打印javascript对象，可以是整数、字符串以及JSON数据样例： var arr = ["小明

1.1K4 0

✨ 7 个让你的 console.log() 输出脱颖而出的提示和技巧

信息图标不出现，因此 Chrome 中的 console.log 和 console.info 之间没有视觉差异。 // 4....("控制台示例"); 输出：例如，当循环遍历一个对象并希望以更有条理的方式显示结果时会很有帮助，如下所示。...将数组或对象输出为表格使用console.group()方法组织数组对象的输出。...字符串替换和模板文字 字符串替换还在使用吗？对于样式 console.log 是的。但这是它的处理方式： const emoji = "" console.log("这个%s是我最爱的emoji!"...(`这个${emoji}是我最爱的emoji`); 输出：有兴趣的需要查找其他控制台方法，可以查看 MDN Web 文档我已经写了很长一段时间的技术博客，并且主要通过CSDN发表，这是我的一篇console.log

6012 0

10个很少使用的JavaScript Console 方法

console.log() 是一种典型的方法： console.log(cars); 在 Chrome 浏览器开发者控制台中，我们可以检查我们记录的对象的各种属性，层次不限。...在 Chrome 浏览器控制台中，它会以独特的红色显示错误信息。...5. warn() console.warn() 在 Chrome 浏览器控制台中输出黄色信息，表示警告。...() 为其后的控制台信息添加一级缩进。...记录为 HTML，我们可以在控制台中浏览：但是， console.dir() 会将其记录为一个对象，并显示一个交互式属性列表：总结正如你在本文中所看到的，除了 console.log() 之外

2193 0

IT课程 JavaScript基础 036_语法结构

分号在大多数情况下是可选的，因为JavaScript解释器会尝试自动插入分号（Automatic Semicolon Insertion，ASI），以使代码解析为语法正确。...; 当存在换行符（line break）时，在大多数情况下可以省略分号。示例： alert('Hello') alert('JavaScript!')...; alert(yesNo); 效果： prompt 对话框 prompt 对话框用于向用户显示一个带有输入字段的对话框，通常用于接受用户的输入。...不同的浏览器提供不同的开发者工具，以下是常见浏览器的JavaScript开发者工具： Chrome 开发者工具打开 Chrome 浏览器，按下 Ctrl + Shift + I（Windows/Linux...如图：主要功能和面板： Console（控制台）：用于执行和调试JavaScript代码，查看输出、错误以及警告信息。

911 0

console.log新玩法

console.log支持多样化玩法,这里以console.log的css内容输出为例,也就是console.log()输入多样化内容 console.log输出一张图片正常情况下大家都应该明白console.log...只能输出正常的文本内容这里给大家介绍输出一张图片,把下面的代码放进JavaScript脚本里面就可以实现控制台输出一张图片 console.log('%c','padding:50px 200px;background...console.log输出背景渐变的文字 console.log("%c十月梦想","background: rgba(252,234,187,1);background: -moz-linear-gradient...console.log输出彩色(渐变文字)chrome控制台不支持显示 console.log('%c十月梦想 ', 'background-image:-webkit-gradient( linear...console的用法另外补充 console.log("%c")输出css样式 console.log("%s") 字符串格式化 %d/%i 整数格式化； console.log("%o") 可扩展的

6395 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云