您的位置:68399皇家赌场 > 服务器租用 > Chrome 调整台console的用法

Chrome 调整台console的用法

发布时间:2019-11-30 12:46编辑:服务器租用浏览(149)

    Chrome 控制台console的用法

    2015/01/12 · JavaScript · Chrome

    初藳出处: ctriphire   

    大家都有用过各体系型的浏览器,每一种浏览器都有投机的个性,本身拙见,在自己用过的浏览器个中,我是最欢畅Chrome的,因为它对于调节和测量试验脚本及前端设计调节和测验皆有它比其他浏览器纠枉过正的地点。或然大家对console.log会有一定的打听,心里难免会想调节和测验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来替代alert输出新闻呢,上面笔者就介绍一些调度的入门工夫,让你爱上console.log

    先的简洁明了介绍一下chrome的调控台,张开chrome浏览器,按f12就能够轻易的开发调节台

    www.68399.com 1

    世家可以看出调节台里面有大器晚成首诗还应该有其余音讯,如若想清空调节台,能够点击左上角这几个www.68399.com 2来清空,当然也足以经过在调控台输入console.clear(卡塔尔(قطر‎来落实清空气调节器节台音讯。如下图所示

    www.68399.com 3

    今日借使四个风貌,假设二个数组里面有无数的要素,但是你想明白各种成分具体的值,这时出主意借让你用alert那将是多惨的生龙活虎件职业,因为alert阻断线程运转,你不点击alert框的规定按键下八个alert就不会不能自已。

    上边大家用console.log来替换,体会一下它的魅力。

    www.68399.com 4

    看了上边那张图,是或不是意识到log的精锐之处了,上面大家来拜望console里面具体提供了什么措施可以供大家向来调节和测验时使用。

    www.68399.com 5

    现阶段调控台方法和总体性有:

    JavaScript

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

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

    下边大家来挨门逐户介绍一下风姿罗曼蒂克一艺术主要的用处。

    雷同景况下大家用来输入新闻的艺术主如若用到如下多少个

    1、console.log 用于出口普通音信

    2、console.info 用来出口提醒性音讯

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

    4、console.warn用以出口警报新闻

    5、console.debug用来出口调节和测量检验音讯

    用图来说话

    www.68399.com 6

    console对象的方面5种办法,都能够行使printf风格的占位符。但是,占位符的花色比超级少,只协理字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)八种

    JavaScript

    console.log("%d年%d月%d日",二〇一三,3,26卡塔尔; console.log("圆周率是%f",3.1415926卡塔尔(قطر‎;

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

    www.68399.com 7

    %o占位符,能够用来查看一个指标底细

    JavaScript

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

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

    www.68399.com 8

    6、console.dirxml用来展现网页的某部节点(node)所含有的html/xml代码**

    JavaScript

    <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>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <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>

    www.68399.com 9

    7、console.group出口大器晚成组音讯的起来

    8、console.groupEnd得了风华正茂组输出新闻

    看你需求采用差别的出口方法来利用,借使上述多个格局再同盟group和groupEnd方法来一起使用就足以输入琳琅满指标不等款式的输出消息。

    www.68399.com 10

    嘿嘿,是还是不是以为相当漂亮妙啊!

    9、console.assert对输入的表达式进行预知,独有表明式为false时,才输出相应的新闻到调整台

    www.68399.com 11

    10、console.count(那些方法十三分实用哦)当您想总括代码被实行的次数

    www.68399.com 12

    11、console.dir(那一个措施是自己时时应用的 可不知道比for in方便了多少卡塔尔(قطر‎ 间接将该DOM结点以DOM树的结构实行输出,可以详细核对象的不二诀要升高级等

    www.68399.com 13

    12、console.time 计时最先

    13、console.timeEnd  计时截至(看了下边包车型大巴图你瞬间就心获得它的决心了)

    www.68399.com 14

    14、console.profileconsole.profileEnd合营协同利用来查阅CPU使用相关新闻

    www.68399.com 15

    在Profiles面板里面查看就足以见见cpu相关应用音信

    www.68399.com 16

    15、console.timeLineconsole.timeLineEnd合作合作记录生龙活虎段时间轴

    16、console.trace  仓库追踪相关的调治

    上述措施只是自己个人知道罢了。假若想查看具体API,可以上合法看看,具体地址为:

     

    www.68399.com ,上边介绍一下调整台的局地神速键

    1、方向键盘的上下键,我们风流罗曼蒂克用就领会。举个例子用上键就一定于采用上次在调整台的输入符号

    2、$_指令归来近期三回表明式执行的结果,功用跟按进步的方向键再回车是一样的

    www.68399.com 17

    上面的$_亟需精晓其奥义本领接纳非常,而$0~$4则意味着了近年5个你筛选过的DOM节点。

    怎么着意思?在页面右击选取审查元素,然后在弹出来的DOM结点树上边随意点选,这一个被点过的节点会被记录下来,而$0会再次回到近年来贰回点选的DOM结点,就那样推算,$1再次来到的是精品次点选的DOM节点,最多保留了5个,假诺远远不足5个,则赶回undefined

    www.68399.com 18

    3、Chrome 调整桃园原生支持类jQuery的选取器,也正是说你可以用$拉长熟习的css接受器来采摘DOM节点

    www.68399.com 19

    4、copy经过此命令能够将要调控台获取到的故事情节复制到剪贴板

    www.68399.com 20

    (哈哈 刚刚从调整台复制的body里面包车型客车html能够轻松粘贴到哪 比方记事本  是否感觉效率很强盛)

    5、keys和values 前面多个再次回到传入对象具有属性名组成的数目,前者重回全部属性值组成的数组

    www.68399.com 21

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

    www.68399.com 22

     

     

    看了这张图,应该精晓了,也等于说在monitor和unmonitor中间的代码,实施的时候会在调控台出口一条音讯,里面包涵了函数的名称a
    及进行时所传诵的参数。当撤废监视(也正是实施unmonitor时)就不再在控制台出口音讯了。
    $ // 轻松领悟正是 document.querySelector 而已。
    $$ // 老妪能解正是 document.querySelectorAll 而已。
    $_ // 是上二个表达式的值
    0−
    4 // 是近些日子5个Elements面板选中的DOM成分,待会会讲。
    dir // 其实正是 console.dir
    keys // 取对象的键名, 再次来到键名组成的数组
    values // 去对象的值, 重临值组成的数组

    5、console.debug用于出口调节和测量试验音讯

    6、monitor & unmonitor

    monitor(function卡塔尔(英语:State of Qatar),它选取多个函数名作为参数,比如function a,每次a被推行了,都会在调控台出口一条新闻,里面富含了函数的称呼a及进行时所传颂的参数。

    而unmonitor(function卡塔尔(英语:State of Qatar)正是用来终止这一监听。

    www.68399.com 23

    看了那张图,应该清楚了,也正是说在monitor和unmonitor中间的代码,实践的时候会在调整台出口一条音信,里面蕴含了函数的称呼a及试行时所盛传的参数。当裁撤监视(约等于推行unmonitor时)就不再在支配台出口音讯了。

    JavaScript

    $ // 轻松理解正是 document.querySelector 而已。 $$ // 简单明了就是document.querySelectorAll 而已。 $_ // 是上二个表明式的值 $0-$4 // 是近来5个Elements面板选中的DOM成分,待会会讲。 dir // 其实正是console.dir keys // 取对象的键名, 重返键名组成的数组 values // 去对象的值, 再次回到值组成的数组

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

     

    上面看一下console.log的片段本事

    1、重写console.log 改换输出文字的体裁

    www.68399.com 24

    2、利用调控台出口图片

    www.68399.com 25

    3、钦命输出文字的样式

    www.68399.com 26

    终极说一下chrome调控台二个简约的操作,怎么样查看页面元素,看下图就精通了

    www.68399.com 27

    你在支配台轻巧操作一遍就知道了,是或不是以为很简短!

    赞 6 收藏 评论

    www.68399.com 28

    www.68399.com 29

    先的简练介绍一下chrome的调控台,打开chrome浏览器,按f12就足以轻便的开垦调控台

    4、copy通过此命令能够将在调节台获取到的剧情复制到剪贴板

    如何意思?在页面右击选择检查核对成分,然后在弹出来的DOM结点树上面随意点选,这个被点过的节点会被记录下来,而$0会重回近日一遍点选的DOM结点,由此及彼,$1重临的是精品次点选的DOM节点,最多保留了5个,若是远远不够5个,则再次来到undefined。

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

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

    www.68399.com 30

    大家皆有用过各系列型的浏览器,每一种浏览器都有和煦的特点,自己拙见,在自家用过的浏览器个中,小编是最赏识Chrome的,因为它对于调试脚本及前端设计调节和测量试验都有它比其他浏览器有过之而无比不上之处。也许大家对console.log会有一定的问询,心里难免会想调节和测量试验的时候用alert不就能够了,干嘛还要用console.log这么一长串的字符串来代替alert输出消息呢,下边我就介绍部分调节和测量试验的入门技艺,让您爱上console.log

    6、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>

    4、copy通过此命令能够将要调整台获取到的剧情复制到剪贴板

    www.68399.com 31

    www.68399.com 32

    15、console.timeLineconsole.timeLineEnd同盟协同记录黄金年代段时间轴
    16、console.trace 仓库追踪相关的调理
    上述格局只是作者个人驾驭罢了。假设想查看具体API,能够上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
    调整台的片段火速键
    1、方向键盘的上下键,咱们风流浪漫用就了然。比方用上键就一定于接纳上次在调整台的输入符号
    2、$_一声令下归来近日二遍表明式推行的结果,效率跟按提升的方向键再回车是平等的

    嘿嘿,是否以为很好看妙啊!

    www.68399.com 33

    www.68399.com 34

    www.68399.com 35

    www.68399.com 36

    上面看一下console.log的生龙活虎部分技艺
    1、重写console.log 退换输出文字的体制

    www.68399.com 37

    www.68399.com 38

    上述方式只是自己个人领悟罢了。借使想查看具体API,能够上合法看看,具体地址为:

    哈哈,是还是不是感到极好看妙啊!
    9、console.assert对输入的表明式进行预感,唯有表明式为false时,才输出相应的音信到调整台

    www.68399.com 39

    12、console.time 计时启幕
    13、console.timeEnd 计时停止(看了上面包车型地铁图你眨眼间间就体会到它的决意了)

    14、console.profile和console.profileEnd协作协同使用来查看CPU使用有关消息

    www.68399.com 40

    上边介绍一下调控台的有的快速键

    www.68399.com 41

    上边咱们来挨门挨户介绍一下顺序艺术主要的用场。


    www.68399.com 42

    3、Chrome 调节新竹原生支持类jQuery的选取器,也正是说你能够用$
    加上熟谙的css选用器来抉择DOM节点

    www.68399.com 43

    %o占位符,能够用来查阅二个目的内部景色
    var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

    10、console.count(那个主意十二分实用哦)当你想总计代码被实践的次数

    www.68399.com 44

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

    www.68399.com 45

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

    14、console.profile和console.profileEnd协作协同利用来查看CPU使用有关音讯

    13、console.timeEnd 计时结束(看了下边包车型大巴图你瞬间就体会到它的决意了)

    7、console.group输出生机勃勃组新闻的始发
    8、console.groupEnd终止大器晚成组输出新闻
    看你须求选拔分裂的出口方法来利用,若是上述多少个法子再合营group和groupEnd方法来一同行使就足以输入五花八门的不等款式的输出音信。

    6、monitor & unmonitor

    monitor(function卡塔尔(قطر‎,它选用一个函数名作为参数,举例function a,每一遍a被实施了,都会在支配台出口一条新闻,里面含有了函数的名称a及试行时所盛传的参数。

    而unmonitor(function卡塔尔正是用来终止这一监听。

    www.68399.com 46

    看了那张图,应该清楚了,也正是说在monitor和unmonitor中间的代码,施行的时候会在决定台出口一条新闻,里面满含了函数的名称a及施行时所盛传的参数。当免除监视(也正是实施unmonitor时)就不再在决定台出口音讯了。

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

     

    上边看一下console.log的生龙活虎对本事

    1、重写console.log 退换输出文字的体制

    www.68399.com 47

    2、利用调节台出口图片

    www.68399.com 48

    3、钦点输出文字的样式

    www.68399.com 49

    最终说一下chrome调控台三个粗略的操作,如何查看页面成分,看下图就了解了

    www.68399.com 50

    您在调控台简单操作二回就领悟了,是否觉得很简短!

     

    www.68399.com 51

    16、console.trace 货仓追踪相关的调解

    www.68399.com 52

    先前不知道console这么强盛,还是能够计算时间,剖判品质瓶颈。很风趣

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:Chrome 调整台console的用法

    关键词: 68399皇家赌场 JavaScript js 技术文集 console