页面报错/显示异常等问题简易排查 ​

大部分页面报错/显示异常等问题不是 bug，是由于 MB 不支持一些新特性导致的。这是一个如何排查此类问题的简易教程。 如果通过以下手段发现不是新特性导致的问题而是 bug，或者无法判断，可以在 QQ 群和微信群中询问。

1. 下载 release 包 ​

release 包请加 QQ 群获取，群号点击这里。

2. 使用对应的简易浏览器排查错误 ​

找到对应 DLL 版本的简易浏览器并打开问题页面，点击工具栏按钮 Test，再点击 打开 devtools，使用 devtools 进行调试，需要一定的前端调试基础。

3. 找到可疑的新特性并查询浏览器支持版本 ​

假如我们经过调试找到了可疑的新特性，以下两个网站可以帮助我们查看是否是新特性：

• MDN
• Can i use

这里举两个例子。

直接使用 JS 新特性 ?? 导致报错 ​

假设页面中有以下代码

<script>
    const foo = null ?? '打印内容';
    console.log(foo);
</script>

此时 devtools-console 报错：Uncaught SyntaxError: Unexpected token ?，点击右边的出错文件和行号，发现页面中有上述代码。

前往上面说的两个网站对 ?? 进行搜索，发现 chrome 85 才支持 ?? 语法，现在可以确定不是 bug，而是 MB 不支持新语法导致的问题。

直接使用 CSS 新特性 grid 导致显示异常(MB49) ​

假设页面有以下代码

<style>
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);   
    }
    .box {
        margin: 20px;
        background-color: grey;
    }
</style>
<div class="wrapper">
    <div class="box box1">One</div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
    <div class="box box4">Four</div>
 </div>

此时打开 devtools-elements，点击出问题的元素，右侧 styles 面板显示 grid 的三个配置为黄色感叹号，内容为 invalid property value。

前往上面说的两个网站对 grid 进行搜索，发现 chrome 57 才支持 CSS grid 布局，是 MB49 不支持新语法导致的问题。

4. 尝试解决问题 ​

假如出问题的页面是不受控制(无法修改源代码)的页面，基本没法解决，可以期待 MB 出新版本以支持这些新特性。

假如出问题的页面是自己控制的页面，能修改源代码，则可以采取以下方式解决，需要一些前端基础。

解决 JS 相关问题 ​

语法转换问题 ​

JS 的新语法特性大部分都是语法糖，这意味着可以使用 babeljs 等工具进行语法转换，比如上面 ?? 可以使用工具自动转换为旧版法。如果是单页面应用，一般都会使用脚手架，在内部集成了语法转换工具，可以查看对应的文档进行配置。

假如使用 vue-cli 工具进行开发，可以配置 package.json 中的 browserslist 字段，如何配置详情参考vue-cli兼容性。 假如使用 vite，可以参考vite兼容性

新的特性问题 ​

JS 的部分语法提供了新的功能，如 ResizeObserver 就无法转换，此时需要寻找对应的 polyfill 库来兼容实现，请使用搜索引擎或 NPM 寻找这些库。

假如使用 vue-cli 或者 vite，也可以使用对应的 polyfill 方案，上面的文档链接中也有介绍。

解决 CSS 相关问题 ​

一般采用替代方案，如上面 grid 无法支持，使用传统方式进行样式布局。