澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

Chrome 浏览器 Javascript 调节和测量试验参考
分类:网页制作

Chrome调节台 如何调节和测量检验Javascript

2015/01/12 · JavaScript · Chrome

原稿出处: ctriphire   

地点的篇章一度大致介绍了瞬间console对象实际有哪些方面以及着力的行使,上面简介一下怎么着运用好chrome调控台那一个神器好好调节和测量检验javascript代码(那几个才是大家真的能用到实处的地点)

1、先说一下源码定位

我们开荒测验网页   见到页面右下方有三个推荐介绍的Logo吗?右击推荐Logo,采取调查成分,张开谷歌(Google)控制台,如下图所示

图片 1

咱俩明天想掌握votePost方法到底在哪?跟着笔者那样做,在Console面板里面输入votePost然后回车

图片 2

直接点击上Logo红的链接,调节台将确定地点到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

来源:    多谢小编分享~~·

此小说翻译自developers.google.com/web/tools/chrome-devtools/javascript/reference,是对 chrome 下调节和测量检验 javascript 的工具和议程介绍。

那篇小说是基于这两天 chrome 稳固版(19.0.1084.52 m)写的, 因为 google 也在相连善chrome developer tool, 所以 chrome 版本不相同或然稍不相同. 一些快速键也是 windows 上的, mac 下的应该如出一辙.

调和 js 须要整合浏览器断点操作,具体可知作者的上一篇作品: 选拔断点调节和测验代码。

例行的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不关乎了.


1. Beautify Javascript

js 文件在上线前日常都会缩减下, 压缩的 javascript 大致从未可读性, 大致不能够设定断点. 在 Scripts 面板上边有个 Pretty print 开关(这种标志{}), 点击会将精减 js 文件格式化缩进规整的文书, 这时候在设定断点可读性就大大进步了.

图片 9

图片 10

打上断点之后,需求操作对应图标进行调试,图标如下:

2. 翻看成分绑定了哪些事件

在 Elements 面板, 选中两个成分, 然后在右边的 Event Listeners 下边会按类型出那一个元素相关的风浪, 也便是在事件捕获和冒泡阶段会经过的那些节点的事件.

在 Event Listeners 右边下拉开关中可以选拔 Selected Node Only 只列出这些节点上的事件

进展事件后会呈现出那几个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件管理函数所在行, 假如 js 是收缩了的, 能够先 Pretty print 下, 然后再查看绑定的事件.

图片 11

图片 12

3. Ajax 时中断

在 Scripts 面板侧面有个 XHPRADO Breakpoints, 点左侧的 + 会加多多个 xhr 断点, 断点是基于 xhr 的 url 相称中断的, 借使不写相配准则会在富有 ajax, 这些匹配只是轻松的字符串查找, 发送前半涂而废, 在行车制动器踏板的前边再在 Call Stack 中查看时非常地点倡导的 ajax 要求

从左到右分别是:

4. 页面事件中断

除去给设定常规断点外, 仍是能够在某一一定事件发生时暂停(不针对成分) , 在 Scripts 面板侧边, 有个 伊夫nt Listener Breakpoints, 这里列出了支撑的具备事件, 不独有 click, keyup 等事件, 还帮衬 Timer(在 setTimeout setInterval 处理函数最初试行时停顿), onload, scroll 等事件.

图片 13

Pause/Resume script execution:暂停/苏醒脚本实施(程序推行到下一断点结束)。

5. Javascript 万分时制动踏板

Pretty print 侧面的开关是翻开 js 抛相当时暂停的按键, 有二种格局:在享有特别处中断, 在未捕获的特别处中断. 在至极处中断后就能够查阅为啥抛出分外了

Step over next function call:实践到下一步的函数调用(实践业前断点所在行,跳到下一行)。

6. DOM Level 3 Event 事件中断

在 Elements 面板, 选中一个成分右键, 有多个挑选:Break on subtree modifications, Break on attributes modifications, 那四个对应 DOM Level 3 伊夫nt 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出全部 level3 的 event 中断

图片 14

Step into next function call:踏入当前函数。

