如何在 JS 脚本中创建一些断点来调试它

Question

我有两个内容相似的页面，它们都使用引导选项卡功能来显示数据。 这些选项卡是向导的步骤，因此我不希望用户通过单击另一个选项卡来导航离开当前选项卡。所以我写了这个小js来检查选项卡是否具有"禁用"类，该类将阻止转到该选项卡。

在一个页面上它工作正常，在另一个页面上它不识别"禁用"类，依此类推，单击显示新选项卡的标题。我正在寻找有关如何在我的 js 代码中创建一些断点并了解它中断位置的建议。这是因为我的代码中显然有些东西不起作用，但我找不到什么。if 块中的控制台日志语句永远不会执行。

<div class="wizard-inner">
<div class="connecting-line colored-line"></div>
<ul class="nav nav-tabs" role="tablist" id="navigator">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Crea il tuo form">
<span class="round-tab">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Scegli i campi da visualizzare">
<span class="round-tab">
<i class="glyphicon glyphicon-book"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Anteprima">
<span class="round-tab">
<i class="glyphicon glyphicon-credit-card"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Scegli gli utenti">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
$(document).ready(function() {
/* Controlli del wizard */
//TODO verifica perchè posso andare avanti cliccando sugli elementi anche se sono disabilitati
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
$('.bs-glyphicons-list > li[title]').tooltip();
//Wizard
//inizializzo mostrando solo il primo
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
console.log('sono qui');
return false;
}
});
});

Answer 1

我假设您只想测试以下块：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
console.log('sono qui');
return false;
}
});

首先，我会尝试提取$('a[data-toggle="tab"]')并检查它是否存在：

const elements = $('a[data-toggle="tab"]'); // NEW
console.log(elements); // NEW
elements.on('show.bs.tab', function (e) { // NEW
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
console.log('sono qui');
return false;
}
});

请注意，我并没有通过复制$('a[data-toggle="tab"]')语句来做到这一点，因为我想 100% 确定我打印到控制台的内容与我在代码中进一步使用的内容相同(不要像此代码一样(：

const elements = $('a[data-toggle="tab"]'); // NEW
console.log(elements); // NEW
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { // CHANGE HERE TO VARIABLE TOO!!!
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
console.log('sono qui');
return false;
}
});

如果一切正常并且您看到元素，则恢复到以前的代码，下一步是检查是否在这些元素中的任何一个上触发了show.bs.tap事件：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
console.log(e); // NEW
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
console.log('sono qui');
return false;
}
});

如果您执行了操作并将事件打印到控制台，请检查目标是否为：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
console.log($target); // NEW
if ($target.parent().hasClass('disabled')) {
console.log('sono qui');
return false;
}
});

有目标吗？检查它是否有父级：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
const parent = $target.parent() // NEW
console.log(parent) // NEW
if (parent.hasClass('disabled')) { // NEW
console.log('sono qui');
return false;
}
});

通过下拉列表浏览控制台中parent的打印输出，并查找它是否具有必要的类。

在其中一个步骤中，您将在代码中找到语法或逻辑错误。

祝你好运！ :)