javascript Console.log 根本不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19662018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Console.log not working at all
提问by egr103
A bunch of code isn't working and I'm trying to identify where the problem lies but console.log()isn't logging any results in Chrome Dev tools, am I doing it correctly?
一堆代码不起作用，我试图找出问题所在，但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');
} });
});
EDIT FULL CODE ADDED
编辑完整代码添加
$(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
编辑
Some bits of the full code (above) refer to other JS files and code returns no errors when run with these files present. After troubleshooting I see the console message before the scroll function but I do not see the console message within the scroll function.
完整代码的某些部分（以上）引用了其他 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(){
采纳答案by egr103
I feel a bit stupid on this but let this be a lesson to everyone...Make sure you target the right selector!
我觉得这有点愚蠢，但让这成为每个人的一课......确保你瞄准正确的选择器！
Basically the console wasn't logging anything because this particular code snippet was attempting to grab the scrolling area of my window, when in fact my code was setup differently to scroll an entire DIV instead. As soon as I changed:
基本上控制台没有记录任何内容，因为这个特定的代码片段试图抓取我窗口的滚动区域，而实际上我的代码设置不同以滚动整个 DIV。一旦我改变：
$(window).scroll(function() {
to this:
对此：
$('#scroller').scroll(function() {
The console started logging the correct messages.
控制台开始记录正确的消息。
回答by James Donnelly
Sounds like you've either hidden JavaScript logs or specified that you only want to see Errors or Warnings. Open Chrome's Developer Tools and go to the Console tab. At the bottom you want to ensure that JavaScript is ticked and also ensure that you have "All", "Logs" or "Debug" selected.
听起来您要么隐藏了 JavaScript 日志，要么指定您只想查看错误或警告。打开 Chrome 的开发人员工具并转到控制台选项卡。在底部，您要确保勾选 JavaScript，并确保您选择了“全部”、“日志”或“调试”。
In the image above I have JavaScript, Network, Logging, CSS and Other ticked and "All" selected.
在上图中，我勾选了 JavaScript、网络、日志记录、CSS 和其他，并选择了“全部”。
Another potential problem could be that your $(window).scroll()function isn't wrapped within a .ready()function (as documented here):
另一个潜在问题可能是您的$(window).scroll()函数没有包含在.ready()函数中（如此处所述）：
$(document).ready(function() {
$(window).scroll(function() {
...
});
});
When pasting your code into JSFiddle and giving some dummy content, your code works perfectly fine: JSFiddle demo.
将您的代码粘贴到 JSFiddle 并提供一些虚拟内容时，您的代码运行良好：JSFiddle demo。
Edit:
编辑：
The question was edited. The new code given throws two errors:
问题已编辑。给出的新代码抛出两个错误：
Uncaught ReferenceError: fitHeight is not defined Uncaught TypeError: Cannot read property 'addEventListener' of null
未捕获的 ReferenceError：fitHeight 未定义未捕获的 TypeError：无法读取 null 的属性“addEventListener”
Because of this, the code stops execution prior to reaching any console.logcall.
因此，代码在到达任何console.log调用之前停止执行。
回答by AyexeM
In my case, all console messages were not showing because I had left a string in the "filter" textbox.
就我而言，所有控制台消息都没有显示，因为我在“过滤器”文本框中留下了一个字符串。
Remove the filter it by clicking the X as shown:
通过单击 X 删除过滤器，如图所示：
回答by Magnus W
In my case I was developing a Polymer WebComponent, which is included using <link rel="import">into the main HTML document. Turns out that the WebComponent HTML file was being cached for some reason, even though I had changed it since the cached version.
就我而言，我正在开发一个 Polymer WebComponent，它包含<link rel="import">在主 HTML 文档中。结果证明 WebComponent HTML 文件由于某种原因被缓存，即使我从缓存版本开始更改了它。
To solve it I opened the Developer Console (in Chrome), right clicked on the reload arrow next to the URL bar and selected "Empty cache and hard reload" - problem solved.
为了解决这个问题，我打开了开发者控制台（在 Chrome 中），右键单击 URL 栏旁边的重新加载箭头并选择“清空缓存和硬重新加载” - 问题解决了。
回答by shanabus
Consider a more pragmatic approach to the question of "doing it correctly".
考虑一种更务实的方法来解决“正确做事”的问题。
console.log("about to bind scroll fx");
$(window).scroll(function() {
console.log("scroll bound, loop through div's");
$('div').each(function(){
If both of those logs output correctly, then its likely the problem exists in your var declaration. To debug that, consider breaking it out into several lines:
如果这两个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());
By doing this, at least during debugging, you may find that the var idis undefined, causing errors throughout the rest of the code. Is it possible some of your divtags do not have id's?
通过这样做，至少在调试期间，您可能会发现 varid未定义，从而导致整个代码的其余部分出错。是否有可能您的某些div标签没有 ID？
回答by Sandeep Singh
Just you need to select right option to show the log messages from the option provided in left side under the console tab. You can refer the screen shot.
只是您需要选择正确的选项以显示控制台选项卡下左侧提供的选项中的日志消息。您可以参考屏幕截图。
回答by Vasilis Iliadis
As a complete new at javascript, I just had the same problem on my side here. The mistake I did, was that I used:
作为 JavaScript 的新手，我在这里遇到了同样的问题。我犯的错误是我使用了：
<script type="text.javascript">
console.log("bla bla bla");
</script>
instead of:
代替：
<script>
console.log("bla bla bla");
</script>
using the
使用
type="text.javascript"
类型 =“text.javascript”
had the result of not producing the log in the console.
结果没有在控制台中生成日志。
回答by James Barrett
You may have used the filter function in the console which will hide anything that doesn't match your query. Remove the query and your messages will display.
您可能在控制台中使用了过滤器功能，它会隐藏与您的查询不匹配的任何内容。删除查询，您的消息将显示。
回答by Nafi Shahriyar
Now in modern browsers, console.log()can be used by pressing F12key. The picture will be helpful to understand the concept clearly.
现在在现代浏览器中，console.log()可以通过按F12键使用。图片将有助于清楚地理解这个概念。
