web前端调试工具及方法

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/