【WebGoat通关思路】General / HTTP Developer Tools（WebGoat）

【WebGoat通关思路】General / HTTP Developer Tools（WebGoat）

Developer Tools / Lesson 1

谷歌浏览器开发者工具

为了完成某些任务，你有时可能需要查看JavaScript源代码或自己运行一个JavaScript命令。要做到这一点，谷歌浏览器有一套工具，可以让你做到这一点，还能做更多。虽然这些工具不是谷歌浏览器特有的，几乎每个现代浏览器都有一套自己的工具，但我们的介绍将侧重于谷歌浏览器中的工具。不过，你仍然可以使用你选择的浏览器，如Firefox或Safari，尽管本教程的一些步骤对你来说可能有所不同。

请记住，下面的教程并不是要传授关于这些工具的一切。本教程将只关注你完成某些作业所需的基本知识。另外，如果你已经熟悉这些工具，你可以安全地跳过这些课程。

要开始学习，请打开“开发者工具”。有多种方法来打开它们。

Developer Tools / Lesson 2

元素标签

元素标签允许你查看HTML和CSS代码，这些代码被用来定义和设计网站。

HTML source

CSS来源

在HTML source的下面，你可以找到关于CSS的信息，它被用来为网站设计样式。与HTML一样，你也可以编辑CSS，从而调整网站的风格。你可以编辑特定的值，或者关闭个别的样式。

Developer Tools / Lesson 3

“Control” 选项卡

在"Control"选项卡中，你可以看到任何加载的JavaScript文件可能打印出来的东西。如果你看到红色的东西，请不要担心。虽然这是一个错误，但它可能已经自行解决了。通过"Control"选项卡，你也可以运行你自己的JavaScript代码行。

首先，使用快捷键 CTRL+L 清除控制台。

注意：你可能会在"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 选项卡

Network 选项卡

Developer Tools / Lesson 6

试试吧! 使用 Network 选项卡

通关思路

复制返回结果中的数字粘贴到输入框中提交即可通关。

加入社群

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。