调试器更新
2012 年回归我引入了DataTables 调试器的第一个版本。今天,我高兴地展示一个更新版本,其中引入了许多新功能,并更加注重隐私。
DataTables 调试器既可以用作书签小工具,也可以通过从调试器网站复制并粘贴几行代码到浏览器的控制台中来使用,然后运行它。加载后,调试器现在将提供一个显示界面,其中有四个操作选项:
- 表格摘要信息:这对于概览网页上的表格、其数据源和处理模式很有用。
- 版本信息:显示网页上使用的 DataTables 软件版本信息,并将其与最新的可用版本进行比较(指示是否存在可用的升级)。
- 运行常见测试:我们发现许多用户在使用 DataTables 时会遇到一些相同的问题。在 DataTables 中,这些问题并不总是容易或适合进行测试的,因此 DataTables 调试器介入其中,并且会通知您已找到哪些错误配置问题以及如何处理这些问题。
- 上传数据:和以前一样,您可以选择将有关表格的信息上传到调试服务器。但是,虽然这个操作以前是自动发生的,但现在您需要明确地单击上传按钮才能执行此操作。我们还更改了访问调试信息的途径,以便只有 SpryMedia 的员工才能查看调试跟踪。
使用调试器
有关如何在网页上运行调试器的完整详细信息,请访问调试器网站。但是,您需要做的就是打开浏览器的控制台,复制/粘贴以下 Javascript,然后按回车键
var n = document.createElement('script');
n.setAttribute('language', 'JavaScript');
n.setAttribute('src', 'https://debug.datatables.net/debug.js');
document.body.appendChild(n);
开源
调试器客户端组件现在是开源的,如果您感兴趣,我们建议您查看一下源代码 - 特别是添加对任何有用的新测试的支持。该代码是 TypeScript,可以通过简单地键入gulp
将其编译为 Javascript。确保您首先运行npm install
以加载任何依赖项。
欢迎提交拉取请求 - 代码使用Prettier格式化,并带有制表符。
测试
新调试器的最有意思的一个方面是它能够在客户端上本地运行测试,确保网页上 DataTables 的完整性。我们计划根据论坛的支持请求在适当的时候添加新的测试。此处的目标是捕获可以通过编程方式进行检查的不正确配置错误,无需增加 DataTables 核心及其扩展名的代码大小。
如果您有兴趣贡献任何新测试,请在js/tests
目录中将您的测试作为新文件添加。您应该导入../lib
文件,其中包括用于测试的常见库函数,包括创建新测试的方法。
测试应该返回包含table
、level
和msg
属性的对象数组,其中详细说明已检测到的任何错误(如果测试函数不符合要求,TypeScript 将显示错误!)。典型测试的结构可能如下所示
import * as lib from '../lib';
lib.createTest('Test name', function($) {
let out = [];
if (!$.fn.dataTable) {
return out;
}
$.fn.dataTable.tables({ api: true }).iterator('table', function(settings, i) {
...
});
return out;
});
您还必须将新文件添加到 js/tests/index.ts
中的列表,以确保它包含在调试器中。然后运行 gulp
来构建新调试器并在浏览器中使用它(当然,需要更新路径!)。
var n = document.createElement('script');
n.setAttribute('language', 'JavaScript');
n.setAttribute('src', '/path/to/debug/index.js?rand=' + new Date().getTime());
document.body.appendChild(n);
支持请求
使用调试器的目的是帮助您解决有关支持请求的任何问题。在请求帮助时,我们需要了解您如何使用 DataTables 及其扩展的信息 - 调试器通常可以提供该信息(与非样式相关问题)。因此,在无法提供测试用例的情况下,我们将越来越多地要求调试跟踪(仍强烈建议提供测试用例!)。
尽情享受!