How to make Chrome Dev Tools show the JavaScript source - c++

Question

I slightly modified the hello-world.cc sample, importing some code from d8. Then, using websocketpp and asio, I added a WebSocket Server to the program.
Also, I used V8 inspector from an embedder standpoint to add a simple implementation for the inspector protocol back-end.
Now, when I start my program and then use Chrome to navigate to chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9002, I receive the following messages from the CDT:
{"id":1,"method":"Profiler.enable"}
for witch the response is:
{"id":1,"result":{}}
then
{"id":2,"method":"Runtime.enable"}
for this one a notification and a response are sent:
{"method":"Runtime.executionContextCreated",
"params":{"context":{"id":1,"origin":"","name":"MyApplication"}}}
{"id":2,"result":{}}
then:
{"id":3,"method":"Debugger.enable"}
again, a notification and a response sent back to the front-end:
{"method":"Debugger.scriptParsed",
"params":{
"scriptId":"4","url":"func_add.js","startLine":0,
"startColumn":0,"endLine":0,"endColumn":35,
"executionContextId":1,"hash":"365568ee6245be1376631dbf20e7de9d42c9adf1",
"isLiveEdit":false,"sourceMapURL":"","hasSourceURL":false,
"isModule":false,"length":35
}
}
{"id":3,"result":{"debuggerId":"(DC239109305DBEF825A955524584A826)"}}
For the moment, I will not add to the question the other messages received from the front-end, and the responses sent.
The last exchange is:
{"id":7,"method":"Runtime.runIfWaitingForDebugger"}
{"id":7,"result":{}}
My problem: in CDT, the Sources tab is empty (and therefore, I can't try to put a breakpoint).
My code to inject JS in V8:
const char * pszScript = "function add( a, b) { return a+b; }";
v8::Local<v8::String> source =
v8::String::NewFromUtf8(isolate, pszScript, v8::NewStringType::kNormal).ToLocalChecked();
v8::Local<v8::String> name =
v8::String::NewFromUtf8(isolate, "func_add.js", v8::NewStringType::kNormal).ToLocalChecked();
ExecuteString( isolate, source, name );
My ExecuteString function:
bool ExecuteString(v8::Isolate* isolate, v8::Local<v8::String> source,
v8::Local<v8::Value> name) {
v8::HandleScope handle_scope(isolate);
v8::Local<v8::Context> context = isolate->GetCurrentContext();
v8::Context::Scope context_scope(context);
v8::TryCatch try_catch(isolate);
try_catch.SetVerbose(true);
v8::MaybeLocal<v8::Value> maybe_result;
bool success = true;
v8::ScriptOrigin origin(name);
v8::ScriptCompiler::Source script_source(source, origin);
v8::MaybeLocal<v8::Script> maybe_script;
maybe_script = v8::ScriptCompiler::Compile(context, &script_source);
v8::Local<v8::Script> script;
if (!maybe_script.ToLocal(&script)) {
// Print errors that happened during compilation.
ReportException(isolate, &try_catch);
return false;
}
maybe_result = script->Run(context);
v8::Local<v8::Value> result;
if (!maybe_result.ToLocal(&result)) {
// Print errors that happened during execution.
ReportException(isolate, &try_catch);
return false;
}
if (!result->IsUndefined()) {
// If all went well and the result wasn't undefined then print
// the returned value.
v8::String::Utf8Value str(isolate, result);
fwrite(*str, sizeof(**str), str.length(), stdout);
printf("\n");
} else {
printf("undefined\n");
}
return success;
}
I think I am doing something wrong, as I should be able to see some func_add.js source in CDT with the content function add( a, b) { return a+b; }

Answer 1

W/o checking the source code at all, I remember having some bad times at this exact use case.
try adding to your source parameter a protocol.
CDT needs any protocol file, http, https to create the sources tree.
It will also use this uri to request for maps, or any other source code related thing.
v8::Local<v8::String> name =
v8::String::NewFromUtf8(isolate, "file://func_add.js", v8::NewStringType::kNormal).ToLocalChecked();
ExecuteString( isolate, source, name );
It also happens from time to time, that depending on your v8 implementation, official chrome is not able to show source code, debug, etc.
Try using chrome canary if this is the case.
The protocol implementation is as I described in your referenced post.
Hope this helps.
In your code, I don't see where you discover your Context to the Inspector object, but something like this must happen somewhere in your code:
inspector_->contextCreated(
v8_inspector::V8ContextInfo(context, 1, v8_inspector::StringView(
reinterpret_cast<const uint8_t *>("ABCD"), 4)));
I do this right after creating the Context and setting its global object.
CDT will query script contents with a message of the form:
{"id":8,"method":"Debugger.getScriptSource","params":{"scriptId":"7"}}
While the implementation is very simple, there are many reasons why your code simply will not show up.
Hope that helps.