Debugging RJS

peryt

浏览: 54422 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ruby and rails

Ajax JavaScript Firebug 浏览器 Firefox

RJS使得我们可以很容易的实现AJAX效果，但是bug还是会发生。
在这一节，我们展示如何在客户端和服务器端调试RJS错误。

上一节中，我们演示了让用户可以通过AJAX添加reviews，但是这个功能现在坏掉了，当用户点添加评论的按钮的时候，什么也没有发生，也就是说AJAX出错了，但是错在哪里呢？看不出来，没有任何线索，AJAX的错误比普通的错误更难以找到问题根源。是我们的请求根本没有送到服务器端，还是服务器端处理的时候还是返回的时候出错了？这种bug很难追踪，因为浏览器并不提示任何错误信息，所以我们不知道从哪一行代码开始查找错误。

跟踪调用

首先，我们应该去看看页面的源代码，注意<head>部分，看看是否引用了需要的javascript文件。如果这部分没问题，接下来我们就要去看看form tag那一部分了。看看form提交的时候，触发的AJAX请求是否正确。如果判断是否正确呢，例如如下的页面源代码：

<form action="/products/1/reviews" class="new_review" id="new_review" method="post" 
onsubmit="new Ajax.Request('/products/1/reviews', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">

我们要检查一下AJAX请求是否触发了，还有网址对不对，经过检查，onsubmit属性的创建了一个AJAX请求，并且网址也是对的。

既然浏览器的网页的源代码没有错误，那么错误就出在服务器端了，首先我们要去看看development.log，看看服务器端是否收到了AJAX请求。如何去看呢，我们运行

tail development.log

命令，然后重新提交一次AJAX请求，我们在log里面看到如下内容：

Processing ReviewsController#create (for 127.0.0.1 at 2009-03-19 21:17:50) [POST]
  Parameters: {"commit"=>"Add comment", "review"=>{"name"=>"Bob", "content"=>"Wow!"}, "product_id"=>"1", "authenticity_token"=>"4cncFdRcYuinYVNWj3uGZTPuvx4VXM7gBCRCMOLt4fw=", "_"=>""}
  Review Create (0.4ms)   INSERT INTO "reviews" ("name", "updated_at", "product_id", "content", "created_at") VALUES('Bob', '2009-03-19 21:17:50', 1, 'Wow!', '2009-03-19 21:17:50')
Rendering reviews/create
Rendered reviews/_review (1.3ms)
  Product Load (0.3ms)   SELECT * FROM "products" WHERE ("products"."id" = 1) 
  SQL (0.2ms)   SELECT count(*) AS count_all FROM "reviews" WHERE ("reviews".product_id = 1) 


ActionView::TemplateError (undefined method `pluralized' for #<ActionView::Base:0x221b66c>) on line #2 of app/views/reviews/create.rjs:
1: page.insert_html :bottom, :reviews, :partial => 'review', :object => @review
2: page.replace_html :reviews_count, pluralized(@review.product.reviews.size, 'Review')
3: page[:new_review].reset
4: page.replace_html :notice, flash[:notice]
5: flash.discard

仔细分析这些内容，我们看到正确的action create被调用了，review也的确被添加到了数据库中，然后create.rjs文件被render，并发生了错误，错误原因是pluralized没有定义，再去看看我们create.rjs代码，发现我们用错了方法，应该是pluralize方法。

这是一个很傻瓜式的bug，但是他说揭示的RJS调试流程却是很经典的，每次AJAX问题都可以按照这个流程去调试。（当然其他错误也可以去查看页面源代码，和服务器端的development.log(用tail方法显示该文件的结尾，就不用看到很多没用的内容了。)）

2. 客户端（浏览器端）的错误
有时候服务器端是正确的，但是AJAX还是失败了，也就是问题出在客户端解析服务器端返回的javascript上。这就需要一个好的javascript debugger。 Firebug跟firefox的合作无疑是一个很好的javascript调试器。firebug可以从firebug的网站安装，跟安全firefox的其他扩展没有区别。一旦安装成功，就可以使用firebug调试html, css, javascript, 还有AJAX请求。

只要点击浏览器状态条上的bug图标，就可以激活firebug了。默认的，对当前网站firebug是禁用的，要启用它，我们需要check Console菜单下面的三个checkbox。一旦启用了，我们就可以添加一条新的评论，然后来看看firebox的console输出了什么。

控制台显示，AJAX请求的确提交了，而且返回的“200 OK 118ms”，是成功的。如果失败的话，最上面一行会是红色，而且会返回的是“500 status”。下面有三个tab，分布是header，发送的请求的header，
body，发送的请求的body content，我们可以看到发送的form的内容。
response，里面是我们的RJS模板生成的javascript代码。

浏览器将会执行这些javascript代码来更新当前页面。能够看到这写返回的javascript给我们的调试带来了极大的便利，以前，我们只能通过alert来看我们想看到的东西.

但是alert还是有他自己的用处的，
如果服务器返回的javascript抛出一个错误，try...catch可以捕捉这个错误，然后alert一个消息框出来。他会将当前的错误提示，和产生错误的javascript代码段都alert出来。

希望本节的内容能帮你应付大部分的AJAX debug。

分享到：

play with paperclip plugin, 为model添加 ... | AJAX with RJS again

2009-09-12 22:23
浏览 774
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Debugging RJS

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Debugging RJS

评论

发表评论

相关推荐

12.3.3 scaling issue of the status feed

12.3 the status feed

12.2 a working follow button with Ajax

12.2 a web interface for following and followers.

12. following user, 12.1 relationship model

11.3 manipulating microposts.

11.2 show microposts.

11.1 user micropost -- a micropost model.

10.4 destroying users.

10.3 showing users list

10.2 protect pages.

10.1 updating users.

9.4 sign out

9.3 sign in success.

9.1 about flash.now[:error] vs flash[:error]

9.2 sign in failure

9.1 sessions

what test framework should you use?

what test framework should you use?

8.4 rspec integration tests

最近访客更多访客>>