Merge pull request #216 from firefox-devtools/cra-workaround

add enableCRAWorkaround configuration property

README.md

@@ -332,6 +332,8 @@ popup auto-hide" (`extension.firefox.enablePopupAutohide` / `disablePopupAutohid
   breakpoint in an unmapped source during a debug session. You may want to turn this off if some
   of the sources in your project are loaded on-demand (e.g. if you create multiple bundles with
   webpack and some of these bundles are only loaded as needed).
+* `enableCRAWorkaround`: Enable a workaround for facebook/create-react-app#6074: Adding/removing
+  breakpoints doesn't work for sources that were changed after the dev-server was started
 
 ### Overriding configuration properties in your settings
 You can override some of the `launch.json` configuration properties in your user, workspace or

package.json

@@ -581,6 +581,11 @@
                 "description": "Suggest using the Path Mapping Wizard when the user tries to set a breakpoint in an unmapped source during a debug session",
                 "default": true
               },
+              "enableCRAWorkaround": {
+                "type": "boolean",
+                "description": "Enable a workaround for breakpoints not working in projects created using create-react-app",
+                "default": true
+              },
               "log": {
                 "type": "object",
                 "description": "Configuration for diagnostic logging of the debug adapter",
@@ -836,6 +841,11 @@
                 "description": "Suggest using the Path Mapping Wizard when the user tries to set a breakpoint in an unmapped source during a debug session",
                 "default": true
               },
+              "enableCRAWorkaround": {
+                "type": "boolean",
+                "description": "Enable a workaround for breakpoints not working in projects created using create-react-app",
+                "default": true
+              },
               "log": {
                 "type": "object",
                 "description": "Configuration for diagnostic logging of the debug adapter",

src/adapter/adapter/addonManager.ts

@@ -25,6 +25,7 @@ export class AddonManager {
 	private addonActor: TabActorProxy | undefined = undefined;
 
 	constructor(
+		private readonly enableCRAWorkaround: boolean,
 		private readonly debugSession: FirefoxDebugSession
 	) {
 		this.config = debugSession.config.addon!;
@@ -73,7 +74,7 @@ export class AddonManager {
 
 					let consoleActor: ConsoleActorProxy;
 					let webExtensionActor = new WebExtensionActorProxy(
-						addon, this.debugSession.pathMapper,
+						addon, this.enableCRAWorkaround, this.debugSession.pathMapper,
 						this.debugSession.firefoxDebugConnection);
 
 					if (useConnect) {

src/adapter/configuration.ts

@@ -38,6 +38,7 @@ export interface ParsedConfiguration {
 	liftAccessorsFromPrototypes: number;
 	suggestPathMappingWizard: boolean;
 	terminate: boolean;
+	enableCRAWorkaround: boolean;
 }
 
 export interface ParsedAttachConfiguration {
@@ -207,11 +208,13 @@ export async function parseConfiguration(
 		suggestPathMappingWizard = true;
 	}
 	const terminate = (config.request === 'launch') && !config.reAttach;
+	const enableCRAWorkaround = !!config.enableCRAWorkaround;
 
 	return {
 		attach, launch, addon, pathMappings, filesToSkip, reloadOnChange, tabFilter, clearConsoleOnReload,
-		showConsoleCallLocation, liftAccessorsFromPrototypes, suggestPathMappingWizard, terminate
-	}
+		showConsoleCallLocation, liftAccessorsFromPrototypes, suggestPathMappingWizard, terminate,
+		enableCRAWorkaround
+	};
 }
 
 function harmonizeTrailingSlashes(pathMapping: PathMapping): PathMapping {

src/adapter/firefox/actorProxy/root.ts

@@ -34,6 +34,7 @@ export class RootActorProxy extends EventEmitter implements ActorProxy {
 	private pendingAddonsRequests = new PendingRequests<FirefoxDebugProtocol.Addon[]>();
 
 	constructor(
+		private readonly enableCRAWorkaround: boolean,
 		private readonly pathMapper: PathMapper,
 		private readonly connection: DebugConnection
 	) {
@@ -131,15 +132,15 @@ export class RootActorProxy extends EventEmitter implements ActorProxy {
 
 						const _tab = tab as FirefoxDebugProtocol.Tab;
 						actorsForTab = [
-							new TabActorProxy(
-								tab.actor, _tab.title, _tab.url, this.pathMapper, this.connection),
+							new TabActorProxy(tab.actor, _tab.title, _tab.url,
+								this.enableCRAWorkaround, this.pathMapper, this.connection),
 							new ConsoleActorProxy(_tab.consoleActor, this.connection)
 						];
 
 					} else {
 
 						const tabDescriptorActor = new TabDescriptorActorProxy(
-							tab.actor, this.pathMapper, this.connection);
+							tab.actor, this.enableCRAWorkaround, this.pathMapper, this.connection);
 						actorsForTab = await tabDescriptorActor.getTarget();
 
 					}
@@ -220,7 +221,7 @@ export class RootActorProxy extends EventEmitter implements ActorProxy {
 			this.pendingProcessRequests.resolveOne([
 				new TabActorProxy(
 					processResponse.form.actor, 'Browser', processResponse.form.url,
-					this.pathMapper, this.connection),
+					this.enableCRAWorkaround, this.pathMapper, this.connection),
 				new ConsoleActorProxy(processResponse.form.consoleActor, this.connection)
 			]);
 

src/adapter/firefox/actorProxy/tab.ts

@@ -26,6 +26,7 @@ export class TabActorProxy extends EventEmitter implements ActorProxy {
 		public readonly name: string,
 		private _title: string,
 		private _url: string,
+		private readonly enableCRAWorkaround: boolean,
 		private readonly pathMapper: PathMapper,
 		private readonly connection: DebugConnection
 	) {
@@ -94,7 +95,7 @@ export class TabActorProxy extends EventEmitter implements ActorProxy {
 
 			let threadActor: IThreadActorProxy = this.connection.getOrCreate(
 				tabAttachedResponse.threadActor, 
-				() => new ThreadActorProxy(tabAttachedResponse.threadActor, this.connection));
+				() => new ThreadActorProxy(tabAttachedResponse.threadActor, this.enableCRAWorkaround, this.connection));
 
 			threadActor = new SourceMappingThreadActorProxy(threadActor, this.pathMapper, this.connection);
 
@@ -172,7 +173,7 @@ export class TabActorProxy extends EventEmitter implements ActorProxy {
 					log.debug(`Worker ${worker.actor} started`);
 
 					workerActor = new WorkerActorProxy(
-						worker.actor, worker.url, this.pathMapper, this.connection);
+						worker.actor, worker.url, this.enableCRAWorkaround, this.pathMapper, this.connection);
 					this.emit('workerStarted', workerActor);
 
 				}

src/adapter/firefox/actorProxy/tabDescriptor.ts

@@ -18,6 +18,7 @@ export class TabDescriptorActorProxy implements ActorProxy {
 
 	constructor(
 		public readonly name: string,
+		private readonly enableCRAWorkaround: boolean,
 		private readonly pathMapper: PathMapper,
 		private readonly connection: DebugConnection
 	) {
@@ -52,7 +53,7 @@ export class TabDescriptorActorProxy implements ActorProxy {
 				this.pendingGetTargetRequest.resolve([
 					new TabActorProxy(
 						getTargetResponse.frame.actor, getTargetResponse.frame.title, getTargetResponse.frame.url,
-						this.pathMapper, this.connection),
+						this.enableCRAWorkaround, this.pathMapper, this.connection),
 					new ConsoleActorProxy(getTargetResponse.frame.consoleActor, this.connection)
 				]);
 

src/adapter/firefox/actorProxy/thread.ts

@@ -48,6 +48,7 @@ export class ThreadActorProxy extends EventEmitter implements ActorProxy, IThrea
 
 	constructor(
 		public readonly name: string,
+		private readonly enableCRAWorkaround: boolean,
 		private connection: DebugConnection
 	) {
 		super();
@@ -340,7 +341,13 @@ export class ThreadActorProxy extends EventEmitter implements ActorProxy, IThrea
 			this.pendingSourcesRequests.resolveOne(sources);
 
 			for (let source of sources) {
-				if (!this.connection.has(source.actor)) {
+
+				if (this.enableCRAWorkaround && source.url?.endsWith('hot-update.js')) {
+
+					log.debug('Ignoring this source because the CRA workaround is enabled');
+
+				} else if (!this.connection.has(source.actor)) {
+
 					const sourceActor = new SourceActorProxy(source, this.connection);
 					this.emit('newSource', sourceActor);
 				}
@@ -350,7 +357,13 @@ export class ThreadActorProxy extends EventEmitter implements ActorProxy, IThrea
 
 			let source = <FirefoxDebugProtocol.Source>(response['source']);
 			log.debug(`New source ${source.url} on thread ${this.name}`);
-			if (!this.connection.has(source.actor)) {
+
+			if (this.enableCRAWorkaround && source.url?.endsWith('hot-update.js')) {
+
+				log.debug('Ignoring this source because the CRA workaround is enabled');
+
+			} else if (!this.connection.has(source.actor)) {
+
 				const sourceActor = new SourceActorProxy(source, this.connection);
 				this.emit('newSource', sourceActor);
 			}

src/adapter/firefox/actorProxy/webExtension.ts

@@ -19,6 +19,7 @@ export class WebExtensionActorProxy extends EventEmitter implements ActorProxy {
 
 	constructor(
 		private readonly webExtensionInfo: FirefoxDebugProtocol.Addon,
+		private readonly enableCRAWorkaround: boolean,
 		private readonly pathMapper: PathMapper,
 		private readonly connection: DebugConnection
 	) {
@@ -59,7 +60,7 @@ export class WebExtensionActorProxy extends EventEmitter implements ActorProxy {
 			this.pendingConnectRequests.resolveOne([
 				new TabActorProxy(
 					connectResponse.form.actor, this.webExtensionInfo.name, connectResponse.form.url,
-					this.pathMapper, this.connection),
+					this.enableCRAWorkaround, this.pathMapper, this.connection),
 				new ConsoleActorProxy(connectResponse.form.consoleActor, this.connection)
 			]);
 

src/adapter/firefox/actorProxy/worker.ts

@@ -18,6 +18,7 @@ export class WorkerActorProxy extends EventEmitter implements ActorProxy {
 	constructor(
 		public readonly name: string,
 		public readonly url: string,
+		private readonly enableCRAWorkaround: boolean,
 		private readonly pathMapper: PathMapper,
 		private readonly connection: DebugConnection
 	) {
@@ -94,7 +95,7 @@ export class WorkerActorProxy extends EventEmitter implements ActorProxy {
 
 				let threadActor: IThreadActorProxy = this.connection.getOrCreate(
 					connectedResponse.threadActor, 
-					() => new ThreadActorProxy(connectedResponse.threadActor, this.connection));
+					() => new ThreadActorProxy(connectedResponse.threadActor, this.enableCRAWorkaround, this.connection));
 
 				threadActor = new SourceMappingThreadActorProxy(threadActor, this.pathMapper, this.connection);
 

src/adapter/firefox/connection.ts

@@ -17,12 +17,13 @@ export class DebugConnection {
 	public readonly rootActor: RootActorProxy;
 
 	constructor(
+		enableCRAWorkaround: boolean,
 		pathMapper: PathMapper,
 		socket: Socket
 	) {
 
 		this.actors = new Map<string, ActorProxy>();
-		this.rootActor = new RootActorProxy(pathMapper, this);
+		this.rootActor = new RootActorProxy(enableCRAWorkaround, pathMapper, this);
 		this.transport = new DebugProtocolTransport(socket);
 
 		this.transport.on('message', (response: FirefoxDebugProtocol.Response) => {

src/adapter/firefoxDebugSession.ts

@@ -87,7 +87,7 @@ export class FirefoxDebugSession {
 			this.threads, this.config.suggestPathMappingWizard, this.sendEvent);
 		this.skipFilesManager = new SkipFilesManager(this.config.filesToSkip, this.threads);
 		if (this.config.addon) {
-			this.addonManager = new AddonManager(this);
+			this.addonManager = new AddonManager(config.enableCRAWorkaround, this);
 		}
 	}
 
@@ -106,7 +106,7 @@ export class FirefoxDebugSession {
 				return;
 			}
 
-			this.firefoxDebugConnection = new DebugConnection(this.pathMapper, socket);
+			this.firefoxDebugConnection = new DebugConnection(this.config.enableCRAWorkaround, this.pathMapper, socket);
 			let rootActor = this.firefoxDebugConnection.rootActor;
 
 			// attach to all tabs, register the corresponding threads and inform VSCode about them

src/common/configuration.ts

@@ -46,6 +46,7 @@ export interface CommonConfiguration {
 	popupAutohideButton?: boolean;
 	liftAccessorsFromPrototypes?: number;
 	suggestPathMappingWizard?: boolean;
+	enableCRAWorkaround?: boolean;
 }
 
 export type ReloadConfiguration = string | string[] | DetailedReloadConfiguration;