Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Building coverage tool for chrome developer tools

I'm looking to extend dev tools in chrome to support 'what-just-ran'. Something like this - you click a record button, do something on the web page, and stop recording. In dev tools, it should show what part of the code ran - like dynamic code coverage. From what I read on the docs, there isn't any direct way. I have been hacking around with dev-front-end (source for developer tools) by setting breakpoints on every line and finding what line executed, that's about how far I could go. Is this project possible with current chrome extension APIs or even dev front end changes?

like image 881
Ara Avatar asked Apr 09 '12 04:04

Ara


People also ask

How do I get the coverage tab in Chrome?

In Chrome's Dev Tools (Command+Option+C on Mac, Control+Shift+C on Windows/Linux, or right-click on the page and choose “Inspect”), select the “Sources” tab, and if “Coverage” isn't a displayed tab at the bottom, select it using the three vertical dots to the left of those tabs.

How do I use Chrome coverage tool?

With that out of the way, here's how to use the code coverage tool: Select Show coverage from the Chrome Developer Tools Command Menu. Select the button labelled Start instrumenting coverage and reload the page. Observe code coverage statistics in the panel.

What are the advantages of using Chrome developer tools?

The built-in developer tool allows you to edit the page, debug it and also give them access to work on the internal web browser and application. This one boosts the productivity of the developers, and also it makes the easy diagnosis of the website.


1 Answers

JS heatmap profiler slash code coverage tool does that by preprocessing JavaScript.

JS heatmap by Peter van der Zee

like image 112
NVI Avatar answered Oct 05 '22 04:10

NVI