(也得以帮您格式化自个儿本地的js卡塔尔(قطر‎,上边会按类型出这些成分相关的事件

澳门新葡8455最新网站 23

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

来源:澳门新葡8455最新网站,  
 感谢作者分享~~·

原文地址:

chrome 技巧 记录一些以前不太熟悉的,chrome不太

chrome已经不知道用了多少年了,但是还是有些技巧不熟悉,记录下有用的和自己不熟悉的

 

如何查看dom的绑定事件(查看jquery的绑定事件)

新版本的network的类型选项哪去了?

在Sources里面找需要的资源,在js文件里面找某个函数

格式化js,(也可以帮你格式化自己本地的js)

断点,给dom断点,xhr断点,异常断点

遇到的一些问题

  1. BeautifyJavascript

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

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

如何查看dom的绑定事件(查看jquery的绑定事件)

查看dom的绑定事件,这个是非常必须的一个技能.chrome支持也挺好

如下图所示,选中dom,在Event Listeners里面的listenersBody

澳门新葡8455最新网站 1

问题来了

listenersBody根本显示不完全啊,怎么办?

在listenersBody这一行,点鼠标右键,会出来弹框store as global variable

点击store as global variable,在console里面就会显示全整个函数了

澳门新葡8455最新网站 2

问题又来了

现在写js很多人都用jq,是看不到原始的绑定事件的

就我知道的而言,有2个办法是可以看到绑定事件的

1.下载chorme插件Visual-Event

好吧 问题又来了,chrome web store在国内压根就打不开

解决办法FQ咯,或者

从这个地址下载crx, 自己手动安装

装完Visual-Event后,点一下向眼睛一样的图标,鼠标放在需要查看的dom上就会显示出绑定的事件了

澳门新葡8455最新网站 3

2.通过dom的属性和$.cache方法来找

选择要查看事件的dom

查看他的属性(jquery+一段数字的属性)如下图

拿到属性值,在console选项卡里面输入$.cache[属性值]
展开就可以看到绑定的事件了

澳门新葡8455最新网站 4

澳门新葡8455最新网站 5

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

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

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

新版本的network的类型选项哪去了?

新的chrome里面是直接看不到分类的(documents,images,script,xhr…)

有个小漏斗,点开就可以看见了

澳门新葡8455最新网站 6

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

1. Beautify Javascript

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

澳门新葡8455最新网站 7

澳门新葡8455最新网站 8

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

在Sources里面找需要的资源,在js文件里面找某个函数

有时候你需要查找某个js文件,可以这样操作

1.打开Sources选项卡

2.按ctrl+p

3.输入你要查找的js文件名

当然这个不仅仅是智能查找js,html和css也可以查找

澳门新葡8455最新网站 9

有时候你需要查找js里面的某个函数

1.首先选中某个js文件(必须)

2.crtl+shift+o

如果不选中js文件 按crtl+shift+o就打开标签管理器了

澳门新葡8455最新网站 10

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

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

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

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

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

澳门新葡8455最新网站 11

1.代码格式化

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

澳门新葡8455最新网站 12
澳门新葡8455最新网站 13

格式化js,(也可以帮你格式化自己本地的js)

格式化js咯,大括号咯.

网络上的js都是被压缩合并过的,用大括号可以格式化网络上的js

当然用大括号也可以格式化本地的js,把本地的js粘贴到打开的js里面,按大括号即可

这个格式化的大括号只是在source选项卡里面才有

澳门新葡8455最新网站 14

在 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
只列出这个节点上的事件

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

澳门新葡8455最新网站 15

断点,给dom断点,xhr断点,异常断点

dom的断点

dom断点有3中形式

1.Subtree modifications (被监听的dom的子节点发生变化)

2.Attributes modifications (被监听的dom属性发生变化)

3.Node removal (当被监听的dom被删除的时候)

设置了这些断点后,当监听到变化的时候,会断点后发生变化的js的地方

比如删除,会断点到删除的js地方

如何设置断点了?

1.打开Element面板

2.选择一个dom元素,鼠标右键

3.选择break on… ,就会弹出3个断点方式了

如下图所示

澳门新葡8455最新网站 16

xhr断点

给某个xhr断点后可以进入发起请求的js的地方

操作如下

1.打开source选项卡

2.有一个XHR Breakpoints 的

3.后面有一个+号,点+号进行添加

可以对所有的xhr进行断点,如果只是想对某一个xhr进行断点,就输入他的地址,如图所示

如果要删除断点,选中某一条,鼠标右键删除即可

澳门新葡8455最新网站 17

异常断点

就是可以定位到js抛出异常的位置,方便查错咯

操作如下

1.进入socurce选项卡

2.点圆形的按钮,如下图所示

澳门新葡8455最新网站 18

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

4. 页面事件中断

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

澳门新葡8455最新网站 19

3.Ajax 时中断

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

遇到的一些问题

想下载插件,但是chrome web store 打不开怎么办?

我用的是chrome畅游版,可以FQ

我用了chrome官方插件pagespeed insights来测试网站的性能,可总是卡在中间?

那是因为墙的原因,FQ测试

怎么调试线上的js文件?

1。用fiddler替换

2。如果是js文件,可以格式话断点,如果不是加载的时候报错,都可以直接把原始没有压缩的代码直接拷贝进去运行

 

技巧 记录一些以前不太熟悉的,chrome不太
chrome已经不知道用了多少年了,但是还是有些技巧不熟悉,记录下有用的和自己不熟悉的
如何…

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

澳门新葡8455最新网站 20

5.Javascript 异常时中断

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

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

澳门新葡8455最新网站 21

4.页面事件中断

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

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

澳门新葡8455最新网站 22

6.DOM Level 3 Event 事件中断

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

澳门新葡8455最新网站 23

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图