【转】chrome调试工具常用功能整理

标签: chrome 调试工具 功能 | 发表时间:2014-11-13 15:35 | 作者:liuxi1024
出处:http://www.iteye.com

Elements

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

  • windows: ctrl + shift + i
  • mac: cmd + opt + i

DOM

修改 html & 属性

节点右键, 如下图, 可以:

  • 添加属性( enter)
  • 修改 html( F2)
  • 删除元素( delete)

除了右键, 还可以:

  • h toggle 元素的 visibility 属性
  • 拖拽节点, 调整顺序
  • 拖拽节点到编辑器
  • ctrl + z 撤销修改

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

event

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

Styles

修改样式

  • 添加规则
  • 添加、修改属性 同样可以通过 ctrl + z 取消

断点

代码断点

  • 设置断点
    • 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.
    • 断点后可以查看 堆栈, 变量 信息:
  • 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键 restart frame), 如果想查看断点前的信息时比较有用.
  • 断点后的变量保存到全局
    • 选中变量, 右键 Evalute in console
    • console 中选中输出的内容, 右键 store as global variable

事件断点

元素上事件断点

devtools 可以查看某一个元素上绑定了哪些事件: Elements > Event Listeners

dom mutation 断点(推荐)

dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModifiedDOMNodeRemoved 时断点.对上面 元素上事件断点( mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图 这种情况使用全局搜索( ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以.

全局事件断点

devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点;还可以对 resize, ajax, setTimeout/setInterval 断点.

下面这个图是 resize 时中断, 因为库都代理了, 还需要在断点处一步一步跟下去才能走到业务代码中.

几个常用的断点快捷键:

  • F8: 继续执行
  • F10: step over, 单步执行, 不进入函数
  • F11: step into, 单步执行, 进入函数
  • shift + F11: step out, 跳出函数
  • ctrl + o: 打开文件
  • ctrl + shit + o: 跳到函数定义位置
  • ctrl + shift + f: 所有脚本中搜索

Console

元素选择

$(selector)

即使当前页面没有加载jQuery,你也依然可以使用$和$$函数来选取元素,实际上,这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装,$用于选取单个元素,$$则用于选取多个:

$_

使用 $_ 来引用最近的一个表达式

$0 - $4

除了 $_,你还可以使用 $0, $1, $2, $3, $4这5个变量来引用最近选取过的5个DOM元素。 $0 为Elements HTML 面板中选中的元素。 $1 为上一次在 HTML 面板中选中的元素。 $2$3$4 同样的。不过只能到 $4

copy

复制到剪切板,copy之后,直接 ctrl+v

信息输出

在js代码中打点 console.log()类似 debugger



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [chrome 调试工具 功能] 推荐:

【转】chrome调试工具常用功能整理

- - Web前端 - ITeye博客
chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.. 修改 html & 属性. 节点右键, 如下图, 可以:. h toggle 元素的 visibility 属性. 查看元素上绑定了哪些事件. All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点.

gdb调试工具

- - CSDN博客系统运维推荐文章
查看帮助一是man 命令,二是进入 www.gnu.org,找到gdb的帮助文档(更详细). gcc -Wall -g main.c -o main,只有这样才能产生调试信息,包括core的调试信息.     run(r)  运行,执行到断点,重新用r,表示重新开始执行.     list(l)  列出源代码,l 2,l main,l 2,16(数字表示行数).

Chrome 17将至 新功能抢先看

- Woooon - cnBeta.COM
最新的Chromium版本已经被贴上了Chromium 17的标签,下周,Google将对Chrome的三个频道进行更新,首先,Chrome 17将进入Dev开发者频道,Chrome 16也将走出Dev阶段进入到Beta公测阶段,而Chrome 15也会发布正式版. Chrome 17即将到来,在chrome://flags实验功能页面,你能见到不少Chrome 17中可能采用的新功能,下面我们摘取部分与大家共享: .

Mobile Web调试工具Weinre

- - 移动开发 - ITeye博客
现在、将来,用移动设备上网越来越成为主流. 但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛. 而Weinre就是解决这难题的利器.   Weinre的本意是Web Inspector Remote,它是一种远程调试工具. 功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等,下面就简单介绍下如何使用.

Chrome的隐身模式、about命令和快捷组合功能

- Goingmm - Chrome迷
我们一直想为你介绍一些Google Chrome上的一些新的技巧,以便让你的浏览器发挥最大的价值和提高工作的效率. 今天,主要向你们介绍三大部分:隐身窗口,关于”about:”的命令,还有通过使用热键组合迅速完成任务. 当然,已经知道的Chrome诸多功能的同学,可以忽视本文,本文主要目的向新人介绍Chrome.

强到爆炸的Goolge+更多功能的Chrome扩展

- lichzy - Chrome迷
作为一个Google+控,你怎能少了这些Chrome扩展呢. Google+正式上线一个月时间,在里面的中文圈网友特多,因发布不受字数限制的信息,确实比推特好用,不河蟹不作恶,也特受挨踢人士和尝鲜人士的热爱. 今天从Google+找来一些扩展,这些扩展有些我们曾经介绍过,有些没有介绍,不过看一下下面的阵容,确实很强大,也欢迎你分享给身边的朋友.

15个你不知道的杀手级Google Chrome功能

- 遇见你就死机 - 望月的博客
自从两年前Google Chrome发布以来,就一直保持稳步上升的态势,她并非没有缺点,但她简便、简约,却功能丰富. 下面列举的一些特点,有些也许你早就知道,但你肯定会找到隐藏于这个浏览器中让你吃惊的功能,这,也是这篇文章的意义所在. 只需要在标签页单击右键,选择“固定标签页”,那么这个标签页就会永久出现在你的浏览器左上方,而不需要每次都打开,这个功能实用于你每次都需要打开的一些页面,比如Gmail..

Boomerang – 给 Gmail 添上定时发送功能 | 小众软件 > Chrome

- nanoac - 小众软件
最近在知乎上看到有人提问:为什么 Gmail 没有定时发送邮件的功能. 原因我也不知道,不过我知道怎么实现这个功能. 只要安装 Boomerang 就可以了. Boomerang 是一个浏览器扩展,目前支持 Firefox 和 Chrome. 安装后在写邮件界面能看到 Send Later 按钮,你可以选择预设时间,也可以自己定义.

Chrome 13 正式版发布,加入Instant Pages功能

- Tairan Wang - ITeye资讯频道
Chrome Stable 分支正式版今天终于更新到 v13 版本,最新版本号为 13.0.782.107,随着这次更新的发布,Chrome 正式版终于迎来了 Instant Page 预先渲染功能,相信这一功能对于广大骨灰来说并不陌生,简单的说就是会自动猜测你要点击的链接,并在后台对该链接的网页内容进行预先渲染,当你点击的时候其实已经渲染完毕(或者渲染一部分了),所以会给你一种网速超快的错觉.

用 Mega Button Chrome 扩展一键访问常用功能

- MEDiCi - 谷奥——探寻谷歌的奥秘
随着Chrome越来越简化界面,你想一键访问某个功能越来越难了,除非你记得住大概的名字,直接利用Omnibar地址栏访问(但是非geek应该还都不习惯用命令行或快捷键搞定一切吧. Mega Button这枚扩展就是可以让你一键访问很多功能:. 所有功能都会在新标签页打开,非常实用. © musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011.