文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 Google 浏览器 Chrome 的扩展

Google 浏览器 Chrome 是我现在主要使用的浏览器，Chrome 更新到 2.0 之后，除了支持 Greasemonkey 之外，也开始支持扩展。...启用 Google 浏览器 Extensions 现在目前 Chrome 官方已经提供了两款 Google Chrome 的扩展： Chrome Extensions: Gmail Checker...在 Google Reader 中订阅 这个扩展能够让你非常容易和快速使用 Google Reader 订阅当前网页的 Feed。...安装 + 下载源代码 当然对于那些想自己动手写 Chrome 扩展的同学，这里有一个教程教你如何创建一个非常简单的 Chrome 扩展。...目前删除 Chrome 的扩展比较麻烦，需要手工到你的用户数据目录（user data directory ）下找到相应的扩展，然后删除它，不过 Chrome 承诺以后会更加容易删除扩展。 ----

92120
您找到你想要的搜索结果了吗？
是的
没有找到

10个必须知道的Chrome开发工具和技巧

模拟慢速网络和慢速设备 我们可能习惯了在城市的网速，那是杠杠的，并不意味网速在中国哪个都一样的，在一些偏远地方，网速依然慢的可怜，所以有时候我们所做的产品是需要考虑网速慢的情况的，那怎么模拟呢？...但是这与越来越多的用户使用移动设备访问网络的趋势相脱离。 为了提高网站的用户体验，我们需要准确地知道网站在移动设备上的效果。...Chrome 开发者工具包里加入了手机模拟器特性，帮助我们测试： image.png 对于大多数人而言，大多数时间只需要通过不同的屏幕尺寸和方向查看他们的网站即可。...Extensions 我们可以将扩展程序安装到Chrome开发者控制台。 许多框架都有自己的扩展名，以简化其技术（Vue，Angular，React等）的开发。...这是Featured DevTools扩展的列表。 9.

1.2K20

10个 Chrome 开发工具和技巧

模拟慢速网络和慢速设备 我们可能习惯了在城市的网速，那是杠杠的，并不意味网速在中国哪个都一样的，在一些偏远地方，网速依然慢的可怜，所以有时候我们所做的产品是需要考虑网速慢的情况的，那怎么模拟呢？...但是这与越来越多的用户使用移动设备访问网络的趋势相脱离。 为了提高网站的用户体验，我们需要准确地知道网站在移动设备上的效果。...Chrome 开发者工具包里加入了手机模拟器特性，帮助我们测试： image.png 对于大多数人而言，大多数时间只需要通过不同的屏幕尺寸和方向查看他们的网站即可。...Extensions 我们可以将扩展程序安装到Chrome开发者控制台。 许多框架都有自己的扩展名，以简化其技术（Vue，Angular，React等）的开发。...这是Featured DevTools扩展的列表。 9.

82830

什么是 Web 应用性能评测领域的 RAIL 模型

由于人类的感知是相对恒定的，这些目标不太可能很快改变。 准则:帮助您实现目标的建议。 这些可能特定于当前的硬件和网络连接条件，因此可能会随着时间而改变。...指南： 在您的用户中常见的移动设备和网络连接上测试您的负载性能。 您可以使用 Chrome 用户体验报告来了解您用户的连接分布。...如果数据不适用于您的站点，移动经济 2019 建议良好的全球基线是中端 Android 手机，例如 Moto G4 和慢速 3G 网络（定义为 400 ms RTT 和 400 kbps 传输速度 ）。...Chrome DevTools 以下 DevTools 功能特别相关： 限制 CPU 以模拟功能较弱的设备 限制网络以模拟较慢的连接 查看主线程活动以查看录制时主线程上发生的每个事件 使用 Main...Lighthouse Lighthouse 可在 Chrome DevTools、web.dev/measure、Chrome 扩展、Node.js 模块和 WebPageTest 中使用。

1.4K20

Puppeteer已经取代PhantomJs

是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。...创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。 捕获时间线跟踪 您的网站以帮助诊断性能问题。 测试Chrome扩展程序。...以下片段仅收集一些简单的介绍以及一些例子，具体使用时，可以在官网进行更详细的查询 简单入门介绍 Puppeteer 中的 API 分层结构基本和浏览器保持一致，下面对常使用到的几个类介绍一下： Browser...'); //使用 puppeteer.launch 启动 Chrome (async () => { const browser = await puppeteer.launch({...将 Page DOM Environment 中元素和对象封装成对应的 Node.js 对象，这样可以直接这些对象的封装函数进行操作 Page DOM 一些简单的使用例子 1、页面截图 我们使用 Puppeteer

6K10

JavaScript 开发者需要了解的15个 DevTools 技巧

忽略 localhost 域上的 SSL 错误 --disable-extentions 禁用影响渲染的 Chrome 扩展，例如广告拦截器 --window-size=,<height...网速节流 在快速，可靠的网络上使用高性能的设备测试你的站点可能并不能表示实际使用情况。你的用户可能处在慢速的网络环境下。...模拟移动硬件 智能手机和平板电脑通常包括诸如全球定位系统（GPS），陀螺仪和加速度计之类的硬件。这些通常在电脑上是不可用的，这会使使用地理定位等 API 进行开发变得非常困难。...Chrome 可以在 DevTools 中模拟设备硬件 - 从 More tools 菜单中选择 Sensors ： ? 有几个选项： 选择一个主要城市或输入自定义的纬度和经度。...也可以将该位置设置为不可用，来模拟 GPS 信号弱的场景。 使用预设或自定义指标设置设备方向。你可以点击和智能手机拖到绕X任何Ÿ轴，或按住 Shift 围绕旋转z轴。

4.7K20

Web性能优化：不要与浏览器预加载扫描器对抗

这个延迟使我们更容易在网络瀑布图中看到预加载扫描器的工作情况。 图4：在移动设备上通过模拟3G连接在Chrome上运行的网页的 WebPageTest 网络瀑布图。...图5：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。该页面包含一个样式表和一个注入的异步脚本。...图9：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。...在这个简化的例子中，结果是在慢速连接的情况下，LCP提高了100毫秒。...可以无效化预加载扫描器的一种模式是使用客户端 JavaScript 呈现标记： 图12：通过模拟 3G 连接在移动设备上的 Chrome 上运行的客户端呈现网页的 WebPageTest 网络瀑布图。

5.2K151

Puppeteer 入门与实战

一、起因 虽说Puppeteer是Chrome开发团队2017年发布的一个 Node.js包，但是在团队日常工作中基本没有使用。...https://vivo.com.cn 注意：在Mac上使用前，建议先绑定Chrome的别名 alias chrome="/Applications/Google\ Chrome.app/Contents...除此之外，结合Headless Chrome的一些命令行，Puppeteer可以做到一下几点： 爬取页面数据 页面截屏或者生成PDF文件 前端自动化测试（模拟输入/点击/键盘行为） 捕获站点的时间线，分析网站性能问题...而在Page中的一些操作，如点击/模拟输入，则是调用的DomWorld实例，DomWorld通过FrameManager管理，Page对象主要使用三种manager来管理常见操作: FrameManager...毫秒后） networkidle2 - 只有2个网络连接时触发（至少500毫秒后） 该处用到的是不再有网络连接认为页面跳转完成。

2K40

【神器下载】新版华为模拟器eNSP Pro还可以这么安装！

eNSP Pro eNSP Pro是华为公司数据通信产品线推出的设备模拟器 主要应用在数据通信技能培训，为使用者提供华为数据通信产品设备命令行学习环境。...值得注意的是： 常见8核16G内存电脑支持模拟3台~6台设备， 如需大规模组网，建议使用高规格服务器部署。...数通模拟器部署 （Windows 系统为例） 部署虚拟机： 前提条件 ：个人PC已经安装虚拟机和Chrome浏览器。...2、选择“网络 > 网卡1 > 启用网络连接（E）”，“连接方式（A）”选择“仅主机 （Host-Only）网络”。...双击已创建好的虚拟机或者单击 启动虚拟机。 步骤六： 等待！ 等待20s虚拟机启动完成。打开浏览器（推荐使用Chrome浏览器），在地址栏输入欢迎页屏幕上的网址访问数通模拟器。

3K40

问题解决丨对不起，小米路由器出现网络连接问题无法打开网页

之前Chrome浏览器一直用的好好的，不过最近出现以下问题 “对不起，小米路由器出现网络连接问题无法打开网页”。...奇怪的是，使用Edge浏览器可以正常访问网页，但是Chrome会不行，每次如果要正常访问需要关闭所有Chrome的窗口，重新启动Chrome。...折腾一段时间，参考这篇文章：chrome谷歌浏览器通过小米路由器访问网页一会儿后显示：无法访问Internet，终于解决问题。以下为在上述文章的基础上做的一点点扩展。...点击“立即进行网络诊断”，发现“网络连接正常” ---- 以下是解决方法： Chrome浏览器地址栏输入：chrome://settings/security，进入如下界面 使用自定义DNS，https...如果使用OpenDNS可能会出现访问速度慢的问题，部分网站可能会加载缓慢。 —— END ——

7.4K10

7个能提高你生产力的隐藏Chrome DevTools功能

