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

Question

我有两个内容相似的页面，它们都使用bootstrap标签功能来显示数据。这些标签是一个向导的步骤，所以我不想让用户通过点击另一个标签来导航离开当前的标签。所以我写了这个小js来检查标签是否有 "disabled "类，以防止进入该标签。

在一个页面上，它工作正常，在其他页面上，它不能识别 "禁用 "类，所以在点击标题时，新的标签页被显示。我正在寻求建议，如何在我的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 在控制台中通过下拉菜单找到它是否有必要的类。

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

祝您好运! :)