Jerry和您聊聊Chrome开发者工具

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

转载于:https://my.oschina.net/u/3771578/blog/1796418

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BZOJ4314 倍数?倍数!

好神仙啊.... 题意 在$ [0,n) $中选$ k$个不同的数使和为$ n$的倍数 求方案数 $ n \leq 10^9, \ k \leq 10^3$ 题解 k可以放大到1e6的 先不考虑$ k$的限制 对答案构建多项式$ f(x)\prod\limits_{i0}^{n-1}(x^i1)$ 答案就是这个多项式所有次数为$ n$的倍数的项的系数和 考虑单位…

win2008R2管理员密码修改文档

场景&#xff1a;忘记了win2008R2服务器的管理员密码。解决办法&#xff1a;1、 制作一个U盘启动盘&#xff1a;2、 系统通过U盘启动进入WINpe系统3、 在知道Win2008安装位置的情况下&#xff1b;查找C:\windows\system32\osk.exe 将osk.exe文件修改为&#xff1a;osk.exe.bat&…

Python档案袋( 面向对象 )

类即是一个模型&#xff0c;根据模型建立起不同的对象&#xff0c;对象间拥有共同的一些属性 简单的类&#xff1a; 1 class P:2 #类变量&#xff0c;所有实例共享变量,推荐使用方法是&#xff1a;类名.类变量名3 pvarx"ppvar1"4 5 #构造函数6 def _…

javascript中的后退和刷新

转自&#xff1a;https://www.cnblogs.com/tylerdonet/p/3911303.html <input typebutton value刷新 οnclick"window.location.reload()"><input typebutton value前进 οnclick"window.history.go(1)"><input typebutton value后退 οncl…

第四周

7-2 选择法排序 &#xff08;20 分) 本题要求将给定的n个整数从大到小排序后输出。 输入格式&#xff1a; 输入第一行给出一个不超过10的正整数n。第二行给出n个整数&#xff0c;其间以空格分隔。 输出格式&#xff1a; 在一行中输出从大到小有序的数列&#xff0c;相邻数字间有…

checkPathValidity 检查所有agent的corridor的m_path是否有效

在checkPathValidity&#xff08;检查所有agent的corridor的m_path是否有效&#xff09; 如果是无效的要进行重新设置并且设置replan 首先获得第一个polygon&#xff0c;m_path[0] 这里&#xff0c;因为addagent的时候&#xff0c;ag->corridor.reset(ref, nearest); m_path…

来谈谈JAVA面向对象 - 鲁班即将五杀,大乔送他回家??

开发IDE为Eclipse或者MyEclipse。 首先&#xff0c;如果我们使用面向过程的思维来解决这个问题&#xff0c;就是第一步做什么&#xff0c;第二步做什么&#xff1f; 鲁班即将五杀&#xff0c;大乔送他回家 这个现象可以简单地拆分为两步&#xff0c;代码大概是这个样子的: publ…

Vue 教程第一篇——基础概念

认识 Vue 关于 Vue 的描述有不少&#xff0c;不外乎都会拿来与 Angular 和 React 对比&#xff0c;同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多&#xff0c;但到目前为止&#xff0c;Angular 在热度上已明显不及 Vue&#xff0c;性能已成为最大的诟病。…

Microsoft Teams的Outgoing Webhook开发入门

Microsoft Teams的应用程序有几种形式&#xff1a; TabsBotsConnectorsMessaging extensionsActivity feed integrationsOutgoing web hooks 这篇我们主要介绍如何使用 ASP.NET Core来开发最简单的Outgoing web hook。 什么是outgoing webhook Outgoing webhooks allow you t…

0418 jQuery笔记(添加事件、each、prop、$(this))

1.添加点击事件、each、prop、$(this) 1 //全选框的被动操作2 //定义一个标志保存最终状态3 var flag false;4 //为每一个选择框添加点击事件&#xff0c;数组.click()5 $(.chex).click(function(){6 //遍历数组&#xff0c;数组.each()7 …

[WC2008]游览计划(斯坦纳树)

