web-dev-qa-db-ja.com

Console.logがまったく機能しない

たくさんのコードが機能せず、問題の場所を特定しようとしていますが、console.log()がChrome Devツールで結果を記録していません。正しく？

$(window).scroll(function() {
       $('section').each(function(){
            var id='#'+$(this).attr('id'),
                off=$(id).offset().top,
                hei=$(id).height(),
                winscroll=$(window).scrollTop(),
                dif=hei+off-($(window).height());

            if (winscroll >= off && winscroll<=dif) {
                console.log('first broken');
                $(id+' .sticky').removeClass('abs').addClass('fix');
            } else if (winscroll > dif){
                console.log('second broken');
                $(id+' .sticky').removeClass('fix').addClass('abs');
            } else {
                console.log('third broken');
                $(id+' .sticky').removeClass('fix abs');
            }   });
        });

追加された全コードの編集

$(document).ready(function() {

    // If a browser supports 3D transforms use the fancy menu if it doesn't, use standard accordion menu instead
    if($('html').hasClass('csstransforms3d')){

        $( "#mp-menu" ).removeClass( "snap-drawers" ).addClass( "mp-menu" );

        $('nav ul li ul').css('border-bottom','1px solid rgba(255, 255, 255, .05)');
        $('nav ul li ul').css('background','none');

        // Insert elements where necessary to create the right structure
        $('#mp-menu').wrapInner('<div class="mp-level" />');
        $('#mp-menu').find('li > ul').wrap('<div class="mp-level" />');

        $("#mp-menu ul li .mp-level").prepend(function () {
            return '<span class="menu-title">' + $(this).prev().text() + '</span> <a class="ico mp-back" href="#">Back</a>';
        });

        // load in necessary JS files
        $.getScript('http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/multi-level-menu.js');

    } else {

        // load in necessary JS files
        $.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/jquery.navgoco.min.js", function() {
            $("#demo1").navgoco({accordion: true});
        });

        $.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/snap.min.js", function() {

            // Snapper settings     
            var snapper = new Snap({
              element: document.getElementById('scroller'),
              disable: 'right',
              maxPosition: 291
            });

            var addEvent = function addEvent(element, eventName, func) {
                if (element.addEventListener) {
                return element.addEventListener(eventName, func, false);
              } else if (element.attachEvent) {
                  return element.attachEvent("on" + eventName, func);
              }
            };

            // Toggle button
            addEvent(document.getElementById('trigger'), 'click', function(){
                if( snapper.state().state=="left" ){
                    snapper.close();
                    $( ".menu-trigger" ).removeClass( "active" );
                } else {
                    snapper.open('left');
                    $( ".menu-trigger" ).addClass( "active" );
                }
            });

            addEvent(document.getElementById('scroller'), 'click', function(){
                if( snapper.state().state=="left" ){
                    $( ".menu-trigger" ).removeClass( "active" );
                }
            });

            /* Prevent Safari opening links when viewing as a Mobile App */
            (function (a, b, c) {
              if(c in b && b[c]) {
                  var d, e = a.location,
                      f = /^(a|html)$/i;
                  a.addEventListener("click", function (a) {
                      d = a.target;
                      while(!f.test(d.nodeName)) d = d.parentNode;
                      "href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.Host)) && (a.preventDefault(), e.href = d.href)
                  }, !1)
              }
            })(document, window.navigator, "standalone");

        });

    } // end if

    fitHeight();

    $(window).scroll(function() {
        $('section').each(function(){
            var id='#'+$(this).attr('id'),
                off=$(id).offset().top,
                hei=$(id).height(),
                winscroll=$(window).scrollTop(),
                dif=hei+off-($(window).height());

           console.log('msj');

            if (winscroll >= off && winscroll<=dif) {
                $(id+' .sticky').removeClass('abs').addClass('fix');
            } else if (winscroll > dif){
                $(id+' .sticky').removeClass('fix').addClass('abs');
            } else {
                $(id+' .sticky').removeClass('fix abs');
            }
        });
     });

});

