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”頁籤的新請求，點選新請求檢視請求詳細内容如下圖所示。
- 複制傳回結果中的數字粘貼到輸入框中送出即可通關。