和服务器端: – 简单视图由节点呈现,并由多语言提供翻译 – 可交互的组件使用 Vue.js,并由 vue-i18n 提供翻译 – 两者都使用相同的语言源库 我们一直在记录错误,如果我们访问的页面缺少特定语言的翻译,则也会记录缺少的短语。然而,这给我们带来了一些问题: – 我们只能在访问页面时找到缺失的翻译, – 我们没有自动化测试方法 – 多次访问子站点会生成多个包含相同错误的日志条目,这使其难以阅读 在本文中,我将重点介绍如何捕获 Vue.js 渲染组件的错误。 由于我们已经设置了日志记录,我所要做的就是触发所有可能的错误以查看缺少哪些翻译。为此,我们需要一个工具,可以进入
每种语言的每个站点并检查控
制台是否存在错误。由于我们已经准备好了站 伊拉克数据 点地图,剩下的部分就是一个可以进入站点地图并抓取日志错误的自动浏览器。我决定使用 puppeteer,这是一个提供 api 来控制无头 Chrome 的 node.js 库。 创建的脚本必须: 下载网址列表 访问每个子站点并保存 Vue.js 视图中缺少翻译的任何日志 打印出所有缺失的翻译 我们的网站上已经有了站点地图。我使用 axios 发送接收站点地图的 GET 请求。由于站点地图是 xml 格式的,因此我使用xml2js来解析它并提取 URL。查看生产示例站点地图。 注意:如果您使用的开发环境没有使用有效的 SSL 证书,请确保禁用 by GitHub 访问每个子
站点并保存任何缺少翻译的日志 我
将创建一个函数,启动浏览器,有缺少翻译警告的日 卡塔尔电话号码列表 志并返回它。 我将定义一个异步函数,因为大多数 puppeteer 操作都是异步的。它将接收在第一步中获取和解析的 urls 数组。首先让我们启动一个浏览器。于我们将其分配给变量,我现在可以将其作为实际浏览器引用。通过此引用,我可以打开页面、在选项卡之间切换等等。查看文档以了解可能性。 正如您所看到的,我忽略了 https 错误,因为我在开发中没有使用有效的 ssl 证书(仅自签名)。 现在我可以打开一个页面,其实际作用就像在 chrome 浏览器中打开一个新标签一样。在我开始抓取网站之前,我想在控制台上添加一个监听器。这将捕获缺少翻译的日志。以下是示例控制台日志: