chrome调试js
chrome调试js
chrome调试js1、格式化代码
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 下)
热门推荐
- linux内核打印pc的值(linux内核copy_{to, from}_user的思考)
- laravel数据表配置(laravel实现按月或天或小时统计mysql数据的方法)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- URL如何编码与解码
- 小白vue教学(尤大大新活petite-vue的实现)
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- 网站服务器分布(10个常见网站服务器架构介绍)
- 云主机跟云服务器有什么区别(浅析云主机的特点和优势)
- html5表单实例(使用HTML5和CSS3表单验证功能)
- python opencv替换背景教程(基于OpenCV python3实现证件照换背景的方法)