开发人员工具对于软件开发是必不可少的。我们需要它们来开发、测试和调试我们的工作。作为web应用程序开发人员，您使用Chrome DevTools的几率非常高。...在低端设备上测试Web应用性能 一般而言，我们开发人员都是在具有高速网络连接的高端设备上工作。但不幸的是，我们的用户并不能一直使用高端设备和高速互联网连接。...随着移动设备的兴起，我们都应该更加意识到这种情况。并非每个人都拥有超贵的手机或始终可以访问4G。 您知道如何轻松模拟低端设备和低速网络连接吗？...按右边的齿轮图标打开捕获设置。现在，您可以为网络和CPU选择不同的限制选项。 ? 还有一个更简单的选项来模拟预定义的设备配置文件。...幸运的是，Chrome DevTools也提供了解决方案。 使用视觉缺陷模拟，您可以测试您的web应用程序的人谁有视力模糊，原色盲，后色盲，三色盲，色盲。

1.1K10

Chrome 小技巧

记录log中的值到一个临时变量中 通常我们在chrome的devtools的工具中使用console.log来打印一些值,有时候是一个对象.但是我们想对这个值进行一个后续的操作,比如json转字符串,或者字符串的筛选操作...,我们可以使用下面的操作自动创建一个临时变量进行保存 选中log输出的值,鼠标右键,保存为全局变量.自动会赋值给一个tmp的变量,序号是变量的个数.然后我们就可以使用tmp变量来代替log中的值来进行一些操作了...可以再打开一个控制台,再次使用则关闭 复制控制台的一些内容到系统粘贴板 使用 copy 复制某个对象或对象的某些元素到粘贴板 ?...{ "name": "lili", "age": 18 } 模拟各种网络条件 在devtools的网络工具中,提供了几种默认的上网方式 在线. 2....离线. 3. 3G快速. 4. 3G慢速. 自定义 ?

94042

Chrome 的下一代 Web 渲染架构：RenderingNG

近日，Chris Harrelson（Blink 渲染引擎负责人）在 Chrome 官方博客介绍了 Chrome 下一代渲染架构：RenderingNG。...为了解决这个问题，他们还最大限度地使用了 Web 平台测试。这些测试中的每一个都验证了所有浏览器都应该通过的网络平台的使用模式。 ?...这是因为抢占式多任务处理，这反过来又是一种性能隔离形式：确保独立任务不会相互减慢速度。 在 Web 上，性能隔离的最佳示例就是滚动。...即使在具有大量慢速的 JavaScript 的网站上，滚动也可以非常流畅，因为它运行在不同的线程上，而不必依赖于 JavaScript 和渲染线程。...参考：https://developer.chrome.com/blog/renderingng

1.2K40

前端人的爬虫工具【Puppeteer】

Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，同时还有 Headless Chrome。用来模拟 Chrome 浏览器的运行。...它提供了高级API来通过 DevTools 协议控制无头 Chrome 或 Chromium ，它也可以配置为使用完整（非无头）Chrome 或 Chromium。...总而言之 Headless Chrome 就是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。...创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。 捕获站点的时间线跟踪，以帮助诊断性能问题。 测试Chrome扩展程序。 ......，页面奔溃等现象，所以定时重启 Chrome 实例是有必要的 为了加快性能，关闭没必要的配置，比如：-no-sandbox（沙箱功能），--disable-extensions（扩展程序）等 尽量避免使用

3.2K20

值得关注的一些Network面板小知识

看了下官方的教程，推荐一下⬇️ 地址: https://developer.chrome.com/ 看完之后，收获很大的，很多排查问题的手段都可以在里面找到。...Proxy negotiation：浏览器正在使用代理服务器协商请求。 Request sent：请求正在发送。 Waiting (TTFB)：计算的是整个延迟的往返时间。...可以参考：https://toolbox.googleapps.com/apps/har_analyzer/ ---- 显示更多信息 网络日志的列是可以配置的。您可以隐藏您不使用的列。...---- 模拟较慢的网络连接 你用来建站的电脑的网络连接可能比用户的移动设备的网络连接要快。通过节制页面，你可以更好地了解一个页面在移动设备上加载所需的时间。...] GitHub-[developer.chrome.com]: https://github.com/GoogleChrome/developer.chrome.com/tree/main/site/

54920

值得关注的一些Network面板小知识

看了下官方的教程，推荐一下⬇️ 地址: https://developer.chrome.com/ 看完之后，收获很大的，很多排查问题的手段都可以在里面找到。...Proxy negotiation：浏览器正在使用代理服务器协商请求。 Request sent：请求正在发送。 Waiting (TTFB)：计算的是整个延迟的往返时间。...可以参考：https://toolbox.googleapps.com/apps/har_analyzer/ ---- 显示更多信息 网络日志的列是可以配置的。您可以隐藏您不使用的列。...---- 模拟较慢的网络连接 你用来建站的电脑的网络连接可能比用户的移动设备的网络连接要快。通过节制页面，你可以更好地了解一个页面在移动设备上加载所需的时间。 ?...] GitHub-[developer.chrome.com]: https://github.com/GoogleChrome/developer.chrome.com/tree/main/site/

77010
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券