7. 怀有 js 文件中检索&查找 js 函数定义

  • 在 chrome developer tool 打开的情事下, 按 ctrl + shift + F, 在经过 js 钩子查找代码地方时很有用, 查找支持正则表明式
  • 研究函数定义: ctrl + shift + 0 (在 Scripts panel 下)
  • 查找文件: ctrl + o  (在 Scripts panel 下)
  • 越来越多急忙键: 在 chrome developer tool 中按 ? 查看支持

图片 15

Step out of current function:跳出当前执行函数。

8. command line api

  • $(id_selector) 那个与页面是还是不是有 jQuery 非亲非故
  • $$(css_selector)
  • $0, $1, $2, $3, $4
    1. Elements 面板中前段时间当选的 5 个要素, 最终选拔的是 $0
    2. 以此 5 个变量时先进先出的
  • copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
  • monitorEvents(object[, types])/unmonitorEvents(object[, types])
    1. 当 object 上 types 事件发生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console) 或 点击
  • 更多 command line api 点击

图片 16

Deactive/Active all breakpoints:关闭/开启全部断点(不会收回)。

9. 实时修改 js 代码生效

  • 页面外界 js 文件在 Scripts 面板中能够直接更换, 改完后按 ctrl + S 保存, 会马上生效
  • 注意
    1. 经测量检验不帮助 html 页面中 js 修改
    2. 由此 Pretty print 格式化的本子不协助修改

Pause on exceptions:非常情况自动断点设置。

10. console 中举行的代码可断点

在 console 中输入代码的终极一行加上 //@ sourceUSportageL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外界 js 文件一律了

图片 17

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js

Pause/Resume script execution( F8)

在断点暂停后,点击苏醒脚本试行,直到下贰个断点甘休。

长按图标,会冒出深灰的播放开关,鼠标移上去再甩手左键,会忽视全体的断点,强制渲染完整的页面。


Step over next function call (F10)

当在一行代码中间断,代码里带有多少个与正在调节和测量试验的难点非亲非故的函数时,能够点击此Logo直接分析该函数,并非跻身函数内部逐行执行debug操作。

比如说,当你在 debug 以下代码:

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

}

function getName() {

var name = app.first + ' ' + app.last; // B

return name; // C

}

借使未来是在 A 处暂停。点击 '跳过下个函数调用' Logo,浏览器会分析被跳过的函数里的有所代码(这里是 B 和 C),然后在 D 处再一次中止。


Step into next function call ( F11)

当断点找到了要 debug 的适龄函数,点击Logo步入此函数内部,逐行查看深入分析内部的变量值和办法。

例如:

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

那时在 A 处照拂暂停了,而 A 处正是与主题素材巢倾卵破的函数,点击步入函数里,会在 B 处暂停,再一次点击会在 C 处暂停,同期 B 处会展现 'name' 变量的值。


Step out of current function (Shift + F8)

跻身到二个与正在 debug 的标题毫不相关的函数后,能够点击此Logo分析函数剩下的代码,跳出函数到下一行。

例如:

