Skip to content

fix(chrome): new debug url with latest chrome 83+ versions #5319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 30, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion lib/controllers/debug-controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,9 @@ export class DebugController extends EventEmitter implements IDebugController {
this.emit(DEBUGGER_ATTACHED_EVENT_NAME, debugInformation);
}

this.$logger.info(`To start debugging, open the following URL in Chrome:${EOL}${debugInformation.url}${EOL}`.cyan);
this.$logger.info(`To start debugging, open the following URL in Chrome:${EOL}${debugInformation.url}${EOL}`.green);

this.$logger.info(`If you're using an older Chrome version 82 and below, use this instead:${EOL}${debugInformation.legacyUrl}${EOL}`.cyan);
}

return debugInformation;
Expand Down
1 change: 1 addition & 0 deletions lib/declarations.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,7 @@ interface IGenerateOptions {

interface IDebugInformation extends IPort, Mobile.IDeviceIdentifier {
url: string;
legacyUrl?: string;
}

interface IPort {
Expand Down
1 change: 1 addition & 0 deletions lib/definitions/debug.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ interface IDeviceDebugService extends IPlatform, NodeJS.EventEmitter {

interface IDebugResultInfo {
debugUrl: string;
legacyDebugUrl?: string;
}

interface IAppDebugData extends IProjectDir {
Expand Down
1 change: 1 addition & 0 deletions lib/services/android-device-debug-service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export class AndroidDeviceDebugService extends DebugServiceBase implements IDevi
await this.printDebugPort(this.deviceIdentifier, debugPort);

result.debugUrl = this.getChromeDebugUrl(debugOptions, debugPort);
result.legacyDebugUrl = this.getChromeDebugUrl(debugOptions, debugPort, true);

return result;
}
Expand Down
12 changes: 7 additions & 5 deletions lib/services/debug-service-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export abstract class DebugServiceBase extends EventEmitter implements IDeviceDe
return true;
}
};
}
}

protected getChromeDebugUrl(debugOptions: IDebugOptions, port: number): string {
protected getChromeDebugUrl(debugOptions: IDebugOptions, port: number, legacy?: boolean): string {
// corresponds to 55.0.2883 Chrome version
// SHA is taken from https://chromium.googlesource.com/chromium/src/+/55.0.2883.100
// This SHA is old and does not support debugging with HMR.
Expand All @@ -39,17 +39,19 @@ export abstract class DebugServiceBase extends EventEmitter implements IDeviceDe
// Using the actual commit will result in 404 error in the remote serve.
const commitSHA = debugOptions.devToolsCommit || "02e6bde1bbe34e43b309d4ef774b1168d25fd024";

let chromeDevToolsPrefix = `chrome-devtools://devtools/remote/serve_file/@${commitSHA}`;
const devToolsProtocol = `${legacy ? 'chrome-' : ''}devtools`;

let chromeDevToolsPrefix = `${devToolsProtocol}://devtools/remote/serve_file/@${commitSHA}`;

if (debugOptions.useBundledDevTools === undefined || debugOptions.useBundledDevTools) {
chromeDevToolsPrefix = "chrome-devtools://devtools/bundled";
chromeDevToolsPrefix = `${devToolsProtocol}://devtools/bundled`;
}

if (debugOptions.useHttpUrl) {
chromeDevToolsPrefix = `https://chrome-devtools-frontend.appspot.com/serve_file/@${commitSHA}`;
}

const chromeUrl = `${chromeDevToolsPrefix}/inspector.html?experiments=true&ws=localhost:${port}`;
const chromeUrl = `${chromeDevToolsPrefix}/inspector.html?ws=localhost:${port}${legacy ? '&experiments=true' : ''}`;
return chromeUrl;
}
}
16 changes: 8 additions & 8 deletions lib/services/ios-device-debug-service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,9 @@ export class IOSDeviceDebugService extends DebugServiceBase implements IDeviceDe

@performanceLog()
public async debug(debugData: IDebugData, debugOptions: IDebugOptions): Promise<IDebugResultInfo> {
const result: IDebugResultInfo = { debugUrl: null };
await this.validateOptions(debugOptions);

result.debugUrl = await this.wireDebuggerClient(debugData, debugOptions);

return result;
return await this.wireDebuggerClient(debugData, debugOptions);
}

