如何掌握谷歌的Chrome developer tool调试技巧

Posted 2023-04-17

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 文件一样了 参考技术A 按下F12，即可开始调试，右上角3个点号，里面有帮助help文档，可以学习掌握。本回答被提问者采纳

谷歌的 DevOps 文化

背景

谷歌云平台的高级研发总监 Melody Meckfessel 在 JFrog SwampUp 2017用户大会上为大家介绍了谷歌的 DevOps 工程师文化。

Melody Meckfessel 的团队主要负责为谷歌的工程师提供 DevOps 的工具链，让工程师们能够快速的构建，测试，发布产品。已经支持的团队包括安卓，Chrome，谷歌云平台等等。

和其他公司一样，谷歌的工程师也会在构建失败，测试不通过，调试线上环境部署失败的问题上花费大量时间，Melody 一直致力于软件交付效率的提升，因此她认为谷歌 DevOps 团队的任务，是让广大的谷歌工程师团队从这些繁琐的软件发布的工作中解放出来，去快速的上线业务需求。

谷歌工程师 DevOps 文化

• Diverse Development

业务团队的大小，产品规模的大小，团队的组织结构等等都成为开发多元化的因素。从很多方面来看，这些都是非常混乱的，所以 Melody 的 DevOps 团队就是提供统一的工具链来支持团队交付的流程。业务团队具备开发的独立性，DevOps 团队负责收集交付过程中产生的数据，并且定位开发中的障碍点，供业务团队参考，评估，总结，并且改进。

• 不责怪团队

谷歌曾经发布了一个改进测试性能的产品，产品处于试水阶段，开放给用户体验之后，访问量暴增，但用户的使用方式并不是团队期望的方式，并且占用了大量的服务器资源，团队并没有预测到会消耗这么大规模的资源，于是团队不得不暂停此功能，并且寻求外部的人员进行帮助，重新设计这个功能。DevOps 团队认为这次发布是”Successful failure”。

所以团队成员如果意识到开发一个新功能即使失败，也不会被问责的时候，他就会更愿意承担有风险的任务。

公司文化是让一群人愿意和公司一起打拼的基石，如果公司的战略很好，但公司不能构建良好的公司文化，那么公司很难将事情做得好。

• 支持谷歌工程师的平台

谷歌工程师的一天：下载依赖，写代码，生成变更集。随后放入整个谷歌的代码库进行测试，测试通过后，提交代码审核。

支持谷歌工程师轻松上线的，是底层的 DevOps 平台。平台的功能是让开发者能够重用已有的库，集成所有复杂的工具，使得开发者不再为上线运维的流程所困扰。

• 文化和工具

谷歌每天有45000个提交，如何保证这么多次提交是可靠的？谷歌依赖于自动化的工具做代码审查，包括格式，样式，linters 进行合规检查。当然也进行人工代码审查。

每个员工都可以搜索整个谷歌的代码库，这就意味着大量优秀的组件可以被发现和复用，谷歌鼓励工程师复用其他人的组件，而不是重复造车轮。

• 智能构建和智能测试

在测试方面依赖于自动化测试，而不是 QA，谷歌会将对所有 commit 进行持续的测试，测试用例只有在被 commit 影响到时进行触发，并且将测试结果进行缓存，本次提交未被影响到的测试结果，不会被执行。

以上图为例，如果开发者只修改了 Login.java，那么谷歌的测试系统只会跑这个文件相关的测试用例，而不会跑认证相关的634个测试用例，这得益于谷歌的开源工具 Bazel。谷歌，Netflix等公司都在使用 Bazel 做智能的构建。

• DogFooding

谷歌的大部分产品，是出自于谷歌内部使用的产品，例如 Kubernetes 来自于谷歌内部的 Borg 系统，Bazel 构建系统等等。自己使用自己的工具，能够为开发者带来更好的用户体验，同时也能够接受社区的反馈，将产品做得更好。

• 挑战

永远不够快，即使工程师当时觉得平台很快，包括构建，测试等等，过两个月之后，他一定会抱怨平台的速度不够快。
技术发展一直在变化，团队也在变化，DevOps 团队需要不断的学习，支持新的技术，新的开发方式。
在互联网安全漏洞日益增大的情况下，如何有效的为产品进行自动的漏洞扫描？代码扫描？

• 最后：DevOps 应该是什么样的？

1. 生产力
   通过统一的平台集中管理代码，代码审查，构建，测试，部署，最大化的减少上线的复杂度，加快上线的频率，任何开发者都能自己上线。

2. 安全
   为公司执行严格的安全检查机制，包括代码扫描，包漏洞扫描，攻击性测试等等。

3. 可扩展性
   应用在平台上具备自动扩容的能力，来应对越来越大的用户请求。

更多相关文章阅读

点击阅读原文链接，下载首届 Jenkins 用户大会精彩PPT（密码:nunv）