Google浏览器chrome的开发工具的用法介绍

1、修改javascript代码

不少人蒙受手动修改脚本后,然后不见效。

a、独立的js文件的改动章程

  在F12调节界面中期维修改的JS代码,是修改的“本地缓存文件”中的代码,而不是存在于服务器上的网页的着实代码,网页的着实代码在浏览器中是力不从心修改的。

  Chrome开发者调节和测试工具(F12),能够在调节界面修改代码(包括JS、HTML和CSS)模拟本地运维,具体步骤大约如下:

  在供给修改的代码段上方合理代码行设置断点;按F5键刷新网页,并等候网页执行到断点;修改JS代码或任何须求修改的代码,修改后选用单步执行或继续执行即可。

  平日,调节和测试中修改无效,是因为网页加载成功,其实就是运维已经成功了,修改代码不会重新实施。

b、修改html上的js

  js写在html的脚本区域上,那时在source面板下是无力回天编辑的,但在Elements如故得以的。

  修章正是直接将js代码修改,然后在console再实践贰遍。

  缺陷:无法控制已经履行的脚本

 

原文:http://www.cnblogs.com/zhongxinWang/p/4121111.html

连锁推荐:https://github.com/dwqs/blog

 

1肆 、console.profile和console.profileEnd协作共同使用来查阅CPU使用有关新闻

图片 1

在Profiles面板里面查看就足以看来cpu相关应用消息

图片 2

console.trace

仓库跟踪相关的调剂

上述措施只是小编个人驾驭罢了。即使想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

上边介绍一下控制台的局地连忙键

重回顶部

壹 、查看命令

下边大家来看望console里面具体提供了什么样方法能够供大家平常调节和测试时利用。

图片 3

眼下控制台方法和质量有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

上边大家来挨家挨户介绍一下各样艺术主要的用处。

Chrome开发者工具面板 详解

Chrome开发者工具详解(1):Elements、Console、Sources面板

Chrome开发者工具详解(2):Network面板

Chrome开发者工具详解(3):Timeline面板

Chrome开发者工具详解(4):Profiles面板

Chrome开发者工具详解(5):Application、Security、奥迪(Audi)ts面板

 

 

如果

 

http://www.cnblogs.com/liyunhua/p/4529079.html

贰 、命令介绍

一般景色下大家用来输入音信的方式主假使用到如下多少个:

1、console.log 用于出口普通消息

2、console.info 用来出口提示性新闻

3、console.error用于出口错误消息

4、console.warn用来出口警示消息

用图来讲话:

图片 4

6、console.groupEnd截止一组输出新闻

看您需求选用不一致的输出方法来行使,就算上述五个主意再合营group和groupEnd方法来一起行使就能够输入各类各类的不比款式的出口新闻。

图片 5

7、console.assert对输入的表达式进行预知,只有表明式为false时,才输出相应的新闻到控制台。

图片 6

8、console.count(这么些主意12分实用哦)当您想总结代码被实践的次数。

图片 7

9、console.dir(这几个法子是自家时时利用的 可不知道比for
in方便了多少) 间接将该DOM结点以DOM树的布局进行输出,能够详细核对象的格局进步等等。

图片 8

10、console.time 计时初始。console.timeEnd  计时截止(看了上面包车型客车图你须臾间就感受到它的决意了)

图片 9

11、keys和values 前者重回传入对象具备属性名组成的数额,后者再次来到全部属性值组成的数组。

图片 10

12、console.table方法

图片 11

1三 、Chrome
控制哈博罗内原生援助类jQuery的选择器
,也等于说你能够用$添加纯熟的css采用器来选择DOM节。

图片 12

14、console.profileconsole.profileEnd合营协同利用来查看CPU使用相关音信。

图片 13

 

下边介绍一下控制台的有的火速键

Chrome 控制塞内加尔达喀尔原生帮衬类jQuery的选择器

也正是说你能够用$充裕熟知的css选拔器来选拔DOM节点

图片 14

回去顶部

③ 、使用总括

1贰 、console.time 计时起先

console.time和console.timeEnd

计时上三宝太监计时完工(看了上面的图你眨眼之间间就感受到它的决定了)

图片 15

回来顶部

三 、console.error用于出口错误消息

copy

由此此命令能够将在控制台获取到的始末复制到剪贴板(若是在elements面板中选中有些节点,也足以平素按ctrl+c执行复制操作)

图片 16

