diff options
Diffstat (limited to 'files/zh-cn/venkman_introduction/index.html')
| -rw-r--r-- | files/zh-cn/venkman_introduction/index.html | 351 |
1 files changed, 0 insertions, 351 deletions
diff --git a/files/zh-cn/venkman_introduction/index.html b/files/zh-cn/venkman_introduction/index.html deleted file mode 100644 index 81e85ea831..0000000000 --- a/files/zh-cn/venkman_introduction/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Venkman入门 -slug: Venkman_Introduction -tags: - - Tools - - Venkman -translation_of: Archive/Mozilla/Venkman/Introduction ---- -<p>一个强大的新工具现在提供给使用基于Mozilla的系列浏览器（包括Firefox，Mozilla套件和Netscape 7.x）的Web开发人员。JavaScript调试器，又名“Venkman”，已经成为Mozilla浏览器、Web社区和脚本开发人员的一部分很长时间了。这篇文档提供一个JavaScript调试器的概览和一些在Web页面脚本开发中使用它的实际例子。这篇“入门”是一系列关于Venkman文档的第一篇。假设你已经开始使用Venkman，这里所提到的特性、程序和要点会让你作为一个Web开发人员或脚本调试者更加自信。</p> - -<p>Venkman是一个同时拥有控制台界面和图形界面的调试器。你可以根据自己的喜好或特长，从控制台界面或图形界面使用“断点控制”，“调用栈”和“变量/对象监视器”。交互式的命令行界面允许你执行任何可用的JavaScript代码。Venkman的键盘快捷键可用于可视化的调试环境，gdb用户对于Venkman的<code>/break</code>，<code>/step</code>，<code>/next</code>，<code>/finish</code>，<code>/frame</code>，<code>/where</code>命令一定非常熟悉。</p> - -<p>在Windows平台上上，JavaScript调试器的界面外观和Visual Interdev以及其它大型的web开发工具是很相似的。在其它操作系统平台上，如Mac OS和Unix，它提供了一个在易用性、性能居于同等水平上的独特的开发调试环境。</p> - -<h2 id=".E5.BC.80.E5.A7.8B.E4.BD.BF.E7.94.A8.E8.B0.83.E8.AF.95.E5.99.A8" name=".E5.BC.80.E5.A7.8B.E4.BD.BF.E7.94.A8.E8.B0.83.E8.AF.95.E5.99.A8">开始使用调试器</h2> - -<p>JavaScript调试器会被自动的预装在Mozilla 1.x里，但是在Firefox和其它基于Gecko的产品中（如Thunderbird和Netscape 7.x）中必须被单独安装。幸运的是，XPInstall技术使你只需要点击一个超级链接就可以在Firefox安装一个新的应用模块。</p> - -<p>如果你还没有拥有Venkman，并且希望升级使用它，你可以通过访问<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/216">Firefox Add-ons</a>来获得最新版本。安装过程只需要两个步骤：首先，从你希望安装Venkman的浏览器中，访问<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/216">Firefox Add-ons</a> 页面，点击“install”链接获得最新版本。下载完成后，重新启动你的浏览器(一些Windows用户可能还需要重新启动计算机)。 You can then access the debugger via a new, dynamically created menuitem in the Tools menu of that browser, or else restart the browser with a special debugger option.</p> - -<p>如果你想查看你使用的Venkman的版本号，在交互视图区域中输入<code>/version</code>。 如果想了解更多关于版本和升级的信息，请访问<a class="external" href="http://www.hacksrus.com/~ginda/venkman/">Venkman Development Page</a>.</p> - -<p>下面有两种启动调试器的方法：</p> - -<ul> - <li>在Firefox浏览器中，你可以通过选择“工具”菜单中的“JavaScript Debugger”来启动调试器(在Mozilla 1.x和Netscape浏览器中，“Tools”->“Web Development”)。</li> - <li>你可以使用带有参数<code>-venkman</code>的命令启动浏览器。</li> -</ul> - -<p>(当Venkman启动显示"Recorded local startup X, global YYY."时，请注意这些有用的信息。This data comes from a counter built in to the application. For more information about this counter and the data, see <a class="external" href="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html#2.2">Item 2.2</a> in the Venkman FAQ.)</p> - -<p><img align="none" alt="Figure 1. The JavaScript Debugger."></p> - -<p>当你第一次启动Venkman，the basic views are arranged as in the screenshot above—though you can customize the layout and presence of the different views however you want, as we describe in the {{ Anch("View Customization") }} section below. The scripts that have been loaded by the JavaScript engine appear in the Loaded Scripts window (for more information about how scripts are loaded and accessed in Venkman, see "{{ Anch("Loading Scripts into the Debugger") }}").</p> - -<p><img align="right" alt="Figure 2. View Controls"></p> - -<p>The menubar, toolbar, and all of the views can be collapsed or hidden, giving you a lot of control over the debugging environment. The {{ Anch("Source Code View") }} is empty until you select a script, and {{ Anch("The Interactive Session View") }} starts up with basic startup information.</p> - -<p>每一个视图面板都有一个“标签”，一个“浮动按钮”（使面板脱离调试器主窗口，拥有自己单独的窗口）和一个“关闭按钮”。请参看Figure 2。</p> - -<p>The following section describes these views and their use within the interface as a whole.</p> - -<h2 id="Venkman.E7.9A.84.E7.94.A8.E6.88.B7.E7.95.8C.E9.9D.A2" name="Venkman.E7.9A.84.E7.94.A8.E6.88.B7.E7.95.8C.E9.9D.A2">Venkman的用户界面</h2> - -<h3 id=".E5.B7.A5.E5.85.B7.E6.A0.8F" name=".E5.B7.A5.E5.85.B7.E6.A0.8F">工具栏</h3> - -<p><img align="none" alt="Figure 3. The Venkman Toolbar"></p> - -<p>The Toolbar is located at the top of the debugger. The Toolbar contains icons for Stop, Continue, Step Over, Step Into, Step Out, Profile, and Pretty Print commands. These commands should be self explanatory, with the possible exception of Stop, which causes the debugger to stop - <i>when the next line of JavaScript is executed</i> - , and the Profile button, which can be used to measure execution times for your scripts. When you enable profiling by clicking this button, a green checkmark appears next to the button and profile data for every function is collected, and can be saved by choosing <b>Save Profile Data As...</b> from the Profile menu.</p> - -<div class="figure float-right"> -<p><img alt="Image:venkintro-stop-checked.png"><br> - <b>Figure 4.</b><br> - Stop Button<br> - Waiting for<br> - Execution</p> -</div> - -<p>Also note that when you are currently executing JavaScript and click the Stop button, the JavaScript stops immediately. If you are not running JavaScript and click the Stop button, it will display "...", as in the Figure 4, to indicate that the debugger will stop at the next instruction, but doesn't have anywhere to stop yet.</p> - -<p>This quick stop mode reflects a common scenario in JavaScript debugging, which is to inspect and debug scripts while they are running, as on a page where elements are moved around dynamically with DHTML. You can also use commands available in the Debug menu and from the console to stop at errors or at exceptions.</p> - -<p>The Continue button to the right of the Stop button dismisses the Stop mode and specifies that scripts should be executed normally, without pausing as each statement is executed.</p> - -<p>The Pretty Print button toggles Pretty Print mode. While in Pretty Print mode, the contents of the source view will contain the decompiled source text for the selected function. This is the same text you would get from the <code>toSource</code> method of the <code>Function</code> prototype. If the source text you are debugging is poorly formatted, Pretty Print can help make it easier to read by inserting line breaks and whitespace in appropriate places.</p> - -<p>When Pretty Print is enabled you will see a green check mark on the toolbar button, and the menu item will be checked as well.</p> - -<h3 id=".E2.80.9C.E5.B7.B2.E5.8A.A0.E8.BD.BD.E8.84.9A.E6.9C.AC.E2.80.9D.E8.A7.86.E5.9B.BE" name=".E2.80.9C.E5.B7.B2.E5.8A.A0.E8.BD.BD.E8.84.9A.E6.9C.AC.E2.80.9D.E8.A7.86.E5.9B.BE">“已加载脚本”视图</h3> - -<p><img align="none" alt="Figure 5. The Loaded Scripts View. Active files and functions"></p> - -<p>The - <i>Loaded Scripts View</i> - is in the top left portion of the window. When a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. Files are listed in alphabetical order, grouped by file type. File names are displayed after a color coded, single letter icon representing the file extension. Figure 6 shows the table of icon and file types. At the time if this writing, the order and grouping of file names cannot be changed.</p> - -<div class="figure float-right"> -<table class="standard-table"> - <tbody> - <tr class="header"> - <th>Icon</th> - <th>File type</th> - </tr> - <tr> - <td><img alt="J"></td> - <td>.js</td> - </tr> - <tr> - <td><img alt="H"></td> - <td>.html, .htm</td> - </tr> - <tr> - <td><img alt="Z"></td> - <td>.xul</td> - </tr> - <tr> - <td><img alt="X"></td> - <td>.xml</td> - </tr> - <tr> - <td><img alt="?"></td> - <td>All other files</td> - </tr> - <tr> - <td><img alt="."></td> - <td>JavaScript function</td> - </tr> - </tbody> -</table> - -<p><b>Figure 6.</b><br> - Icons in the Script View</p> -</div> - -<p>The "special" function name <code>__toplevel__</code> is displayed for scripts that are not part of an actual function. Clicking on a file name brings you to the top of that file, while clicking on a function name brings you to the start of that function.</p> - -<p>The <b>Line</b> column in this view displays the line number that this function starts on. The column picker for this view (the <img alt="Tree column picker"> box on the top right) can be used to display a <b>Length</b> column. This column displays the size of functions, in lines. Both the Line and Length column are blank for file names.</p> - -<p>If a function has a breakpoint in it, a small red dot will show up in the function icon, as well as the parent's file icon.</p> - -<h3 id=".E2.80.9C.E5.B1.80.E9.83.A8.E5.8F.98.E9.87.8F.E2.80.9D.E8.A7.86.E5.9B.BE" name=".E2.80.9C.E5.B1.80.E9.83.A8.E5.8F.98.E9.87.8F.E2.80.9D.E8.A7.86.E5.9B.BE">“局部变量”视图</h3> - -<p><img align="right" alt="Figure 7. The Local Variables View"></p> - -<p>The - <i>Local Variables view</i> - is on the left portion of the window, at the bottom. When the debugger is stopped, the Local Variables view displays values for the current function. The <code>scope</code> object holds all arguments and local variables, and the <code>this</code> object holds the value of the <code>this</code> keyword.</p> - -<div class="figure float-left"> -<table class="standard-table"> - <tbody> - <tr> - <td><b>e</b></td> - <td>Enumerable property</td> - </tr> - <tr> - <td><b>r</b></td> - <td>Read Only property</td> - </tr> - <tr> - <td><b>p</b></td> - <td>Permanent (cannot be <code>delete</code>d)</td> - </tr> - <tr> - <td><b>A</b></td> - <td>Alias to another property</td> - </tr> - <tr> - <td><b>a</b></td> - <td>Argument to a function</td> - </tr> - <tr> - <td><b>v</b></td> - <td>Declared with <code>var</code></td> - </tr> - </tbody> -</table> - -<p><b>Figure 8. </b> Property flags</p> -</div> - -<p>Properties of both <code>scope</code> and <code>this</code> objects are listed alphabetically, grouped by data type. Figure 9 shows which icons represent which data types.</p> - -<p>Properties which are of the type <code>Object</code> are displayed with the name of their constructor function in curly braces as their value. You can locate the source code of the constructor by selecting "Find Constructor" from the property's context menu. You can find the place where the object was instantiated with the "Find Creator" command. By default, properties of type <code>function</code> are not displayed, in order to conserve space in the view. If you would like to have functions displayed, check the "Include Functions" menu item in the view's context menu. You may need to close and re-open any objects you had open to see the change.</p> - -<p>Properties that show up in a bold grey font are defined on an object from the prototype chain, and not on the actual object you are inspecting. If you would like to inspect the object's prototype and parent chains, check the "Include ECMA Properties" menu item in the view's context menu. If a property shows up in a bold red font, an exception occurred when Venkman tried to read the value. The exception object will appear as the value of the property.</p> - -<div class="figure float-right"> -<table class="standard-table"> - <tbody> - <tr class="header"> - <th>Icon</th> - <th>Data Type</th> - <th>Icon</th> - <th>Data Type</th> - </tr> - <tr> - <td><img alt="X"></td> - <td>Void (undefined) value</td> - <td><img alt="null"></td> - <td>Null value</td> - </tr> - <tr> - <td><img alt="t/f"></td> - <td>Boolean value</td> - <td><img alt="`'"></td> - <td>String value</td> - </tr> - <tr> - <td><img alt="#"></td> - <td>Integer value</td> - <td><img alt="##"></td> - <td>Double value</td> - </tr> - <tr> - <td><img alt="*"></td> - <td>Object value</td> - <td><img alt="f"></td> - <td>Function value</td> - </tr> - </tbody> -</table> - -<p><b>Figure 9.</b> Type Icons</p> -</div> - -<p>The column picker for this view (the <img alt="Tree column picker"> box on the top right) can be used to display <b>Type</b> and <b>Flags</b> columns. The Type column contains a textual description of the type of the object. Flags lists one or more applicable flags for this object. Flags are shown enumerated in Figure 8.</p> - -<p>If an item visible in the Local Variables View is modified via the Interactive Session View the modification will be immediately reflected in the Local Variable View.</p> - -<p>At the time of this writing, the Local Variables View's default sort order and grouping are not adjustable.</p> - -<h3 id=".E2.80.9C.E5.91.BD.E5.90.8D.E6.A0.88.E2.80.9D.E8.A7.86.E5.9B.BE" name=".E2.80.9C.E5.91.BD.E5.90.8D.E6.A0.88.E2.80.9D.E8.A7.86.E5.9B.BE">“命名栈”视图</h3> - -<p><img align="right" alt="Figure 10. The Call Stack View"></p> - -<p>The - <i>Call Stack View</i> - is on the left portion of the window by default, at the bottom. When the debugger is stopped, the Call Stack View displays the list of active functions. The function at the top of the Call Stack View is the one in which the debugger stopped, the function below it is the caller, below that is the caller's caller, and so on. These items are referred to as stack frames.</p> - -<p>Double-clicking on a stack frame will change the "current" frame. This will cause the source of function to be displayed in the Source Code view, the Local Variables view will change to display variables local to the selected stack frame, and script evaluated in the Interactive Session view will be relative to the selected frame.</p> - -<p>If you would like to copy the current call stack to the clipboard, select "Dump Stack to Interactive Session" from the context menu, or type <code>/where</code> in the Interactive Session view. You may then copy the text from the Interactive Session view.</p> - -<p>If you would like to keep Venkman from stopping in a particular stack frame in the future, check "Don't Debug" from the stack frame's context menu.</p> - -<h3 id=".E2.80.9C.E6.BA.90.E4.BB.A3.E7.A0.81.E2.80.9D.E8.A7.86.E5.9B.BE" name=".E2.80.9C.E6.BA.90.E4.BB.A3.E7.A0.81.E2.80.9D.E8.A7.86.E5.9B.BE">“源代码”视图</h3> - -<p><img align="none" alt="Figure 11. The Source Code View. Source code, line numbers, and breakpoints."></p> - -<p>The Source Code View is a read-only file viewer. Files and specific functions within them can be displayed by selecting the appropriate file or function name in the Script View.</p> - -<p>When script execution is interrupted by the debugger, the line of the file where the interruption occurred is automatically displayed in the Source Code View. The line in question will be highlighted in yellow to make it easy to spot.</p> - -<p>Clicking in the left margin of this view will set a breakpoint at that line. If the breakpoint is successfully set, the margin will show the letter "B" on a red background, and both the Loaded Scripts View and Interactive Session View will provide feedback. The breakpoint can be cleared by clicking in the margin again (on the letter "B"). Breakpoints cannot be set on lines which do not contain executable code, such as blank and comment lines. For these lines, the Interactive Session View will display an error message explaining why the breakpoint could not be set.</p> - -<p>Breakpoints can also be set and cleared from the Interactive Session View, with the <code>break</code> and <code>fbreak</code> commands. The <code>break</code> command takes a file pattern and line number. Any loaded file which matches the file pattern, and contains an executable line at the requested line number will have a breakpoint set. If no loaded files match the file pattern or line number, an error message is printed to the console and the command fails. The <code>fbreak</code> command is identical, with the exception that if no files match the pattern or line, a "future breakpoint" is recorded. The next time a file is loaded that matches the pattern and line, a breakpoint will be set. In this way, <code>fbreak</code> allows one to set breakpoints in files that are not yet loaded, as well as set breakpoints that are triggered when a file is loaded.</p> - -<h3 id=".E2.80.9C.E4.BA.A4.E4.BA.92.E5.8C.BA.E5.9F.9F.E2.80.9D.E8.A7.86.E5.9B.BE" name=".E2.80.9C.E4.BA.A4.E4.BA.92.E5.8C.BA.E5.9F.9F.E2.80.9D.E8.A7.86.E5.9B.BE">“交互区域”视图</h3> - -<p><img align="none" alt="Figure 12. The Interactive Session View. Command line interface to the debugger"></p> - -<p>Another basic view in Venkman is the actual Interactive Session View, which allows you to interact with the debugger from a command line.</p> - -<p>Commands are entered in the text box, and responses are appended to the end of the output. Type <code>/commands</code> in the input area (the text box) to list all of the commands available. The <code>/help</code> command can be used to get additional information about a specific command. You can type <code>/help next</code>, for example, to see how to use the next command.</p> - -<p>The input area supports command history and tab-completion for command names. Command history remembers the last 20 commands entered. The up and down arrows can be used to revisit these previous commands. Tab completion allows the user to type the first portion of a command, and press tab twice to see possible completions. If only one command matches, it will be auto-completed on the first tab.</p> - -<h2 id="View_Customization" name="View_Customization">View Customization</h2> - -<p>Venkman offers nearly complete control over the arrangement and display of views within the application. The debugger is built on top of an application framework that allows you to drag and drop, resize, and toggle all the available views, and even to create new views or modules for the debugger if you choose—though this latter is an advanced topic and a subject for a future article.</p> - -<p>To remove a view from Venkman, simply click the Close button at the top right of that view. When the view again becomes necessary—for example, when you open a source file from the Loaded Scripts view and want to view the source—the view reappears where it was last positioned. To make a view reappear explicitly, select it from the <b>View->Show/Hide</b> menu of the debugger. You can also make views float in their own separate windows. To make a view float, click the float button in the upper left of that view.</p> - -<p>You can access any of the basic views from the <b>Show/Hide</b> submenu of the <b>View</b> menu. The list displayed there includes all of the basic views in Venkman. As you change which views are displayed and where in the UI they appear, your preferences are stored and persisted across sessions.</p> - -<h2 id=".E5.8A.A0.E8.BD.BD.E8.84.9A.E6.9C.AC" name=".E5.8A.A0.E8.BD.BD.E8.84.9A.E6.9C.AC">加载脚本</h2> - -<p>Whether or not you start Venkman first or the browser component, when the Mozilla suite starts up, the JavaScript engine begins to keep track of and compile all the scripts that are loaded in web pages and in the various Mozilla user interfaces themselves. The engine tells Venkman about the scripts it knows about, and those scripts are loaded into the "Loaded Scripts" view in the debugger.</p> - -<p>If you want to load new scripts in—say from a web page you are trying to troubleshoot—you can do so by simply opening that web page - <i>in the regular browser window</i> - , at which point the compiler gets the JavaScript source and populates the Loaded Scripts window with the new entry.</p> - -<p>Using <b>File->Open</b> from Venkman will open a local file in the debugger, and using <b>File->Open Web Location</b> will open and display the entire HTML contents of the requested page. Probably, neither of these is what you really want. Since the JavaScript engine automatically populates the Loaded Scripts list in the debugger with JavaScript it executes as the browser opens web pages, it's usually enough simply to - - <i>browse</i> - the sites whose scripts you are interested in debugging.</p> - -<h2 id=".E5.9F.BA.E7.A1.80.E8.B0.83.E8.AF.95" name=".E5.9F.BA.E7.A1.80.E8.B0.83.E8.AF.95">基础调试</h2> - -<p>This section provides a brief example of a debugging session in order to familiarize you with some of the basic commands and operations of the debugger.</p> - -<ol> - <li> - <p class="what">Start Venkman</p> - - <p class="why">Note: At one point, the debugger needed to be started - <i>before</i> - the scripts it was going to debug. This limitation is fixed, and now the JavaScript compiler makes all the scripts you access via the browser available to the debugger. See - - <i>{{ Anch("Loading Scripts into the Debugger") }}</i> - for more information about finding and loading scripts in Venkman.</p> - </li> - <li> - <p class="what">Launch a browser window and go to <a class="external" href="http://wp.netscape.com/fishcam/dhtmltank.html" rel="freelink">http://wp.netscape.com/fishcam/dhtmltank.html</a>.</p> - - <p class="why">Note that in Mozilla 1.x and Netscape 7.x, the debugger contains a Window menu like other major components in the application suite. From this menu, you can access the browser, mail, and other applications.</p> - </li> - <li> - <p class="what">Type <code>/break Animator-0.03 121</code> in the debugger.</p> - - <p class="why">The console command <code>/break</code> is used to set and list breakpoints. The first parameter is the file name that contains the JavaScript you want to break at. The second parameter is the line number. You don't need to specify the entire file name. In this example, we are setting a breakpoint in the <code>pause</code> function called when the browser starts the DHTML fishcam window.</p> - - <p class="why">Alternately, you can select <code class="filename">Animator-0.03.js</code> from the Loaded Scripts view, locate the <code>pause</code> function at line 119, and click in the left margin. Setting breakpoints in this manner is equivalent to using the <code>/break</code> command in the console. In either case, a red breakpoint icon appears in the Source Code view.</p> - </li> - <li> - <p class="what">Type <code>/break</code> in the debugger.</p> - - <p class="why">If you don't provide arguments to the <code>/break</code> command, all breakpoints are listed in the Interactive Session view.</p> - </li> - <li> - <p class="what">On the fishcam page, press the "pause" link.</p> - - <p class="why">You should hit the breakpoint you just set in Step 3.</p> - - <p class="why">In the interactive session, context becomes <code class="filename">Animator-0.03.js</code> and the scope is the <code>pause</code> function. There will also be "stopped for breakpoint" in red in the interactive session, along with the file name, line number, and snippet source code from where it stopped.</p> - - <div class="figure"> - <p><img alt="450px"><br> - <b>Figure 13.</b> (from Step 5) Stopped at a breakpoint.</p> - </div> - </li> - <li> - <p class="what">In the interactive session's input field, enter <code>this.fPaused</code></p> - - <p class="why">Venkman evaluates the expression, giving you {{ mediawiki.external('boolean') }} <code>false</code> back. Press Step Into to follow the steps until you have finished debugging the function, and the fishes have paused.</p> - - <p class="why">In addition to Step In, which will execute a single line of JavaScript and stop, Step Over can be used to step over a impending function call, and return control to the debugger when the call returns. Step Out executes until the current function call exits.</p> - </li> - <li> - <p class="what">Click the "pause" link again on the fishcam page to resume the demo.</p> - - <p class="why">This starts the DHTML down the other codepath in <code>start()</code> and makes the fishes start swimming again.</p> - </li> -</ol> - -<p>As you can see, this is a very modest introduction to the functionality of the JavaScript debugger and the complexity that scripts can have. But the steps described here can give you a basic feel for the debugger if you haven't already had some experience using it, and they provide the basis for the more interesting and practical examples in the articles that follow this one.</p> - -<p>The best way to get to know Venkman, of course, is to play around with it — to set it up in the way that makes the most sense to you, to try loading scripts and setting breakpoints, evaluating expressions in the Interactive Session View, watching the values of variables as they change when scripts are executed, getting profile data.</p> - -<h2 id=".E8.B5.84.E6.BA.90" name=".E8.B5.84.E6.BA.90">资源</h2> - -<ul> - <li><a href="cn/Using_Breakpoints_in_Venkman">Using Breakpoints in Venkman</a> — next article about Venkman.</li> - <li><a href="cn/Venkman">Venkman's home page on MDC</a>.</li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - -<ul> - <li>Authors: Ian Oeschger, Robert Ginda</li> -</ul> -</div> - -<hr> -<p>--<a>AndyYard</a> 00:50 2007年11月15日 (PST)</p> |