参考：Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html

重点：左下角一个{}括号图标按钮用于把杂乱的代码重新格式化为漂亮的代码，比如一些已被压缩的 js 文件基本没法看、更没法调试。点一下格式化，再点一下就取消格式化。

查看元素上绑定了哪些事件

  • 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
  • Selected Node Only 只会列出当前节点上绑定的事件
  • 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
    • handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
    • isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
    • useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

更多断点调试，技巧看："chrome调试工具常用功能整理"-http://www.html-js.com/article/2327，百度快照版：http://cache.baiducontent.com/c?m=9d78d513d9921bef05b2c3690d6781314913d5366b97c4523f8a9c12d52219564615fea662675513d3b226215ef15e5c9ca87765377471eac4d5db0a9be0c376789527357019&p=cb3fc716d9c11af408e2947d594c&newp=837dc215d9c342c334a7c7710f0592695d0fc20e3ad3d079139e&user=baidu&fm=sc&query=chrome+debugger&qid=96d039cb0000e017&p1=24

Google Chrome调试js代码,开发者工具之调试工具常用功能的更多相关文章

  1. Javascript系列： Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  2. Google Chrome调试js代码

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  3. Google Chrome调试js入门

    平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...

  4. Google Chrome 调试JS简单教程[更新]

    题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本 ...

  5. 利用Google浏览器调试js代码

    1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...

  6. 【JS学习】-利用谷歌浏览器调试JS代码（转）

    谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作. 首先,打开谷歌浏览器,按快捷键F12或者ctrl+shift+j,就可以打开谷歌浏览器的开发 ...

  7. 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  8. Google Chrome 调试

    [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用F ...

  9. 天啦噜！原来Chrome自带的开发者工具能这么用你知道么！

    Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一 ...

随机推荐

  1. PASCAL VOC数据集The PASCAL Object Recognition Database Collection

    The PASCAL Object Recognition Database Collection News 04-Apr-07: The VOC2007 challenge development ...

  2. kafak-python函数使用详解

    Consumer是非线程安全的 Kafka只保证消息不漏,即at lease once,而不保证消息不重.关键点:假如consumer挂了重启,那它将从committed offset位置(告诉ser ...

  3. LinkedHashMap源码剖析

    首先还是类似的,我们写一个简单的LinkedHashMap的程序: public class Test { public static void main(String[] args) { Map&l ...

  4. App优化 Systrace

    简介 trace [tres] vt.跟踪,追踪; 追溯,探索; 探索; 查找; n.痕迹; 痕迹,踪迹; 微量,极少量; 1 1   1 trace [tres] vt.跟踪,追踪; 追溯,探索; ...

  5. Android -- onWindowFocusChanged

    Android中获取手机屏幕的高度和宽度,我们知道在onCreate方法中获取到的值都是为0的,有人说可以在onClick方法中获取值,这个也是个方法 ,但在onWindowFocusChanged方 ...

  6. IE8中伪元素动态作用样式不重绘bug记录

    前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过c ...

  7. Cognos 报表在列表上面显示汇总

    一直以来,Cognos Report Studio设计报表的时候,汇总默认显示在列表下方: 1如图,拖一个列表 2运行如下,数据显示正常按日期排序 3选中订单笔数.订单金额,添加自动汇总 4:运行,可 ...

  8. 项目加入 TFS报错

      新建一个项目,然后在解决方案上右击,选择Add solution to source control的时候,总是失败,output窗口中出现的错误信息如下: An error was raised ...

  9. 【PHP 】伪静态 - 4. 实际运用

    伪静态的实际运用 1. 在一个项目中有两个文件夹,public和private, public文件夹的图片可以被所有人访问,private只能被自己访问.如何实现? 第一个方法是: 在public和p ...

  10. 打开mdb文件0x80040213

    在操作数据库时,有时遇到 0x80040213的错误,这往往是路径的问题,即所操作的文件.图层.字段等不存在. 在<ArcGIS Engine地理信息系统开发从入门到精通>一书中也谈到了这 ...