Most of the quoted tools measure the CPU or GPU consumption. But in a laptop, about half of the energy consumption comes from the screen. And the consumption computers & smartphones represents only 20% of the CO2 emitted by digital activities - the vast majority lies elsewhere, in networks, in datacenters, or in the factories manufacturing the devices. So the tools of this article give an idea of only 10% of the digital energy consumption (source: https://theshiftproject.org/en/article/lean-ict-our-new-repo...)
Besides, measuring the consumption of computer doesn't isolate the contribution of one program, and / or doesn't provide enough granularity to help developers understand what to optimize first. If you have ever tried to use one of these to reduce the actual consumption of a software, you've probably hit a wall. Isolation, reproducibility and granularity aren't yet enough to make these tools suitable for software engineers.
Worse, focusing on the computer consumption may push web developers to just move computations to the server side, where the energy consumption is not measured. This will lead to an apparent drop on the client-side consumption, but does the overall system footprint decreases?
One solution is to use docker to isolate processes, docker-compose to reproduce the client, network and server in a lab, docker stats to get system metrics, and academic papers to turn these metrics (CPU, network and disk I/O, memory) into Watt.hours or Joules. It works in theory, but in practice it requires a lot of engineering to get a good reproducibility and accuracy.
I've spend a year and a half on this subject, and the results of these efforts can be tested at GreenFrame.io. Many web developers already use it in their CI to monitor and reduce their energy emissions.