chrome developer tool 调试技巧

标签: 前端技术 | 发表时间:2012-06-03 06:31 | 作者:linqian
出处:http://ued.taobao.com/blog

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.

1. Beautify Javascript

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

2. 查看元素绑定了哪些事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

3. Ajax 时中断

在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

4. 页面事件中断

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了

6. DOM Level 3 Event 事件中断

在 Elements 面板, 选中一个元素右键, 有两个选项:Break on subtree modifications, Break on attributes modifications, 这两个对应 DOM Level 3 Event 中的 DOMSubtreeModified ,  DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断

7. 所有 js 文件中查找

在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式

8. command line api

  • $(id_selector) 这个与页面是否有 jQuery 无关
  • $$(css_selector)
  • $0, $1, $2, $3, $4
    1. Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
    2. 这个 5 个变量时先进先出的
  • copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
  • monitorEvents(object[, types])/unmonitorEvents(object[, types])
    1. 当 object 上 types 事件发生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console) 或  点击
  • 更多 command line api  点击

9. 实时修改 js 代码生效

  • 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
  • 注意
    1. 经测试不支持 html 页面中 js 修改
    2. 经过 Pretty print 格式化的脚本不支持修改

10. console 中执行的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js

参考链接

相关 [chrome developer tool] 推荐:

chrome developer tool 调试技巧

- - Taobao UED Team
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了..

新的 repo tool

- sun409 - 阿偉的個人天地
由於八月底發生 kernel.org 被 hacked 的事件,導致 kernel.org 底下的服務全面停擺,包括 Google 的 Android git server android.git.kernel.org,至今仍未恢復. 當然也導致目前無法下載最新的 Android source code.

Firefox OS Developer Preview Phone 簡介

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
如果想開始設計 App for Firefox OS 可以參考 這篇,另外文章有提到如果你要試試看 Firefox OS + 自己開發的 App,可以透過底下方式:. 安裝 Marketplace for Android 在您的 Android 手機上. 安裝 瀏覽器版本 Firefox OS 模擬器.

PLSQL Developer 配置Oralce11g连接

- - 数据库 - ITeye博客
PLSQL Developer因为没有对应的64位程序,所以用该程序连接Oracle时只能对应x86的Oracle客户端. 本示例为Oracle11g,去官网下载instantclient_11_2的x86版本. 11g之后可以不用安装程序,直接使用这种绿色程序便可.     1.配置环境变量:ORACLE_HOME=D:\Program Files (x86)\instantclient_11_2.

hibernate tool 教下新手

- - CSDN博客推荐文章
顺便研究了下hibernatetool 发现已经到了4.0beta,我用的是3.2的没有解决oracle的注释问题,4.0已经解决了. 我用maven2创建了一个项目. parent的依赖是我的公共依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance".

[多图]Windows 8 Developer Preview初体验

- 介潤 - cnBeta.COM
Windows8 Developer Preview初体验. 这种文章,一般都是一堆图吧……嗯……那就一堆图好了.

Firefox Backup Tool:Firefox资料备份工具

- Natbots - 软件志
二、Firefox Backup Tool安装及简单使用: 1、下载及安装:下载安装程序进行安装,除了需要注意设定安装路径,其他一路下一步就OK了. 2、简单快速全面地进行Firefox资料的备份: 安装完成后运行该软件,点击“Save”按钮设定firefox备份文件保存路径,“Backup items”选项内选择需要备份的项目;若觉得有必要,还能通过“Add a password for your back”为该备份资料设定密码;选项设置完成后,最后点击“backup”按钮就能完成备份.

Public DNS Tool-DNS切换工具

- - 无名小卒
Public DNS Tool v9.1下载: dbank| kuaipan| 官方. 无名小卒(Digital Fingerprint: b98c67913fef00419d415179421ab42f) Related Posts. Webluker-免费CDN、DNS解析和网站监控服务.

[转]覆盖率测试工具(coverage tool)

- - 小鸥的博客
覆盖率测试工具(coverage tool). Emma:优点:1 开源软件;2 支持ANT TASK;Emma 是开源的,同时它对应用程序执行速度的影响非常小. 缺点:1 ANT TASK的参数指定较弱,coverage参数需要追加配置文件. EMMA是一个免费且开源的Java代码覆盖率测试工具,100%纯Java编写,不依赖与任何第三方库.

Mifare Classic Tool (MCT),Android平台RFID工具

- - FreebuF.COM
最近逛国外坛子的时候发现一新RFID神器,把介绍翻一下. Mifare Classic Tool (MCT) - 一款用来读取/编辑/分析Mifare Classic卡片的安卓软件. 大家好, 这几个月我开发了一款安卓NFC工具, 希望大家用的高兴, 同时希望大家能在github 上一同完善这款工具.