2017-03-01 80 views
0

我正在与https://github.com/sameer-shelavale/blitz-gmap-editor;文件test5.html有让您留下一个标记,当你点击它,你就会得到一个表格来编辑它的属性:在第三方库中使用异步函数调试JavaScript?

blitz-gmaps

我已通过添加一些额外的按钮,与添加标记开始预先填充的数据。然后,我点击它们以便显示表格,我在表格中编辑任何内容,然后按取消。大约一半在此之后第二个一秒,我得到了浏览器控制台:

TypeError: a.url.substr is not a function util.js:202:114 

我很想摆脱这种错误的(请注意,在原来test5.html不会发生)。

问题是 - 首先我不知道这个功能是什么或做什么;我发现Do we have a Uncompressed javascript Library for Google Maps API V3

没有未压缩的库。所有API方法都根据发布的文档进行访问,因此不需要是未压缩的版本。

是的,没错 - 绝对没有必要,当然!当然,谷歌并不在乎他们的财产 - 只是没有人会需要知道发生了什么事情,因为它不可能进入一个不好的问题:)

无论如何,堆栈跟踪火狐吐出是:

rz.prototype.load http://maps.googleapis.com/maps-api-v3/api/js/26/17/util.js:202:114 
qz.prototype.load http://maps.googleapis.com/maps-api-v3/api/js/26/17/util.js:201:427 
_.yz.prototype.load http://maps.googleapis.com/maps-api-v3/api/js/26/17/util.js:204:224 
dz.prototype.load http://maps.googleapis.com/maps-api-v3/api/js/26/17/util.js:200:287 
cz.prototype.load http://maps.googleapis.com/maps-api-v3/api/js/26/17/util.js:199:133 
SS http://maps.googleapis.com/maps-api-v3/api/js/26/17/marker.js:5:217 
WS http://maps.googleapis.com/maps-api-v3/api/js/26/17/marker.js:7:482 
XS http://maps.googleapis.com/maps-api-v3/api/js/26/17/marker.js:7:116 
VS.prototype.Y http://maps.googleapis.com/maps-api-v3/api/js/26/17/marker.js:35:646 
_.zf.prototype.L/a.F< http://maps.googleapis.com/maps/api/js:112:4221 

...,铬输出这样的:

util.js:202 Uncaught TypeError: a.url.substr is not a function 
rz.load @ util.js:202 
cz.load @ util.js:199 
oz @ util.js:6 
lz @ util.js:6 
kz.load @ util.js:201 
qz.load @ util.js:201 
_.yz.load @ util.js:204 
dz.load @ util.js:200 
cz.load @ util.js:199 
SS @ marker.js:5 
WS @ marker.js:7 
XS @ marker.js:7 
VS.Y @ marker.js:35 
(anonymous function) @ js?v=3.26&libraries=drawing,geometry:112 

所以,显然rz.prototype.load发生错误,并正在由_.zf.prototype.L/a.F<是启动;从Firefox的信息(...地图/ API/JS:112:4221),我这个提取为_.zf.prototype...

... 
_.zf.prototype.L=function(){ 
    var a=this; 
    a.F||(
     a.F=window.setTimeout(
      function(){ 
      a.F=void 0; // <=== column:4221 here at ; 
      a.Y() 
      } 
      ,a.ql) 
     ) 
}; 
... 

这对于rz.prototype(其中包含util.js:202:114):

... 
rz.prototype.load=function(a,b){ 
    var c=this.la; 
    this.b&&"data:"!=a.url.substr(0,5)||(a=new _.ez(a.url)); // column 114 is right before a.url.substr.. 
    return c.load(a,function(d){ 
    !d&&_.m(a.crossOrigin)?c.load(new _.ez(a.url),b):b(d) 
    }) 
}; 
... 

所以,呼叫者_.zf.prototype.L函数会执行setTimeout,最终会调用rz.prototype,这就解释了为什么只有在按“取消”后一段时间过期后才会显示此错误。

