您的位置:时时彩走势图 > 时时彩走势图web前端 > 展开事件后会显示出这个事件是在哪个文件中绑

展开事件后会显示出这个事件是在哪个文件中绑

2020-03-01 14:01

Google的debug一向是个斯拉维尼亚语的,其实这些对于一些前端开辟者来讲比较麻烦,其实用多了就家常便饭了的。比起Firefox的firebug来讲依旧略略出入的,然而Google据有内部存款和储蓄器远比FF小。所以掌握好Google的debug依旧必得的。假如你想更通透到底的钻研下,能够看下先前分享过一篇的随笔“前端开拓者调节和测验工具Chrome Workspace”。好呢,上面是自己在天猫UED上看出的一篇小说,讲的是关于Google的Chrome developer tool调节和测量试验才具,如下:

  1. BeautifyJavascript

js 文件在上线前日常都会优惠扣下, 压缩的 javascript 差不离从不可读性, 差非常的少不可能设定断点. 在 Scripts 面板上面有个 Pretty print 开关, 点击会将核减 js 文件格式化缩进规整的文书, 那时在设定断点可读性就大大提升了.

  1. 查看成分绑定了什么事件

在 Elements 面板, 选中二个成分, 然后在右侧的 Event Listeners 上边会按类型出那么些元素相关的风浪, 也正是在事件捕获和冒泡阶段会通过的这些节点的事件.

在 伊芙nt Listeners 侧面下拉按键中得以选拔 Selected Node Only 只列出那一个节点上的平地风波

展开事件后会展现出这么些事件是在哪些文件中绑定的, 点击文件名会间接跳到绑定事件管理函数所在行, 假设 js 是减削了的, 能够先 Pretty print 下, 然后再查看绑定的事件.

3.Ajax 时中断

在 Scripts 面板左侧有个 XHTiggo Breakpoints, 点侧面的 + 会增添三个 xhr 断点, 断点是基于 xhr 的 url 相配中断的, 假诺不写相配规则会在装有 ajax, 这么些相称只是简短的字符串查找, 发送前暂停, 在脚刹踏板的后边再在 Call Stack 中查看时拾分地方倡导的 ajax 须求

4.页面风浪中断

除开给设定常规断点外, 还足以在某一一定事件时有发生时中断 , 在 Scripts 面板侧边, 有个 Event Listener Breakpoints, 这里列出了扶持的装有事件, 不仅仅 click, keyup 等事件, 还帮助 Timer(在 setTimeout setInterval 处理函数伊始实践时停顿卡塔尔国, onload, scroll 等事件.

5.Javascript 非常时暂停

Pretty print 侧面的开关是翻开 js 抛十分时暂停的按钮, 有两种格局:在具有特别处中断, 在未捕获的充裕处中断. 在十分处中断后就能够查看为何抛出拾叁分了

6.DOM Level 3 Event 事件中断

在 Elements 面板, 选中叁个成分右键, 有五个筛选:Break on subtree modifications, Break on attributes modifications, 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified,DOMSubtreeModified事件 在 Scripts 面板 DOM Breakpoints 处会列出富有 level3 的 event 中断

7.具备 js 文件中检索&查找 js 函数定义

在chrome developer tool展开的情况下, 按 ctrl + shift + F, 在经过 js 钩子查找代码地点时很有用, 查找支持正则表明式

招来函数定义: ctrl + shift + 0

查找文件: ctrl + o

更加多神速键: 在 chrome developer tool 中按 ? 查看帮忙

8.command line api

$ 这些与页面是不是有 jQuery 非亲非故

$0, $1, $2, $3, $4

Elements 面板中近来选中的 5 个因素, 最终选项的是 $0

以此 5 个变量时先进先出的

copy 复制 str 到剪切板, 在断点时复制变量时有用

monitorEvents/unmonitorEvents

当 object 上 types 事件产生时在 console 中输出 event 对象

更多 console api 请 console.log 或点击

更多 command line api点击

  1. 实时纠正 js 代码生效

页面外部 js 文件在 Scripts 面板中得以向来更换, 改完后按 ctrl + S 保存, 会马上生效

经测量检验不扶持 html 页面中 js 校订

透过 Pretty print 格式化的脚本不支持改良

  1. console 中奉行的代码可断点

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

functionhello(){alert;}//@sourceURL=hello.js

参照他事他说加以考查链接

chrome developer tool doc

Google I/O 2011: Chrome Dev Tools Reloaded

本文由时时彩走势图发布于时时彩走势图web前端,转载请注明出处:展开事件后会显示出这个事件是在哪个文件中绑

关键词: