封面图

如何给 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 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:

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的调用位置呢?