getBoundingClientRect（）导致javascript崩溃？

因此，我尝试使用phantom.js中的以下代码从页面上刮下验证码图像

if(page.content.search('captcha') != -1){
    console.log('taking a picture')
    var clipRect = document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
    console.log('got bounds')
    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('capture.png');
  }

正如你所看到的，它非常直截了当。获取元素，将剪辑到元素的边界，然后拍摄渲染的屏幕截图

现在当我执行

document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect()

在谷歌chrome控制台中，它返回这个

ClientRect {top: 430, right: 621, bottom: 500, left: 421, width: 200…}

然而，在我的javascript代码中，它似乎产生了某种我无法捕捉的错误。当我删除后缀“.getBoundingClientRect（）”时，代码开始工作。（显然，我必须为clipRect维度添加虚拟值）

我不太明白它是如何崩溃的，甚至不知道如何看到崩溃的stacktrace/错误消息

任何帮助都将是惊人的

---

谢谢

所有与目标页面的DOM相关的javascript都必须在page.evaluate（）函数中执行

var clipRect = page.evaluate(function(){
    return document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
});

---

有没有可能把plunker/jsFiddle/snippet放在一起？这是一个有趣的问题，你怎么能摆弄幻影？你说的“某种错误”是什么意思？您可以在浏览器控制台中看到任何错误（按F12）。上面写着什么？@Xufox:这里没有F12/浏览器控制台……你用的是什么版本的phantomjs？