网络工具您现在的位置是:首页 > 工具箱 > 网络工具

谷歌浏览器Chrome console.log 使用注意事项

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-08-27 18:03:37网络工具人已围观关键字: Chrome  谷歌浏览器  

今天在使用谷歌浏览器Chrome调试的时候遇到了一个有意思的问题,断点监视时的变量值与console.log输出的不一样。

谷歌浏览器Chrome console.log 使用注意事项bau编程技术_踩坑日志_进阶指南_无知人生


bau编程技术_踩坑日志_进阶指南_无知人生

今天在使用谷歌浏览器Chrome调试的时候遇到了一个有意思的问题,断点监视时的变量值与console.log输出的不一样。bau编程技术_踩坑日志_进阶指南_无知人生

场景:

网页添加了粘贴事件处理程序:bau编程技术_踩坑日志_进阶指南_无知人生

document.addEventListener('paste', function (e) {
  var items = ((e.clipboardData || window.clipboardData).items) || [];
		    var file = null;

		    if (items && items.length) {
	           for (var i = 0; i < items.length; i++) {
	               if (items[i].type.indexOf('image') !== -1) {
	                   file = items[i].getAsFile();
	                   break;
	               }
	           }
	       }

		    if (!file) {
		        alert('粘贴内容非图片!');
		        return;
		    }

  console.log(e.clipboardData.items);
  console.log(e);
});

可以看到后台的两句 console.log,问题就出在这里了。bau编程技术_踩坑日志_进阶指南_无知人生

image.pngbau编程技术_踩坑日志_进阶指南_无知人生

可以看到,在函数内的时候,打印 e.clipboardData.items length 是 1,而当函数执行完毕,length 就变成了 0,bau编程技术_踩坑日志_进阶指南_无知人生

当函数执行完毕,变量的结构还在,但数据全部丢失了。bau编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()