参考：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. Informatica 常用组件Lookup之八 查找高速缓存

    可以配置查找转换以高速缓存查找文件或表.PowerCenter 将在处理高速缓存查找转换中的第一个数据行时在存储器中建立高速缓存.它将根据您在转换或会话特性中配置的数量来分配高速缓存区内存.Power ...

  2. AS 常用插件 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  3. 添加sqljdbc4的maven依赖

    sqljdbc是微软sql server的jdbc驱动 使用sqljdbc需要从微软的官方网站下载jar包: http://www.microsoft.com/en-us/download/detai ...

  4. 关于C++ 中POD类型的解析

    转自: http://liuqifly.spaces.live.com/blog/cns!216ae3a149106df9!221.entry (C++-98:1.8;5)给出的定义:将对象的各字节拷 ...

  5. Druid对比Elasticsearch

    我们不是Elasticsearch的专家, 如果描绘有误, 请通过邮件列表或者其他途径告知我们. Elasticsearch 是基于Apache Lucene搜索服务器.  提供了对无模式文档的全文检 ...

  6. 以log(n)的时间求矩形内的点

    设想这么一个简单的问题,在一个平面上有n个点,给定一个矩形,问位于矩形内的点有哪些. 这个问题的简单思路非常简单,每次遍历所有点,看其是否在给定的矩形中.时间复杂度呢?单次查询的时间就是一次遍历的时间 ...

  7. MySQL有关1042 Can’t get hostname for your address的问题分析解决过程

    [Comment 1]  前同事企鹅上面说他安装的mysql 5.5,发现用mysql客户端远程连接的时候,报1042-Can’t get hostname for your address错误,但是 ...

  8. jacoco统计自动化测试代码覆盖率

    一.下载jacoco, ant工具 jacoco: http://www.eclemma.org/jacoco/: ant: http://ant.apache.org 并添加到环境变量: 二.不停j ...

  9. 给MySQL中某表增加一个新字段，设为主键值为自动增长。

    alter table test_tb  add ID int(10) primary key AUTO_INCREMENT; 设定完成后,原有记录的该字段会增加并自动设上值.以后的值会在已有记录的最 ...

  10. iOS禁用系统休眠

    [UIApplicationsharedApplication].idleTimeDisabled= YES