(哈哈
刚刚从控制台复制的body里面包车型大巴html可以肆意粘贴到哪 比如记事本
是或不是认为功用很有力)

回来顶部

——————————小编是分隔线——————————**

 

(此处转自 纵深开源 )

世家都有用过各类别型的浏览器,每个浏览器都有和好的风味,本身拙见,在自个儿用过的浏览器当中,小编是最欢腾Chrome的,因为它对于调节和测试脚本及前端设计调节和测试都有它比其他浏览器有过之而无不及的地方。大概大家对console.log会有一定的询问,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻吗,下边小编就介绍一些调节的入门技巧,让您爱上console.log

先的简要介绍一下chrome的控制台,打开chrome浏览器,按f12就足以轻松的开拓控制台

图片 17

世家能够见见控制台里面有一首诗还有任何音讯,即便想清空控制台,能够点击左上角那三个图片 18来清空,当然也能够因而在决定台输入console.clear()来兑现清空控制台音讯。如下图所示

图片 19

明天一旦二个风貌,假诺3个数组里面有无数的要素,然而你想清楚各种元素具体的值,那时候想想假设你用alert那将是多惨的一件工作,因为alert阻断线程运维,你不点击alert框的明确按钮下七个alert就不会现出。

上面大家用console.log来替换,感受一下它的诱惑力。

图片 20

看了地点那张图,是否认识到log的强硬之处了,上面我们来看看console里面具体提供了什么措施能够供大家平日调节和测试时利用。

图片 21

脚下控制台方法和总体性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下边我们来挨家挨户介绍一下依次艺术主要的用处。

相似情况下大家用来输入音信的章程主要是用到如下八个

体制操作

可以经过 ctrl + z 撤消

图片 22

归来顶部

1伍 、console.timeLine和console.timeLineEnd协作协同记录一段时间轴

六 、console.dirxml用来突显网页的有个别节点(node)所包含的html/xml代码

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>

图片 23

谷歌控制台Elements面板

要想打开谷歌(Google)控制台,有二种格局

  1. ctrl+shift+i
  2. f12

世家知道Elements面板最大的功用便是操作属性和改动html。那里我再说有的大家大概不太熟知的性状,

  • 拖拽节点, 调整顺序
  • 拖拽节点到编辑器
  • ctrl + z 撤消修改

这一个功用是本人认为最有趣的,你们能够试试啊。

上面来具体说说多少个复杂点的功力

回去顶部

伍 、console.debug用于出口调节和测试音信

用图来讲话

图片 24

console对象的上边5种方法,都得以应用printf风格的占位符。可是,占位符的项目比较少,只援救字符(%s)、整数(%d或%i)、浮点数(%f)和指标(%o)五种。

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

图片 25

%o占位符,能够用来查阅1个目的内部景色

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

图片 26

$_

指令归来近期3回表明式执行的结果,成效跟按升高的方向键再回车是一样的

图片 27

上面的$_亟待领会其奥义才能运用十一分,而$0~$4则表示了近来四个你选取过的DOM节点。

什么看头?在页面右击选用审查元素,然后在弹出来的DOM结点树上面随便点选,那一个被点过的节点会被记录下来,而$0会回去方今3回点选的DOM结点,以此类推,$1重临的是顶级次点选的DOM节点,最多保留了4个,要是不够多少个,则赶回undefined

图片 28

$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

看一下chrome控制台八个简约的操作,怎样查看页面成分,看下图就了然了

图片 29

您在支配台简单操作三回就掌握了,是还是不是认为很简短!

回去顶部

1六 、console.trace 堆栈跟踪相关的调节和测试

上述方式只是自个儿个人明白罢了。假如想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

 

Console.log样式

格式化符号 实现的功能
%s 格式化成字符串输出
%d or %i 格式化成数值输出
%f 格式化成浮点数输出
%o 转化成展开的DOM元素输出
%O 转化成JavaScript对象输出
%c 把字符串按照你提供的样式格式化后输入

说了地点一堆公式,依然举个例子让你影像深远一些,哈哈。

在决定台输入如下代码

图片 30😉

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");



console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

图片 31😉

出口的结果如下图所示:

图片 32

 

回到顶部

⑩ 、console.count(这一个法子丰盛实用哦)当您想总计代码被实践的次数

图片 33

阅读目录

一 、console.log 用于出口普通新闻

 

肆 、copy通过此命令能够将在控制台获取到的内容复制到剪贴板

