Repository: GoogleChrome/lighthouse
Pull request #5916 (2018-08-28 00:02:46)

docs(readme): mention chrome-flags troubleshooting in getting started
<!-- Thank you for submitting a pull request! -->
Hi again :)

**Summary**
<!-- What kind of change does this PR introduce? -->
Improve `readme.md` about potential Chrome connection issues while using `lighthouse-cli` and fix flags for node DevTools  debugging command.

<!-- Is this a bugfix, feature, refactoring, build related change, etc? -->
Just a minor documentation improvement.

<!-- Describe the need for this change -->
I think it's useful to make those additions more accessible. Might be frustrating for newbies to look it up.

<!-- Link any documentation or information that would help understand this change -->
Info from https://github.com/GoogleChrome/lighthouse/issues/2726#issuecomment-358287258

**Related Issues/PRs**
<!-- Provide any additional information we might need to understand the pull request -->


Patch:
diff --git a/docs/puppeteer.md b/docs/puppeteer.md
index a57f28dad..95547832a 100644
--- a/docs/puppeteer.md
+++ b/docs/puppeteer.md
@@ -16,8 +16,11 @@ const {URL} = require('url');
 (async() => {
 const url = 'https://www.chromestatus.com/features';
 
-// Use Puppeteer to launch Chrome. appMode launches headful chrome and doesn't size the viewport.
-const browser = await puppeteer.launch({appMode: true});
+// Use Puppeteer to launch headful Chrome and don't use its default 800x600 viewport.
+const browser = await puppeteer.launch({
+  headless: false,
+  defaultViewport: null,
+});
 
 // Wait for Lighthouse to open url, then customize network conditions.
 // Note: this will re-establish these conditions when LH reloads the page. Think that's ok....
diff --git a/lighthouse-core/audits/bootup-time.js b/lighthouse-core/audits/bootup-time.js
index af59b138f..f86e89baa 100644
--- a/lighthouse-core/audits/bootup-time.js
+++ b/lighthouse-core/audits/bootup-time.js
@@ -176,7 +176,8 @@ class BootupTime extends Audit {
     return {
       score,
       rawValue: totalBootupTime,
-      displayValue: totalBootupTime > 0 ? str_(i18n.UIStrings.ms, {timeInMs: totalBootupTime}) : '',
+      displayValue: totalBootupTime > 0 ?
+        str_(i18n.UIStrings.seconds, {timeInMs: totalBootupTime}) : '',
       details,
     };
   }
diff --git a/lighthouse-core/audits/mainthread-work-breakdown.js b/lighthouse-core/audits/mainthread-work-breakdown.js
index 4ec93e078..80f2d9405 100644
--- a/lighthouse-core/audits/mainthread-work-breakdown.js
+++ b/lighthouse-core/audits/mainthread-work-breakdown.js
@@ -121,7 +121,7 @@ class MainThreadWorkBreakdown extends Audit {
     return {
       score,
       rawValue: totalExecutionTime,
-      displayValue: str_(i18n.UIStrings.ms, {timeInMs: totalExecutionTime}),
+      displayValue: str_(i18n.UIStrings.seconds, {timeInMs: totalExecutionTime}),
       details: tableDetails,
     };
   }
diff --git a/lighthouse-core/audits/metrics/first-contentful-paint.js b/lighthouse-core/audits/metrics/first-contentful-paint.js
index c299f4392..da0ee6f24 100644
--- a/lighthouse-core/audits/metrics/first-contentful-paint.js
+++ b/lighthouse-core/audits/metrics/first-contentful-paint.js
@@ -63,7 +63,7 @@ class FirstContentfulPaint extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: str_(i18n.UIStrings.ms, {timeInMs: metricResult.timing}),
+      displayValue: str_(i18n.UIStrings.seconds, {timeInMs: metricResult.timing}),
     };
   }
 }
diff --git a/lighthouse-core/audits/metrics/first-cpu-idle.js b/lighthouse-core/audits/metrics/first-cpu-idle.js
index 26e75df7d..92824a1f2 100644
--- a/lighthouse-core/audits/metrics/first-cpu-idle.js
+++ b/lighthouse-core/audits/metrics/first-cpu-idle.js
@@ -67,7 +67,7 @@ class FirstCPUIdle extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: str_(i18n.UIStrings.ms, {timeInMs: metricResult.timing}),
+      displayValue: str_(i18n.UIStrings.seconds, {timeInMs: metricResult.timing}),
     };
   }
 }
diff --git a/lighthouse-core/audits/metrics/first-meaningful-paint.js b/lighthouse-core/audits/metrics/first-meaningful-paint.js
index 4a46fbe33..ce7f79954 100644
--- a/lighthouse-core/audits/metrics/first-meaningful-paint.js
+++ b/lighthouse-core/audits/metrics/first-meaningful-paint.js
@@ -66,7 +66,7 @@ class FirstMeaningfulPaint extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: str_(i18n.UIStrings.ms, {timeInMs: metricResult.timing}),
+      displayValue: str_(i18n.UIStrings.seconds, {timeInMs: metricResult.timing}),
     };
   }
 }
