1-js/03-code-quality/01-debugging-chrome#35
Merged
Conversation
Contributor
|
校对认领 |
Member
| 在编写更复杂的代码前，让我们先来聊聊调试吧。 | ||
|
|
||
| All modern browsers and most other environments support "debugging" -- a special UI in developer tools that makes finding and fixing errors much easier. | ||
| 所有的现代浏览器和大多数其他环境都支持 “调试” —— 开发者工具中的一个特殊的 UI，可以让你更容易地发现和修复错误。 |
leviding
reviewed
Apr 23, 2018
| 1. The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. | ||
| 2. The **Source zone** shows the source code. | ||
| 3. The **Information and control zone** is for debugging, we'll explore it soon. | ||
| 1. **资源区域** 列出了 html、javascript、css 和包括图片在内的页面需要的其他文件。Chrome 扩展的资源也会出现在这。 |
| 2. The **Source zone** shows the source code. | ||
| 3. The **Information and control zone** is for debugging, we'll explore it soon. | ||
| 1. **资源区域** 列出了 html、javascript、css 和包括图片在内的页面需要的其他文件。Chrome 扩展的资源也会出现在这。 | ||
| 2. **源区域** 展示源码。 |
| 3. The **Information and control zone** is for debugging, we'll explore it soon. | ||
| 1. **资源区域** 列出了 html、javascript、css 和包括图片在内的页面需要的其他文件。Chrome 扩展的资源也会出现在这。 | ||
| 2. **源区域** 展示源码。 | ||
| 3. **信息和控制区域** 是用来调试的，我们很快就会来探讨它。 |
| ## Breakpoints（断点） | ||
|
|
||
| Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. | ||
| 我们来看看 [示例页面](debugging/index.html) 发生了什么。在 `hello.js` 中，点击第 `4` 行。是的，就点击数字 `"4"` 上，不是点击代码。 |
| - 快速跳转至代码中的断点（通过点击右侧面板中的对应的断点） | ||
| - 通过取消选中来临时禁用。 | ||
| - 通过右键单击和选择移除来删除一个断点。 | ||
| - 等等 |
|  | ||
|
|
||
| A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. | ||
| **断点** 是调试器会自动暂停 JavaScript 执行的地方。 |
| ```smart header="Conditional breakpoints" | ||
| *Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy. | ||
| ```smart header="条件断点" | ||
| 在行号上 *右键单击* 允许你创建一个 *条件* 断点。 只有当给定的条件为真（即满足条件）时才会被触发。 |
Member
There was a problem hiding this comment.
在行号上右键单击允许你创建一个条件断点。 只有当给定的条件为真（即满足条件）时才会被触发。
将右键单击和条件两处的多余空格去掉，并将斜体样式改为加粗。
| 请打开右侧的信息下拉列表（箭头指示出的地方）。这里允许你查看当前的代码状态： | ||
|
|
||
| 1. **`Watch` -- shows current values for any expressions.** | ||
| 1. **`Watch` -- 显示各种表达式的当前值.** |
leviding
approved these changes
Apr 24, 2018
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
resolve #17