Console.log根本不工作

时间：2013-10-29 15:09:26

标签： javascript debugging console google-chrome-devtools

大量代码无效，我正在尝试确定问题所在，但console.log()未在Chrome开发工具中记录任何结果，我是否正确执行？

$(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);

修改

完整代码的某些部分（上面）引用其他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(){

14 个答案:

答案 0 :(得分：51)

听起来你已经隐藏了JavaScript日志，或者指定你只想看错误或警告。打开Chrome的开发者工具，然后转到控制台标签。在底部，您需要确保选中JavaScript，并确保选择“全部”，“日志”或“调试”。

Example Screenshot

在上图中，我选择了JavaScript，网络，日志记录，CSS和其他选项，并选中了“全部”。

另一个潜在的问题可能是您的$(window).scroll()函数未包含在.ready()函数中（如文档here所示）：

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

将代码粘贴到JSFiddle并提供一些虚拟内容时，您的代码完全正常：JSFiddle demo。

编辑：

问题已被编辑。给出的新代码会引发两个错误：

  

未捕获的ReferenceError：未定义fitHeight   未捕获的TypeError：无法读取null

的属性'addEventListener'

因此，代码会在到达任何console.log电话之前停止执行。

答案 1 :(得分：6)

我觉得这有点愚蠢，但让这成为每个人的教训......确保你瞄准正确的选择器！

基本上，控制台没有记录任何内容，因为这个特定的代码片段试图抓住我窗口的滚动区域，而实际上我的代码设置不同而不是滚动整个DIV。我一改变了：

$(window).scroll(function() {

到此：

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

控制台开始记录正确的消息。

答案 2 :(得分：3)

就我而言，所有控制台消息均未显示，因为我在“过滤器”文本框中留下了一个字符串。

通过点击X删除过滤器，如下所示：

enter image description here

答案 3 :(得分：1)

就我而言，我正在开发一个Polymer WebComponent，它使用<link rel="import">包含在主HTML文档中。事实证明，WebComponent HTML文件由于某种原因被缓存，即使我已经从缓存版本更改了它。

要解决此问题，我打开了开发者控制台（在Chrome中），右键单击了URL栏旁边的重新加载箭头，然后选择了＃34;清空缓存并重新加载＆＃34; - 问题解决了。

答案 4 :(得分：1)

单击还原按钮。 console.log将开始工作。

enter image description here

答案 5 :(得分：0)

考虑采用更务实的方法解决“正确行事”的问题。

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

$(window).scroll(function() {

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

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

如果这两个log输出正确，则可能是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？

答案 6 :(得分：0)

只需从控制台选项卡左侧的选项中选择正确的选项来显示日志消息。您可以参考屏幕截图。 screenshot

答案 7 :(得分：0)

我遇到了同样的问题，但没有控制台消息显示。仅仅是因为我在Windows 10上使用了新的Edge（基于Chromium）浏览器，而Chrome却没有显示控制台消息。我猜想这是Edge的问题，因为Edge还有另一个奇怪的问题，因为它对待带单引号和双引号的字符串的方式有所不同。

答案 8 :(得分：0)

在我看来，这是由console.groupCollapsed()引起的。

ctrl + f 显然不会检测到折叠的消息。

维护陌生的代码有时会令人恐惧...

它甚至使异常消息崩溃了，缺少该异常消息使我将那些console.log放在首位^ _ ^

答案 9 :(得分：0)

那是因为我之前在框列表中关闭了“日志”。 enter image description here

答案 10 :(得分：0)

如果在 html 中的 console.log 中使用 $ 参数，则单引号 (') 和双引号 ("") 将不起作用。

使用像 ( ) 这样的引号

示例： console.log(${address});

这将有助于使用 $parameter 以及在 console.log 中遇到问题的任何人。

答案 11 :(得分：-1)

现在在现代浏览器中，可以通过按 F12 键来使用console.log()。图片将有助于您清楚地了解概念。 Console.log() and document.write()

答案 12 :(得分：-1)

您可能已经在控制台中使用了筛选器功能，该功能将隐藏与查询不匹配的所有内容。删除查询，您的消息将显示。

答案 13 :(得分：-1)

作为javascript的一个全新功能，我在这里遇到了同样的问题。我犯的错误是我曾经使用过：

<script type="text.javascript">
  console.log("bla bla bla");
</script>

代替：

<script>
  console.log("bla bla bla");
</script>

使用

type =“ text.javascript”

具有未在控制台中生成日志的结果。

相关问题
最新问题