您的位置:首页 > Web前端 > javascript > 正文

chrome调试js

更多 时间:2014-11-15 类别:Web前端 浏览量:1663

chrome调试js

chrome调试js

1、格式化代码

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

 

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

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

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

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

 

3、Elements标签页

这个就是查看、编辑页面上的元素,包括HTML和CSS:

 

左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选"Edit as Html"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:

 

4、Resources标签页

Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。

这里的CSS文件有一个好玩的特性,你可以直接修改CSS文件,并且修改即时生效:

 

5、Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示

 

点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:

 

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息,对于开发、调试,都是很有用的。

 

6、Scripts标签页


很明显,这个标签页就是查看JS文件、调试JS代码的,直接看下图的说明:

 

还有你可以打开Javascript控制台,做一些其他的查看或者修改:

 

7、Timeline标签页


注意这个Timeline的标签页不是指网络请求的时间响应情况(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间

 

8、Profiles标签页

这个主要是做性能优化的,包括查看CPU执行时间与内存占用

 

9、Audits标签页

这个对于优化前端页面、加速网页加载速度很有用(相当与Yslow)

 

10、Console标签页

就是Javascript控制台了,除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。


例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行

 

11、页面事件中断

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

 

12、Ajax 时中断

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

 

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

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

 

标签:js调试