但我的问题是 - 在代码的其余部分,它可能会称这_.zf.prototype.L函数是什么?我如何找到?如果_.zf.prototype.L本身是通过setTimeout调用的,它是否会“记住”始发的调用者/调用堆栈,并且可以检索它以进行调试?或者,是否可以设置一个断点,该断点只要名称为_.zf.prototype.L的函数即将被调用就会中断?

我试图调查How to view JavaScript function calls as they occur(它没有关于如何做函数调用跟踪的信息);然后找到https://javascriptweblog.wordpress.com/2010/06/01/a-tracer-utility-in-2kb/ - 使用此库,我可以这样做:

tracer.traceAll(BlitzMap,true); 
tracer.traceAll(BlitzMap.getMapObj(),true); 

....但是它跟踪了对象函数OK,地图obj有点奇怪(在页面加载时控制台中有3000+ tracing traceOff消息),但它似乎也跟踪了一些部分 - 但是,当我执行测试用例时,按下“取消”所有我得到的是我的代码跟踪(不会崩溃),然后第二个过去了,我得到上面的错误/堆栈跟踪没有任何其他跟踪。

那么,如何调试这样的问题呢?

回答

1

好吧,我设法找到了解决这个问题的地方 - 即使近距离投票声称问题“太宽泛”。

首先,如果从API的 “前置” 的javascript:

<script src="http://maps.googleapis.com/maps/api/js?v=3.26&libraries=drawing,geometry" type="text/javascript"></script> 

...然后将其下载到文件:

wget "http://maps.googleapis.com/maps/api/js?v=3.26&libraries=drawing,geometry" -O gmapsapi.js 

...并使用此文件在你的HTML而不是在线的:

<script src="gmapsapi.js" type="text/javascript"></script> 

然后打开你的HTML文件在Firefox中,让它运行,然后在Firefox中执行:File/Save Pa ge as /网页,完成。

这将在保存的页面文件夹中本地下载其他脚本,如util.js等。

现在,打开HTML文件的保存(作为网页,完整)版本 - 它也应该将在线链接替换为下载的本地脚本。

然后,打开gmapsapi.js从保存的文件夹,并引入换行到_.zf.prototype.L功能:

_.zf.prototype.L=function(){ 
    var a=this; 
    a.F||(a.F=window.setTimeout(function(){a.F=void 0;a.Y()},a.ql)) 
}; 

...到以后能够设置一个断点上线。

现在,在Firefox中打开保存的HTML文件,打开Firebug,在脚本标签中找到gmapsapi.js,并在var a=this;行上设置断点。

现在运行的东西 - 在我的情况下,做所有事情,包括按下取消 - 和JS引擎将打破;那么您可以在Firebug的控制台做console.trace(),并获得这种痕迹的(后发生错误):

_.zf.prototype.L()       gmapsapi.js (line 114) 
VS.prototype.changed(a="modelIcon")   marker.js (line 35) 
Bb(a=Object { type="object"}, b="modelIcon") gmapsapi.js (line 37) 
Bb(a=Object { type="object"}, b="icon")  gmapsapi.js (line 37) 
_.k.set(a="icon", b=Object { type="object"}) gmapsapi.js (line 96) 
_.vc/<(c=Object { type="object"})    gmapsapi.js (line 47) 
_.k.setValues()        gmapsapi.js (line 97) 
a = Object { type="object"} 
BlitzMap</this.updateOverlay()    blitz.js (line 545) 
BlitzMap</this.closeInfoWindow()    blitz.js (line 514) 
onclick()input[3] onclick (line 1) 
event = Object { type="object"} 

...果然 - 这指出了其中的错误是:即,我砍死blitz.js,最后写了一个空字符串""作为标记的图标,最终导致了错误。

这个堆栈跟踪揭示了一件事 - 那就是为什么这个错误只发生在我第一次按取消,而不是后来的时间;好的,答案是,错误的代码只在VS.prototype.changed(a="modelIcon")时运行,所以第二次,空字符串的设置不再是“变化”了,所以没有错误。