// Trigger FitHeight on browser resize
$(window).resize(fitHeight);

[〜＃〜] edit [〜＃〜]

完全なコードの一部（上記）は他のJSファイルを参照し、これらのファイルが存在する状態で実行してもコードはエラーを返しません。トラブルシューティング後、スクロール機能の前にコンソールメッセージが表示されますが、スクロール機能内にコンソールメッセージが表示されません。

fitHeight();

    console.log('About to bind scroll effects'); // I SEE THIS MESSAGE

    $(window).scroll(function() {

        console.log("scroll bound, now loop through sections"); //BUT NOT THIS ONE

        $('section').each(function(){
javascriptdebuggingconsolegoogle-chrome-devtools
21
egr103

私はこれについて少しばかげていると感じますが、これはすべての人へのレッスンにしましょう...正しいセレクターをターゲットに設定してください！

基本的に、この特定のコードスニペットがウィンドウのスクロール領域を取得しようとしていたため、コンソールは何もログしませんでしたが、実際には、コードがDIV全体をスクロールするように異なって設定されていました。変更したらすぐに：

$(window).scroll(function() {

これに：

$('#scroller').scroll(function() {

コンソールは正しいメッセージの記録を開始しました。

6
egr103

JavaScriptログを非表示にしたか、エラーまたは警告のみを表示するように指定したかのように聞こえます。 Chromeのデベロッパーツールを開き、[コンソール]タブに移動します。一番下で、JavaScriptがチェックされていることを確認し、「すべて」、「ログ」、または「デバッグ」が選択されていることを確認します。

Example Screenshot

上の画像では、JavaScript、ネットワーク、ロギング、CSS、その他にチェックマークが付いており、「すべて」が選択されています。

別の潜在的な問題は、$(window).scroll()関数が.ready()関数にラップされていないことです（文書化されている here ）：

$(document).ready(function() {
    $(window).scroll(function() {
        ...
    });
});

コードをJSFiddleに貼り付けてダミーコンテンツを提供すると、コードは完全に正常に機能します： JSFiddle demo 。

編集：

質問が編集されました。指定された新しいコードは2つのエラーをスローします。

キャッチされないReferenceError：fitHeightは定義されていませんキャッチされないTypeError：nullのプロパティ 'addEventListener'を読み取ることができません

このため、コードはconsole.log呼び出しに到達する前に実行を停止します。

52
James Donnelly

私の場合、「フィルター」テキストボックスに文字列を残していたため、すべてのコンソールメッセージが表示されませんでした。

図に示すように、Xをクリックしてフィルターを削除します。

enter image description here

12
AyexeM

私の場合、私はPolymer WebComponentを開発していました。これは<link rel="import">をメインのHTMLドキュメントに挿入します。キャッシュされたバージョン以降に変更したにもかかわらず、何らかの理由でWebComponent HTMLファイルがキャッシュされていたことが判明しました。

それを解決するために、（Chromeで）開発者コンソールを開き、URLバーの横にあるリロード矢印を右クリックして、「空のキャッシュとハードリロード」を選択しました-問題は解決しました。

1
Magnus W

「正しく実行する」という質問に対して、より実用的なアプローチを検討してください。

console.log("about to bind scroll fx");

$(window).scroll(function() {

       console.log("scroll bound, loop through div's");

       $('div').each(function(){

これらのlogsの両方が正しく出力された場合、var宣言に問題がある可能性があります。これをデバッグするには、いくつかの行に分割することを検討してください。

var id='#'+$(this).attr('id');

console.log(id);

var off=$(id).offset().top;
var hei=$(id).height();
var winscroll=$(window).scrollTop();
var dif=hei+off-($(window).height());

これを行うことにより、少なくともデバッグ中に、var idが未定義になり、残りのコード全体でエラーが発生することがわかります。一部のdivタグにIDがない可能性はありますか？

0
shanabus