MiniBlink 简易指南

Appearance

On this page

开发者工具 ​

TIP

132 版本暂时不支持原生 devtools, 替代方法见下

49/57 版本 ​

首先，将下载包中的 front_end 目录放在合适位置。

然后，在代码中使用 mbSetDebugConfig 显示开发者工具。

cpp
mbWebView mbView = mbCreateWebWindow(MB_WINDOW_TYPE_POPUP, nullptr, 0, 0, 800, 600);
// ...
mbSetDebugConfig(mbView, "showDevTools", "path\\to\\front_end\\inspector.html");

需要注意的是，mb 的开发者工具不支持 js 断点等功能。

132 版本和 mini-electron ​

132 和 mini-electron 暂时不支持原生 devtools，还在开发中，不过可以使用 js 的替代方案。

这类方案通常使用劫持，替换和模拟的方式，在当前页面内实现类似 devtools 的效果，在复杂的 web 页面中可能导致冲突，但是在简单的 web 页面中基本不会出现问题。

以下以 eruda 为例给出使用的简单案例，也可以使用 vConsole 等

cpp
#include "mb.h"

void MB_CALL_TYPE onDocumentReady(mbWebView webView, void* param, mbWebFrameHandle frameId)
{
    if (mbIsMainFrame(webView, frameId)) {
        mbRunJs(webView, frameId, R"((function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();)", true, nullptr, nullptr, nullptr);
    }
}

int main() {
    mbSetMbMainDllPath(L"mb132_x64.dll");
    mbInit(nullptr);

    mbWebView mbView = mbCreateWebWindow(MB_WINDOW_TYPE_POPUP, nullptr, 0, 0, 1366, 768);

    mbOnDocumentReady(mbView, onDocumentReady, nullptr);

    mbShowWindow(mbView, TRUE);

    mbLoadURL(mbView, "https://miniblink.net/docs");

    mbRunMessageLoop();

    mbUninit();

    return 0;
}

点击齿轮图标即可打开 eruda 控制台。

效果如下： 效果图2

eruda 的使用较为简单，引入 js 后执行 eruda.init() 即可，以上案例中使用了 CDN，如果环境不支持，完全可以自己本地引入对应的 js。

eruda 的使用参考其官方文档，这里不赘述。