📄 index_en.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../../styles/tutorial.css" rel="stylesheet" type="text/css">
<title>MyEclipse AJAX Debugging Tutorial</title>
</head>
<body>
<table id="root">
<tbody>
<tr>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<img style="border: 0px solid ;" alt="MyEclipse Logo"
src="../../images/logo.gif" hspace="0" vspace="0">
</td>
<td id="title" style="vertical-align: top;" width="100%">
<h1>MyEclipse AJAX Debugging Tutorial</h1><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<h1>
Table of Contents
</h1>
<ol>
<li>
<a href="#Introduction" title="Introduction">Introduction </a>
</li>
<li>
<a href="#Suggested%20Audience" title="Suggested Audience">Suggested
Audience</a>
</li>
<li>
<a href="#System%20Requirements" title="System Requirements">
System Requirements</a>
</li>
<li>
<a href="#Content" title="AJAX Debugging">AJAX Debugging</a>
</li>
<li>
<a href="#Conclusion" title="Conclusion">Conclusion </a>
</li>
<li>
<a href="#FAQ" title="FAQ">FAQ</a>
</li>
<li>
<a href="#Resources" title="Resources">Resources </a>
</li>
<li>
<a href="#Feedback" title="Feedback"> Feedback</a>
<br>
</li>
</ol>
</td>
</tr>
<tr>
<td valign="top">
<h1>
1.
<a name="Introduction">Introduction</a>
</h1>
<p>
Welcome to the AJAX Debugging tutorial for MyEclipse. In this
tutorial we are going to show you how the AJAX debugging
functionality in MyEclipse works by walking you through a remote
debugging example. Hopefully, this will give you enough of an
introduction so you can start debugging your own AJAX code or
continue learning by debugging someone else's.
</p>
</td>
</tr>
<tr>
<td valign="top" >
<h1>
2.
<a name="Suggested Audience">Suggested Audience</a>
</h1>
<p>
This tutorial is intended for developers who are somewhat
familiar with MyEclipse or Eclipse so you recognize navigation
within the IDE, and understand some of the more common views like
the debugger. It is also helpful if you have done some
JavaScript programming in the past, or have a basic understanding
of it, so the method calls and arguments make sense when you see
them and inspect their values.
</p>
<p>
If you are just getting started in programming in general, you
are certainly welcome to quickly get an overview of what
MyEclipse is capable of when performing with AJAX development,
but some of the mechanisms mentioned below, like breakpoints,
debuggers and variable inspection, may seem a bit foreign at
first.
To help get introduced to JavaScript and AJAX please have a look at our introductory links in our <a href="#Resources" title="Resources">Resources</a> section. To get a better feel for MyEclipse and learning more about it, please check out our product <a href="http://www.myeclipseide.com/ContentExpress-display-ceid-67.html" title="MyEclipse Documentation">Documentation</a> for more material.<br>
</p>
</td>
</tr>
<tr>
<td valign="top">
<h1>
3.
<a name="System Requirements">System Requirements</a>
</h1>
<p>
This tutorial was created with MyEclipse 5.1. If you are using a
another version of MyEclipse, most of these screens and
instructions should still be very similar.
<br>
</p>
<p>
If you are using a newer version of MyEclipse and notice portions
of this tutorial looking different than the screens you are
seeing, please
<a href="#Feedback">let us know</a> and we will make sure to
resolve any inconsistencies.
<br>
</p>
</td>
</tr>
<tr>
<td valign="top">
<h1>
4.
<a name="Content">AJAX Debugging</a>
</h1>
<p>
In this tutorial we are going to connect to the
community-moderated developer site
<strong>dzone.com</strong>. For those of you that are not familiar
with Dzone (or Digg.com), the way the site works is that users
submit stories and everyone else votes on the stories either
adding 1 or subtracting 1 from the vote total. At any time, the
number of votes a story has is used to determine how "important"
that story is and determines whether or not the story is shown on
the front page of the site.
</p>
<p>
The interesting part about this site for this tutorial is that
the developers of Dzone use AJAX calls and the DWR AJAX framework
to handle the voting. In this tutorial we are going to debug the
method call that increases a story's vote count to see how that
particular AJAX call works.
</p>
<p>
For the purpose of this introductory tutorial, we will not get
into all the complexities of JavaScript debugging. Rather,
we intend to show a simple example with enough information to
enable you to start debugging your own projects. If you have any
questions about the tools while you are working, please post them
to our
<a
href="http://www.myeclipseide.com/PNphpBB2+file-viewforum-f-38.html"
title="AJAX support forums">AJAX support forums</a>.
</p>
<h2>
Step 1
</h2>
<p>
The easiest way to start debugging AJAX calls is to simply
connect the MyEclipse AJAX Web Browser to the site you want to
debug. We will start our debugging session by opening the
<strong>AJAX Web Browser</strong>. This is done by selecting the
AJAX Web Browser button in the MyEclipse toolbar and clicking it as
shown below (NOTE: Click "Play" to see a demonstration):
<br>
</p>
<table class="screencast">
<tbody>
<tr>
<td class="screencast">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
id="Captivate1" height="600" width="800">
<param name="movie"
value="screencasts/launch_web20_browser.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="loop" value="0">
<embed src="screencasts/launch_web20_browser.swf" loop="0"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" menu="false"
height="600" width="800">
</object>
</td>
</tr>
<tr>
<td>
<font class="figure">Figure 1. Click the AJAX Web
Browser button in the toolbar to get started</font>
<br>
</td>
</tr>
</tbody>
</table>
<p>
After clicking the AJAX Web Browser toolbar button, the browser
window will open. You may be confused about all the views in this
window but the important thing to note is that until you start
debugging the only two views that are going to be important are
the
<strong>MyEclipse AJAX Web Browser</strong> view and the
<strong>DOM Inspector</strong> view.
<br>
</p>
<p>
The browser view is fairly straight forward; it's simply an
instrumented web browser built for debugging. The
<strong>DOM Inspector</strong> view is an outline of the DOM
(Document Object Model) of the web page you are currently
viewing. It shows you, the layout of the page, based on the tag
structure. If you haven't done AJAX development before then this
may not seem that helpful. However, as you start to write
JavaScript to hide or show portions of a page in response to a
user's interaction with it, you can start to see why being aware
of the page's DOM will be important.
</p>
<h2>
Step 2
<br>
</h2>
<p>
Next, we'll load the Dzone website into the browser and start our
debugging session. The first part is simply typing in the URL and
hitting enter in the browser view. After the page loads, we
can start the debugging session simply by clicking the Instant-On
debugging button in the toolbar as shown below (NOTE: Click
"Play" to see a demonstration):
</p>
<table class="screencast">
<tbody>
<tr>
<td class="screencast">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
id="Captivate1" height="600" width="800">
<param name="movie"
value="screencasts/start_debugging_session.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="loop" value="0">
<embed src="screencasts/start_debugging_session.swf" loop="0"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" menu="false"
height="600" width="800">
</object>
</td>
</tr>
<tr>
<td>
<font class="figure">Figure 2. Navigate to the Dzone
website and then start the debugging session</font>
<br>
</td>
</tr>
</tbody>
</table>
<h2>
Step 3
<br>
</h2>
<p>
After the debugging session has started, what we want to do now
is get used to the interface a little bit and see a quick
description of what all the different views do (now that they are
all loaded up with information).
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -