当前位置:美高梅官方网站59599 > 前端科技 > 回到顶部,上面的文章

回到顶部,上面的文章

文章作者:前端科技 上传时间:2019-10-13

Chrome调节台 怎样调节和测量检验Javascript

2015/01/12 · JavaScript · Chrome

原来的文章出处: ctriphire   

地点的稿子一度大概介绍了一晃console对象实际有哪些方面以至大旨的施用,上面简要介绍一下怎么样采用好chrome调节台那一个神器好好调节和测验javascript代码(这几个才是我们确实能用到实处的地点)

1、先说一下源码定位

世家展开测量检验网页   见到页面右下方有贰个引入的Logo吗?右击推荐Logo,采纳核实元素,展开谷歌调整台,如下图所示

图片 1

作者们现在想知道votePost方法到底在哪?跟着小编这么做,在Console面板里面输入votePost然后回车

图片 2

一贯点击上海体育场合标红的链接,调节台将一定到Sources面板中,显示如下图所示

图片 3

世家看了上边那么些图片之后估摸头都要晕了呢,这么多js都整在一行,令人怎么看呀,不用操心,按下图操作就能够(也正是点击中间面板左下方的Pretty print就行了)

图片 4

那时候大家再回来Console面板时会惊喜的开掘原先的链接前边的1未来成为91了(其实这里的数字1恐怕91正是象征votePost方法在源码中的行号 )今后看见Pretty print按键的兵不血刃之处了呢

略知一二了怎样查看某三个按键的源码,那接下去的专业正是调度了,调节和测量试验第一步供给做的就是安装断点,其实设置断点非常粗略,点击一下上海教室所示的92就可以,那时你会发现92行号旁边会多了三个Logo,这里解释一下为何不在91处设置断点,你能够试下,事实上根本就无语在91处上安装断点,因为它是函数的定义处,所以没办法在这里设置断点。

图片 5

安装好了断点后,你就能够在左手Breakpoints方框里见到刚刚安装的断点。

作者们先来介绍一下用到的调治快速键吧(事实上大家也足以毫不下表所示的飞速键,直接点击上海教室所示右边栏最上层的一排开关来张开调整,具体用哪个按键,把鼠标放到按键上方一会就交易会示它对应的唤醒)

 

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

个中值得说的是,当大家点击“推荐”按钮进行调解的时候会开采,不管大家是按的F10实行调节和测量检验照旧按F11张开稳步调节和测量试验,都没办法展开$.ajax函数内部,固然大家在函数内部安装了断点也绝非章程进去,这里按F8才是真的起效果的,不相信你尝试。

当我们在调整的时候,侧面Scope Variables里面会展示当前成效域以至他的父级作用域,乃至闭包。你不单能在侧面Scope Variables(变量成效域) 一栏处见到眼下变量,并且还是能把鼠标直接移到大肆变量上,就能够查阅该变量的值。

用图说话(哈哈)

图片 6

 

恰好我们介绍的只是在html里面能够看收获它绑定了onclick事件,那样我们就找到它绑定的js函数,假如它是在jQuery页面加载成功函数里面绑定的,那时候大家怎么明白它绑定的是哪些js函数呢,假设我们不掌握绑定的js函数就愈加不用说调节和测量检验进去了

下面介绍一下什么样查看,还是以刚刚这多少个测量检验网页为例子吗,不过本次我们来看“提交议论”作声明呢,

右击“提交批评”–>核查成分,我们可以见到的看看在这里个开关上未绑定任何事件。在Console面板内输入如下代码

JavaScript

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

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

正如图所示:

图片 7

规行矩步上述介绍的不二等秘书技定位到实际的blog-common.js里面,找到postComment  然后一少有的找到具体的代码,再设置断点就好了。

最后介绍一下一个神器,很好用的debugger

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

赞 1 收藏 评论

图片 8

 

读书目录

  • 写在近年来
  • Google说了算台Elements面板
  • 翻看成分上绑定的事务
  • 体制操作
  • 总况
  • console.log
  • console.info
  • console.error
  • console.warn
  • console.debug
  • console.dirxml
  • console.group和console.groupEnd
  • console.assert
  • console.count
  • console.dir
  • console.time和console.timeEnd
  • console.profile和console.profileEnd
  • console.timeLine和console.timeLineEnd
  • console.trace
  • 方向键盘的上下键
  • $_
  • Chrome 调整桃园原生接济类jQuery的选取器
  • copy
  • keys和values
  • console.table
  • monitor & unmonitor
  • Console.log样式
  • 假诺你认为本篇博文对你有所收获,认为小女人还算用心,请点击右下角的 [推荐],谢谢!

归来最上端

写在前方

我们都有用过各体系型的浏览器,每一个浏览器都有和好的特色,本人拙见,在小编用过的浏览器此中,笔者是最爱怜Chrome的,因为它对于调节和测验脚本及前端设计调节和测验都有它比别的浏览器有过之而无比不上的地方。大概大家对console.log会有早晚的打听,心里难免会想调节和测验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息吗,下边我就介绍一些调试的入门技能,令你爱上console.log

先的简易介绍一下chrome的调整台,打开chrome浏览器,按f12就足以轻巧的开垦调整台

图片 9

世家能够观察调整台里面有一首诗还会有任何新闻,要是想清中央空调整台,能够点击左上角那多少个图片 10来清空,当然也得以通过在决定台输入console.clear()来完结清空气调节器节台消息。如下图所示

图片 11

现行反革命一经二个场地,如若二个数组里面有广大的成分,可是你想掌握各类成分具体的值,那时候想想假诺您用alert那将是多惨的一件业务,因为alert阻断线程运转,你不点击alert框的规定按键下二个alert就不会并发。

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

图片 12

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

看了上边那张图,是还是不是认知到log的强有力之处了,下边大家来拜望console里面具体提供了何等措施能够供大家一贯调节和测验时选取。

图片 13

1、先说一下源码定位

世家开发测验网页   见到页面右下方有三个推荐的Logo吗?右击推荐Logo,接纳审核成分,展开Google调整台,如下图所示

图片 14

咱俩明日想清楚votePost方法到底在哪?跟着自个儿如此做,在Console面板里面输入votePost然后回车

图片 15

直接点击上Logo红的链接,调节台将定点到Sources面板中,展示如下图所示

图片 16

大家看了地点那一个图形之后推断头都要晕了吧,这么多js都整在一行,令人怎么看呀,不用顾虑,按下图操作就可以(也正是点击中间面板左下方的Pretty print就行了)

图片 17

那时候我们再回去Console面板时会惊喜的意识原先的链接后边的1现在改为91了(其实这里的数字1如故91便是意味着votePost方法在源码中的行号 )今后见到Pretty print按键的雄强之处了呢

通晓了怎么着查看某二个开关的源码,那接下去的做事就是调解了,调节和测量试验第一步需求做的就是安装断点,其实设置断点很轻易,点击一下上海体育场所所示的92就能够,那时你会开掘92行号旁边会多了多少个Logo,这里解释一下为啥不在91处设置断点,你能够试下,事实上根本就无助在91处上设置断点,因为它是函数的定义处,所以不得已在这里设置断点。

图片 18

设置好了断点后,你就能够在右手Breakpoints方框里见到刚刚安装的断点。

咱俩先来介绍一下用到的调节和测量试验飞快键吧(事实上我们也足以绝不下表所示的火速键,直接点击上海体育地方所示左边栏最上层的一排按钮来拓宽调整,具体用哪些开关,把鼠标放到按键上方一会就能够显示它对应的唤起)

 

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

当中值得说的是,当大家点击“推荐”按键进行调整的时候会发掘,不管我们是按的F10实行调节和测量试验依旧按F11扩充逐级调试,都没办法张开$.ajax函数内部,就算大家在函数内部安装了断点也尚未章程进去,这里按F8才是真的起效果的,不相信你尝试。

当大家在调整的时候,左边Scope Variables里面会来妥善前功用域乃至他的父级功效域,以致闭包。你非但能在侧边Scope Variables(变量成效域) 一栏处看见日前变量,何况还是能把鼠标直接移到自由变量上,就能够查阅该变量的值。

用图说话(哈哈)

图片 19

 

正要大家介绍的只是在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]); // 获取绑定的事件

平日来讲图所示:

图片 20

根据上述介绍的法子定位到具体的blog-common.js里面,找到postComment  然后一难得的找到实际的代码,再设置断点就好了。

终极介绍一下贰个神器,很好用的debugger

万一你和谐写的代码,你实践的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

再次来到顶端

Google说了算台Elements面板

要想展开谷歌(Google)调控台,有二种艺术

  1. ctrl+shift+i
  2. f12

世家知道Elements面板最大的效果就是操作属性和更换html。这里本身再说有个别大家莫不不太熟知的个性,

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

那些效用是自己以为最棒玩的,你们能够实行啊。

上面来具体说说几个复杂点的效劳

回到顶上部分

翻看成分上绑定的事情

  • 暗中认可会列出 All Nodes, 这一个回顾代理绑定在该节点的父/祖父节点上的风浪, 因为在在冒泡或捕获阶段会经过该节点
  • Selected Node Only 只会列出当前节点上绑定的平地风波
  • 各种事件会有对应的多少个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

 

  • handler是管理函数, 右键能够观望这一个函数定义的职位, 经常 js 库绑定事件会包一层, 所以这里很难找到相应handler
  • isAtribute 注明事件是或不是通过 html 属性(类似onClick)格局绑定的
  • useCapture 是 addEventListener 的第多少个参数, 表明事件是以 冒泡 如故捕获 顺序实践

图片 21

再次来到最上部

体制操作

能够因而 ctrl + z 撤废

图片 22

再次来到顶上部分

总况

现阶段调整台方法和属性有:

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

上边大家来每家每户介绍一下相继艺术主要的用途。

貌似情状下我们用来输入新闻的措施重借使用到如下多少个

回来最上部

console.log

用来出口普通信息

重返顶上部分

console.info

用以出口提醒性新闻

回到最上部

console.error

用于出口错误音信

回来顶端

console.warn

用于出口警报信息

归来最上端

console.debug

用于出口调试音讯

用图来发话

图片 23

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

图片 24

%o占位符,能够用来查阅一个对象内部景观

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

图片 25

上面重点说一下console.log的有的才具

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

图片 26

图片 27;)

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;');

图片 28;)

出口的结果如下图所示:

图片 29

 

2、利用调节台出口图片

图片 30

3、钦点输出文字的样式

图片 31

归来最上端

console.dirxml

用来呈现网页的某些节点(node)所饱含的html/xml代码

图片 32;)

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

图片 33;)

图片 34

归来最上端

console.group和console.groupEnd

>输出一组音信的始发和出口截止一组输出音信

看您须要采用不一致的输出方法来行使,若是上述七个点子再协作group和groupEnd方法来共同利用就能够输入形形色色的两样样式的输出新闻。

图片 35

哈哈哈,是或不是以为很奇妙啊!

回来最上部

console.assert

对输入的表明式实行预知,独有表明式为false时,才输出相应的新闻到调节台

图片 36

回来顶端

console.count

(那几个办法十一分实用哦)当你想总结代码被实施的次数

图片 37

回去最上端

console.dir

(这些方法是本人反复使用的 可不知道比for in方便了不怎么) 直接将该DOM结点以DOM树的组织举行输出,能够详细核查象的主意发展等等

图片 38

归来顶端

console.time和console.timeEnd

计时上马三保计时告竣(看了上面包车型地铁图你弹指间就感受到它的决心了)

图片 39

回来顶上部分

console.profile和console.profileEnd

特别协同使用来查阅CPU使用相关音讯

图片 40

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

图片 41

再次来到最上部

console.timeLine和console.timeLineEnd

同盟协同记录一段时间轴

回到最上部

console.trace

库房追踪相关的调节和测量试验

上述方法只是自身个人驾驭罢了。假如想查看具体API,能够上合法看看,具体地址为:

下边介绍一下调控台的有个别神速键

归来顶端

趋势键盘的上下键

我们一用就知晓。举例用上键就也正是选取上次在调整台的输入符号

回去顶端

$_

指令归来近年来贰遍表明式施行的结果,功能跟按升高的方向键再回车是同一的

图片 42

上面的$_必要明白其奥义工夫选取特别,而$0~$4则代表了这段日子5个你选择过的DOM节点。

什么样看头?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随意点选,那几个被点过的节点会被记录下来,而$0会回到前段时间三遍点选的DOM结点,就那样推算,$1再次回到的是一级次点选的DOM节点,最多保留了5个,假若相当不够5个,则赶回undefined

图片 43

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

看一下chrome调节台贰个粗略的操作,怎样查看页面成分,看下图就精通了

图片 44

您在调整台简单操作三回就通晓了,是或不是以为很轻松!

回来顶端

Chrome 调节新竹原生协助类jQuery的选用器

也正是说您可以用$增添熟知的css选拔器来采撷DOM节点

图片 45

归来顶端

copy

由此此命令能够就要调控台获取到的源委复制到剪贴板(设若在elements面板中选中有些节点,也足以一贯按ctrl+c推行复制操作)

图片 46

(哈哈 刚刚从调节台复制的body里面的html能够随意粘贴到哪 举个例子记事本 是否认为功能很有力)

再次来到最上端

keys和values

前面三个再次回到传入对象具有属性名组成的数量,后面一个重返全体属性值组成的数组

图片 47

归来最上部

console.table

图片 48

回来顶端

monitor & unmonitor

monitor(function),它接受二个函数名作为参数,比方function a,每次a被试行了,都会在支配台出口一条新闻,里面含有了函数的称呼a及进行时所传颂的参数。

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

图片 49

看了那张图,应该知道了,也正是说在monitor和unmonitor中间的代码,实施的时候会在支配台出口一条新闻,里面包罗了函数的称呼a及实践时所传诵的参数。当裁撤监视(也正是施行unmonitor时)就不再在支配台出口新闻了。

回到最上端

Console.log样式

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

说了上边一批公式,还是举个例证让您回忆深切一些,哈哈。

在支配台输入如下代码

图片 50;)

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;');

图片 51;)

输出的结果如下图所示:

图片 52

 

再次回到最上部

如果

 

本文由美高梅官方网站59599发布于前端科技,转载请注明出处:回到顶部,上面的文章

关键词: