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

Question

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

在一个页面上它工作正常，在另一个页面上它不识别 "disabled" class 等点击标题显示新标签。 我正在寻找有关如何在我的 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 的打印输出，看看它是否有必要的 class。

在其中一个步骤中，您会发现代码中存在语法或逻辑错误。

祝你好运！ :)

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

how to create some breakpoints in a js script to debug it

javascript

jquery

twitter-bootstrap-3