public async debugStop(): Promise<void> {
Expand Down Expand Up @@ -84,25 +81,28 @@ export class IOSDeviceDebugService extends DebugServiceBase implements IDeviceDe
}

@performanceLog()
private async wireDebuggerClient(debugData: IDebugData, debugOptions: IDebugOptions): Promise<string> {
private async wireDebuggerClient(debugData: IDebugData, debugOptions: IDebugOptions): Promise<IDebugResultInfo> {
if ((debugOptions.inspector || !debugOptions.client) && this.$hostInfo.isDarwin) {
return await this.setupTcpAppDebugProxy(debugData, debugOptions);
} else {
return await this.setupWebAppDebugProxy(debugOptions, debugData);
}
}

private async setupWebAppDebugProxy(debugOptions: IDebugOptions, debugData: IDebugData): Promise<string> {
private async setupWebAppDebugProxy(debugOptions: IDebugOptions, debugData: IDebugData): Promise<IDebugResultInfo> {
if (debugOptions.chrome) {
this.$logger.info("'--chrome' is the default behavior. Use --inspector to debug iOS applications using the Safari Web Inspector.");
}
const projectName = this.getProjectName(debugData);
const webSocketProxy = await this.$appDebugSocketProxyFactory.ensureWebSocketProxy(this.device, debugData.applicationIdentifier, projectName, debugData.projectDir);

return this.getChromeDebugUrl(debugOptions, webSocketProxy.options.port);
return {
debugUrl: this.getChromeDebugUrl(debugOptions, webSocketProxy.options.port),
legacyDebugUrl: this.getChromeDebugUrl(debugOptions, webSocketProxy.options.port, true)
};
}

private async setupTcpAppDebugProxy(debugData: IDebugData, debugOptions: IDebugOptions): Promise<string> {
private async setupTcpAppDebugProxy(debugData: IDebugData, debugOptions: IDebugOptions): Promise<IDebugResultInfo> {
const projectName = this.getProjectName(debugData);
const existingTcpProxy = this.$appDebugSocketProxyFactory.getTCPSocketProxy(this.deviceIdentifier, debugData.applicationIdentifier);
const tcpSocketProxy = existingTcpProxy || await this.$appDebugSocketProxyFactory.addTCPSocketProxy(this.device, debugData.applicationIdentifier, projectName, debugData.projectDir);
Expand Down
40 changes: 24 additions & 16 deletions test/services/android-device-debug-service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ class AndroidDeviceDebugServiceInheritor extends AndroidDeviceDebugService {
super(<any>{ deviceInfo: { identifier: "123" } }, $devicesService, $cleanupService, $errors, $logger, $androidProcessService, $staticConfig, $net, $deviceLogProvider);
}

public getChromeDebugUrl(debugOptions: IDebugOptions, port: number): string {
return super.getChromeDebugUrl(debugOptions, port);
public getChromeDebugUrl(debugOptions: IDebugOptions, port: number, legacy?: boolean): string {
return super.getChromeDebugUrl(debugOptions, port, legacy);
}
}

Expand All @@ -43,6 +43,7 @@ interface IChromeUrlTestCase {
debugOptions: IDebugOptions;
expectedChromeUrl: string;
scenarioName: string;
legacy?: boolean;
}

describe("androidDeviceDebugService", () => {
Expand All @@ -55,7 +56,14 @@ describe("androidDeviceDebugService", () => {
{
scenarioName: "useBundledDevTools and useHttpUrl are not passed",
debugOptions: {},
expectedChromeUrl: `chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/bundled/inspector.html?ws=localhost:${expectedPort}`,
},
// legacy chrome debug url
{
scenarioName: "useBundledDevTools and useHttpUrl are not passed and using legacy chrome debug url",
debugOptions: {},
expectedChromeUrl: `chrome-devtools://devtools/bundled/inspector.html?ws=localhost:${expectedPort}&experiments=true`,
legacy: true
},

// When useBundledDevTools is true
Expand All @@ -64,23 +72,23 @@ describe("androidDeviceDebugService", () => {
debugOptions: {
useBundledDevTools: true
},
expectedChromeUrl: `chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/bundled/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "useBundledDevTools is true and useHttpUrl is false",
debugOptions: {
useBundledDevTools: true,
useHttpUrl: false
},
expectedChromeUrl: `chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/bundled/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "useBundledDevTools is true and useHttpUrl is true",
debugOptions: {
useBundledDevTools: true,
useHttpUrl: true
},
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${expectedDevToolsCommitSha}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${expectedDevToolsCommitSha}/inspector.html?ws=localhost:${expectedPort}`,
},

// When useBundledDevTools is false
Expand All @@ -89,23 +97,23 @@ describe("androidDeviceDebugService", () => {
debugOptions: {
useBundledDevTools: false
},
expectedChromeUrl: `chrome-devtools://devtools/remote/serve_file/@${expectedDevToolsCommitSha}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/remote/serve_file/@${expectedDevToolsCommitSha}/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "useBundledDevTools is false and useHttpUrl is false",
debugOptions: {
useBundledDevTools: false,
useHttpUrl: false
},
expectedChromeUrl: `chrome-devtools://devtools/remote/serve_file/@${expectedDevToolsCommitSha}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/remote/serve_file/@${expectedDevToolsCommitSha}/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "useBundledDevTools is false and useHttpUrl is true",
debugOptions: {
useBundledDevTools: false,
useHttpUrl: true
},
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${expectedDevToolsCommitSha}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${expectedDevToolsCommitSha}/inspector.html?ws=localhost:${expectedPort}`,
},

// When useBundledDevTools is not passed
Expand All @@ -114,14 +122,14 @@ describe("androidDeviceDebugService", () => {
debugOptions: {
useHttpUrl: false
},
expectedChromeUrl: `chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/bundled/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "useBundledDevTools is not passed and useHttpUrl is true",
debugOptions: {
useHttpUrl: true
},
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${expectedDevToolsCommitSha}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${expectedDevToolsCommitSha}/inspector.html?ws=localhost:${expectedPort}`,
},

// devToolsCommit tests
Expand All @@ -130,36 +138,36 @@ describe("androidDeviceDebugService", () => {
debugOptions: {
useBundledDevTools: false
},
expectedChromeUrl: `chrome-devtools://devtools/remote/serve_file/@${expectedDevToolsCommitSha}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/remote/serve_file/@${expectedDevToolsCommitSha}/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "devToolsCommit is disregarded when useBundledDevTools is not passed",
debugOptions: {},
expectedChromeUrl: `chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/bundled/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "devToolsCommit is set to passed value when useBundledDevTools is set to false",
debugOptions: {
useBundledDevTools: false,
devToolsCommit: customDevToolsCommit
},
expectedChromeUrl: `chrome-devtools://devtools/remote/serve_file/@${customDevToolsCommit}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `devtools://devtools/remote/serve_file/@${customDevToolsCommit}/inspector.html?ws=localhost:${expectedPort}`,
},
{
scenarioName: "devToolsCommit is set to passed value when useHttpUrl is set to true",
debugOptions: {
useHttpUrl: true,
devToolsCommit: customDevToolsCommit
},
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${customDevToolsCommit}/inspector.html?experiments=true&ws=localhost:${expectedPort}`,
expectedChromeUrl: `https://chrome-devtools-frontend.appspot.com/serve_file/@${customDevToolsCommit}/inspector.html?ws=localhost:${expectedPort}`,
}
];

for (const testCase of chromUrlTestCases) {
it(`returns correct url when ${testCase.scenarioName}`, () => {
const testInjector = createTestInjector();
const androidDeviceDebugService = testInjector.resolve<AndroidDeviceDebugServiceInheritor>(AndroidDeviceDebugServiceInheritor);
const actualChromeUrl = androidDeviceDebugService.getChromeDebugUrl(testCase.debugOptions, expectedPort);
const actualChromeUrl = androidDeviceDebugService.getChromeDebugUrl(testCase.debugOptions, expectedPort, testCase.legacy);
assert.equal(actualChromeUrl, testCase.expectedChromeUrl);
});
}
Expand Down
Loading