Skip to content

Commit 8974da1

Browse files
chenwilliamCommit bot
chenwilliam
authored and
Commit bot
committed
DevTools: improve UX for hosted mode + fix bug
This CL includes several quick improvements for hosted mode: - Properly serves InspectorBackendCommands.js. It turns out the metadata from the file is necessary for certain operations (e.g. $0 in the console). - Can now customize remote debugging port in addition to server port (e.g. REMOTE_DEBUGGING_PORT=9333 PORT=1234 npm run server) - Provides helpful info if you go to server root path: (e.g. http://localhost:8090/). As Paul pointed out, users may go here to check if the server is working. “Please go to http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true” (Note: it accounts for custom ports passed in) - Add chrome favicon (same favicon as https://developer.chrome.com/devtools) I'll update the docs with the RDP info once this CL has landed. BUG=629914 Review-Url: https://codereview.chromium.org/2195113002 Cr-Commit-Position: refs/heads/master@{#409878}
1 parent 180e6a4 commit 8974da1

File tree

2 files changed

+22
-39
lines changed

2 files changed

+22
-39
lines changed

‎front_end/inspector.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,4 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
// Preload protocol resources for hosted mode.
6-
if (!/** @type {?Object} */(window.InspectorFrontendHost)) {
7-
Promise.all([
8-
Runtime.loadResourceIntoCache("./sdk/protocol/browser_protocol.json", false /* appendSourceURL */),
9-
Runtime.loadResourceIntoCache("./sdk/protocol/js_protocol.json", false /* appendSourceURL */)
10-
]).then(() => Runtime.startApplication("inspector"));
11-
} else {
12-
Runtime.startApplication("inspector");
13-
}
14-
5+
Runtime.startApplication("inspector");

‎scripts/hosted_mode/server.js‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,20 @@ var http = require("http");
77
var https = require("https");
88
var path = require("path");
99
var parseURL = require("url").parse;
10+
var Stream = require("stream").Transform;
1011

11-
var port = parseInt(process.env.PORT, 10) || 8090;
12+
var remoteDebuggingPort = parseInt(process.env.REMOTE_DEBUGGING_PORT, 10) || 9222;
13+
var serverPort = parseInt(process.env.PORT, 10) || 8090;
1214

13-
http.createServer(requestHandler).listen(port);
14-
console.log("Started hosted mode server at http://localhost:" + port);
15+
http.createServer(requestHandler).listen(serverPort);
16+
console.log("Started hosted mode server at http://localhost:" + serverPort);
1517

1618
function requestHandler(request, response)
1719
{
1820
var filePath = parseURL(request.url).pathname;
19-
if (filePath === "/front_end/InspectorBackendCommands.js") {
20-
sendResponse(200, " ");
21+
if (filePath === "/") {
22+
sendResponse(200, `<html>Please go to <a href="http://localhost:${remoteDebuggingPort}#http://localhost:${serverPort}/front_end/inspector.html?experiments=true">
23+
http://localhost:${remoteDebuggingPort}#http://localhost:${serverPort}/front_end/inspector.html?experiments=true</a></html>`);
2124
return;
2225
}
2326

@@ -32,6 +35,7 @@ function requestHandler(request, response)
3235
function handleProxyError(err)
3336
{
3437
console.log(`Error fetching over the internet file ${filePath}:`, err);
38+
console.log(`Make sure you opened Chrome with the flag "--remote-debugging-port=${remoteDebuggingPort}"`);
3539
sendResponse(500, "500 - Internal Server Error");
3640
}
3741

@@ -67,25 +71,14 @@ function requestHandler(request, response)
6771
}
6872

6973
var proxyFilePathToURL = {
70-
"/front_end/sdk/protocol/js_protocol.json": getWebKitURL.bind(null, "platform/v8_inspector/js_protocol.json"),
71-
"/front_end/sdk/protocol/browser_protocol.json": getWebKitURL.bind(null, "core/inspector/browser_protocol.json"),
72-
"/front_end/SupportedCSSProperties.js": getFrontendURL.bind(null, "SupportedCSSProperties.js")
74+
"/front_end/SupportedCSSProperties.js": cloudURL.bind(null, "SupportedCSSProperties.js"),
75+
"/front_end/InspectorBackendCommands.js": cloudURL.bind(null, "InspectorBackendCommands.js"),
76+
"/favicon.ico": () => "https://chrome-devtools-frontend.appspot.com/favicon.ico"
7377
};
7478

75-
function getWebKitURL(path, commitHash)
79+
function cloudURL(path, commitHash)
7680
{
77-
return {
78-
url: `https://chromium.googlesource.com/chromium/src/+/${commitHash}/third_party/WebKit/Source/${path}?format=TEXT`,
79-
isBase64: true
80-
}
81-
}
82-
83-
function getFrontendURL(path, commitHash)
84-
{
85-
return {
86-
url: `https://chrome-devtools-frontend.appspot.com/serve_file/@${commitHash}/${path}`,
87-
isBase64: false
88-
}
81+
return `https://chrome-devtools-frontend.appspot.com/serve_file/@${commitHash}/${path}`;
8982
}
9083

9184
var proxyFileCache = new Map();
@@ -94,20 +87,18 @@ function proxy(filePath)
9487
{
9588
if (!(filePath in proxyFilePathToURL))
9689
return null;
97-
return fetch("http://localhost:9222/json/version")
90+
return fetch(`http://localhost:${remoteDebuggingPort}/json/version`)
9891
.then(onBrowserMetadata);
9992

10093
function onBrowserMetadata(metadata)
10194
{
10295
var metadataObject = JSON.parse(metadata);
10396
var match = metadataObject["WebKit-Version"].match(/\s\(@(\b[0-9a-f]{5,40}\b)/);
10497
var commitHash = match[1];
105-
var proxyFile = proxyFilePathToURL[filePath](commitHash);
106-
var proxyFileURL = proxyFile.url;
98+
var proxyFileURL = proxyFilePathToURL[filePath](commitHash);
10799
if (proxyFileCache.has(proxyFileURL))
108100
return proxyFileCache.get(proxyFileURL);
109101
return fetch(proxyFileURL)
110-
.then(text => proxyFile.isBase64 ? new Buffer(text, "base64").toString("binary") : text)
111102
.then(cacheProxyFile.bind(null, proxyFileURL));
112103
}
113104

@@ -122,7 +113,8 @@ function fetch(url)
122113
{
123114
return new Promise(fetchPromise);
124115

125-
function fetchPromise(resolve, reject) {
116+
function fetchPromise(resolve, reject)
117+
{
126118
var request;
127119
var protocol = parseURL(url).protocol;
128120
var handleResponse = getCallback.bind(null, resolve, reject);
@@ -143,9 +135,9 @@ function fetch(url)
143135
reject(new Error(`Request error: + ${response.statusCode}`));
144136
return;
145137
}
146-
var body = "";
147-
response.on("data", chunk => body += chunk);
148-
response.on("end", () => resolve(body));
138+
var body = new Stream();
139+
response.on("data", chunk => body.push(chunk));
140+
response.on("end", () => resolve(body.read()));
149141
}
150142
}
151143

0 commit comments

Comments
 (0)