问题标签 [lighthouse]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
23734 浏览

javascript - 渐进式 Web 应用程序“无法脱机工作”错误

我按照所有可用的指南和示例编写了一个渐进式 Web 应用程序,但是由于某种原因,当我单击Add to homescreen按钮时,我不断收到这个神秘的错误:

我的 PWA 和示例之间的主要区别在于,我的 PWA 纯粹在域的非根路径中运行,所以我不得不在不同的地方为配置添加额外的路径,因此应用程序仅限于非根路径文件夹。

Google Lighthouse网站也没有多大帮助,给出了非常相似的信息。

谁能建议这个错误可能是由什么引起的?

0 投票
1 回答
2016 浏览

google-chrome - 使用 Lighthouse 发送标头

我正在从命令行使用Lighthouse来审核我的网站。

为了从 Chrome 访问我的网站,我需要发送自定义标题(使用修改标题扩展)。

但是,当我lighthouse从命令行启动时:

它会打开一个新的 Chrome 窗口(没有修改标题扩展),因此发送的请求没有标题,没有标题,网站将无法访问,因此无法审核。

关于如何lighthouse使用命令行发送自定义标头的任何建议?

0 投票
3 回答
4857 浏览

html - 从页面中提取使用的 CSS

我需要从 19,000 行 CSS 文件中提取使用过的 CSS,其中 98.4% 未使用(哎哟)。我知道您可以使用 Chrome 开发人员工具来查看 CSS 覆盖率,如下所示:

在此处输入图像描述

但它甚至不允许你跳到绿线。手动通过 19K 行似乎并不可行。

Chrome Lighthouse 似乎也没有让您像过去的开发者工具那样只查看您需要的规则。

我已经尝试过 Firefox 的“CSS Usage”插件(很多网站都推荐),但它需要 FireBug,它本身与当前版本的 FireFox 不兼容。

任何人都可以想出一种方法来仅提取以某种方式使用的 CSS 吗?

0 投票
2 回答
8284 浏览

google-chrome - WebApp:失败:服务工作者没有成功地为清单的 start_url 提供服务

使用 Lighthouse 测试 Web 应用程序后,我遇到了这样的错误:

不会提示用户安装 Web 应用程序浏览器可以主动提示用户将您的应用程序添加到他们的主屏幕,这可以提高参与度。学到更多。

失败:Service Worker 未成功提供清单的 start_url。

满足此处描述的所有标准:

  1. 该站点通过 HTTPS 提供服务。
  2. 服务工作者已注册。
  3. Service Worker 的范围包括您审核的页面和 Web 应用清单的 start_url 属性中指定的页面。
  4. 存在 Web 应用清单并满足以下条件: 具有有效的名称属性。具有有效的 short_name 属性。具有有效的 start_url 属性。具有有效的显示属性,值为独立、全屏或最小用户界面。指定至少为 192 x 192 像素的图标。

清单文件通过脚本呈现。重要的变量是

ServiceWoker.js 非常简单:

Web App 和 sw.js 从 start_url 提供。

我还能检查什么?

编辑 1.当我尝试从 Chrome 控制台“添加到主屏幕”时,我得到:

Site cannot be installed: the page does not work offline这条评论 接近什么

0 投票
1 回答
880 浏览

reactjs - Light House: Manifest's short_name will be truncated when displayed on homescreen

I am not getting this. where we need to add short name in react project.

Make the short_name property in your Web App Manifest less than 12 characters.

{ ... "short_name": "Air Horner", ... }

0 投票
8 回答
9042 浏览

javascript - Lighthouse 审核显示,尽管主体宽度为 100%,但视口的内容大小不正确

我已将我的 html 页面的正文 css 设置为 100%,并且没有边距或填充,但它仍然没有通过以下Google Lighthouse审核“视口的内容大小正确”。

如果 window.innerWidth === window.outerWidth 则审核通过

它说视口大小是 422 像素,而窗口大小是 412 像素,所以这意味着窗口比想要的宽 10 像素。

当我检查 body 元素时,它显示为 412px 宽。

我想通过这次审核,有什么想法导致这个吗?

0 投票
1 回答
3168 浏览

typescript - 在 Typescript 中正确使用 export = 和 export default 为灯塔创建类型

我正在尝试.d.ts为此灯塔文件创建一个,并且努力了解如何处理默认导出

https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/index.js#L28

在这个阶段,我的lighthouse.d.ts项目中有一个文件:

它似乎输入正确。如果我使用 导入import * as lighthouse from "lighthouse";,我可以在我需要的地方lighthouse.default做。lighthouse.flags

但是如果我运行我的代码,我会得到TypeError: lighthouse.default is not a function. 我是否被迫使用export =?如果我没有选择,如何使用export =但导出函数、flags类型和getAuditList, traceCategories, Audit, Gatherer?

0 投票
0 回答
75 浏览

lighthouse - Lighthouse Capture 脚本加载时间

使用灯塔捕获特定脚本的加载时间的最佳方法是什么?

是否有这样做的示例收集器?

谢谢

0 投票
2 回答
7866 浏览

google-chrome - 从命令行运行 chrome lighthouse 的审计

我想编写一个脚本,运行(从 chrome 的二进制文件)它lighthouse的审计,并给出一个 url。我没能找到怎么做,但由于甚至有一个 chrome 扩展,我认为它应该是可行的,对吧?

0 投票
0 回答
519 浏览

google-chrome-devtools - chrome中第一个有意义的绘画事件

我正在使用 Chrome 的灯塔进行审核,我在报告消息中看到:

https://www.dropbox.com/s/prc8dw9lxjb83z0/Screenshot%202017-11-30%2017.06.28.png?dl=0

我试图找到如何真正标记候选人的第一次有意义的痛苦,但还没有任何运气。有谁知道如何解决这个问题?