diff --git a/lighthouse-core/audits/metrics/interactive.js b/lighthouse-core/audits/metrics/interactive.js
index d9be0ec6d..455fb94cf 100644
--- a/lighthouse-core/audits/metrics/interactive.js
+++ b/lighthouse-core/audits/metrics/interactive.js
@@ -78,7 +78,7 @@ class InteractiveMetric extends Audit {
         context.options.scoreMedian
       ),
       rawValue: timeInMs,
-      displayValue: str_(i18n.UIStrings.ms, {timeInMs}),
+      displayValue: str_(i18n.UIStrings.seconds, {timeInMs}),
       extendedInfo: {
         value: extendedInfo,
       },
diff --git a/lighthouse-core/audits/metrics/speed-index.js b/lighthouse-core/audits/metrics/speed-index.js
index 246f291c7..28cab1ebe 100644
--- a/lighthouse-core/audits/metrics/speed-index.js
+++ b/lighthouse-core/audits/metrics/speed-index.js
@@ -65,7 +65,7 @@ class SpeedIndex extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: str_(i18n.UIStrings.ms, {timeInMs: metricResult.timing}),
+      displayValue: str_(i18n.UIStrings.seconds, {timeInMs: metricResult.timing}),
     };
   }
 }
diff --git a/lighthouse-core/lib/i18n.js b/lighthouse-core/lib/i18n.js
index 274137464..f1b2ac8bf 100644
--- a/lighthouse-core/lib/i18n.js
+++ b/lighthouse-core/lib/i18n.js
@@ -36,8 +36,10 @@ const MESSAGE_INSTANCE_ID_REGEX = /(.* \| .*) # (\d+)$/;
 
 
 const UIStrings = {
-/** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */
+  /** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */
   ms: '{timeInMs, number, milliseconds}\xa0ms',
+  /** Used to show the duration in seconds that something lasted. The {timeInMs} placeholder will be replaced with the time duration, shown in seconds (e.g. 5.2 s) */
+  seconds: '{timeInMs, number, seconds}\xa0s',
   /** Label shown per-audit to show how many bytes smaller the page could be if the user implemented the suggestions. The `{wastedBytes}` placeholder will be replaced with the number of bytes, shown in kilobytes (e.g. 148 KB) */
   displayValueByteSavings: 'Potential savings of {wastedBytes, number, bytes}\xa0KB',
   /** Label shown per-audit to show how many milliseconds faster the page load could be if the user implemented the suggestions. The `{wastedMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 140 ms) */
@@ -64,6 +66,11 @@ const formats = {
     milliseconds: {
       maximumFractionDigits: 0,
     },
+    seconds: {
+      // Force the seconds to the tenths place for limited output and ease of scanning
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    },
   },
 };
 
@@ -109,6 +116,12 @@ function _preprocessMessageValues(icuMessage, values) {
     // @ts-ignore - el.id is always defined when el.format is defined
     .forEach(el => (clonedValues[el.id] = Math.round(clonedValues[el.id] / 10) * 10));
 
+  // Convert all seconds to the correct unit
+  parsed.elements
+    .filter(el => el.format && el.format.style === 'seconds' && el.id === 'timeInMs')
+    // @ts-ignore - el.id is always defined when el.format is defined
+    .forEach(el => (clonedValues[el.id] = Math.round(clonedValues[el.id] / 100) / 10));
+
   // Replace all the bytes with KB
   parsed.elements
     .filter(el => el.format && el.format.style === 'bytes')
diff --git a/lighthouse-core/lib/locales/en-US.json b/lighthouse-core/lib/locales/en-US.json
index 15e947076..c28ad3bf1 100644
--- a/lighthouse-core/lib/locales/en-US.json
+++ b/lighthouse-core/lib/locales/en-US.json
@@ -407,6 +407,10 @@
     "message": "{timeInMs, number, milliseconds} ms",
     "description": "Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms)"
   },
