`

chrome developer tool 调试技巧(转)

阅读更多

 

这篇文章是根据目前 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
    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

参考链接

原文地址: http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/

    分享到:
    评论

    相关推荐

      React Developer Tools 调试 chrome扩展。最新版2.5.2

      React Developer Tools 调试 chrome扩展。 最新版2.5.2 下载 React Developer Tools 调试 chrome扩展。 最新版2.5.2 下载

      Chrome Developer Tools 初学

      Chrome Developer Tools(简称DevTools)是Google Chrome浏览器内置的一套强大的Web开发和调试工具,它为前端开发者提供了深入检查、修改和控制网页的能力。通过学习Chrome DevTools,开发者可以更高效地调试...

      20190717-Chrome DevTools 调试技巧1

      标题提及的"20190717-Chrome DevTools 调试技巧1"是一篇关于如何高效利用Chrome DevTools进行前端开发调试的文章。Chrome DevTools是Google Chrome浏览器内置的一套强大的网页开发者工具,它为前端开发者提供了丰富...

      Chrome-Apps-&-Extensions-Developer-Tool_v.0.1.18crx

      Chrome-Apps-&-Extensions-Developer-Tool_v.0.1.18crx

      vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件

      (1)vue 2.x 调试工具:vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件; (2)直接安装使用无需自己编译; (3)安装方法:打开Chrome浏览器,输入“chrome://extensions/”打开扩展程序,启用开发者模式...

      谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码

      谷歌浏览器 chrome vue 调试插件 vue-devtools chrome(谷歌浏览器)vue代码调试插件, 已打包。解压后,通过chrome扩展程序加载即可使用。 使用方法: 1、chrome浏览器输入地址“chrome://extensions/”进入扩展...

      Android通过Chrome Inspect调试WebView的H5 App离线.rar

      1.前端开发离不开Chrome的开发者工具,尤其是调试Android WebView时。然而,如果使用chrome://Inspect的方法,国内的开发者会惊奇地发现“空白啊”!为此,我发布过这个离线包的解决方案!可以无需FanQ就能调试了。 ...

      chrome插件web developer

      Web Developer作为一款功能丰富的Chrome插件,它简化了开发者和设计师的工作流程,提高了网页开发和调试的效率。通过其各种工具,用户能够深入理解网页的各个层面,从而更好地优化和维护网站。如果你从事网页相关...

      使用Chrome浏览器调试Android App详解

      本文主要介绍如何使用Chrome浏览器来调试Android应用程序,特别是在集成Facebook开源的Stetho库之后,...通过结合Chrome的Developer Tools,开发者可以像调试Web应用一样调试Android应用,提高了开发效率和用户体验。

      chrome Logger浏览器调试插件

      chrome 调试插件,支持以下语言 Python - http://github.com/ccampbell/chromelogger-python PHP - http://github.com/ccampbell/chromephp Ruby - https://github.com/cookrn/chrome_logger Node.js ...

      Chrome development tools

      Chrome开发工具是Google Chrome浏览器内置的一套强大的Web前端开发和调试工具,对于前端开发者来说,它是不可或缺的工作伙伴。这套工具提供了丰富的功能,帮助开发者检查、修改和调试网页内容,优化性能,以及解决...

      openMultiLogin chrome多账号调试利器

      openMultiLogin chrome多账号调试利器,多个窗口,不共享cookie,多账号调试

      chrome-react插件-React Developer Tools

      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 ...

      ecdevtools是支持canvas库的chrome调试工具

      它是一个专为Chrome浏览器打造的调试插件,极大地提升了canvas元素的调试效率。 ec-devtools的核心功能在于提供了一个直观的界面,允许开发者对canvas元素的样式和物理属性进行实时修改。通过这个工具,开发者可以...

      web移动端和PC端利用chrome同步开发调试

      "Web 移动端和 PC 端 Chrome 同步开发调试" 在现代 web 开发中,移动端和 PC 端的开发调试一直是一个挑战性的问题。为了解决这个问题,Chrome 浏览器提供了一种同步开发调试的方法,可以将移动端和 PC 端的开发调试...

      chrome在线调试Inspect空白问题

      Chrome在线调试工具,即Chrome DevTools,是开发者们在网页开发和优化过程中不可或缺的利器。它提供了丰富的功能,包括元素检查、网络请求分析、性能监控、源代码编辑等,极大地提升了工作效率。然而,有时在尝试...

      Python-通过Chrome开发者工具调试Django应用

      而Chrome开发者工具(Chrome DevTools)是前端开发者必备的利器,它可以帮助我们调试JavaScript、CSS、网络请求等。然而,很多人可能不知道,Chrome DevTools也可以与Django结合,用于调试后端应用。下面我们将深入...

      threejs-inspector, 用于调试 three.js的Chrome devtool扩展.zip

      threejs-inspector, 用于调试 three.js的Chrome devtool扩展 Three.js-检查器three.js 检查器是 Chrome devtool的扩展名。 它允许你在网页中查看 Three.js 场景。 你可以从 Chrome 网上商店安装 Three.js Inspector ...

      android webview在chrome离线调试工具devtools.txt

      由于chrome调试android webview出现空白页,或者404错误,因为没有,该工具用于调试android webview

      chrome PHP调试库文件

      Chrome PHP调试库是一个非常实用的开发工具,它允许开发者在Chrome浏览器中查看PHP脚本的输出日志,极大地简化了调试过程。这个压缩包文件"chromephp-master"包含了库的核心代码,使得开发者能够轻松地将PHP应用的...

    Global site tag (gtag.js) - Google Analytics