Jerry和您聊聊Chrome开发者工具

原创 2018年04月16日 20:35:04

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个”开发者”, 但是它对非开发人员仍然有用。不信?

用Chrome打开我们常用的网站,按F12,在Console标签页里看到这些信息,这些都是很老的梗了。

在网易云音乐上听歌,如果想保存到本地,不需要安装客户端,直接在Chrome开发者工具里找到mp3的真实链接即可保存。

对于在线视频也能用同样的方式找到真实地址然后保存到本地。

前段时间我看到一则新闻,题目是”骗子骗术再高,遇到程序员也折腰”,介绍了一位程序员收到诈骗短信后,不仅识破了诈骗犯的套路,全程机智应答,设陷下套,一步步将对方引入自己的节奏,最后直接控制了诈骗犯的电脑和摄像头。

我的这位同行用到的一个方法就是:在上图Chrome开发者工具的Console面板里敲入指令document.body.contentEditable=’true’, 这样使得整个网页处于可编辑状态。然后就可以随心所欲地修改网页上的内容,比如可以像下图这样做做白日梦:

使用Chrome的记住密码功能,时间长了都忘记密码是什么了。虽然这些密码在Chrome设置里也能找到,但更快捷的方式还是直接在Chrome开发者工具里打印出来。

在Chrome开发者工具里点击Elements标签,然后点击网页上的密码元素,该元素的实现的html代码就显示在标签页里了。这里我们能看出该元素的id为password。