+  "lighthouse-core/lib/i18n.js | seconds": {
+    "message": "{timeInMs, number, seconds} s",
+    "description": "Used to show the duration in seconds that something lasted. The {timeInMs} placeholder will be replaced with the time duration, shown in seconds (e.g. 5.2 s)"
+  },
   "lighthouse-core/report/html/renderer/util.js | auditGroupExpandTooltip": {
     "message": "Show audits",
     "description": "The tooltip text on an expandable chevron icon. Clicking the icon expands a section to reveal a list of audit results that was hidden by default."
diff --git a/readme.md b/readme.md
index ead4069a2..2c3b1c66e 100644
--- a/readme.md
+++ b/readme.md
@@ -230,9 +230,10 @@ yarn build-all
 
 ```sh
 node lighthouse-cli http://example.com
+# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to Chrome
 ```
 
-> **Getting started tip**: `node --inspect --debug-brk lighthouse-cli http://example.com` to open up Chrome DevTools and step
+> **Getting started tip**: `node --inspect-brk lighthouse-cli http://example.com` to open up Chrome DevTools and step
 through the entire app. See [Debugging Node.js with Chrome
 DevTools](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27#.59rma3ukm)
 for more info.


Test patch:
diff --git a/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js b/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js
index e44b4cdbf..7d6ea997a 100644
--- a/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js
+++ b/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js
@@ -27,7 +27,7 @@ describe('Performance: first-meaningful-paint audit', () => {
 
     assert.equal(fmpResult.score, 1);
     assert.equal(fmpResult.rawValue, 783.328);
-    expect(fmpResult.displayValue).toBeDisplayString('780\xa0ms');
+    expect(fmpResult.displayValue).toBeDisplayString('0.8\xa0s');
   });
 
   it('computes FMP correctly for simulated', async () => {
diff --git a/lighthouse-core/test/audits/metrics/interactive-test.js b/lighthouse-core/test/audits/metrics/interactive-test.js
index 544e1defd..158a7588d 100644
--- a/lighthouse-core/test/audits/metrics/interactive-test.js
+++ b/lighthouse-core/test/audits/metrics/interactive-test.js
@@ -34,7 +34,7 @@ describe('Performance: interactive audit', () => {
     return Interactive.audit(artifacts, {options, settings}).then(output => {
       assert.equal(output.score, 1);
       assert.equal(Math.round(output.rawValue), 1582);
-      expect(output.displayValue).toBeDisplayString('1,580\xa0ms');
+      expect(output.displayValue).toBeDisplayString('1.6\xa0s');
     });
   });
 
@@ -52,7 +52,7 @@ describe('Performance: interactive audit', () => {
     return Interactive.audit(artifacts, {options, settings}).then(output => {
       assert.equal(output.score, 0.97);
       assert.equal(Math.round(output.rawValue), 2712);
-      expect(output.displayValue).toBeDisplayString('2,710\xa0ms');
+      expect(output.displayValue).toBeDisplayString('2.7\xa0s');
     });
   });
 });
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index d0109e05f..230c95f8f 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -84,7 +84,7 @@
       "score": 0.51,
       "scoreDisplayMode": "numeric",
       "rawValue": 3969.135,
-      "displayValue": "3,970 ms"
+      "displayValue": "4.0 s"
     },
     "first-meaningful-paint": {
       "id": "first-meaningful-paint",
@@ -93,7 +93,7 @@
       "score": 0.51,
       "scoreDisplayMode": "numeric",
       "rawValue": 3969.136,
-      "displayValue": "3,970 ms"
+      "displayValue": "4.0 s"
     },
     "load-fast-enough-for-pwa": {
       "id": "load-fast-enough-for-pwa",
@@ -110,7 +110,7 @@
       "score": 0.74,
       "scoreDisplayMode": "numeric",
       "rawValue": 4417,
-      "displayValue": "4,420 ms"
+      "displayValue": "4.4 s"
     },
     "screenshot-thumbnails": {
       "id": "screenshot-thumbnails",
@@ -270,7 +270,7 @@
       "score": 0.72,
       "scoreDisplayMode": "numeric",
       "rawValue": 4927.278,
-      "displayValue": "4,930 ms"
+      "displayValue": "4.9 s"
     },
     "interactive": {
       "id": "interactive",
@@ -279,7 +279,7 @@
       "score": 0.78,
       "scoreDisplayMode": "numeric",
       "rawValue": 4927.278,
-      "displayValue": "4,930 ms"
+      "displayValue": "4.9 s"
     },
     "user-timings": {
       "id": "user-timings",
@@ -646,7 +646,7 @@
       "score": 0.96,
       "scoreDisplayMode": "numeric",
       "rawValue": 1548.5690000000002,
-      "displayValue": "1,550 ms",
+      "displayValue": "1.5 s",
       "details": {
         "type": "table",
         "headings": [
@@ -708,7 +708,7 @@
       "score": 0.92,
       "scoreDisplayMode": "numeric",
       "rawValue": 1150.932,
-      "displayValue": "1,150 ms",
+      "displayValue": "1.2 s",
       "details": {
         "type": "table",
         "headings": [
@@ -3429,7 +3429,7 @@
       "lighthouse-core/audits/metrics/first-contentful-paint.js | description": [
         "audits[first-contentful-paint].description"
       ],
-      "lighthouse-core/lib/i18n.js | ms": [
+      "lighthouse-core/lib/i18n.js | seconds": [
         {
           "values": {
             "timeInMs": 3969.135
@@ -3448,12 +3448,6 @@
           },
           "path": "audits[speed-index].displayValue"
         },
-        {
-          "values": {
-            "timeInMs": 16
-          },
-          "path": "audits[estimated-input-latency].displayValue"
-        },
         {
           "values": {
             "timeInMs": 4927.278
@@ -3497,6 +3491,14 @@
       "lighthouse-core/audits/metrics/estimated-input-latency.js | description": [
         "audits[estimated-input-latency].description"
       ],
+      "lighthouse-core/lib/i18n.js | ms": [
+        {
+          "values": {
+            "timeInMs": 16
+          },
+          "path": "audits[estimated-input-latency].displayValue"
+        }
+      ],
       "lighthouse-core/audits/time-to-first-byte.js | title": [
         "audits[time-to-first-byte].title"
       ],