如何使Chrome Dev Tools显示JavaScript源代码

How to make Chrome Dev Tools show the JavaScript source

本文关键字:显示 JavaScript 源代码 Tools Dev 何使 Chrome      更新时间:2023-10-16

我稍微修改了hello-world.cc示例,从d8导入了一些代码。然后,使用 websocketpp 和 asio,我在程序中添加了 WebSocket 服务器。 此外,我从嵌入器的角度使用 V8 检查器为检查器协议后端添加一个简单的实现。

现在,当我启动程序,然后使用 Chrome 导航到chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9002时,我收到来自 CDT 的以下消息:

{"id":1,"method":"Profiler.enable"}

对于女巫,回应是:

{"id":1,"result":{}} 

然后

{"id":2,"method":"Runtime.enable"}

为此,将发送通知和响应:

{"method":"Runtime.executionContextCreated",
"params":{"context":{"id":1,"origin":"","name":"MyApplication"}}}
{"id":2,"result":{}}

然后:

{"id":3,"method":"Debugger.enable"}

同样,通知和响应发送回前端:

{"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)"}}

目前,我不会在这个问题中添加从前端收到的其他消息以及发送的响应。 最后一次交流是:

{"id":7,"method":"Runtime.runIfWaitingForDebugger"}
{"id":7,"result":{}}     

我的问题:在 CDT 中,Sources选项卡为空(因此,我无法尝试放置断点)。

我在 V8 中注入 JS 的代码:

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 );

我的ExecuteString功能:

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("undefinedn");
}
return success;
}

我认为我做错了什么,因为我应该能够在 CDT 中看到一些func_add.js来源的内容function add( a, b) { return a+b; }

完全没有检查源代码,我记得在这个确切的用例中遇到了一些糟糕的时光。

尝试向源参数添加协议。 CDT 需要任何协议文件 http、https 来创建源树。 它还将使用此 uri 来请求映射或任何其他与源代码相关的东西。

v8::Local<v8::String> name =
v8::String::NewFromUtf8(isolate, "file://func_add.js", v8::NewStringType::kNormal).ToLocalChecked();
ExecuteString( isolate, source, name );

有时也会发生的情况,根据您的 v8 实现,官方 chrome 无法显示源代码、调试等。 如果是这种情况,请尝试使用铬金丝雀。

协议实现正如我在你引用的帖子中所描述的。 希望这有帮助。

在您的代码中,我没有看到您在哪里发现检查器对象的上下文,但这样的事情必须发生在代码中的某个地方:

inspector_->contextCreated(
v8_inspector::V8ContextInfo(context, 1, v8_inspector::StringView(
reinterpret_cast<const uint8_t *>("ABCD"), 4)));

我在创建上下文并设置其全局对象后立即执行此操作。

CDT 将使用以下形式的消息查询脚本内容:

{"id":8,"method":"Debugger.getScriptSource","params":{"scriptId":"7"}}

虽然实现非常简单,但有很多原因导致您的代码根本不会显示。 希望有帮助。