web前端调试工具及方法
2016-04-07 13:36
197 查看
Console探险---谷歌开发者工具
今天我们重点要学的是开发者工具中的"Console",在介绍Console之前,我们先将其它的几个面板介绍下:Element:主要是用来调试网页中的html标签代码和css样式代码
Network:查看网页的http通信情况,包括Method、Type、Timeline(网络请求的时间响应情况)等
Source:查看JS文件、调试JS代码
Timeline:查看js的执行时间,页面元素渲染时间等
Profiles:用来查看网页的性能,比如CPU和内存消耗
Resources:用来查看加载的各种资源文件,比如js、css、图片等
Audits:可以分析当前网页,可以快速的分析出哪些资源被使用、哪些资源没有使用,然后提出建议
Console:可以查看错误信息、打印调试信息、调试js代码,还可以当作Javascript API查看
简单测试一下console:
在控制台输入:document.write("hello"),回车,页面显示结果
1、查看js代码:
js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.
2、查看元素绑定了哪些事件
在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件
展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.
Tips
Firebug中,DOM断点可以在Script> Breakpoints里面看到chrome DevTools中,需要在Elements面板的DOM Breakpoints中看到
javascript的debugger语句
需要调试js的时候,我们可以给需要调试的地方通过debugger打断点,代码执行到断点就会暂定,这时候通过单步调试等方式就可以调试js代码
使用javascript的断点
在需要打断点的地方添加debugger:
这时候打开console面板,就可以调试了
其他的浏览器的秘密:
http://www.cnblogs.com/moonvan/archive/2013/10/16/3372156.html http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/
相关文章推荐
- 详解AngularJS 模态对话框
- HTML5第一讲
- javascript console打印技
- [LintCode] paint fence
- JSON 数据格式
- html5的感想
- jQuery在IE11下提交form时遇到的问题
- 浅谈CSS3 Filter的10种特效
- json 解析 数组中的对象
- 【笔记】 《js权威指南》- 第15章 脚本化文档 - 15.3 - 15.4
- inode及硬链接和软链接
- JS获取当前周、上一周、下一周日期
- Run JS in Address Bar
- 网路:JSON 解析(天气预报)
- POJ 1730 Perfect Pth Powers
- JavaScript 的14道题
- javascript 的 split用法
- 理解angular中的module和injector,即依赖注入
- 在fedora下使用搜狗拼音输入法
- 【笔记】 《js权威指南》- 第15章 脚本化文档 - 15.2 选取文档元素