Update 1-js/03-code-quality/01-debugging-chrome #539
Merged
Conversation
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
MartinsYong
changed the title
lycheeEng
reviewed
Nov 29, 2019
| 1. **资源区域**列出了 html、javascript、css 和包括图片在内的页面需要的其他文件。Chrome 扩展的资源也会出现在这。 | ||
| 2. **源区域**展示源码。 | ||
| 3. **信息和控制区域**是用来调试的，我们很快就会来探讨它。 | ||
| 1. **资源区域（resources zone）** 列出了 html、javascript、css 和包括图片在内的页面需要的其他文件。Chrome 扩展的资源也会出现在这。 |
There was a problem hiding this comment.
这里的 html javascript 和 css 是否要大写？
|
|
||
| <span class="devtools" style="background-position:-137px -76px"></span> —— 下一步（运行下一个命令），但是**不会进入函数**，快捷键 `key:F10`。 | ||
| : 如果我们现在点击它，`alert` 会被显示出来。注意这里 `alert` 可以是任何函数，执行器会 “跨过（step over）”，跳过函数的内部。 | ||
| <span class="devtools" style="background-position:-4px -194px"></span> —— 步入（step into），快捷键 `key:F11`。 |
There was a problem hiding this comment.
步入（step into） 这里需要一个双引号且 s 大写
leviding
requested changes
Dec 1, 2019
| @@ -2,13 +2,13 @@ | |||
|
|
|||
| 在编写更复杂的代码前，让我们先来聊聊调试吧。 | |||
|
|
|||
| 所有的现代浏览器和大多数其他环境都支持“调试” —— 开发者工具中的一个特殊的 UI，可以让你更容易地发现和修复错误。 | |||
| [调试](https://en.wikipedia.org/wiki/Debugging) 是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码并查看当前实际运行情况。 | |||
There was a problem hiding this comment.
Suggested change
| [调试](https://en.wikipedia.org/wiki/Debugging) 是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码并查看当前实际运行情况。 | |
| [调试](https://en.wikipedia.org/wiki/Debugging) 是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 — 开发者工具中的一个令调试更加容易的特殊用户界面。它也允许我们一步一步地跟踪代码，以查看当前实际运行情况。 |
There was a problem hiding this comment.
嗯嗯，这里是破折号，我个人习惯用半个，这不是个好习惯，可以忽略哈哈
|
|
||
| 在这里我们将会使用 Chrome（谷歌浏览器），因为在这方面它可能是功能最丰富的。 | ||
| 在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有最丰富的功能，而其他大部分浏览器则具有类似的过程。 |
There was a problem hiding this comment.
Suggested change
| 在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有最丰富的功能，而其他大部分浏览器则具有类似的过程。 | |
| 在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有足够的功能，其他大多数浏览器的功能也与之类似。 |
There was a problem hiding this comment.
We'll be using Chrome here, because it has enough features, most other browsers have a similar process`.
|
|
||
| 你的 Chrome 版本可能看起来有一点不同，但是应该还是很明显就能发现的。 | ||
| 你的 Chrome 版本可能看起来有一点不同，但是它应该还是处于很明显的位置。 | ||
|
|
||
| - 在 Chrome 中打开[示例页面](debugging/index.html)。 |
There was a problem hiding this comment.
Suggested change
| - 在 Chrome 中打开[示例页面](debugging/index.html)。 | |
| - 在 Chrome 中打开 [示例页面](debugging/index.html)。 |
|
|
||
| 你的 Chrome 版本可能看起来有一点不同，但是应该还是很明显就能发现的。 | ||
| 你的 Chrome 版本可能看起来有一点不同，但是它应该还是处于很明显的位置。 | ||
|
|
||
| - 在 Chrome 中打开[示例页面](debugging/index.html)。 | ||
| - 使用快捷键 `key:F12` (Mac: `key:Cmd+Opt+I`) 打开开发者工具。 |
There was a problem hiding this comment.
Suggested change
| - 使用快捷键 `key:F12` (Mac: `key:Cmd+Opt+I`) 打开开发者工具。 | |
| - 使用快捷键 `key:F12`（Mac：`key:Cmd+Opt+I`）打开开发者工具。 |
|
|
||
| 让我们在预览树中点击和选择 `index.html` 和 `hello.js`。应该会出现这个视图： | ||
| 让我们在预览树中点击和选择 `hello.js`。它应该会出现这个视图： |
There was a problem hiding this comment.
Suggested change
| 让我们在预览树中点击和选择 `hello.js`。它应该会出现这个视图： | |
| 让我们在预览树中点击并选择 `hello.js`。这里应该会如下图所示： |
| 2. `debugger` 声明。 | ||
| 3. 一个错误（如果开发者工具是打开状态并且按钮 <span class="devtools" style="background-position:-264px -4px"></span> 是开启状态）。 | ||
| 2. `debugger` 语句。 | ||
| 3. 一个错误（如果开发者工具是打开状态并且按钮 <span class="devtools" style="background-position:-90px -146px"></span> 是开启状态）。 |
There was a problem hiding this comment.
Suggested change
| 3. 一个错误（如果开发者工具是打开状态并且按钮 <span class="devtools" style="background-position:-90px -146px"></span> 是开启状态）。 | |
| 3. 一个错误（如果开发者工具是打开状态，并且按钮 <span class="devtools" style="background-position:-90px -146px"></span> 是开启的状态）。 |
|
|
||
| 然后我们就能检查变量，并逐步查看执行器在哪里走错路了。 | ||
| 当暂停时，我们就能进行调试 —— 检查变量，并逐步查看执行器在哪里出错了。 |
There was a problem hiding this comment.
Suggested change
| 当暂停时，我们就能进行调试 —— 检查变量，并逐步查看执行器在哪里出错了。 | |
| 当脚本执行暂停时，我们就可以进行调试 —— 检查变量，跟踪代码来查看执行出错的位置。 |
|
|
||
| 开发者工具中还有比这篇文章中更多的选项。完整的手册在 <https://developers.google.com/web/tools/chrome-devtools> | ||
| 开发者工具中还有比这篇文章中更多的选项。完整的手册在 <https://developers.google.com/web/tools/chrome-devtools> 。 |
There was a problem hiding this comment.
Suggested change
| 开发者工具中还有比这篇文章中更多的选项。完整的手册在 <https://developers.google.com/web/tools/chrome-devtools> 。 | |
| 开发人员工具中的选项比本文介绍的多得多。完整的手册请点击这个链接查看：<https://developers.google.com/web/tools/chrome-devtools>。 |
|
|
||
| 开发者工具中还有比这篇文章中更多的选项。完整的手册在 <https://developers.google.com/web/tools/chrome-devtools> | ||
| 开发者工具中还有比这篇文章中更多的选项。完整的手册在 <https://developers.google.com/web/tools/chrome-devtools> 。 | ||
|
|
||
| 本章节中的信息足够开始调试了，但是以后，尤其是你做了大量关于浏览器的东西后，请你去（上面的链接里）查看开发者工具的更高级功能。 |
There was a problem hiding this comment.
Suggested change
| 本章节中的信息足够开始调试了，但是以后，尤其是你做了大量关于浏览器的东西后，请你去（上面的链接里）查看开发者工具的更高级功能。 | |
| 本章节的内容足够让你上手代码调试了，但是之后，尤其是你做了大量关于浏览器的东西后，推荐你查看上面那个链接中讲的开发者工具更高级的功能。 |
|
|
||
| 本章节中的信息足够开始调试了，但是以后，尤其是你做了大量关于浏览器的东西后，请你去（上面的链接里）查看开发者工具的更高级功能。 | ||
|
|
||
| 对了，你也可以点击开发者工具中的其他地方来看一下会显示什么。这可能是你学习开发者工具的最快的路线了。不要忘了还有右键单击哟。 | ||
| 对了，你也可以点击开发者工具中的其他地方来看一下会显示什么。这可能是你学习开发者工具的最快的路线了。不要忘了还有右键单击和关联菜单哟。 |
There was a problem hiding this comment.
Suggested change
| 对了，你也可以点击开发者工具中的其他地方来看一下会显示什么。这可能是你学习开发者工具的最快的路线了。不要忘了还有右键单击和关联菜单哟。 | |
| 对了，你也可以点击开发者工具中的其他地方来看一下会显示什么。这可能是你学习开发者工具最快的方式了。不要忘了还有单击右键和关联菜单哟。 |
|
Please make the requested changes. After it, add a comment "/done". |
|
/done |
leviding
approved these changes
Dec 3, 2019
|
Thanks you all. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
目标章节：1-js/03-code-quality/01-debugging-chrome
当前上游最新 commit：f073dbd
所做更改如下：