[Luogu4294] 题解 : 斯坦纳树 \(dp[i][j]\) 表示以\(i\)号节点为根&#xff0c;当前状态为\(j\)&#xff08;与\(i\)连通的点为\(1\)&#xff09; 当根\(i\)不改变时状态转移方程是&#xff1a; \(dp[i][j] \min_{s \in j}\{dp[i][s] dp[i][\complement_js] - val[i]\}\) 当根…

使用dotnet template快速开发Microsoft Teams Outgoing Web Hook

在上一篇文章中&#xff0c;我们一步步从无到有在Microsoft Teams中开发了一个简单的Outgoing Webhook&#xff0c;并和我们本地的Web API应用程序产生交互&#xff0c;总结起来的步骤大概如下&#xff1a; 导航到“团队” Tab页&#xff0c; 选中需要建立的Channel, 选中“应…

[Swift]LeetCode1013. 将数组分成和相等的三个部分 | Partition Array Into Three Parts With Equal Sum...

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号&#xff1a;山青咏芝&#xff08;shanqingyongzhi&#xff09;➤博客园地址&#xff1a;山青咏芝&#xff08;https://www.cnblogs.com/strengthen/&#xff09;➤GitHub地址&a…

京津冀产业协同升级 智慧城市等高端产业需求遇热

云计算、智慧交通、城市环保科技等高端智慧城市产业项目正成为京津冀产业协同的新关注点。 21日&#xff0c;在由北京市经信委、天津市工信委、河北省工信厅联合组织的京津冀产业协同发展招商推介专项行动上&#xff0c;超过200家与会企业共完成产业对接项目额达311.7亿元。与以…

Microsoft Teams:删除成员账户其历史聊天会发生什么?

介绍&#xff1a; 此博客文章的目的是演示从Office 365删除用户的账号后&#xff0c;此用户在Microsoft Teams群聊和私聊中的历史聊天记录会发生什么改变。 以下是Microsoft Teams聊天对话&#xff0c;其中Adele和其他团队成员正在参与对话&#xff1a; 此外, Adele和Mega还在…

PostgreSQL Huge Page 使用建议 - 大内存主机、实例注意

标签 PostgreSQL , Linux , huge page , shared buffer , page table , 虚拟地址 , 物理地址 , 内存地址转换表 背景 当内存很大时&#xff0c;除了刷脏页的调度可能需要优化&#xff0c;还有一方面是虚拟内存与物理内存映射表相关的部分需要优化。 1 脏页调度优化 1、主要包括…

Microsoft Teams:团队Owner离开公司后,我们该怎么做?

您是否曾在这么一个团队里&#xff0c;该团队唯一有Owner权限的人离开了公司&#xff1f;不幸的是,如果这个人不再在公司里&#xff0c;您可能觉得没有办法让其他团队成员再成为team的owner。我有一个简单易用的解决方案&#xff0c;但您需要成为Office 365租户的Admin或联系你…

python网络编程-socket编程

一、服务端和客户端 BS架构 &#xff08;腾讯通软件&#xff1a;serverclient&#xff09; CS架构 &#xff08;web网站&#xff09; C/S架构与socket的关系&#xff1a; 我们学习socket就是为了完成C/S架构的开发 二、OSI七层模型 互联网协议按照功能不同分为osi七层或tcp/ip五…

使用PowerShell配置Microsoft Teams

作为 IT 专业人员, 我一直在寻找自动化任务的方法, 并使日常操作简单。当使用Microsoft Teams时, 是否能够在团队中自动创建团队&#xff0c;渠道和设置对于Microsoft Teams组建的成功与否至关重要。PowerShell对Microsoft Teams的支持使您可以做到这一点&#xff0c;它为我提供…

常见Kotlin高频问题解惑

在笔者的Kotlin交流群里&#xff0c;不少同学反复遇到了一些相似的问题。这些问题大都比较基础&#xff0c;但又容易产生误解。因此&#xff0c;我决定写一篇文章&#xff0c;整理群里同学遇到的一些问题 变量和常量的使用 在Kotlin语言中&#xff0c;我们使用var声明变量&…