【问题标题】：Console.log not working at allConsole.log 根本不工作
【发布时间】：2013-11-08 19:58:20
【问题描述】：

一堆代码不起作用，我正在尝试找出问题所在，但 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(){

【问题讨论】：

很少会发生一些奇怪的错误，重启浏览器会有帮助。
@ViliusL 我希望事情就这么简单
您可能在控制台中使用了过滤器功能，它将隐藏任何与您的查询不匹配的内容。删除查询，您的消息将显示。

标签： javascript debugging console google-chrome-devtools

【解决方案1】：

听起来您要么隐藏了 JavaScript 日志，要么指定只想查看错误或警告。打开 Chrome 的开发者工具并转到控制台选项卡。在底部，您要确保选中 JavaScript，并确保您选择了“All”、“Logs”或“Debug”。

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

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

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

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

编辑：

问题已编辑。给出的新代码抛出两个错误：

未捕获的 ReferenceError：未定义 fitHeight 未捕获的类型错误：无法读取 null 的属性“addEventListener”

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

【讨论】：

我是这么想的，但我已经检查并看到了所有内容。
@egr103 请查看我修改后的答案。 :)
它已经在 .ready() 中。不知道到底发生了什么，我已经在我的问题中完整更新了我的代码。
@egr103 您的完整代码会引发两个错误：Uncaught ReferenceError: fitHeight is not defined 和 Uncaught TypeError: Cannot read property 'addEventListener' of null。
这些错误是指问题中未使用此代码加载的文件，并且在存在时可以正常工作。日志中看不到任何错误。如果我在滚动功能之前和其他不相关的代码之后放置一条日志消息，则会出现该消息，但滚动功能本身不会出现任何消息

【解决方案2】：

在我的例子中，所有控制台消息都没有显示，因为我在“过滤器”文本框中留下了一个字符串。

点击X去掉过滤器，如图：

【讨论】：

这个。幸运或不幸的是，如果您在某个选项卡的开发者控制台上设置了过滤器，该过滤器将在连续的选项卡及其控制台中继续有效。
捂脸！几天前，我在过滤器框中输入了一些内容。今天它杀死了1小时，直到我看到这个答案。谢谢。
谢谢，这以意想不到的方式解决了我的问题。

【解决方案3】：

我觉得这有点愚蠢，但让这对每个人来说都是一个教训......确保您选择正确的选择器！

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

$(window).scroll(function() {

到这里：

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

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

【讨论】：

【解决方案4】：

点击恢复按钮。 console.log 将开始工作。

【讨论】：

它起作用了...但是...为什么？？？显然有些不正常。

【解决方案5】：

在我的例子中，我正在开发一个 Polymer WebComponent，它使用<link rel="import"> 包含在主 HTML 文档中。事实证明，由于某种原因，WebComponent HTML 文件被缓存了，尽管我在缓存版本之后更改了它。

为了解决这个问题，我打开了开发者控制台（在 Chrome 中），右键单击 URL 栏旁边的重新加载箭头并选择“清空缓存和硬重新加载” - 问题解决了。

【讨论】：

我希望我能多次投票赞成这个。救了我，谢谢！ :-)

【解决方案6】：

这是因为我之前在框列表中关闭了“日志”。

【讨论】：

【解决方案7】：

2021解决方案

打开开发者工具
导航到“控制台”
很可能没有勾选“详细”，因此请激活它

【讨论】：

【解决方案8】：

您只需要选择正确的选项来显示来自控制台选项卡下左侧提供的选项的日志消息。您可以参考屏幕截图。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

某处 console.log 已在某处的 js 文件中被覆盖（我无法找到）。

但我可以通过将console.log 放在控制台中进行测试，但我只得到一个空函数：f{}

我将此添加到我自己的 js 文件的顶部以更正它（绝对是 hack，但对我有用）：

var console = window.console;

【讨论】：

【解决方案11】：

考虑一个更务实的方法来解决“正确地做”的问题。

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？

【讨论】：

哇，您刚刚添加了更多代码示例...这个答案可能无效。
谢谢。好吧，这行：console.log("about to bind scroll fx");已输出，但未输出其他日志消息。这是什么意思？
这可能表明你没有滚动或者它没有触发滚动功能。你有其他 javascript 错误吗？

【解决方案12】：

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

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

代替：

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

使用

type="text.javascript"

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

【讨论】：

请改正

【解决方案13】：

在我的情况下，它是由 console.groupCollapsed() 引起的。

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

维护不熟悉的代码有时很可怕...

它甚至折叠了异常消息，没有它让我把那些console.logs放在第一位^_^

【讨论】：

【解决方案14】：

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

使用引号，如 (` `)

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

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

【讨论】：