参考：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. 常用的OpenCV函数速查

    常用的OpenCV函数速查 1.cvLoadImage:将图像文件加载至内存: 2.cvNamedWindow:在屏幕上创建一个窗口: 3.cvShowImage:在一个已创建好的窗口中显示图像: 4 ...

  2. OpenCV学习(18) 细化算法(6)

    本章我们在学习一下基于索引表的细化算法. 假设要处理的图像为二值图,前景值为1,背景值为0. 索引表细化算法使用下面的8邻域表示法: 一个像素的8邻域,我们可以用8位二进制表示,比如下面的8邻域,表示 ...

  3. C#版查杀本地/远程进程工具

    xkill [原创] Author: R&S E-mail: yrwithsh@vip.sina.com HomePage: fz5fz.yeah.net Date: 10/04/2003 u ...

  4. 利用WebClient实现对Http协议的Post和Get对网站进行模拟登陆和浏览

    我们在一些场合经常需要模拟浏览器进行一些操作,比如模拟投票,或者模拟点击,或者Web游戏外挂.而C#中封装好的WebClient可以在某些要求不算搞的场景实现Http的Post和Get.具体请见代码: ...

  5. GISer面对创业的困惑

    最近看各大IT门户网站都会看到很多XXX的创业经历,特别是最近比较火爆的手机APP,更是让很多吊丝程序员成功逆袭.不得不佩服人家对自身技术的坚持和面对机会的把握能力,但是身为GIS专业的自己,每次都很 ...

  6. elasticSearch nested exist与missing查询

    elasticSearch nested查询,简单意义上,你可以理解为,它不会被索引,只是被暂时隐藏起来,而查询的时候,开关就是使用nested query/filter去查询 下面我有一个例子,是查 ...

  7. [Algorithm] Given the root to a binary tree, return the deepest node

    By given a binary tree, and a root node, find the deepest node of this tree. We have way to create n ...

  8. 3. Layout -- 1

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orient ...

  9. RPC框架研究（二）Hadoop源代码-1

    报名了阿里中间件性能大赛,我来说是一个全新的挑战.一切从空白学起,比赛的过程也是学习的过程 是的.想让自己学好.给自己报一个比赛吧~ 就像当初学围棋,也是报了围棋比赛,为了不至于输的太慘.一个星期里学 ...

  10. JNDI配置c3p0连接池

    JNDI是什么呢? 就是java命名和文件夹接口.是SUN公司提供的一种标准的Java命名系统接口. 不好理解?简单说呢.他就是一个资源,放在tomcat里面的一个资源,今天我们就把数据库连接池放到t ...