参考：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. 跟我学Spring3（9.1）：Spring的事务之数据库事务概述

    原文出处: 张开涛 9.1 数据库事务概述 事务首先是一系列操作组成的工作单元,该工作单元内的操作是不可分割的,即要么所有操作都做,要么所有操作都不做,这就是事务. 事务必需满足ACID(原子性.一致 ...

  2. Go 语言简介（下）— 特性

    希望你看到这篇文章的时候还是在公交车和地铁上正在上下班的时间,我希望我的这篇文章可以让你利用这段时间了解一门语言.当然,希望你不会因为看我的文章而错过站.呵呵. 如果你还不了解Go语言的语法,还请你移 ...

  3. Redhat Linux FTP配置

    文件传输协议(FTP:FileTransfer Protocol)使得主机间可以共享文件. FTP 使用 TCP 生成一个虚拟连接用于控制信息,然后再生成一个单独的 TCP 连接用于数据传输.控制连接 ...

  4. iOS开发-委托(Delegate)浅谈

    委托其实并不是OC中才有,C#中也有,不过彼此的理解方式是不一样的,OC中委托是协议的一种,需要使用@protocol声明,委托一般在iOS开发中页面中传值用的比较多.委托是Cocoa中最简单.最灵活 ...

  5. Android中ActionBar及Overflow的显示

    最近在按照Android的API文档学习Android中actionbar的使用,Action bar 最基本的形式,就是为 activity 显示标题,并且在标题左边显示一个 app icon.在这 ...

  6. CloudStack无法添加模板和iso

    做了N久的CloudStack二次开发,最近越来越多的人开始使用CloudStack. 通常会遇到添加模板和iso不成功的问题. 表现为注册了template/iso之后,"已就绪" ...

  7. SVN-服务器变更，代码变更

    1.使用<SVN-如何删除 SVN 文件夹下面的小图标>文章中的方法将svn的关联去掉 2.使用<SVN-服务器搭建>文章中visual studio添加项目到svn服务器的步 ...

  8. Javascript中计算脚本运行的时间

    console.time("timer名字") 其他脚本 console.timeEnd("timer名字"); 运行后结果为: timer名字: 运行时间

  9. 【C#】SQL数据库助手类1.0（自用）

    using System; using System.Collections.Generic; using System.Text; using System.Configuration; using ...

  10. STL - 容器 - UnorderedSet(一)

    一些简单操作 UnorderedSetTest.cpp #include <unordered_set> #include <numeric> #include ". ...