封面图

如何将 css 从 Application bundle 资源中剥离出来

2023-04-06
阅读 2 分钟
548
Web 应用的 Application Bundle 是一个包含所有应用程序代码和资源的文件集合,它们被打包在一起以便于部署和分发。Application Bundle 通常包含 HTML、CSS 和 JavaScript 文件,以及任何相关的图像、字体和其他静态资源。
封面图

Angular 错误消息:ERROR Error NullInjectorError No provider for XX

2023-03-30
阅读 1 分钟
718
错误消息 ERROR Error: NullInjectorError: No provider for CustomI18nConfigInitializer! 应该如何处理?

封面图

给 SAP Commerce Cloud Storefront 设置 endpoint

2022-09-02
阅读 2 分钟
473
端点配置在构建清单(build manifest.json )和云门户(Cloud Portal)中进行管理。 在构建清单中,您可以为店面域(domain)定义可选路径。 在云门户中,您可以编辑域并应用 SSL 证书(certificate)来保护店面。
封面图

在 Chrome 开发者工具里通过 network 选项模拟网站的离线访问模式

2022-08-04
阅读 2 分钟
825
Service Worker 缓存 API 的一个主要优点是它为您提供了比内置浏览器缓存更详细的控制。 例如,Service Worker 可以在用户首次运行您的 Web 应用程序时缓存多个请求,包括他们尚未访问的资产。 这将加快后续请求。 还可以实现自己的缓存控制逻辑,确保被认为重要的资产保留在缓存中,同时删除较少使用的数据。
封面图

Chrome 开发者工具 network 显示 Provisional headers are shown 的几种原因

2022-07-22
阅读 1 分钟
1.1k
HTTP 标头是显示在超文本传输协议 (HTTP) 的消息标头的请求和响应消息中的名称或值对。 请求标头包含有关要获取的资源或请求资源的客户端的更多信息。 响应标头包含有关响应的附加信息,例如其位置或提供它的服务器。 这些标头通常对最终用户不可见,仅由服务器和客户端应用程序处理或记录。

SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息

2022-02-22
阅读 3 分钟
964
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录SAP UI5 本地开发环境的搭建SAP UI5 应用开发教程之一:Hello WorldSAP UI5 应用开发教程之二:SAP UI5 的引导过程 BootstrapSAP UI5 应用开发教程之三:开始接触第一个 SAP UI5 控件SAP UI5 应用开发教程之四:XML 视图初探SAP UI5 应用开发教程之五:视图控制器初探...

SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版

2022-02-22
阅读 3 分钟
1k
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录SAP UI5 本地开发环境的搭建SAP UI5 应用开发教程之一:Hello WorldSAP UI5 应用开发教程之二:SAP UI5 的引导过程 BootstrapSAP UI5 应用开发教程之三:开始接触第一个 SAP UI5 控件SAP UI5 应用开发教程之四:XML 视图初探SAP UI5 应用开发教程之五:视图控制器初探...
封面图

Angular Universal 学习笔记

2022-01-09
阅读 3 分钟
928
如果配置得当,我们可以将所有的内容都在服务器端渲染,避免在浏览器端再次调用 API.首先命令行安装 Angular Universal:ng add @nguniversal/express-engine执行命令行 npm run build:ssrbrowser:是执行命令行 ng build — prod 之后的结果。server folder: 是执行命令行 ng run PROJECT_NAME:server:production 的结果...
封面图

Cypress 基础 - 元素的定位

2021-12-13
阅读 2 分钟
1.5k
首先,让我们看看 .selector 部分的内容。 Cypress 通过查询 DOM 来选择元素。 如果您曾经玩过 CSS 或使用过 jQuery,或者如果您熟悉 JavaScript 中的 document.querySelector 命令,您可能已经熟悉此类选择器。 让我们看看这是什么意思。 作为一个例子,我们可以查看一个看起来像这样的页面:
封面图

介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer

2021-11-16
阅读 2 分钟
1.8k
本文介绍一个 Chrome 扩展,可以用来在开发阶段避免 CORS 问题。注意,这个扩展不能用于生产用途,以免引起 security issue.
封面图

如何给 Chrome 开发者工具设置 Material Design 风格的主题外观

2021-11-02
阅读 1 分钟
2.1k
图一是 Chrome 开发者工具默认的 Light 风格。在设置选项里,选择 Dark,即可加载如下图所示的风格:还可以安装这个 Material DevTools Theme Collection:在 Chrome 开发者工具的 Experiments 选项里,勾上“Allow extensions to load custom stylesheets”:然后 Theme 选择 System preference:之后即可使用如下图所示...
封面图

使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况

2021-10-17
阅读 2 分钟
1.2k
渲染阻止资源(render-blocking resources)是浏览器必须下载、解析和执行才能显示页面的外部 JavaScript 或 CSS 文件。 目标是仅运行正确显示页面所需的核心 CSS 和 JavaScript 代码。
封面图

介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用 - Night Eye

2021-10-13
阅读 1 分钟
1.4k
这个扩展的名称:Night Eye - Dark mode on any website 可以直接在 Chrome extension web store 里下载。看个使用的例子:这是我正常的网页:这个扩展安装成功后,在右上角扩展图标栏里能看到对应的图标,点击:选择“黑暗”模式即可:切换成黑色模式之后的网页:点击这个齿轮图标,可以进行自定义设置:即使不付费,也可...
封面图

Chrome 开发者工具 performance 标签页的用法

2021-10-13
阅读 5 分钟
2k
在隐身模式下打开谷歌浏览器。 隐身模式可确保 Chrome 以干净的状态运行。 例如,如果您安装了很多扩展,这些扩展可能会在您的性能测量中产生干扰。
封面图

使用 Chrome Dev tools 分析应用的内存泄漏问题

2021-10-02
阅读 3 分钟
1.4k
当分配的内存没有返回给操作系统或内存池时,我们将其称为内存泄漏。 在这种情况下,内存未被任何应用程序使用,并且被不必要地占用。 这会导致低性能、高延迟和频繁崩溃。
封面图

使用 Chrome 开发者工具分析内存问题

2021-10-02
阅读 5 分钟
1.8k
这里的关键是使用 RAIL 模型并关注您的用户。 找出哪些设备受用户欢迎,然后在这些设备上测试您的页面。 如果体验始终不佳,则页面可能超出了这些设备的内存容量。
封面图

Chrome 开发者工具 workspace 的概念

2021-09-26
阅读 2 分钟
2.3k
本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区。 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上的源代码中。
封面图

Chrome View Source Code 那些事

2021-08-07
阅读 4 分钟
1.9k
您页面的源代码会影响您的 SEO。 这是因为它是搜索引擎“阅读”的内容,以确定您的网站排名。 这基本上意味着页面源中未检测到的错误可能会导致您的网站无法按预期排名,更糟糕的是,会导致 SEO 数据不准确甚至糟糕的用户体验。
封面图

Chrome 开发者工具无法显示服务器正常返回的 HTTP 请求 - Failed to load response data

2021-07-15
阅读 1 分钟
8.1k
今天做开发时遇到一个问题,Chrome 开发者工具 network 标签里,虽然一个 HTTP 请求已经成功从服务器端返回,但是 Chrome 开发者工具里,仍然显示 Failed to load response data:

一个好用的查看Angular应用ngrx状态的Chrome扩展:Redux devTools

2020-12-05
阅读 2 分钟
1.6k
Redux DevTools:[链接]安装完毕后,在Chrome开发者工具里会多出一个Redux面板:以及在Chrome右上角的扩展工具栏里,会点亮Redux DevTools对应的图标。此时在redux面板里即可方便的查看ngrx相关的state和action:可以输入关键字进行过滤,比如查看和Currency加载相关的action:action包含type和payload:把这个type复制...

使用Chrome开发者工具研究JavaScript里函数的原生实现

2020-05-11
阅读 3 分钟
1.5k
As the size of my blog Chrome Development Tool tips used in my daily work turns to be larger I create a separate post to record down this small tip.Are you curious about the “native code” here? At least I am.

Chrome开发者工具里的一个隐藏技能:chrome://net-internals

2020-05-07
阅读 4 分钟
1.8k
During my holiday I was writing a small tool for fun, which extracts my personal posts from [链接] for further analysis.I am using AJAX in jQuery to perform a synchronous call to fetch html source code of given url specified by argument requestURL.、

如何将Chrome本地安装的扩展应用导出到本地

2019-07-14
阅读 2 分钟
1.5k
有时由于种种原因,我们不能直接使用Chrome web store进行Chrome扩展应用的安装,这时可以让一位已经安装了某Chrome扩展应用的朋友将他的应用导出到本地成为.crx文件,然后发给你,这样你就可以通过.crx文件进行离线安装了。这种方式也可以用来作为Chrome扩展应用的备份。

小技巧:浏览器里显示成星号的密码,忘记了该怎么办?

2019-01-15
阅读 1 分钟
3k
很简单,Chrome浏览器里按F12打开开发者工具,切换到Elements面板,点击下图Step1的图标,然后单击密码显示框,保持这个字段处于选中状态,然后切换到Console标签页,输入$0.value, 回车就能看到密码了。

推荐一个可以把网页背景色调成护眼色的Chrome扩展应用

2018-12-13
阅读 1 分钟
8.7k
我在网上逛了一圈,找到一个比较实用的Chrome扩展应用,可以一键实现将Chrome打开网页的背景色修改成护眼的豆沙绿,这样在网上浏览网页,眼睛舒服多了。

推荐一个非常好用的Chrome扩展应用,用于美化Json字符串

2018-12-13
阅读 1 分钟
3k
这个Chrome扩展应用的名称叫JSON Viewer Awesome 1.0.6: 安装之后,在Chrome工具栏会出现一个紫色的小图标: 然后可以把任意Json字符串直接贴到Chrome界面里: 点Parse JSON, 就可以以树状结构显示结果: 或是以Chart方式显示,并且能随意拖动: 这个Chrome应用以黑色作为背景色,风格大气稳重, 适合程序猿使用. 要获取更多Jerr...

推荐一个Chrome扩展应用,能够自动去除CSDN广告

2018-12-13
阅读 1 分钟
2.9k
作为一个程序员,每天编程遇到问题时,少不了前往国内著名的CSDN网站上查信息,看是否有同行遇到类似问题。很多时候根据遇到问题的错误消息进行搜索,结果都是一篇篇CSDN博客。这些博客打开后都会显示很多广告,如下图所示。

Chrome浏览器扩展程序的本地备份

2018-10-28
阅读 2 分钟
2.9k
由于众所周知的原因,有些朋友可能很难在线下载Chrome扩展程序。一种选择是可以让朋友把他成功安装的Chrome扩展程序导出成本地文件,然后让朋友发送给自己,在自己本地电脑上报这些本地文件直接拖到Chrome扩展程序设置页面上,这样无需网络,也能实现扩展程序的离线安装。

推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈

2018-10-26
阅读 3 分钟
11.8k
对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue。在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的。

Chrome开发者工具关于网络请求的一个隐藏技能

2018-10-26
阅读 3 分钟
4.5k
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子。 抓取帖子用的JavaScript函数如下: {代码...} 就是一个非常简单的AJAX请求: 传入该函数的输入参数requestURL的值为: [链接] 上面的url,我直接在浏览器里访问可以正常工作,返回47.2KB大小的数据。 然而当我...

如何用Chrome自带的截屏功能截取超过一个屏幕的网页

2018-10-26
阅读 2 分钟
6.3k
提升程序员工作效率的工具/技巧推荐系列 推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer 介绍Windows任务管理器的替代者-Process Explorer 介绍一个强大的磁盘空间检测工具Space Sniffer 如何在电脑上比较两个相似文件的差异 程序员工作效率提升系列-推荐一个JSO...

SAP成都研究院安德鲁:自己动手开发一个Chrome Extension

2018-10-23
阅读 6 分钟
1.8k
各位好,我叫何金鑫(He Andrew), 团队同事亲切地称呼在下为安德鲁。如果你在附近找到wifi热点名为 「安德鲁森面包房5g」,可能是我就在附近,我们可以去喝杯咖啡,聊聊最近有趣的东西。

Chrome开发者工具中Elements(元素)断点的用途

2018-05-13
阅读 1 分钟
4k
按照经验判断,这个文字肯定是一个JavaScript function通过setTimeout每隔一秒执行的。如何快速找到这个function以及setTimeout的调用位置呢?