function updateHeader() {

var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

现今在 B 处暂停,step out 之后,浏览器解析 getName() 函数剩下的代码(C),然后在 D 处再度中止。


Run all code up to a certain line

若果你在 debug 三个十分长的函数,里面含有了累累与主题素材非亲非故的代码,须要区分出来。

第一在函数里设置第贰个断点,奉行至暂停,然后,有二种办法 debug :

    1、使用 step into function 逐行分析查看结果,会浪费广大时日;

    2、根据结果判定什么是不行的代码,高出它们再设置下贰个断点,使用 resume script 推行到下一个断点;

    3、依照结果决断什么是不著见效的代码,在下贰个内需暂停的地点,右键行数,接纳“continue to here”,浏览器会平素深入分析到那一行并暂停,推荐的措施。


View the current call stack

在一行代码里暂停时,能够在 Call Stack 面板查看是哪些栈将您带到了眼下断点(达到当前函数调用了何等函数)。借使不是在一行代码里暂停, Call Stack 面板是绝非内容的。

假若要查看异步函数,可以勾选 Async 。(在 windows 版本中绝非此选项,暗许彰显异步函数)。

点击函数会跳到此函数调用的地方。赤褐箭头是现阶段翻开的函数。

图片 18


Copy stack trace

在 Call Stack 面板里右键,选拔 Copy stack trace 可以将面板里的 stack 音信复制到 clipboard。

图片 19

复制的音讯格式如下(函数名称、在代码里的行数):

getNumber1(get-started.js:35)

inputsAreEmpty(get-started.js:22)

onClick(get-started.js:15)


Restart the top function of the call stack

在调度函数的进度中,想回到函数的发端重新 debug 的时候,能够在 Call Stack 面板中对应的函数上右键,选择 Restart Frame 而没有须要在早先打断点。Call Stack 面板里是断点函数以及所涉及到的其余函数,最最上端的函数是眼下的断点函数。

例如:

function factorial(n) {

    var product = 0; // B

    for (var i = 1; i <= n; i++) {

    product += i;

};

return product; // A

}

现在在 A 处暂停,点击 Restart Frame 之后,会在 B 处暂停。

图片 20


Ignore a script or pattern of scripts

在 debug 进程中,能够挑选忽略部分剧本,不在 Call Stack 中显得,在 step into function 的时候也不会进入被忽视的剧本。

例如:

function animate() {

    prepare();

    lib.doFancyStuff(); // A

    render();

}

A 是你确认与当下难题非亲非故的第三方库,这就能够将它关入黑盒子里忽略掉。

在编辑区操作: 在 Source Tab 中双击张开文件 -> 在文件编辑区右键,采纳 Blackbox script 。

图片 21

在Call Stack 面板操作: 在 Call Stack 面板中找到相应的剧本 -> 右键选取 Blackbox script 。

图片 22

在调整台设置黑盒: 调控台右上角找到 'Customize and control DevTools' Logo(或按F1) -> 采用 Blackboxing tab -> 点击 Add pattern ->  在对话框中输入脚本名字或脚本名字的正则表明式 -> 点击 Add

图片 23


Change thread context

在网址有 web workers 或然 service workers 线程的时候,要求各自己检查看主线程和那三个线程的 context ,能够在 Threads 面板切换。

图片 24

上图黄色箭头处是现阶段线程的 context , 可以点击切换别的线程。


View and edit local, closure, and global properties

在断点暂停时,能够在 Scope 面板里查看和编写制定局部、闭包和大局范围内的属性和变量的值。不会议及展览示数不胜数的性质。

双击三个属性值能够输入新的值。

图片 25


Run snippets of debug code from any page

尽管在调节和测验中,需求贰回次在决定台输入同样的原委的话,能够利用 Snippets(代码片段) 作用减弱重复劳动。代码片段是你在DevTools中编辑、存款和储蓄和运营的可进行脚本。

Snippets 是全局的,在浏览器的富有标签页都能找到和平运动作。

切切实实可查阅 从其余页面运转代码片段


Watch the values of custom JavaScript expressions

在 debug 进程中,若是愿意器重入眼有个别变量的值(实际不是在 Scope 面板里少有点开),能够步向 Watch 面板。Watch 面板里的值会在实行代码时自动刷新。

图片 26

'+' Logo创设新的 expression;侧面是刷新Logo,手动刷新变量的值;鼠标移动到变量上,在右臂会冒出删除Logo。


Make a minified file readable

能够将最小化了的代码还原成对人团结的形式。

点击代码编辑区域左下角的 '{}' Logo。

图片 27


Edit a script

比方要尝尝修复 bug , 无需切换来编辑器修改,再刷新当前页面。你能够直接在代码编辑区域修改代码然后保留看看修改后的效率。假诺是最小化了的代码,能够先还原成对人和好的格式。

操作: 修改代码 -> 按 Command + S (mac)或 Ctrl + S (windows, Linux)保存修改 -> 查看效果。

图片 28

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:Chrome 浏览器 Javascript 调节和测量试验参考

上一篇:签到工程:当代Web应用中的身份验证工夫 下一篇:没有了
猜你喜欢
热门排行
精彩图文