Chrome开发者工具是Jerry在日常工作中使用的三个调试器之一。虽然工具名前面有“developer”，但对非开发者还是有用的。不相信？使用Chrome打开我们常用的网站，按F12，在Console标签中可以看到这些信息。这些是非常古老的茎。在网易云音乐上听音乐，如果想保存到本地，不需要安装客户端，直接在Chrome开发者工具中找到mp3的真实链接并保存即可。对于在线视频，也可以用同样的方法找到真实地址，然后保存到本地。前段时间看到一则新闻，标题是“再牛的骗子，遇到程序员也会低头”。落入圈套，一步步引导对方进入自己的节奏，最终直接控制了骗子的电脑和摄像头。同事使用的一种方法是：在上图Chrome开发者工具的Console面板中输入命令document.body.contentEditable='true'，使整个网页处于可编辑状态。然后你就可以随意修改网页上的内容了。比如你可以像下图这样做白日梦：使用Chrome的记住密码功能，时间长了你就会忘记密码。虽然这些密码也可以在Chrome设置中找到，但更快捷的方法是直接在Chrome开发者工具中打印它们。在Chrome开发者工具中点击Elements选项卡，然后在网页中点击password元素，该元素的实现html代码就会显示在选项卡页面中。这里我们可以看到元素的id是password。返回控制台选项卡并输入$("#password").value以显示密码。互联网上曾经有一个著名的笑话。一位程序员打开珍爱网寻找合作伙伴。浏览了几分钟网页，他习惯性地按F12打开Chrome开发者工具，发现Console标签页打印了好几条错误信息，然后习惯性地开始调试。然后，就没有了。..以下是我在日常工作中使用Chrome开发者工具的一些心得和技巧，希望能帮助到大家提高开发调试的效率。1、Element属性断点在Element标签页选择一个html标签，在右键菜单中设置Attributes修改断点。下图的意思是一旦title标签的属性发生变化，就会自动触发断点。我曾经处理过一个事件，用户抱怨在Fiori应用程序中进行一些操作后，页面标题被更改为错误的值。借助这个属性断点功能，我很快找到了修改标题的代码行。关于这个事件的更多细节，可以参考我的博客：通过调试快速查找是哪段代码更改了UI5应用页面标题2。说在浏览器的native方法中设置断点是不准确的，因为我们没有方法是在Chrome中查看浏览器native方法的实现代码，更谈不上设置断点。其实我的要求是，在调试的时候，当这些浏览器原生方法被一些特殊的入参调用时，我可以停止。比如我在研究Angular框架的时候，用ng-repeat画了一个列表，如下图。我发现对于每条列表记录，最终生成的原生html代码都有一个comment元素，如下图红色高亮区域所示。我很好奇Angular框架在哪一行代码上生成了这三个注释元素。按照推理，这些评论肯定是通过原生方法createComment来创建的，但是我不能在这个方法中设置断点。如果直接在Angular框架中基于源码createComment进行搜索，然后在所有搜索结果处设置断点——这种方法理论上是可行的，但是效率太低了，因为有将近100个搜索结果调用了createComment。该怎么办？（1）在angular.js文件开头设置断点，打开应用，断点触发：（2）将浏览器的native方法实现保存在变量oldFn中，然后重写createComment。在重写的版本中，加入了自己的判断逻辑：我希望断点只有在创建的评论文本中包含ngRepeat时才会触发。实现如下图所示。在控制台执行如下代码，完成对原来createComment实现的覆盖。然后在调试器中继续执行，最后在我要找的位置触发了断点：ThisiswhatI'mlookingfor。Angular框架创建包含ngRepeat注??解的代码位置：3.Chrome开发者工具中的一些隐藏命令在Chrome地址栏中输入chrome://开头的一系列命令，实现各种功能。但是我在日常工作中使用最多的是chrome://net-internals。在SAP成都RevenueCloud开发团队王聪的帮助下，我用这个功能解开了困扰我一段时间的JavaScript源码图之谜。我在这三篇博客写了如何通过chrome://net-internals学习JavaScript源码映射的过程：（1）一个由源码映射引起的调试问题（2）UI5源码映射机制详解（3）有用Chrome工具chrome://net-internals监控http请求细节4。将JavaScript变量的内容保存为本地文件。我在SAP处理Fiori应用的事件时经常需要这个功能：比如调试Fiori应用的前后端交互，想把后台返回的JSON响应保存为本地文件。当然，我可以手动在Chrome开发者工具的网络选项卡上选择响应内容，然后CtrlC，然后在本地新建一个文件，CtrlV。我觉得这一步比较麻烦，我在这上面找到了另一个快捷方式博客。直接在控制台执行这段代码：这段代码会在控制台对象中注入一个新的方法save，然后你就可以使用console.save(<变量名>,<本地文件名>)将任意变量保存为本地文件。很方便。5.分析JavaScript的垃圾回收机制这类分析是通过Profiles选项卡完成的。具体可以参考我的博客：使用Chrome开发工具分析JavaScript垃圾收集器实例6。自学一些浏览器原生方法的实现想知道这个toString方法是如何实现的吗？需要在ChromeDevTools中开启ShownativefunctionsinJSprofile选项，然后查看我的博客：使用Chrome开发工具自学一些JavaScript函数原生实现7。console.log的彩色打印在我处理一些很复杂的问题时经常使用这种彩色打印的技巧。我曾经处理过一个事件。UI显示的列表一次从后台读取了20条记录，其中一条记录的GUID与实际内容不符。我需要找出20条记录中哪一条是错误的。如果我用调试的方式，在循环中调用我设置断点的函数，断点会不断触发。觉得很不耐烦，就用console.log的方法打印每条记录的guid和详细内容。当我观察这些打印输出时，我发现它们被淹没在UI5框架的大量日志中。因为我在查看自己打印的日志时需要结合UI5打印的日志作为上下文进行分析，所以无法使用Console选项卡中的过滤功能只显示自己打印的日志。有什么办法可以不让我打印的日志淹没在UI5框架的海量日志中吗？办法是让它“万花丛中一点绿”。以下自定义函数myLog输出的日志在控制台中显示如下：可以显示的更花哨：8.使用正则表达式过滤网络请求9.jQuery选择器风格的控制台命令比如我想快速了解当前UI一共有多少个button元素，查看部分元素的详情。使用类似jQuery的选择器语法$('button')返回所有按钮元素。还有很多其他的技巧，还有我最常用的快捷键组合，限于篇幅，这里不再赘述。您可以在此博客中找到我关于使用Chrome开发人员工具的所有提示。日常工作中用到的Chrome开发工具小技巧注：Chrome开发工具修改颜色：希望这篇文章能让大家对Chrome开发工具有一些深入的了解，感谢阅读。
