Meta: Log API calls and other fetches (#4656)21.8.14

6 files changed, 24 insertions, 4 deletions

diff --git a/distribution/options.html b/distribution/options.html
index 495aae34..4c748149 100644
--- a/distribution/options.html
+++ b/distribution/options.html
@@ -56,7 +56,12 @@
 				Show the features enabled on each page in the console
 			</label>
 		</p>
-
+		<p>
+			<label>
+				<input type="checkbox" name="logAPI" hidden/>
+					Log API calls in the console
+			</label>
+		</p>
 		<p>
 			<button id="clear-cache">Clear cache</button>
 		</p>
diff --git a/source/features/bugs-tab.tsx b/source/features/bugs-tab.tsx
index f59a2b40..528f07a8 100644
--- a/source/features/bugs-tab.tsx
+++ b/source/features/bugs-tab.tsx
@@ -130,8 +130,7 @@ async function init(): Promise<void | false> {
 	bugsCounter.title = '';
 
 	// Update Bugs’ link
-	// TODO[2021-8-15] Drop `?? 'bug'`, it's only needed until `countPromise` refreshes one time
-	new SearchQuery(bugsTab).add(`label:${SearchQuery.escapeValue(await getBugLabel() ?? 'bug')}`);
+	new SearchQuery(bugsTab).add(`label:${SearchQuery.escapeValue((await getBugLabel())!)}`);
 
 	// In case GitHub changes its layout again #4166
 	if (issuesTab.parentElement!.tagName === 'LI') {
diff --git a/source/github-helpers/api.ts b/source/github-helpers/api.ts
index 386156ac..45860893 100644
--- a/source/github-helpers/api.ts
+++ b/source/github-helpers/api.ts
@@ -48,6 +48,13 @@ interface RestResponse extends AnyObject {
 	ok: boolean;
 }
 
+export async function log(message: string): Promise<void> {
+	const {logAPI} = (await optionsStorage.getAll());
+	if (logAPI) {
+		console.log(message);
+	}
+}
+
 export const escapeKey = (value: string | number): string => '_' + String(value).replace(/[ ./-]/g, '_');
 
 export class RefinedGitHubAPIError extends Error {
@@ -118,6 +125,7 @@ export const v3 = mem(async (
 	}
 
 	const url = new URL(query, api3);
+	void log(String(url));
 	const response = await fetch(url.href, {
 		method,
 		body: body && JSON.stringify(body),
@@ -174,6 +182,10 @@ export const v4 = mem(async (
 
 	query = query.replace('repository() {', () => `repository(owner: "${getRepo()!.owner}", name: "${getRepo()!.name}") {`);
 
+	void log(`{
+		${query}
+	}`);
+
 	const response = await fetch(api4, {
 		headers: {
 			'User-Agent': 'Refined GitHub',
diff --git a/source/helpers/fetch-dom.ts b/source/helpers/fetch-dom.ts
index b5b83f66..282082f6 100644
--- a/source/helpers/fetch-dom.ts
+++ b/source/helpers/fetch-dom.ts
@@ -1,11 +1,13 @@
 import mem from 'mem';
 import domify from 'doma';
-
 import type {ParseSelector} from 'typed-query-selector/parser';
 
+import {log} from '../github-helpers/api';
+
 async function fetchDom(url: string): Promise<DocumentFragment>;
 async function fetchDom<Selector extends string, TElement extends HTMLElement = ParseSelector<Selector, HTMLElement>>(url: string, selector: Selector): Promise<TElement | undefined>;
 async function fetchDom(url: string, selector?: string): Promise<Node | undefined> {
+	void log(url);
 	const absoluteURL = new URL(url, location.origin).toString(); // Firefox `fetch`es from the content script, so relative URLs fail
 	const response = await fetch(absoluteURL);
 	const dom = domify(await response.text());
diff --git a/source/options-storage.ts b/source/options-storage.ts
index ffe7bfa7..a01adda8 100644
--- a/source/options-storage.ts
+++ b/source/options-storage.ts
@@ -15,6 +15,7 @@ const defaults = Object.assign({
 	customCSS: '',
 	personalToken: '',
 	logging: false,
+	logAPI: false,
 }, Object.fromEntries(__features__.map(id => [`feature:${id}`, true])));
 
 // TODO[2021-10-01]: Drop classes `muted-link`, `link-gray`, `link-gray-dark`, `text-gray`, `text-gray-light`, `text-gray-dark`, `text-green`, `text-red` `text-blue` #4021
diff --git a/source/options.tsx b/source/options.tsx
index 7f471ae8..f73dc3eb 100644
--- a/source/options.tsx
+++ b/source/options.tsx
@@ -209,6 +209,7 @@ async function generateDom(): Promise<void> {
 	// Move debugging tools higher when side-loaded
 	if (process.env.NODE_ENV === 'development') {
 		select('#debugging-position')!.replaceWith(select('#debugging')!);
+		select('#debugging [name="logAPI"]')!.hidden = false;
 	}
 
 	// Add feature count. CSS-only features are added approximately