Question

我正在尝试修复前一个堆栈溢出中所述的问题，但我没有得到任何回复，所以无论如何我都想弄清楚...

如何从此代码中查看控制台数据，以便我可以确切地看到正在计算的高度？

window.onscroll = function (event) {
   var offset = window.pageYOffset;
   var wheight = window.innerHeight;
   var html = document.documentElement;
   var docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight,
   html.clientHeight, html.scrollHeight, html.offsetHeight);
   var progress = offset / wheight;

   document.getElementById("SVGID_1_").setAttribute("y1", 93000 + progress * 93000);
}

jsfiddle here：http://jsfiddle.net/11x3cwnr/

Answer 1

键入console.info（some_variable）并在浏览器的控制台中查看。通常输入F12

Answer 2

只需将console.log行添加到您的javascript中，如下所示： http://jsfiddle.net/11x3cwnr/4/

点击F12查看控制台输出（在大多数浏览器中）。

Answer 3

使用console.log语句更新代码，如下所示：

window.onscroll = function (event) {
   var offset = window.pageYOffset;
   var wheight = window.innerHeight;
   var html = document.documentElement;
   var docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight,
   html.clientHeight, html.scrollHeight, html.offsetHeight);
   var progress = offset / wheight;
   // HERE'S THE LOG STATEMENT
   console.log("Progress = " + progress);
   document.getElementById("SVGID_1_").setAttribute("y1", 93000 + progress * 93000);
}

然后使用Chrome或Firefox并右键单击示例中的脸部图像，检查元素，然后选择“控制台”选项卡。或者，至少在Chrome中，只需点击F12即可直接进入控制台。现在，当您滚动面部图像时，您将看到进度的值是什么。

我如何查看此代码的控制台日志？

3 个答案: