Misleading log messages when resource URL has fragment

[aritsune]

Libraries Affected:
workbox-routing / workbox-precaching

Browser & Platform:
Google Chrome v81.0.4023.0

Issue:
I just spent a while debugging some seemingly strange behavior in my project, which uses the GenerateSW workbox webpack plugin. I had set up a runtimeCaching rule with the URL pattern
/\.(png|jpg|jpeg|svg)$/; yet many SVG files were not being cached as expected. I turned to the verbose-level log & saw several instances of No route found for: /file.svg, which was obviously super jarring - it even happened when I set the URL pattern to the exact file name!
I figured out what was going on only when I set a debugger breakpoint at the line that logs that message - it turns out the real URL that was being matched against had a fragment (i.e /file.svg#content), & the log was obscuring this, I believe due to its use of the getFriendlyURL function:

workbox/packages/workbox-routing/src/Router.ts

Lines 202 to 209 in ef5c2ca

	if (!handler) {
	if (process.env.NODE_ENV !== 'production') {
	// No handler so Workbox will do nothing. If logs is set of debug
	// i.e. verbose, we should print out this information.
	logger.debug(`No route found for: ${getFriendlyURL(url)}`);
	}
	return;
	}

(note: I need the fragment because I'm using an svg <use> tag.)

I think URLs are being similarly obscured in workbox-precaching debug logs as well. The solution should be pretty simple - keep URL fragments when logging so the user knows exactly what URL patterns are being tested against.