Chrome
文章平均质量分 53
Chrome 使用技巧分享
汪子熙
Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师,SAP 中国技术大使。在长达16年的 SAP 产品开发生涯里,Jerry 曾经先后参与 SAP Business ByDesign,SAP CRM,SAP Cloud for Customer,SAP S/4HANA,SAP Commerce Cloud(电商云)等标准产品的研发工作。
Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。
展开
-
Chrome 浏览器中的一个隐藏设置页面
用户可以根据自己的需求和好奇心,通过启用或禁用不同的实验性功能,调整浏览器的行为,以获得更好的使用体验。需要注意的是,由于这些选项可能不稳定或仍在开发中,用户在使用时应谨慎,确保不会导致浏览器不稳定或数据丢失。例如,用户可能在这里找到一个标有 “Web Platform features” 的选项,可以启用尚处于实验阶段的 Web 平台功能,如新的 HTML 或 CSS 功能。例如,用户可能会找到一个 “Tab Groups” 选项,通过启用它,可以尝试新的标签分组功能,以更有效地组织和管理打开的标签。原创 2024-01-02 12:15:42 · 540 阅读 · 0 评论 -
浏览器关于 Largest Contentful Paint (LCP) 的计算机制
LCP 主要衡量的是视觉上最大的页面元素何时出现在屏幕上,这包括图像元素、视频元素或者包含文本的元素(如段落或列表项)。值得注意的是,LCP 的计算只考虑上述内容元素的第一帧的渲染情况。这意味着,如果一个元素在首次渲染时尺寸较小,但随后因为动画或者布局调整而变大,那么这个尺寸的增加不会影响该元素作为 LCP 的计算。因此,优化 LCP 的关键在于尽早、尽快地渲染页面的主要内容。标签(需要注意的是,对于视频来说,LCP 考虑的是海报帧,也就是预览帧,而不是视频本身)、包含文本节点的块级元素(如。原创 2023-11-14 12:14:03 · 48 阅读 · 0 评论 -
使用 Chrome 开发者工具获取网站的 LCP 数据
但是,需要注意的是,由于网络条件、设备性能等因素的影响,同一个网站在不同的环境下的 LCP 时间可能会有所不同。因此,当我们在优化网站性能时,应该尽量在多种条件下进行测试,以确保我们的网站可以在各种环境下都提供良好的用户体验。Largest Contentful Paint(LCP)是一个重要的、用户感知性能的测量指标,它报告了在页面加载过程中,视口内最大可见元素呈现的时间。点击这个按钮,Chrome 就会开始记录你的网站性能。这时,你可以刷新页面,以便让 Chrome 测量从页面加载开始的所有性能指标。原创 2023-10-17 23:04:25 · 110 阅读 · 0 评论 -
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
有些网页设计得具有缺陷,模态对话框弹出来之后,找不到关闭按钮,导致对话框关闭不掉,很尴尬。其实可以通过使用 Chrome 开发者工具移除模态对话框对应的 DOM 元素,来实现去除模态对话框的目的。具体操作步骤:打开 Chrome 开发者工具,切换到 Elements 标签页,找到模态对话框对应的 DOM 元素,右键,选择 Delete element 即可:之后模态对话框就从界面上消失了:此外大家注意到这个菜单了吗?原创 2023-10-16 10:52:58 · 68 阅读 · 0 评论 -
Chrome 开发者工具里观察到的错误消息 net - ERR_CONNECTION_RESET
首先,我们必须理解什么是 TCP 连接。TCP(传输控制协议) 是一种面向连接的、可靠的、基于字节流的传输层通信协议。当浏览器尝试访问一个网页时,它会首先通过 TCP 协议与服务器建立一个连接。如果这个连接在数据传输过程中被突然断开,就会出现。是一个常见的网络错误,通常出现在浏览器试图访问网页时。这个错误意味着在尝试访问目标服务器时,TCP 连接被突然重置了。错误的具体步骤取决于具体的原因。错误有许多可能的原因。原创 2023-08-12 23:08:10 · 1004 阅读 · 0 评论 -
什么是 Google Tag Manager 的 Data Layer Object?
在这个示例中,我们将向 Data Layer Object 添加一些有关用户购买的信息,然后使用 Google Tag Manager 将这些信息发送到 Google Analytics 中。然后,在 Google Tag Manager 中,您可以使用这些变量来触发标签和跟踪事件,以便对用户行为进行分析和营销优化。在 Google Tag Manager 中,我们可以使用这些变量来创建标签和跟踪事件,以便在 Google Analytics 中分析购买行为。原创 2023-04-06 21:36:17 · 197 阅读 · 0 评论 -
Node.js 应用高 CPU 占用率的分析方法
但是有一个更好的方法,使用检查器模块 https://nodejs.org/api/inspector.html 按需获取配置文件。它是一个 Node.js 内置模块,开发人员不必安装任何额外的依赖项,但建议使用。在大多数情况下,如果性能问题只能在生产系统重现,那么这种问题分析起来确实很棘手,因为我们需要相同的环境配置、相同的数据库、缓存等数据。性能问题可能只针对某些类别的用户,因为他们有特定的数据。这不是一个好的选择,因为在调试模式下 Node.js 进程会消耗更多资源,而且不安全。原创 2022-09-01 23:25:43 · 1969 阅读 · 0 评论 -
Service Worker Cache 和 HTTP Cache 联合使用的场景讨论
本文基于下列的表格进行讨论。原创 2022-08-03 09:17:32 · 211 阅读 · 0 评论 -
如何使用 Chrome 开发者工具 Performance tab 分析 JavaScript 的执行瓶颈
将下面这段代码插入 SAP Spartacus payment types Component 的 next 方法: console.time('Jerry'); const N = 100000; let A = 0; // const Y = []; for( let i = 0; i < N; i++){ for( let j = 0; j < N; j++){ //Y.push(j); A = A + j原创 2022-04-06 18:56:31 · 1298 阅读 · 0 评论 -
如何修改 Chrome 默认的 font-size
如果您经常因为文本太大或太小而无法在 Google Chrome 中舒适地阅读网站,则可以轻松更改 Windows、Mac、Linux 和 Chromebook 上每个页面的默认字体大小。在我们设置默认字体大小之前,值得注意的是,Chrome 还包含一个名为 Zoom 的功能,可让您使用菜单或键盘快捷键快速更改图像和文本的大小。 与缩放模式不同,在 Chrome 中更改默认字体大小只会改变文本大小,不会影响页面上图像的大小。How to Change Chrome’s Default Font Size原创 2022-02-17 20:03:45 · 928 阅读 · 0 评论 -
推荐一个非常好用的Chrome扩展应用,用于美化Json字符串
这个Chrome扩展应用的名称叫JSON Viewer Awesome1.0.6:安装之后,在Chrome工具栏会出现一个紫色的小图标:然后可以把任意Json字符串直接贴到Chrome界面里:点Parse JSON, 就可以以树状结构显示结果:或是以Chart方式显示,并且能随意拖动:这个Chrome应用以黑色作为背景色,风格大气稳重, 适合程序猿使用.要获取更多Jerry...原创 2018-12-09 13:41:03 · 757 阅读 · 0 评论 -
Chrome浏览器扩展程序的本地备份
由于众所周知的原因,有些朋友可能很难在线下载Chrome扩展程序。一种选择是可以让朋友把他成功安装的Chrome扩展程序导出成本地文件,然后让朋友发送给自己,在自己本地电脑上报这些本地文件直接拖到Chrome扩展程序设置页面上,这样无需网络,也能实现扩展程序的离线安装。本文介绍如何在一台已经安装了某个Chrome扩展程序的电脑上,将Chrome扩展程序导出成本地文件。大家在自己Chrome浏览...原创 2018-10-01 22:26:58 · 2074 阅读 · 0 评论 -
Chrome开发者工具关于网络请求的一个隐藏技能
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子。抓取帖子用的JavaScript函数如下:function getPostByAJAX(requestURL){ var html = $.ajax({ url: requestURL, async: false}).response...原创 2018-09-13 22:54:51 · 4284 阅读 · 1 评论 -
如何用Chrome自带的截屏功能截取超过一个屏幕的网页
提升程序员工作效率的工具/技巧推荐系列推荐一个功能强大的文件搜索工具SearchMyFiles介绍一个好用的免费流程图和UML绘制软件-Diagram Designer介绍Windows任务管理器的替代者-Process Explorer介绍一个强大的磁盘空间检测工具Space Sniffer如何在电脑上比较两个相似文件的差异程序员工作效率提升系列-推荐一个JSON文件查看和修改的...原创 2018-09-09 11:19:47 · 4857 阅读 · 1 评论 -
使用JavaScript调用手机平台上的原生API
我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比如Android,iOS)的原生应用。那么,您也许会有一些需求,需要在您的前端应用里使用到手机平台的一些原生API,比如使用手机Mobile操作系统提供的传感器(Sensor)。这些任务是Java...原创 2018-08-12 20:14:15 · 4363 阅读 · 0 评论 -
在Windows笔记本上调试运行在iOS设备上的前端应用
我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备。我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统。有的时候一个开发好的前端应用,在Android设备上正常工作,但是在iOS平板上测试却发现问题(相当广大前端开发者都曾经遇到过类似问题)。顺手就想调试一下找到原因。那么一个前端应用运行在iOS设备上,程序员如何在...原创 2018-08-15 11:45:34 · 7918 阅读 · 1 评论 -
JavaScript的语音识别
有没有想过给您的网站增添语音识别的功能?比如您的用户不用点鼠标,仅仅通过电脑或者手机的麦克风发布命令,比如”下拉到页面底部”,或者“跳转到下一页”,您的网站就会执行对应命令。听起来很酷对么?然而为了实现这个功能,必须得让您网站的JavaScript脚本能够识别到这些语音输入。这里介绍一个开源的JavaScript语言输入库,名叫annyang。Github地址:https://gith...原创 2018-08-15 11:44:23 · 3730 阅读 · 0 评论 -
介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer
在前端开发人员做开发时,当进入到和后台 API 联调阶段时,不可避免会遇到 CORS 错误。本文介绍一个 Chrome 扩展,可以用来在开发阶段避免 CORS 问题。注意,这个扩展不能用于生产用途,以免引起 security issue.Chrome 扩展地址:https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-US我写了一段简单的原创 2021-11-05 11:08:12 · 1330 阅读 · 1 评论 -
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
图一是 Chrome 开发者工具默认的 Light 风格。在设置选项里,选择 Dark,即可加载如下图所示的风格:还可以安装这个 Material DevTools Theme Collection:在 Chrome 开发者工具的 Experiments 选项里,勾上“Allow extensions to load custom stylesheets”:然后 Theme 选择 System preference:之后即可使用如下图所示的 Material Design Theme:原创 2021-10-23 12:16:25 · 478 阅读 · 0 评论 -
使用工具分析 SAP UI5 应用前端执行的性能问题
这是 Jerry 2021 年的第 66 篇文章,也是汪子熙公众号总共第 343 篇原创文章。国庆黄金周开始的前一天,9月30日,我所在的开发团队收到了一个关于 Angular 应用的服务器端渲染(Server Side Render,简称为 SSR)的客户 incident,让我有机会学习如何使用 Chrome 开发者工具来分析 Web 应用的性能问题。Jerry 之前曾经写过一篇关于 Chrome 开发者工具的文章:Jerry和您聊聊Chrome开发者工具,本文算是该文的后续。本来我是想用 An原创 2021-10-16 13:09:19 · 412 阅读 · 0 评论 -
Chrome 开发者工具 live expression 的用法
live expression 相当于给 Chrome 开发者工具 console 面板里的表达式置顶,并且能随着用户点击的变化,而动态刷新该置顶的表达式。看个例子:点击下图绿色高亮的图标,输入一个想要置顶的 JavaScript 表达式,比如 document.activeElement:然后在 UI 上点击,使得当前处于活动状态的 UI 元素发生变化,观察到 console 里 document.activeElement 的值也跟着发生变化了:看一些该 live expression 发生变原创 2021-10-15 16:18:09 · 408 阅读 · 0 评论 -
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
渲染阻止资源(render-blocking resources)是浏览器必须下载、解析和执行才能显示页面的外部 JavaScript 或 CSS 文件。 目标是仅运行正确显示页面所需的核心 CSS 和 JavaScript 代码。打开 coverage 标签页:点击下图这个图标,会以 instrumenting 模式重新加载应用:结果显示,webpack 生成的 vendor.js 文件,有多达 40% 的代码并没有在 SAP Spartacus UI 首页加载的时候被执行:前面有红色横条的原创 2021-10-13 16:56:16 · 1559 阅读 · 0 评论 -
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
Optimize website speed每当您着手提高站点的负载性能时,请始终从 audit 开始。 审计有两个重要功能:它为您创建了一个基线来衡量后续更改。它为您提供有关哪些更改将产生最大影响的可行提示。本文使用下面这个网站应用作为例子。https://glitch.com/edit/#!/tony点击 Tony, 然后再点击 remix this,得到一个名称随机生成的项目:点击 show 按钮,打开一个新的 tab. 按 F12 打开 Chrome 开发者工具,切换到 Ligh原创 2021-10-13 16:27:41 · 523 阅读 · 0 评论 -
介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用 - Night Eye
这个扩展的名称:Night Eye - Dark mode on any website可以直接在 Chrome extension web store 里下载。看个使用的例子:这是我正常的网页:这个扩展安装成功后,在右上角扩展图标栏里能看到对应的图标,点击:选择“黑暗”模式即可:切换成黑色模式之后的网页:点击这个齿轮图标,可以进行自定义设置:即使不付费,也可以永久使用,只是只能切换最多五个网站为深色模式:更多Jerry的原创文章,尽在:“汪子熙”:...原创 2021-10-13 11:49:53 · 480 阅读 · 0 评论 -
Chrome 开发者工具 performance 标签页的用法
Analyze runtime performance运行时性能是您的页面在运行时的表现,而不是加载。 就 RAIL 模型而言,本文介绍的方法对于分析页面的响应、动画和空闲阶段非常有用。在隐身模式下打开谷歌浏览器。 隐身模式可确保 Chrome 以干净的状态运行。 例如,如果您安装了很多扩展,这些扩展可能会在您的性能测量中产生干扰。在您的隐身窗口中加载以下页面。 这是您要分析的演示。 该页面显示了一堆上下移动的蓝色小方块。https://googlechrome.github.io/devtool原创 2021-10-13 11:48:43 · 570 阅读 · 0 评论 -
使用 Chrome Dev tools 分析应用的内存泄漏问题
Catching memory leaks with Chrome DevTools当分配的内存没有返回给操作系统或内存池时,我们将其称为内存泄漏。 在这种情况下,内存未被任何应用程序使用,并且被不必要地占用。 这会导致低性能、高延迟和频繁崩溃。Understanding memory leaks如果您熟悉 C 等低级语言,您一定使用过 malloc() 和 free()。 相比之下,JavaScript 在创建对象时自动分配内存,并在不再使用时释放它。好吧,因为它是自动管理的,所以我们作为开发人员原创 2021-09-30 10:00:00 · 831 阅读 · 0 评论 -
Chrome 开发者工具无法显示服务器正常返回的 HTTP 请求 - Failed to load response data
今天做开发时遇到一个问题,Chrome 开发者工具 network 标签里,虽然一个 HTTP 请求已经成功从服务器端返回,但是 Chrome 开发者工具里,仍然显示 Failed to load response data:这个请求 Status 200,正常返回。同样的 url,重新放到一个新的浏览器窗口却可以正常访问:在这个StackOverflow 讨论里找到了答案:我 network 标签页里设置了 Preserve log, 然后我查看的正好是前一次网页刷新产生的 HTTP 请求原创 2021-07-13 11:43:09 · 2635 阅读 · 0 评论 -
关于 SAP UI5 Table 控件中行合并的实现方式
有朋友在我的技术交流群里询问这个问题:如何在 SAP UI5 表格控件里,实现行合并和列合并的效果:行合并相对来说容易实现:SAP UI5 官方网站上,有现成的实现。起作用的是 Column tag 的 mergeDuplicates 为 true 的属性。更多Jerry的原创文章,尽在:“汪子熙”:...原创 2021-06-02 15:53:55 · 427 阅读 · 3 评论 -
如何处理使用 SAP UI5 消费真实的 OData 服务时遇到的跨域问题
我本地开发了一个 SAP UI5 应用,消费真实的 OData 服务:https://services.odata.org/Northwind/Northwind.svc会遇到跨域问题错误:CORS errorAccess to XMLHttpRequest at ‘https://services.odata.org/Northwind/Northwind.svc/$metadata?sap-language=EN’ from origin ‘http://localhost:3002’ ha原创 2021-06-01 13:48:06 · 513 阅读 · 3 评论 -
如何在Chrome development tool里查看C4C前台发送的未经 GZIP 压缩之前的请求细节
我们可以在Chrome development tool的network tab里观察到从前台UI发送到后台的HTTP请求:更多Chrome Development Tool的使用工具请查看我的博客Chrome Development Tool tips used in my daily work但是直接查看到的是经过gzip之后的内容。如何查看压缩之前的请求体内容呢?鼠标放在Ht...原创 2018-03-10 20:53:28 · 467 阅读 · 0 评论 -
使用DOM Breakpoints找到修改属性的Javascript代码
使用Chrome开发者工具的DOM断点功能可以让您快速找到修改了某一个DOM元素的Javascript代码。在Chrome开发者工具里,选中想要监控的DOM元素,点击右键,选择Break on->Attributes modifications:之后在DOM Breakpoints的tab里能看到对应的断点:然后回到Chrome里继续操作,Chrome开发者工具的调试器就...原创 2018-02-21 18:53:32 · 861 阅读 · 0 评论 -
利用Chrome的Heap Snapshot功能分析一个时间段内的内存占用率
在下图测试代码第13行和第16行设断点. 以调试方式运行,首先断点在第13行处触发:打开Chrome开发者工具,点击Profiles tab, 再点击按钮”Take Snapshot”:生成一个Snapshot, ID为3:继续以调试mode执行代码到第16行,点击按钮”Take heap snapshot”以生成第二个snapshot。从下拉菜单里选择”Objects a...原创 2018-02-21 16:39:46 · 1897 阅读 · 0 评论 -
Chrome 浏览器扩展 - Dark Web - Dark Theme for Chrome
Jerry 之前的文章 Chrome 浏览器扩展 - Night Eye ,介绍的 Night Eye 这款 Chrome 浏览器扩展,只有三个月的试用期。因此我又在网上找到了另一款完全免费的 Chrome 浏览器扩展,能够将任何网页的风格设置成暗黑风格。这个扩展的名称叫做 Dark Web - Dark Theme for Chrome使用非常方便。安装之后,Chrome 扩展列表里,会出现一个新的暗黑色图标。点击之后,整个网页会变成黑色背景:对比普通背景。这个效果还是相当不错的:更多Jer原创 2021-04-15 19:11:57 · 493 阅读 · 0 评论 -
Chrome 浏览器扩展 - Night Eye
我以前一直使用一款叫做 Care your Eyes 的 Chrome 浏览器扩展,能将任何网站背景设置成黑色。最近我的 Chrome 升级到下列这个版本后,发现这个扩展无法工作了:Version 89.0.4389.114 (Official Build) (64-bit)于是更换了一个名叫 Night Eye 的扩展。在 Chrome 扩展商店下载安装之后,发现其有三个月的试用期。我平时经常用的知乎和 CSDN,未开启 night 模式时默认的效果:使用 Night Eye 开启深色原创 2021-04-15 16:54:55 · 414 阅读 · 0 评论 -
如何在Chrome开发者工具里找出SAP Fiori frontend server的systen ID
# Created by Jerry Wang, last modified on Dec 01, 2015 Frontend server的system ID能通过Chrome的Network检测请求start_up的response来获得:![clipboard1](https://user-images.githubusercontent.com/5669954/27771952-c...原创 2019-06-20 11:03:37 · 550 阅读 · 0 评论 -
如何检查并unregister本地注册的Chrome service worker
如何检查?Check that there are no service workers registered in your app. If you do find any service workers, remove them.Chrome开发者工具,Application-> Service Workers->See all registrations:全部关闭:更多Jerry的原创文章,尽在:“汪子熙”:...原创 2021-01-20 12:06:33 · 476 阅读 · 0 评论 -
Chrome开发者工具Cookie标签里看到的ga cookie是什么意思
如图:![clipboard1](https://user-images.githubusercontent.com/5669954/58786529-567fd280-861a-11e9-8127-892e2a7b8387.png)答案是和这个analytics.js有关,google家的东西。![clipboard2](https://user-images.git...原创 2019-06-09 11:10:28 · 4819 阅读 · 0 评论 -
使用Chrome开发者工具分析JavaScript garbage collector(垃圾回收器)的实现原理
I use the following simple JavaScript code to illustrate:var JerryTestArray = [];(function(){ for( var i = 0; i < 100; i++){ JerryTestArray[i] = document.createElement("div"); }})();Create a new empty tab in your Chrome, and first原创 2020-08-16 14:08:50 · 425 阅读 · 0 评论 -
Chrome开发者工具使用console.trace的一个小技巧
我们在Chrome开发者工具里调试的时候,有时需要把函数执行的调用堆栈信息保存到本地以便进一步处理:然而Call stack列表下的数据无法复制粘贴。其实,我们只需要在console控制台里,输入console.trace:这里打印的callstack是可以复制粘贴的:ctrl v到本地即可:更多Jerry的原创文章,尽在:“汪子熙”:...原创 2021-01-08 19:28:11 · 1873 阅读 · 0 评论 -
Chrome开发者工具一个有用的快捷键组合:Ctrl+Shift+E
看一个例子:选中下面的高亮代码:同时按下Ctrl+Shift+E,被选中的代码就会自动被粘贴到Chrome开发者工具控制台上并执行:原创 2021-01-08 15:58:51 · 1093 阅读 · 1 评论