Developer Tools / Lesson 1
谷歌浏览器开发者工具
为了完成某些任务，你有时可能需要查看JavaScript源代码或自己运行一个JavaScript命令。要做到这一点，谷歌浏览器有一套工具，可以让你做到这一点，还能做更多。虽然这些工具不是谷歌浏览器特有的，几乎每个现代浏览器都有一套自己的工具，但我们的介绍将侧重于谷歌浏览器中的工具。不过，你仍然可以使用你选择的浏览器，如Firefox或Safari，尽管本教程的一些步骤对你来说可能有所不同。
请记住，下面的教程并不是要传授关于这些工具的一切。本教程将只关注你完成某些作业所需的基本知识。另外，如果你已经熟悉这些工具，你可以安全地跳过这些课程。
要开始学习，请打开“开发者工具”。有多种方法来打开它们。
- 在浏览器窗口的任何地方点击右键，选择 "检查"选项。
- 进入浏览器菜单（右上角的三个点），然后进入 "更多工具"，选择 "开发者工具"选项。
- 使用键盘快捷键 Ctrl + Shift + I
Developer Tools / Lesson 2
元素标签
元素标签允许你查看HTML和CSS代码，这些代码被用来定义和设计网站。
HTML source
如果你将鼠标悬停在某一行，你可以看到网站的一部分变成了蓝色。这意味着这个特定的HTML行定义了网站的这一部分。元素标签允许你对每一个HTML元素进行修改。例如，如果你点击一个段落（<p>...</p>）标签，你可以编辑网站的内容。如果你做了修改，然后点击回车，Chrome就会实际更新网站，显示你的编辑内容。你还可以改变所使用的HTML标签，标签的类别和ID等等。
CSS来源
在HTML source的下面，你可以找到关于CSS的信息，它被用来为网站设计样式。与HTML一样，你也可以编辑CSS，从而调整网站的风格。你可以编辑特定的值，或者关闭个别的样式。
Developer Tools / Lesson 3
“Control” 选项卡
在"Control"选项卡中，你可以看到任何加载的JavaScript文件可能打印出来的东西。如果你看到红色的东西，请不要担心。虽然这是一个错误，但它可能已经自行解决了。通过"Control"选项卡，你也可以运行你自己的JavaScript代码行。
首先，使用快捷键 CTRL+L 清除控制台。
要运行你自己的JavaScript，只需在"Control"内点击并输入类似的内容：console.log("Hello WebGoat!"); 点击回车。Hello WebGoat现在应该出现在你的控制台。"Control"还允许你做一些基本的算术。例如，如果你输入1+3并点击回车，"Control"应该显示4。
注意：你可能会在"Control"中看到一个未定义。你可以安全地忽略这句话，它只意味着，你所调用的JavaScript函数没有返回任何东西，因此没有定义。
Developer Tools / Lesson 4
试试吧! 使用 Control 选项卡
让我们来试试。使用开发工具中的 Control，调用javascript函数webgoat.customjs.phoneHome()。 你应该在Control中得到一个响应。你的结果应该是这样的： phone home said {"lessonCompleted:true, … ,"output":"phone home response is…" 粘贴随机数字在下面的输入框中。(确保你得到的是最新的数字，因为它是在你每次调用该函数时随机产生的。）
通关思路
- 使用键盘快捷键 Ctrl + Shift + I 打开开发者工具，然后选择“Control”选项卡。
- 在Control输入 webgoat.customjs.phoneHome() 然后回车获得返回数据如下图所示。
- 复制返回结果中的数字粘贴到输入框中提交即可通关。
Developer Tools / Lesson 5
Sources 选项卡
在"Sources"选项卡中，你可以检查文件系统并查看所有用于创建网站的HTML、CSS和JavaScript文件。只需点击一个文件即可查看其内容。
Network 选项卡
在"Network"选项卡中，你可以查看网站所执行的HTTP请求和响应。如果你想了解某个特定请求的更多详细信息，只需点击它。在上面的时间轴中，蓝点代表这些请求和响应的执行时间。你也可以通过在时间轴上点击和拖动来查看在特定时间范围内完成的请求。现在，下面的窗口将只显示在该特定时间范围内完成的请求和回应。
Developer Tools / Lesson 6
试试吧! 使用 Network 选项卡
在这项任务中，你需要找到一个特定的HTTP请求，并从中读取一个随机的数字。首先点击第一个按钮，这将产生一个HTTP请求。尝试找到特定的HTTP请求。该请求应该包含一个字段：networkNum。将随后显示的数字复制到下面的输入框中，然后点击检查按钮。
通关思路
- 使用键盘快捷键 Ctrl + Shift + I 打开开发者工具，然后选择“Network”选项卡。
- 点击第一个按钮“Go!”来将产生一个HTTP请求，观察“Network”选项卡的新请求，点击新请求查看请求详细内容如下图所示。
- 复制返回结果中的数字粘贴到输入框中提交即可通关。
加入社群
