【翻译】Chrome Developer Tools: 脚本面板
说明:本文对Chrome Developer Tools系列翻译文章的二篇
原文见https://developers.google.com/chrome-developer-tools/docs/scripts
Chrome Developer Tools: Scripts Panel
Chrome Developer Tools: 脚本面板
The Scripts panel lets you debug your JavaScript code.
脚本面板让你调试你的的JavaScript代码
The Scripts panel provides a graphical interface to the V8 debugger. Follow the steps below to explore the Scripts panel:
脚本面板提供可视化的V8调试器界面。跟随下面的步骤打开Script面板
- Open Google Closure hovercard demo page.
- 打开 Google Closure hovercard demo page
- Open the Developer Tools window as described in the How to Access the Developer Tools section of this tutorial.
- 按照 How to Access the Developer Tools 节的描述打开开发工具窗口
- If it is not already selected, select Scripts.
- 如果没有选择脚本面板,选择 Scripts
The Scripts panel lets you see all the scripts that are part of the inspected page. Standard controls to pause, resume, and step through code are provided below the panel selection icons. A button to force a pause at exceptions is located at the bottom of the window. Scripts are now (Canary) visible in separate tabs and by pressing the script navigator opens showing all the loaded scripts.
脚本面板让你看到这个查看页面包括的所有脚本。在面板选择图标下有暂停,恢复和跳过等标准控件。在窗口底部有一个异常时暂停的按纽。脚本现在在分开的tabs里可见,通过按,脚本导航器打开显示所有加载的脚本。
You can set one or more breakpoints in one or more scripts. Click the line gutter to set a breakpoint for that line of code, select another script and set another breakpoint.
你能在一个或多个脚本里设置一个或多个断点。点击代码行边的行沟设置断点,选择另一个脚本,设置另一个断点。
All the breakpoints you have set appear under Breakpoints in the right-hand sidebar. Clicking on the entry jumps to the highlighted line in the source file. Once you have a breakpoint set, right click on the blue tag breakpoint indicator to set a conditional statement for that breakpoint. Type an expression and the breakpoint will only pause from then on only if the condition is true. Delete a breakpoint by clicking the blue tag breakpoint indicator. The tag cycles through its three states of active, inactive, and removed.
Click the Pause button then move your mouse over the Google Closure hovercard demo page.
点击暂停按纽,移动你的鼠标到Google Closure hovercard demo page。
While a script is paused, you can see the current call stack and in-scope variables in the right-hand side bar.
There are several keyboard shortcuts available in the Scripts panel:
有几个在脚本面板里能用shortcuts
- Continue: F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms.
- Step over: F10 or Command-' (apostrophe) on Mac or Control-' (apostrophe) on other platforms.
- Step into: F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms.
- Step out: Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on other platforms.
- Next call frame: Control-. (period) on all platforms.
- Previous call frame: Control-, (comma) on all platforms.