浏览器控制台console的使用

前天在团队项目中因为产品需求在提交订单的时候需要多个页面的数据作为提交接口的参数,这种需求让人醉醉的,项目用angular来做的,没办法只能用全局变量来定义要交互的值和localStorage来临时的将数据存在浏览器,话不多少进入正题。

用JS组装的JS对象在存入localStorage的时候要用JSON.stringify转成JSON对象才能正确的存起来,同理取得时候也要用JSON.parse来将JSON对象转化成JS对象才能在前端正常使用。当时在控制台打印从localStorage获取到的数据的时候发现打印的字体颜色是黑色的(chrome),当时控制台还有其他颜色的打印项。

平时天天使用console,这次才真正的发现console的一些小的细节,不同的数据类型在console打印的颜色是不一样的,于是带着兴趣研究了一番。

上图分别测试了JS的数据类型Number,String,Null,Undefined,Boolean以及Object在consol的打印结果,可以看出来在浏览器中(chrome)打印出对应的类型的颜色是不一样的,Number类型的数据偏向蓝色、Boolean类型的数据偏向紫红色,Null和Undefined的颜色值是灰色,当愕然Array和Object的特点就更明显了,一个带中括号一个有大括号很便于我们识别。当然也可以自定义console打印的字体颜色。

如果把对应的数据类型在浏览器console中对应的颜色的话在开发中或多或少能让我们从控制台中看到数据对应的类型,这样是可以提高我们的开发效率的。

平时项目开发中console对象正常情况下用的比较多的方法应该就是console.log()方法,除此之外console还有其它的一些方法,我们可以在控制台输出 console.log(console)来查看下。

这就是console对象下面所有的方法。不同的方法在浏览器控制台有不同的表现方式:

这里仅仅举例几种方法,可以看出console不同的方法在控制台还是有不同的表现的。

这里说说console的根源,console并不属于原生JS的,原生JS并没有console对象,它是浏览器提供的用于用户便于访问控制台的对象,因此在不同的浏览器里面console的效果也可能会有一些差异。

开发用用的和console类似的alert,confirm,prompt等弹框也是浏览器自带的行为,区别在于console不影响代码的执行但是alert,confirm,prompt弹框弹出的时候回阻断代码的执行。

因为console,alert,confirm,prompt等这些浏览器自带的对象只能依赖于浏览器才会有效,所以对于要打包的APP上线的时候是要避免使用这些对象的,用的多的应该是弹框,这时候要自己写一个弹框插件或者找第三方插件来实现功能。

每天进步一点点

时间: 2024-10-12 04:32:55

浏览器控制台console的使用的相关文章

浏览器控制台console

console对象 console对象代表浏览器的JavaScript控制台.虽然它还不是标准,但是各大浏览器都原生支持,已经成为事实上的标准. console对象主要有两个作用: 显示网页代码运行时的错误信息. 提供了一个命令行接口,用来与网页代码互动. console对象的接口有很多方法,可供开发者调用. console.log() log方法用于在console窗口显示信息. 如果参数是普通字符串,log方法将字符串内容显示在console窗口. console.log("Hello Wo

chrome浏览器控制台 console不打印信息问题解决办法。

转自:https://blog.csdn.net/wang17866603359/article/details/79083776 最近换了安装chrome,想按F12调试下代码,发现控制台什么信息都没有. 所以给大家分享下解决办法:  点击就会自动把勾勾上.这样就可以了. 原文地址:https://www.cnblogs.com/sharpest/p/10404373.html

浏览器控制台console对象的使用

下面四个函数是调试代码的好帮手. console.log() console.info() console.debug() console.warn() console.error() 下面是格式化字符 %s  %d   %f %i也是整数 %o对象(可以显示对象的结构) 下面是分组显示 console.group(); ... ... console.groupEnd(); 下面是目录式显示 console.dir() console.dirxml() 下面是断言 console.assert

console.debug()浏览器控制台打印输出 仅仅在支持console的浏览器下打印

console.debug()浏览器控制台打印输出 仅仅在支持console的浏览器下打印 var util = {}; /** * 工具类 */ util = new function() { /** * 控制台打印输出 仅仅在支持console的浏览器下打印 * @param info 信息打印 */ this.debug = function(info){ try{ if(console != undefined && console != null && conso

console.debug()浏览器控制台打印输出 只在支持console的浏览器下打印

console.debug()浏览器控制台打印输出 只在支持console的浏览器下打印 var util = {}; /** * 工具类 */ util = new function() { /** * 控制台打印输出 只在支持console的浏览器下打印 * @param info 打印信息 */ this.debug = function(info){ try{ if(console != undefined && console != null && console

浏览器控制台报错SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3

前两天遇到一个问题,easyui 的datagrid向后台发送请求本地测试没问题,放服务器在谷歌下面没问题,在ie下请求发送失败.打开浏览器控制台查看请求失败,console报错SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3,network服务被挂起: 页面弹出错误提示框: 排除问题:由谷歌下请求数据成功,IE下有问题,推断前台发送ajax出错,不是后台的原因.再在IE下console.log前台传参发现传参也没问问题,大概推测是easyui对ajax封装的问题.

1.Google Chrome浏览器 控制台全解析

Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是JavaScript执行速度(现在的FireFox4也比之前的FireFox3有很大的进步).不过当时由于Chrome的开发者工具还不是很完善,而我又不是很熟悉,加之对于Firebug的好感和依

不依赖浏览器控制台的JavaScript断点调试方法

随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具).非正常浏览器web.移动场景下 的内嵌等场景. 随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已

使用浏览器控制台抓取shodan、搜索引擎信息

0x00 前言 使用JavaScript提取自己想要截图的示例 0x01 提取Shodan结果ip Shadan //方法1:获取标签提取 console.log(document.getElementsByClassName("ip")[0].firstChild.innerHTML) function getIpByTag() { var ip = document.getElementsByClassName("ip"); var str = "\n