再回到Console标签,输入$(“#password”).value, 即可显示出密码。

以前网上有个著名的段子。一位程序猿打开珍爱网想找个对象。浏览了几分钟网页,他习惯性地按了F12打开Chrome开发者工具,发现Console标签打印了几条错误信息,然后就习惯性地开始了调试。

然后,就没有然后了。。。

下面是一些我日常工作中使用Chrome开发者工具的心得和小技巧,希望对您提高开发和调试的效率能有所帮助。

1. Element属性断点

在Element标签页选中某个html标签,在右键菜单里设置Attributes modifications断点。下图意思是一旦title标签的属性发生变化,断点自动触发。

我曾经处理过一个incident,用户抱怨在Fiori应用里做了一些操作之后,页面的title被修改成一个错误的值。借助这个属性断点功能,我很快找到了title被修改的那行代码。这个incident的更多细节请参考我的博客:
A quick way to find which code has changed the UI5 application page title by debugging

2. 在浏览器的原生方法里设置断点

这种说法其实并不准确,因为我们没办法在Chrome里查看浏览器原生方法的实现代码,更别提设置断点了。

其实我的需求是,希望调试的时候,在这些浏览器原生方法以某些特殊输入参数被调用时能停下来。

举个例子,在我研究Angular框架时,用ng-repeat画了一个列表,如下图所示。我发现对于每条列表记录,最终生成的原生html代码都有一个注释元素,如下图红色高亮区域显示。

我很好奇Angular框架是在哪行代码生成的这三个注释元素。按照推理,这些注释肯定是通过原生方法createComment创建的,然而我无法在这个方法里面设置断点。如果直接在Angular框架里根据源代码createComment搜索,然后在所有的搜索结果处设置断点——这种方法理论上可行,然而效率太低,因为搜索结果有将近100处调用了createComment。

怎么办?

(1) 在angular.js文件最开始的地方设置断点, 打开应用,断点触发:

(2) 将浏览器原生的方法实现保存在变量oldFn里,然后重写createComment。在重写的版本里,加上我自己的判断逻辑:我期望只有当创建的comment文本包含ngRepeat时,断点才触发。实现如下图所示。在console里执行下图代码,完成对createComment原始实现的覆盖。

然后在调试器里继续执行,最终断点在我想要找的位置触发:

这就是我要寻找的Angular框架创建包含ngRepeat注释的代码位置:

3. Chrome开发者工具里的一些隐藏命令

在Chrome地址栏里输入chrome://开头的一系列命令可以实现各种各样的功能。不过我日常工作用得最多的是chrome://net-internals。

在SAP成都Revenue Cloud开发团队Wang Cong的帮助下,我使用这个功能解开了困扰过我一段时间的关于JavaScript source code map的谜团。

我把如何通过chrome://net-internals研究JavaScript source code map的过程写在了这三篇博客里:

(1) A debugging issue caused by source code mapping

(2) UI5 Source code map机制的细节介绍

(3) Useful Chrome Tool chrome://net-internals to monitor http request detail

4. 将JavaScript变量的内容保存成本地文件

我在SAP处理Fiori应用的incident时经常需要这个功能:比如调试Fiori应用的前后台交互,我想把后台返回的JSON响应另存成一个本地文件。当然我可以在Chrome开发者工具的network标签页手动选中响应内容,然后Ctrl C,再到本地新建一个文件,Ctrl V。我嫌这个步骤麻烦,在这篇博客上找到了另一种快捷的做法。

直接在console里执行这段代码:

这段代码会给console对象注入一个新方法save, 接下来就能使用console.save(, )将任意变量保存成本地文件,非常方便。

5. 分析JavaScript的垃圾回收机制

这种类型的分析通过Profiles这个标签页完成。详细说明参考我的博客:
An example of using Chrome Development Tool to analyze JavaScript garbage collector

6. 自学一些浏览器原生方法的实现

想知道这种toString方法具体是怎么实现的么?

您得在Chrome开发者工具里打开选项Show native functions in JS profile,然后查看我的博客:

Use Chrome development tool to do self-study on some JavaScript function native implementation

7. console.log的彩色打印

当我处理一些非常棘手的复杂问题时,经常使用到这个彩色打印的技巧。

我曾经处理过一个incident,UI上显示的列表一次从后台读取20条记录,其中有一条记录的guid和其实际内容不匹配。我需要找到究竟是20条记录里的哪一条记录有错。如果用调试的方式,我设置断点的函数在循环里被调用,断点会不断被触发。我觉得很不耐烦,就采用了console.log的方式,打印每条记录的guid和详细内容。当我观察这些打印输出时,发现它们被淹没在了UI5框架大量的log里。因为我查看自己打印的log的同时,也需要结合UI5打印的log作为上下文来分析,因此我不能在Console标签页里使用过滤的功能来使得只有我自己打印的log被显示出来。

有什么办法能让我自己打印的log不会淹没在UI5框架海量的log里呢?办法就是使其成为“万花丛中一点绿”。

采用下列自定义函数myLog输出的日志,在console里显示的效果如下:

可以显示得再花哨一点:

8. 使用正则表达式过滤网络请求

9. jQuery选择器风格的Console命令

比如我想快速知道当前UI一共有多少个button元素,并查看某些元素的详情。采用类jQuery选择器的语法$(‘button’)即返回所有button元素。

还有其他很多小技巧,以及我最常用的快捷键组合,因为篇幅限制不再赘述,您可以在我的这篇博客里找到我使用Chrome开发者工具的全部技巧。

Chrome Development Tool tips used in my daily work

希望这篇文章能让您对Chrome开发者工具有一些更深入的了解,感谢阅读。

要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/i042416/article/details/79966068

嘎子哥陪你聊聊C语言

-
  • 1970年01月01日 08:00

Chrome开发者工具使用经验

使用Chrome调试工具的一点经验。 未完待续。
  • liusaint1992
  • liusaint1992
  • 2016-10-27 00:20:21
  • 2085

Chrome开发者工具使用小技巧

正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者。所以本文总结了Chrome开发者工具使用的一些小技巧。一:首先来说下如何打开开发者工具吧:a....
  • Letasian
  • Letasian
  • 2017-11-06 20:20:53
  • 1259

chrome开发者工具的使用

chrome开发者工具的使用 1.如何调出开发者工具 按F12调出 右键审查(或快捷键Ctrl+Shift+I)调出 2.开发者工具概览 Chrome开发者工具中,调试时使用最多的...
  • csdnligao
  • csdnligao
  • 2016-12-29 15:29:40
  • 5783

Chrome开发者工具不完全指南(四、性能进阶篇)

前言   Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本。它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版...
  • lihefei_coder
  • lihefei_coder
  • 2017-03-12 23:42:52
  • 1056

chrome开发者工具使用技巧(看了定不让你失望)

chrome使用技巧(看了定不让你失望)
  • voke_
  • voke_
  • 2017-11-08 13:58:14
  • 125

CHROME开发者工具的小技巧

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充...
  • GarfieldEr007
  • GarfieldEr007
  • 2017-01-22 20:47:44
  • 2210

Chrome开发者工具的小技巧

Chrome开发者工具的小技巧 投递人 itwriter 发布于 2017-01-19 21:59 评论(5)...
  • CatchMe_439
  • CatchMe_439
  • 2017-01-20 09:35:43
  • 1474

Chrome的开发者工具详解

本文章转自siberiawolf0307http://segmentfault.com/a/1190000002439648 Chrome浏览器不仅可以调试页面、JS、请求、资源、cooki...
  • u014686180
  • u014686180
  • 2015-05-19 14:18:21
  • 7392

chrome开发者工具的小技巧

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充...
  • qq455276333
  • qq455276333
  • 2017-02-16 10:41:11
  • 2519
收藏助手
不良信息举报
您举报文章:Jerry和您聊聊Chrome开发者工具
举报原因:
原因补充:

(最多只允许输入30个字)