When multiple .less files are compiled and then served as a single .css file to the page, I am interested in displaying only the CSS that is actually being used after the entire page has loaded.
This process is deliberate. Since a CSS preprocessor like Less is utilized, end users receive the compiled CSS code rather than the original Less code. The server decides which Less code translates into which CSS all on its side. If you notice all these .less files merging into one big .css file, it is simply due to how the server serves it or how you serve it in a development setup.
In addition, I would like access to a sourcemap of Less for debugging purposes in the browser, specifically highlighting the .less lines applicable to the current page.
You can almost achieve this setup to your liking. Live editing of Less is possible in both Firefox and Chrome. For detailed instructions on configuring this feature in Firefox and Google Chrome, refer to the following links:
Source maps need manual activation in Firefox. Once enabled, Firefox can display less styles corresponding to inspected HTML elements in the CSS pane, allowing you to see applicable less rules for individual elements if not the entire page.
Chrome's CSS and JS coverage tool introduced in version 59 helps identify used and unused styles. You may find similar features through addons in Firefox but might be limited to plain CSS and JS rather than Less. Refer to:
To explore further, consider searching for "CSS coverage", "Live editing of Less in-browser", etc.
EDIT: After reviewing your edited question, I suggest checking out:
This tool aids in cleaning up CSS. As discussed in this issue, you can compare sourcemaps of the original and purified CSS to obtain your 'clean' Less code: