快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 展开事件后会显示出这个事件是在哪个文件中绑

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

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2020-03-14 07:25

谷歌的debug一直是个英文的,其实这个对于一些前端开发者来说比较麻烦,其实用多了就习惯了的。比起Firefox的firebug来说还是有些差距的,但是谷歌占用内存远比FF小。所以掌握好谷歌的debug还是必须的。如果您想更深入的研究下,可以看下先前分享过一篇的文章“前端开发者调试工具Chrome Workspace”。好吧,下面是我在淘宝UED上看到的一篇文章,讲的是关于谷歌的Chrome developer tool调试技巧,如下:

来源:    感谢作者分享~~·

原文地址:

  1. BeautifyJavascript

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.

觉得写的很适合web开发的新手

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮, 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.

Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为:

  1. 查看元素绑定了哪些事件

1. Beautify Javascript

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

金沙娱场app下载 1

金沙娱场app下载 2

  • Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
  • Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。
  • Source 标签页:用于查看和调试当前页面所加载的脚本的源文件。
  • TimeLine 标签页: 用于查看脚本的执行时间、页面元素渲染时间等信息。
  • Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。
  • Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。
  • Audits 标签页:用于优化前端页面,加速网页加载速度等。
  • Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

2. 查看元素绑定了哪些事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

金沙娱场app下载 3

1.代码格式化

一般情况下上线前 js 文件在都会压缩一下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Sourse 面板下面打开一个压缩的js文件,会有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化, 方便设断点,提高可读性。

金沙娱场app下载 4
金沙娱场app下载 5

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

3. Ajax 时中断

在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

2.查看元素绑定事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行。

金沙娱场app下载 6

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

4. 页面事件中断

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.

金沙娱场app下载 7

金沙第一娱乐娱城官网 ,3.Ajax 时中断

在 Sourse 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

3.Ajax 时中断

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了

4.页面事件中断

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Sourse 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件。

在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

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

金沙娱场app下载 8

5.Javascript 异常时中断

在 Chrome 开发者工具中,可以开启运行时错误自动暂停这一功能,从而使开发者工具能在发现运行时脚本异常时,在异常脚本处暂停运行,跳转至调试页面,供开发人员进一步查找该运行时异常产生的原因。

自动暂停按钮的下方有一个选项,Pause On Caught Exceptions,如果勾选上,则即使所发生运行时异常的代码在 try/catch 范围内,Chrome 开发者工具也能够在错误代码处停住。

金沙娱场app下载 9

4.页面事件中断

7. 所有 js 文件中搜索&查找 js 函数定义

  • 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式
  • 查找函数定义: ctrl + shift + 0 (在 Scripts panel 下)
  • 查找文件: ctrl + o  (在 Scripts panel 下)
  • 金沙娱场app下载 ,更多快捷键: 在 chrome developer tool 中按 ? 查看帮助

金沙娱场app下载 10

6.DOM Level 3 Event 事件中断

在 Elements 面板, 选中一个元素右键, Break on 有两个选项:subtree modifications, attributes modifications, 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断。

金沙娱场app下载 11

除了给设定常规断点外, 还可以在某一特定事件发生时中断 , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.

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

金沙娱场app下载 12

7.在 js 文件中搜索&查找 js 函数定义

  • 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找可以支持正则表达式
  • 查找函数定义: ctrl + shift + 0 (在 Sources panel 下)
  • 查找文件: ctrl + o (在 Sources panel 下)
  • 更多快捷键: 在 chrome developer tool 中按 ? 查看帮助

金沙娱场app下载 13

5.Javascript 异常时中断

9. 实时修改 js 代码生效

  • 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
  • 注意
    1. 经测试不支持 html 页面中 js 修改
    2. 经过 Pretty print 格式化的脚本不支持修改

8.command line api

两种类型的命令行:
1. 单行模式。单行模式是chrome的默认命令行模式,它允许我们一次输入一行代码。单行模式的优点是支持自动完成。
这个很强大的,就像在终端中一样,你还可以使用上下键来调入最近使用过的命令。
2. 多行模式。多行模式是单行模式的加强版,它允许我们一次输入多行代码并且马上执行。

例子:

  • console.group()和console.groupEnd() 分组显示
  • console.dir()可以显示一个对象所有的属性和方法
  • console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。
  • console.trace()用来追踪函数的调用轨迹。
  • console.time()和console.timeEnd(),用来显示代码的运行时间。

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了

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

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了

金沙娱场app下载 14

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

6.DOM Level 3 Event 事件中断

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:展开事件后会显示出这个事件是在哪个文件中绑

关键词:

上一篇:如果图片优化得好,最小单位由像素构成

下一篇:没有了