您的位置:澳门新葡8455最新网站 > Web前端 > 开辟者工具使用

开辟者工具使用

发布时间:2019-10-08 16:53编辑:Web前端浏览(85)

    Chrome 控制台console的用法

    2015/01/12 · JavaScript · Chrome

    初稿出处: ctriphire   

    世家都有用过各个类型的浏览器,每一种浏览器皆有谈得来的性状,自身拙见,在本身用过的浏览器个中,作者是最心爱Chrome的,因为它对于调节和测验脚本及前端设计调节和测量试验都有它比任何浏览器有过之而无不比的地方。恐怕大家对console.log会有必然的摸底,心里难免会想调节和测量试验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出消息呢,下边作者就介绍部分调试的入门技术,让您爱上console.log

    先的简便介绍一下chrome的调整台,展开chrome浏览器,按f12就足以轻便的开辟调节台

    图片 1

    大家能够看来调节台里面有一首诗还会有别的音讯,固然想清中央空调控台,可以点击左上角那多少个图片 2来清空,当然也得以经过在决定台输入console.clear()来兑现清空气调节器整台新闻。如下图所示

    图片 3

    这段时间如若叁个情景,假若三个数组里面有为数不菲的成分,可是你想清楚各样成分具体的值,那时候想想就算你用alert那将是多惨的一件业务,因为alert阻断线程运维,你不点击alert框的鲜明按键下贰个alert就不会油可是生。

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

    图片 4

    看了下面那张图,是或不是认知到log的庞大之处了,上面大家来拜见console里面具体提供了何等方法能够供大家一直调节和测验时采取。

    图片 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用来出口调节和测量检验音讯

    用图来说话

    图片 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);

    图片 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);

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

    图片 9

    7、console.group出口一组新闻的最初

    8、console.groupEnd停止一组输出信息

    看您须求采取差别的输出方法来行使,假若上述多少个方式再同盟group和groupEnd方法来一块使用就足以输入形形色色的不一样式样的输出消息。

    图片 10

    嘿嘿,是否认为很奇妙啊!

    9、console.assert对输入的表明式实行预见,唯有表明式为false时,才输出相应的音讯到调控台

    图片 11

    10、console.count(那个艺术丰硕实用哦)当您想计算代码被实践的次数

    图片 12

    11、console.dir(那一个点子是自个儿时常使用的 可不知道比for in方便了有一些) 直接将该DOM结点以DOM树的构造进行输出,能够详细核查象的格局进步档等

    图片 13

    12、console.time 计时开头

    13、console.timeEnd  计时甘休(看了上面包车型大巴图你弹指间就感受到它的狠心了)

    图片 14

    14、console.profileconsole.profileEnd相称共同利用来查看CPU使用有关消息

    图片 15

    在Profiles面板里面查看就能够看出cpu相关应用音讯

    图片 16

    15、console.timeLineconsole.timeLineEnd相配共同记录一段时间轴

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

    上述办法只是自己个人知道罢了。要是想查看具体API,能够上合法看看,具体地址为:

     

    下边介绍一下调整台的一对神速键

    1、方向键盘的上下键,大家一用就知道。举个例子用上键就约等于选取上次在调控台的输入符号

    2、$_指令归来近些日子二次表明式实行的结果,成效跟按提升的方向键再回车是大同小异的

    图片 17

    上面的$_需求通晓其奥义技艺使用十一分,而$0~$4则意味着了不久前5个你选择过的DOM节点。

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

    图片 18

    3、Chrome 调控高雄原生辅助类jQuery的选用器,也等于说你能够用$累加熟知的css选取器来摘取DOM节点

    图片 19

    4、copy经过此命令能够将要调整台获取到的从头到尾的经过复制到剪贴板

    图片 20

    (哈哈 刚刚从调节台复制的body里面包车型客车html能够专擅粘贴到哪 举例记事本  是否感到功用很强劲)

    5、keys和values 前面一个重临传入对象具备属性名组成的数量,后面一个重临全体属性值组成的数组

    图片 21

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

    图片 22

     

     

    正文转自Chrome 控制台console的用法

    6、monitor & unmonitor

    monitor(function),它接受叁个函数名作为参数,举个例子function a,每次a被实行了,都会在支配台出口一条新闻,里面含有了函数的称呼a及实行时所传诵的参数。

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

    图片 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 更改输出文字的体制

    图片 24

    2、利用调节台出口图片

    图片 25

    3、钦点输出文字的体裁

    图片 26

    最后说一下chrome调整台叁个简易的操作,怎样查看页面成分,看下图就领会了

    图片 27

    您在决定台轻松操作贰遍就明白了,是或不是认为非常粗大略!

    赞 6 收藏 评论

    图片 28


    先的简约介绍一下chrome的调整台,展开chrome浏览器,按f12就足以轻易的开荒调控台

    图片 29

    世家能够看见调节台里面有一首诗还应该有别的消息,假若想清空调节台,能够点击左上角那三个

    图片 30

    来清空,当然也得以透过在决定台输入console.clear()来落到实处清空气调节器控台音讯。如下图所示

    图片 31

    现行反革命一经叁个场地,假设四个数组里面有广大的成分,不过你想明白各样成分具体的值,那时候想想假如您用alert那将是多惨的一件事情,因为alert阻断线程运维,你不点击alert框的显著按键下贰个alert就不会油不过生。
    上面大家用console.log来替换,感受一下它的魅力。

    图片 32

    看了上边那张图,是还是不是认识到log的无敌之处了,上边大家来探问console里面具体提供了何等方法能够供大家一直调试时使用。

    图片 33

    最近调整台方法和品质有:
    ["$$", "$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用于出口调节和测量试验音信
    用图来发话


    图片 34

    console对象的地点5种方法,都可以使用printf风格的占位符。可是,占位符的花色少之又少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和指标(%o)两种。
    console.log("%d年%d月%d日",贰零壹壹,3,26);console.log("圆周率是%f",3.1415926);

    图片 35

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

    图片 36

    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>

    图片 37

    7、console.group出口一组音讯的始发
    8、console.groupEnd甘休一组输出音信
    看您供给选取差异的出口方法来使用,假若上述八个点子再协作group和groupEnd方法来一同利用就足以输入有滋有味的不等款式的输出信息。

    图片 38

    哈哈哈,是否认为很神奇啊!
    9、console.assert对输入的表明式举行预见,独有表明式为false时,才输出相应的音讯到调节台

    图片 39

    10、console.count(这些措施丰富实用哦)当您想总计代码被实施的次数

    图片 40

    11、console.dir(那个法子是自家临时利用的 可不知道比for in方便了稍稍)直接将该DOM结点以DOM树的布局实行输出,能够详细核查象的章程提升端等

    图片 41

    12、console.time 计时开班
    13、console.timeEnd 计时结束(看了上边包车型地铁图你须臾间就感受到它的决定了)


    图片 42

    14、console.profile和console.profileEnd合营共同行使来查看CPU使用有关音信

    图片 43

    在Profiles面板里面查看就能够看出cpu相关应用音信

    图片 44

    15、console.timeLineconsole.timeLineEnd卓殊协同记录一段时间轴
    16、console.trace 货仓追踪相关的调度
    上述方法只是本人个人精晓罢了。若是想查看具体API,可以上合法看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api
    调节台的片段飞速键
    1、方向键盘的上下键,我们一用就掌握。举例用上键就一定于选择上次在调节台的输入符号
    2、$_一声令下归来近些日子一次表明式试行的结果,作用跟按提升的方向键再回车是同等的

    图片 45

    上面的$_
    亟待精晓其奥义手艺选拔合适,而0
    4则表示了近年5个你挑选过的DOM节点。
    哪些看头?在页面右击选用检查核对成分
    ,然后在弹出来的DOM结点树下面随意点选,这么些被点过的节点会被记录下来,而$0
    会回去前段时间贰回点选的DOM结点,依此类推,$1再次来到的是拔尖次点选的DOM节点,最多保留了5个,假诺远远不足5个,则重临undefined

    图片 46

    3、Chrome 调节台南原生扶助类jQuery的采取器,也正是说你能够用$
    丰硕纯熟的css选拔器来挑选DOM节点

    图片 47

    4、copy透过此命令能够将要调节台获取到的原委复制到剪贴板

    图片 48

    (哈哈 刚刚从调节台复制的body里面包车型客车html能够放肆粘贴到哪, 比如记事本, 是否认为作用很强劲)
    5、keys和values前面三个再次来到传入对象具有属性名组成的数据,前者重临全体属性值组成的数组

    图片 49

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

    图片 50

    6、monitor & unmonitor
    monitor(function),它接受八个函数名作为参数,例如function a
    ,每次a
    被实行了,都会在支配台出口一条音讯,里面含有了函数的名称a
    及实行时所传颂的参数。
    而unmonitor(function)便是用来终止那第一监狱听。

    图片 51

    看了这张图,应该精晓了,也便是说在monitor和unmonitor中间的代码,实施的时候会在调整台出口一条音讯,里面包括了函数的名称a
    及实行时所传诵的参数。当免除监视(约等于实行unmonitor时)就不再在支配台出口消息了。
    $ // 简单明了正是 document.querySelector 而已。
    $$ // 老妪能解就是 document.querySelectorAll 而已。
    $_ // 是上八个表达式的值
    0−
    4 // 是多年来5个Elements面板选中的DOM成分,待会会讲。
    dir // 其实就是 console.dir
    keys // 取对象的键名, 重回键名组成的数组
    values // 去对象的值, 重返值组成的数组

    上面看一下console.log的片段技艺
    1、重写console.log 更换输出文字的体制

    图片 52

    2、利用调节台出口图片

    图片 53

    3、钦赐输出文字的体裁

    图片 54

    末了说一下chrome调控台三个总结的操作,怎么样查看页面成分,看下图就知晓了

    图片 55

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:开辟者工具使用

    关键词:

上一篇:刨根问底HTTP和WebSocket协议

下一篇:没有了