Timing of AppVeyor build steps - npm

Question

I'm driving an AppVeyor build with an appveyor.yml file, in this instance an Angular CLI build. This is a part of my file:
test_script:
- npm run lint
- npm test
- npm run e2e
- npm run build
Those are all npm scripts that delegate actual work to the ng cli.
How can I properly get timings for each step? My real build is even a bit bigger, and for starters I'd like to see (preferably as a summary) how long each step took.
I tried adding - ps: Get-Date -Format "o" in between each step, which is a workaround, but not really a nice one.
Can this be done in a more convenient manner?

Answer 1

Since the information is available in the tooltip, why not use CSS? That also works while the build is being updated. This is within my GreaseMonkey script (but I suppose you can also use the Style Editor in dev tools, Stylus or similar):
((css) => {
let style = document.createElement("style");
style.textContent = css;
document.body.appendChild(style);
})(`
/* Stretch the log, do not limit its width */
body > div > div.row {
max-width: initial;
}
/* Prepend mm:ss before every line */
div#job-console > div:before {
visibility: visible;
content: attr(title);
color: gold;
margin-top: 0;
margin-left: -5rem;
margin-right: 4em;
height: auto;
display: inline;
}
`);
I use -5rem such that the hour part is exactly hidden (many tests do not take an hour to run, so provides you three more characters for the actual log message).

Answer 2

The other answer was helpful, because it mentioned that the console output line numbers have a tooltip with timing info. You can use this snippet as a bookmarklet (or paste it in your console) to get a quick overview:
for (let d of document.querySelectorAll('#job-console > div')) {
x = document.createElement('span');
x.innerHTML = d.title;
x.style.marginRight = '2.5rem';
x.style.color = 'yellow';
d.insertBefore(x, d.firstChild);
}
I prefer this over creating a lot of boilerplate inside my steps like the answer or my workaround from the question (even though that would work too, I suppose).
I still hope there will turn out to be a way to do this with just a setting in the .yml file or in AppVeyor itself, but until then this is probably what I'll stick with.
Here's a bookmarklet function you can put straight into the URL of a bookmark in at least Chrome and Firefox:
javascript:(function() { for (let d of document.querySelectorAll('#job-console > div')) { x = document.createElement('span'); x.innerHTML = d.title; x.style.marginRight = '2.5rem'; x.style.color = 'yellow'; d.style.whiteSpace = 'nowrap'; d.insertBefore(x, d.firstChild); } })()

Answer 3

Using advice from this comment:
Verbose:
test_script:
- powershell $sw = [Diagnostics.Stopwatch]::StartNew(); npm run lint; $sw.Stop(); Write-host "Time taken: " $sw.Elapsed.totalseconds
Silent:
test_script:
- powershell (Measure-Command { npm run lint } -Verbose).totalseconds
Few notes:
You might not need it at all because if you hover mouse to the line
number on UI, you will see timestamp (relative to the build start).
Or you can download log and it has all timestamps.
Verbose output takes longer.
I call powershell from cmd mode (not ps), because npm writes
output to stdErr which makes custom PowerShell host on AppVeyor
unhappy (I assume you run Windows, not Linux builds)