这篇文章是根据目前 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 文件中搜索&查找 js 函数定义
- 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式
- 查找函数定义: ctrl + shift + 0 (在 Scripts panel 下)
- 查找文件: ctrl + o (在 Scripts panel 下)
- 更多快捷键: 在 chrome developer tool 中按 ? 查看帮助
8. command line api
- $(id_selector) 这个与页面是否有 jQuery 无关
- $$(css_selector)
- $0, $1, $2, $3, $4
- Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
- 这个 5 个变量时先进先出的
- copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
- monitorEvents(object[, types])/unmonitorEvents(object[, types])
- 当 object 上 types 事件发生时在 console 中输出 event 对象
- 更多 console api 请 console.log(console) 或 点击
- 更多 command line api 点击
9. 实时修改 js 代码生效
- 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
- 注意
- 经测试不支持 html 页面中 js 修改
- 经过 Pretty print 格式化的脚本不支持修改
10. console 中执行的代码可断点
在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了
function hello() { alert('say hi'); } //@ sourceURL=hello.js
参考链接
原文地址: http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/
发表评论
-
基于脚本的动画的计时控制(“requestAnimationFrame”)(转载)
2014-03-04 19:12 1035Internet Explorer 10 和使 ... -
IE11开发人员工具:UI响应工具详解
2014-02-27 18:33 938我讨厌debug,相信也没多少开发者会喜欢。但是当代码出 ... -
IE11开发人员工具:内存分析工具详解
2014-02-27 18:32 1453上篇我们跟大家介绍 ... -
E6与location.hash和Ajax历史记录 (转载)
2014-02-26 12:23 557为了在IE6中改变hash来保留历史记录实现ajax的前进 ... -
MIME Types(转载)
2013-12-31 10:20 647MIME Types - Complete List ... -
iframe历史记录问题(转载)
2013-10-17 10:21 1339在做页面统计的时候 ... -
前端类库精选(转)
2013-05-11 00:57 0优秀的前端类库,自己平时遇见了,这里Mark一下。 1、m ... -
10个chrome console实用小技巧(转)
2013-05-09 10:56 10671. 基本输出 让我们先从最常见的console.l ... -
CSS3那些不为人知的高级属性(转)
2013-04-19 13:35 951原文:CSS的未来:一些 ... -
JavaScript 时间、格式、转换及Date对象总结(转)
2013-04-10 14:49 717悲剧的遇到问题,从前台得到时间,“Tue Jan 29 16 ... -
如何制作一个可及性强(accessible)的网页弹框(转载)
2013-04-02 16:18 807英文原文:Making an accessib ... -
JavaScript MVC js也mvc(转载)
2013-03-16 23:59 690JavaScript MVC 中文:http://blog ... -
SUBLIME TEXT 2 设置文件详解
2012-12-27 11:21 1059Sublime Text 2是那种让人会一眼就爱上的编辑 ... -
两个按位非操作与Math.floor操作(译)
2012-12-10 18:17 954位操作符在我们编码过程中是容易被遗忘的,可能更多的源于我们 ... -
img中src为空的影响
2012-11-26 23:32 0这是我们经常能遇到的代码,可以直接用html标签或者Java ... -
IE6下position定位子元素溢出,父元素被撑开的解决思路。(转)
2012-11-13 18:04 1644在一些被常规的页面布局当中,我们常常需要通过positi ... -
你清楚jquery是如何清除ajax缓存的吗?(转)
2012-11-11 11:19 1055大家都知道万恶的IE在ajax中往往只读取第一次ajax ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率 In JavaScript(转)
2012-11-10 23:33 722随着WebApp突飞猛进的发展,Javascript写的 ... -
Javascript基础
2012-11-10 23:25 0原文:http://bonsaiden.githu ... -
高质量JavaScript精品库集合 In JavaScript,资源工具(转)
2012-11-10 10:27 771编辑器 1、Code Mirror 又一款“Onli ...
相关推荐
React Developer Tools 调试 chrome扩展。 最新版2.5.2 下载 React Developer Tools 调试 chrome扩展。 最新版2.5.2 下载
Chrome Developer Tools(简称DevTools)是Google Chrome浏览器内置的一套强大的Web开发和调试工具,它为前端开发者提供了深入检查、修改和控制网页的能力。通过学习Chrome DevTools,开发者可以更高效地调试...
标题提及的"20190717-Chrome DevTools 调试技巧1"是一篇关于如何高效利用Chrome DevTools进行前端开发调试的文章。Chrome DevTools是Google Chrome浏览器内置的一套强大的网页开发者工具,它为前端开发者提供了丰富...
Chrome-Apps-&-Extensions-Developer-Tool_v.0.1.18crx
(1)vue 2.x 调试工具:vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件; (2)直接安装使用无需自己编译; (3)安装方法:打开Chrome浏览器,输入“chrome://extensions/”打开扩展程序,启用开发者模式...
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome(谷歌浏览器)vue代码调试插件, 已打包。解压后,通过chrome扩展程序加载即可使用。 使用方法: 1、chrome浏览器输入地址“chrome://extensions/”进入扩展...
1.前端开发离不开Chrome的开发者工具,尤其是调试Android WebView时。然而,如果使用chrome://Inspect的方法,国内的开发者会惊奇地发现“空白啊”!为此,我发布过这个离线包的解决方案!可以无需FanQ就能调试了。 ...
Web Developer作为一款功能丰富的Chrome插件,它简化了开发者和设计师的工作流程,提高了网页开发和调试的效率。通过其各种工具,用户能够深入理解网页的各个层面,从而更好地优化和维护网站。如果你从事网页相关...
本文主要介绍如何使用Chrome浏览器来调试Android应用程序,特别是在集成Facebook开源的Stetho库之后,...通过结合Chrome的Developer Tools,开发者可以像调试Web应用一样调试Android应用,提高了开发效率和用户体验。
chrome 调试插件,支持以下语言 Python - http://github.com/ccampbell/chromelogger-python PHP - http://github.com/ccampbell/chromephp Ruby - https://github.com/cookrn/chrome_logger Node.js ...
Chrome开发工具是Google Chrome浏览器内置的一套强大的Web前端开发和调试工具,对于前端开发者来说,它是不可或缺的工作伙伴。这套工具提供了丰富的功能,帮助开发者检查、修改和调试网页内容,优化性能,以及解决...
openMultiLogin chrome多账号调试利器,多个窗口,不共享cookie,多账号调试
Chrome调试模式下,可视化的React DOM结构实时分析 React Developer Tools is a Chrome extension that allows you to inspect the React component hierarchy in the Chrome Developer Tools (formerly WebKit Web ...
它是一个专为Chrome浏览器打造的调试插件,极大地提升了canvas元素的调试效率。 ec-devtools的核心功能在于提供了一个直观的界面,允许开发者对canvas元素的样式和物理属性进行实时修改。通过这个工具,开发者可以...
"Web 移动端和 PC 端 Chrome 同步开发调试" 在现代 web 开发中,移动端和 PC 端的开发调试一直是一个挑战性的问题。为了解决这个问题,Chrome 浏览器提供了一种同步开发调试的方法,可以将移动端和 PC 端的开发调试...
Chrome在线调试工具,即Chrome DevTools,是开发者们在网页开发和优化过程中不可或缺的利器。它提供了丰富的功能,包括元素检查、网络请求分析、性能监控、源代码编辑等,极大地提升了工作效率。然而,有时在尝试...
而Chrome开发者工具(Chrome DevTools)是前端开发者必备的利器,它可以帮助我们调试JavaScript、CSS、网络请求等。然而,很多人可能不知道,Chrome DevTools也可以与Django结合,用于调试后端应用。下面我们将深入...
threejs-inspector, 用于调试 three.js的Chrome devtool扩展 Three.js-检查器three.js 检查器是 Chrome devtool的扩展名。 它允许你在网页中查看 Three.js 场景。 你可以从 Chrome 网上商店安装 Three.js Inspector ...
由于chrome调试android webview出现空白页,或者404错误,因为没有,该工具用于调试android webview
Chrome PHP调试库是一个非常实用的开发工具,它允许开发者在Chrome浏览器中查看PHP脚本的输出日志,极大地简化了调试过程。这个压缩包文件"chromephp-master"包含了库的核心代码,使得开发者能够轻松地将PHP应用的...