图片 34

(哈哈 刚刚从控制台复制的body里面包车型客车html能够肆意粘贴到哪 比如记事本
是或不是觉得功能很有力)

归来顶部

Chrome开发者工具面板 总述

  • Elements:查找网页源代码HTML中的任一成分,手动修改任一元素的性情和体裁且能实时在浏览器里面获取反映。
  • Console:记录开发者开发进度中的日志音信,且能够当作与JS进行互动的通令行Shell。
  • Sources:断点调节和测试JS。
  • Network:从发起网页页面请求Request后分析HTTP请求后得到的依次请求能源新闻(包括气象、能源类型、大小、所用时间等),能够依据这一个进行网络品质优化。
  • Timeline:记录并分析在网站的生命周期内所发生的各项事件,以此能够增强网页的运行时刻的习性。
  • Profiles:要是您必要Timeline所能提供的更加多音信时,能够品尝一下Profiles,比如记录JS
    CPU执行时间细节、展现JS对象和血脉相通的DOM节点的内存消耗、记录内部存款和储蓄器的分红细节。
  • Application:记录网站加载的享有财富音信,包蕴仓库储存数据(Local
    Storage、Session Storage、IndexedDB、Web
    SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
  • Security:判断当前网页是不是平安。
  • Audits:对最近网页进行互连网使用情状、网页品质方面包车型地铁确诊,并交付一些优化建议。比如列出全体没有利用的CSS文件等。注: 这一篇首要教学前四个面板Elements、Console、Sources

总况

当前控制台方法和总体性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

上边咱们来挨家挨户介绍一下各样艺术主要的用途。

一般景色下大家用来输入音讯的法门主借使用到如下两个

回去顶部

七 、console.group输出一组音讯的开首

monitor & unmonitor

monitor(function),它接受一个函数名作为参数,比如function a,每次a被执行了,都会在决定台出口一条音讯,里面富含了函数的名号a及执行时所传诵的参数。

而unmonitor(function)正是用来终止这一监听。

图片 35

看了那张图,应该明了了,也等于说在monitor和unmonitor中间的代码,执行的时候会在支配台出口一条音信,里面含有了函数的名目a及执行时所传诵的参数。当免除监视(也便是实践unmonitor时)就不再在支配台出口音讯了。

重回顶部

壹 、方向键盘的上下键,我们一用就知道。比如用上键就一定于采取上次在控制台的输入符号

console.count

(那个情势丰盛实用哦)当您想总计代码被实施的次数

图片 36

回到顶部

1三 、console.timeEnd 计时截止(看了下面包车型客车图你刹那间就感受到它的立意了)

图片 37

console.table

图片 38

重回顶部

五 、keys和values 前者重临传入对象拥有属性名组成的数目,后者重临全数属性值组成的数组

图片 39

说到那,不免想起console.table方法了

图片 40

翻看成分上绑定的政工

  • 暗中同意会列出 All Nodes, 这个归纳代理绑定在该节点的父/祖父节点上的事件,
    因为在在冒泡或捕获阶段会通过该节点
  • Selected Node Only 只会列出当前节点上绑定的事件
  • 各样事件会有相应的几本脾气 handler, isAtribute, lineNumber,
    listenerBody, sourceName, type, useCapture

 

  • handler是处理函数, 右键能够观望那个函数定义的任务, 一般 js
    库绑定事件会包一层, 所以那里很难找到相应handler
  • isAtribute 评释事件是还是不是通过 html 属性(类似onClick)格局绑定的
  • useCapture 是 add伊芙ntListener 的第8个参数, 表达事件是以 冒泡 依然捕获 顺序执行

图片 41

回到顶部

 6、monitor & unmonitor

monitor(function),它接受3个函数名作为参数,比如function
a,每回a被实践了,都会在控制台出口一条消息,里面包蕴了函数的名称a及执行时所传诵的参数。

而unmonitor(function)正是用来终止这一监听。

图片 42

看了那张图,应该领悟了,也正是说在monitor和unmonitor中间的代码,执行的时候会在决定台出口一条音讯,里面富含了函数的名称a及实施时所传颂的参数。当免除监视(约等于实施unmonitor时)就不再在决定台出口音信了。

$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

上边看一下console.log的一些技术

一 、重写console.log 改变输出文字的样式

图片 43

② 、利用控制台出口图片

图片 44

叁 、钦定输出文字的体制

图片 45

末尾说一下chrome控制台三个简约的操作,如何查看页面成分,看下图就领会了

图片 46

您在支配台简单操作1遍就清楚了,是否认为很简短!

console.dirxml

用来显示网页的某部节点(node)所包蕴的html/xml代码

图片 47😉

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>

图片 48😉

图片 49

归来顶部

⑧ 、console.groupEnd停止一组输出音讯

看你必要接纳分裂的出口方法来利用,假设上述八个法子再协作group和groupEnd方法来贰只行使就足以输入种种各种的例外款型的出口消息。

图片 50

哈哈哈,是或不是认为很神奇啊!

console.timeLine和console.timeLineEnd

合营共同记录一段时间轴

归来顶部

④ 、console.warn用于出口警示消息

console.info

用来出口提示性消息

归来顶部

玖 、console.assert对输入的表明式进行预感,惟有表达式为false时,才输出相应的消息到控制台

图片 51

写在前头

大家都有用过各系列型的浏览器,各样浏览器都有投机的本性,本人拙见,在本人用过的浏览器个中,小编是最快乐Chrome的,因为它对于调节和测试脚本及前端设计调试都有它比其余浏览器有过之而无不及的地点。恐怕大家对console.log会有一定的垂询,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出音讯吗,下面小编就介绍一些调节的入门技巧,让你爱上console.log

先的简要介绍一下chrome的控制台,打开chrome浏览器,按f12就足以轻松的打开控制台

图片 52

世家能够看看控制台里面有一首诗还有此外音讯,如若想清空控制台,能够点击左上角那3个图片 53来清空,当然也得以透过在决定台输入console.clear()来兑现清空控制台新闻。如下图所示

图片 54

今后一旦一个景色,借使1个数组里面有无数的要素,不过你想清楚各种成分具体的值,那时候想想假若你用alert这将是多惨的一件业务,因为alert阻断线程运营,你不点击alert框的规定按钮下2个alert就不会油不过生。

上边我们用console.log来替换,感受一下它的魔力。

图片 55

在console面板中输入指令时,能够接纳Shift+Enter换行,Tab键来自动补全

看了地点这张图,是或不是认识到log的兵不血刃之处了,上面大家来探望console里面具体提供了哪些措施能够供大家一贯调节和测试时使用。

图片 56

壹 、先说一下源码定位

世家打开测试网页  
看到页面右下方有1个推荐的图标吗?右击推荐图标,接纳审查成分,打开谷歌控制台,如下图所示

图片 57

咱俩明天想清楚votePost方法到底在哪?跟着自身这样做,在Console面板里面输入votePost然后回车

图片 58

间接点击上图标红的链接,控制台将定点到Sources面板中,展现如下图所示

图片 59

世家看了上面这几个图片之后揣摸头都要晕了呢,这么多js都整在一行,令人怎么看呀,不用顾虑,按下图操作即可(约等于点击中间面板左下方的Pretty
print就行了)

图片 60

这儿大家再再次回到Console面板时会惊奇的意识原先的链接前面包车型大巴1以后成为91了(其实这里的数字1依旧91正是代表votePost方法在源码中的行号
)未来看来Pretty print按钮的雄强之处了吗

了然了如何查看某1个按钮的源码,那接下去的办事就是调剂了,调节和测试第③步须要做的正是设置断点,其实设置断点非常粗大略,点击一下上海教室所示的92即可,那时你会发觉92行号旁边会多了3个图标,这里解释一下为啥不在91处安装断点,你能够试下,事实上根本就无奈在91处上设置断点,因为它是函数的定义处,所以不得已在此设置断点。

图片 61

安装好了断点后,你就会在左边Breakpoints方框里看看刚刚安装的断点。

大家先来介绍一下用到的调节和测试快捷键吧(事实上大家也能够不要下表所示的快速键,直接点击上海图书馆所示左边栏最上层的一排按钮来进展调节和测试,具体用哪个按钮,把鼠标放到按钮上方一会就会显得它对应的晋升)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数

里面值得一提的是,当大家点击“推荐”按钮举行调节的时候会意识,不管大家是按的F10进行调节和测试照旧按F11进展逐级调节和测试,都没办法展开$.ajax函数内部,固然大家在函数内部安装了断点也不曾艺术进去,那里按F8才是实在起功能的,不信你尝试。

当我们在调节和测试的时候,左侧Scope
Variables里面会来妥帖前成效域以及她的父级效用域,以及闭包。你非但能在右手
Scope Variables(变量成效域)
一栏处看到眼下变量,而且仍是能够把鼠标间接移到自由变量上,就能够查阅该变量的值。

用图说话(哈哈)

图片 62

 

刚好我们介绍的只是在html里面能够看收获它绑定了onclick事件,那样我们就找到它绑定的js函数,假使它是在jQuery页面加载成功函数里面绑定的,这时候我们怎么明白它绑定的是哪个js函数呢,若是大家不明白绑定的js函数就更为不用说调节和测试进去了

下边介绍一下怎么查看,照旧以刚刚这一个测试网页为例子吗,然而这一次大家来看“提交评论”作表达呢,

右击“提交评论”–>审核成分,大家得以领略的收看在这几个按钮上未绑定任何事件。在Console面板内输入如下代码

function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

正如图所示:

图片 63

依据上述介绍的法子定位到实际的blog-common.js里面,找到postComment 
然后一稀罕的找到具体的代码,再安装断点就好了。

末尾介绍一下1个神器,很好用的debugger

假诺你协调写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

回到顶部

(此处转自 伯乐在线 – CharlieChu 

console.log

用以出口普通信息

重返顶部

1壹 、console.dir(这么些主意是本人每每使用的 可不知道比for in方便了不怎么) 间接将该DOM结点以DOM树的组织举行输出,能够详细查对象的主意发展等等

图片 64

console.warn

用于出口警示音讯

再次回到顶部

2、$_指令归来近期一次表明式执行的结果,功效跟按升高的方向键再回车是一样的

图片 65

上面的$_亟需领会其奥义才能选择格外,而$0~$4则意味着了近日五个你挑选过的DOM节点。

怎么看头?在页面右击选择审查成分,然后在弹出来的DOM结点树下面随便点选,那一个被点过的节点会被记录下来,而$0会再次来到方今一次点选的DOM结点,以此类推,$1再次回到的是极品次点选的DOM节点,最多保留了多少个,假如不够多个,则再次回到undefined。

图片 66

console.assert

对输入的表明式进行预感,唯有表达式为false时,才输出相应的音信到控制台

图片 67

重返顶部

② 、console.info 用于出口提示性消息

keys和values

前者再次回到传入对象具备属性名组成的数量,后者重返全部属性值组成的数组

图片 68

回去顶部

三 、Chrome 控制奥兰多原生协助类jQuery的选用器,也正是说你能够用$加上熟习的css接纳器来挑选DOM节点

图片 69

console.group和console.groupEnd

>输出一组新闻的先导和出口截止一组输出消息

看您须要选择分裂的出口方法来使用,假如上述多个办法再合作group和groupEnd方法来一同使用就足以输入各类各类的不比格局的输出消息。

图片 70

嘿嘿,是否觉得很神奇啊!

回来顶部

console.profile和console.profileEnd

合营共同行使来查看CPU使用有关新闻

图片 71

在Profiles面板里面查看就能够看看cpu相关应用新闻

图片 72

回到顶部

大势键盘的上下键

大家一用就精晓。比如用上键就约等于选择上次在控制台的输入符号

归来顶部

console.dir

(那个方法是自身平日使用的 可不知道比for in方便了有个别)
直接将该DOM结点以DOM树的协会进行输出,能够详细核对象的办法发展等等

图片 73

回到顶部

console.debug

用以出口调节和测试消息

用图来说话

图片 74

console对象的方面5种格局,都得以选用printf风格的占位符。可是,占位符的品类比较少,只援助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)两种

格式化符号 实现的功能
%s 格式化成字符串输出
%d or %i 格式化成数值输出
%f 格式化成浮点数输出
%o 转化成展开的DOM元素输出
%O 转化成JavaScript对象输出
%c 把字符串按照你提供的样式格式化后输入
   console.log("%d年%d月%d日",2011,3,26);
  console.log("圆周率是%f",3.1415926);

图片 75

%o占位符,能够用来查看一个指标内部景色

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

图片 76

上面重点说一下console.log的一对技巧

壹 、重写console.log 改变输出文字的体制

图片 77

图片 78😉

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");



console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

图片 79😉

输出的结果如下图所示:

图片 80

 

二 、利用控制台出口图片

图片 81

三 、钦点输出文字的体裁

图片 82

归来顶部

console.error

用以出口错误音信

回到顶部