web開發中如何調試ajax（圖解全過程）

在web開發過程當中，通常都會用junit的TestCase ，TestSuite對java類進行調試。但，不多有人會利用其它測試工具對html或css，js進行調試。再說，很難找到一款比較具全，操做簡易的工具。我的認爲aptana是一件比較好使的工具。同時也但願看到此篇幅的你。能暢談如下本身在開發及測試環節中的看法。同時也給須要幫助的人指明方向。下面於實例的形式跟你們分享一下成果吧。
1.導入欲調試的web應用或目錄（見圖1，圖2）

 

2。啓動應用服務器（這裏使用tomcat容器。見圖3）

3。選擇欲調試的頁面（這裏選擇index。html。見圖4）

5。在彈出的調試信息窗口中，設置web Browser爲：%firefox_home%\firefox.exe;
   Server選項選擇Use external Web server; Base URL填入[url]http://localhost:8080[/url] （見圖5）

6。彈出咱們欲調試的頁面（見圖6）

7。設置斷點（這裏我將對工程中的hello1。html頁面進行調試。見圖7）

8。進入hello1。html頁面：[url]http://localhost:8080/chap1and2/hello1.html[/url] 。輸入信息並提交。（見圖8）

9。在調試的變量窗體中name的值爲444.(見圖9).接着進行單步跳入.一步一步的進行調試.並查看相關的狀態或變量,對象信息的變化(見圖10,圖11,圖12,圖13,圖14)

圖10至 圖14請看附件。
10.結果(見圖15)

 

下載:
Aptana(IDE) : [url]http://www.aptana.com/download_all.php[/url]
Firefox瀏覽器 : [url]http://www.xdowns.com/tag/firefox.html[/url]
firefox 的調試插件 ：[url]https://addons.mozilla.org/en-US/firefox/addon/216[/url]
安裝firefox插件：將firefox瀏覽器啓動。選擇菜單：文件=〉打開文件。選擇javascript_debugger-0.9.87-fx+fl+mz+tb.xpi，從新啓動firefox瀏覽器便可（見圖16）。