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

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

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

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

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


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

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

场景:

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

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,问题就出在这里了。lpJ编程技术_踩坑日志_进阶指南 - 无知人生

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

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

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

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

很赞哦! () 有话说 ()

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:198篇
  • 文章评论:27条
  • 文章阅读:2308次
  • 文章点赞:914次
  • 微信公众号:扫描二维码,关注我们
  • 微信公众号-微wx笑