Jerry和您聊聊Chrome开发者工具

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(<variable name>, <local file name>)将任意变量保存成本地文件，很是方便。

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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: